2021-3-22 前端达人
HTML概念和元素（标签）
什么是HTML
HTML(Hyper Text Markup Language),中文译名为超文本标记语言，它包括一系列标签，通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。简单来说，就是我们用它所包含的一系列标签来定义网页的布局结构。
什么是HTML标签（元素）
HTML 文档是由 HTML 元素定义的，元素由三部分组成：开始标签、元素内容、结束标签。
HTML 元素以开始标签起始，以结束标签终止，元素的内容是开始标签与结束标签之间的内容。在VSCode中，使用标签只需要输入需要使用的标签名，再按Tab键，编辑器会自动补齐开始标签和结束标签的样式。
温馨提示：
1.标签的括号我们用的是尖括号，这也是HTML代码和CSS（层叠样式表）代码的区别。
2.HTML 标签对大小写不敏感，也就是说不管我们用大写还是小写浏览器都能成功识别，但是为了统一标准，最好还是写小写。
元素的层次结构
大多数 HTML 元素可以包含其他 HTML 元素，形成嵌套结构
如图，div元素内部包含一个p元素，形成嵌套。在嵌套结构中，p的上一级元素是div，我们称div是p的父元素，p是div的子元素，他们之间是父子级关系。
若是如图这样body、div、p三个元素嵌套，p的上一级元素是div，div的上一级元素是body，那么div是body的子元素，body是div的父元素，body和div是父子关系。而p和body中间隔了一个div，那么p就是body的后代元素，body是p的祖先元素，他们是祖先和后代的关系。
若是两个元素拥有一个共同的父元素，也就是两个元素的上一级元素是同一个，那么这两个元素互为兄弟元素。
需要注意的是，两个元素之间不能相互嵌套
p的起始标签在div内部，结束标签却在div外部，这样的嵌套结构是错误的，浏览器在解析的时候会自动在p的起始标签后补上结束标签，在结束标签前面补上起始标签。
当我们打开浏览器检查器之后就会发现div和p的层次结构已经发生了改变。
元素的属性
属性是元素的附加信息，比如超链链接的地址就是元素的附加信息，属性一般写在元素的起始标签里。
这是一个a标签，起始标签的href="http://www.baidu.com"就是a标签的属性，点击‘百度’后自动跳转属性里的网址。属性由属性名和属性值两部分组成，‘href’是属性的属性名，后面的网址是属性值，属性值要用引号括起来。
空元素（自闭合元素）
空元素没有元素内容和结束标签，只有起始标签。空元素内可以加上属性，例如插入图片的img标签
img标签没有元素内容和结束标签，起始标签内有属性，属性值是图片地址。
一般情况下，图片用空标签，音频视频不适用空标签
HTML注释
注释是对代码功能的描述，一般是写给开发者和维护者看的，浏览器并不会解析注释里的内容。因为在代码编写的过程中，代码繁多杂乱，写上注释能帮助我们快速理解当前代码的功能，给维护提供方便。
VSCode注释的写法：在尖括号内写上 !–和--，中间写上注释的内容，或者选中想要注释的行，按下快捷键CTRL+？。
语义化标签和div
div是无语义标签，就是没有含义的标签。而所谓语义化标签，就是有含义的标签，一看就知道其内部含义。我们平时使用语义化标签和div来划分区域，他们在功能上是没有任何区别的，只是语义化标签能帮助开发者和维护者清晰地理解划分的每个区域都是用来干嘛的。在HTML5之前都是用div来划分区域，就会导致整篇代码全是div，看得人眼花缭乱不易于阅读，语义化标签的出现就能解决这个问题。
在HTML5中新增了几个语义化标签：
header：用于表示页面的头部
nav：表示导航栏
article：表示文章或其他可独立存在的页面
section：表示一个整体的一部分主题
aside：表示跟周围主题相关的附加信息
footer：表示页面或某个区域的注脚
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务