-
十三、前端开发知识快速入门
目录
- 一、HTML概述和基本结构
- 二、HTML常用标签
- 三、页面布局
- 四、CSS样式
- 五、HTML5与CSS3
- 六、移动端页面开发
- 七、JavaScript
- 八、JQuery
- 九、本地化存储
- 十、JQueryUI
- 十一、移动端库和框架
- 十二、正则表达式
一、HTML概述和基本结构
1.1 概述
HTML是 HyperText Mark-up Language 的首字母简写，意思是超文本标记语言，超文本指的是超链接，标记指的是标签，是一种用来制作网页的语言，这种语言由一个个的标签组成，用这种语言制作的文件保存的是一个文本文件，文件的扩展名为html或者htm，一个html文件就是一个网页，html文件用编辑器打开显示的是文本，可以用文本的方式编辑它，如果用浏览器打开，浏览器会按照标签描述内容将文件渲染成网页，显示的网页可以从一个网页链接跳转到另外一个网页。
1.2 基本结构
一个html的基本结构如下：
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>网页标题title> head> <body> 网页显示内容 body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
第一行是文档声明，第二行“”标签和最后一行“”定义html文档的整体，“”标签中的‘lang=“en”’定义网页的语言为英文，定义成中文是’lang=“zh-CN”',不定义也没什么影响，它一般作为分析统计用。 “”标签和“”标签是它的第一层子元素，“”标签里面负责对网页进行一些设置以及定义标题，设置包括定义网页的编码格式，外链css样式文件和javascript文件等，设置的内容不会显示在网页上，标题的内容会显示在标题栏，“”内编写网页上显示的内容。
1.3 html文档类型
目前常用的两种文档类型是xhtml 1.0和html5, 两种文档的区别:
- 文档声明和编码声明
- html5新增了标签元素以及元素属性
(1) xhtml 1.0
xhtml 1.0 是html5之前的一个常用的版本，目前许多网站仍然使用此版本。
此版本文档用sublime text创建方法： html:xt + tab
文档示例：
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title> xhtml 1.0 文档类型 title> head> <body> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
(2) html5
pc端可以使用xhtml 1.0，也可以使用html5，html5是向下兼容的
此版本文档用sublime text创建方法： html:5 + tab 或者 ! + tab
文档示例：DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> html5文档类型 title> head> <body> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
1.4 html注释
html文档代码中可以插入注释，注释是对代码的说明和解释，注释的内容不会显示在页面上，html代码中插入注释的方法是：
<!-- 这是一段注释 -->- 1
二、HTML常用标签
2.1 块标签
块级元素（block-level elements）是指在页面上显示为块状（独占一行）的 HTML 元素。这些块级元素一般用于组织和结构化页面的内容。以下是一些常见的 HTML 块级标签示例：
- ：定义一个 HTML 文档中的分区或节，并且通常用于容纳其他 HTML 元素或组织页面的布局。
：定义一个段落，用于显示一段文本。-：定义标题，表示最高级别的标题，表示最低级别的标题。- 标签表示。
和一起使用