这是我参与「第四届青训营 」笔记创作活动的的第1天
在第一天HTML课程当中，感受最深的一点就是“HTML传达内容，而不是样式”。在最新一代的HTML5也更加地注重语义化，在此对几个大版本的HTML和语义化标签进行一番整理。
⛳️ HTML、XHTML、HTML5的一些区别
1. 定义
- HTML全称是超文本标记语言Hyper Text Markup Language；HTML指的是HTML4.01；
- XHTML全称是可扩展超文本标记语言，与HTML4.01几乎相同，但更严格纯洁；
- HTML5是目前最新一代的HTML，已成为了一门编程语言。
2. 语义化
- HTML:没有体现结构语义化的标签，通常这样命名
<div id="header"></div> - HTML5:在语义上有很大的优势。提供了一些新的标签，比如
<header><article><footer>等等语义化标签，可以更好地支持搜索引擎的读取便于seo的蜘蛛的爬行
3. 文档类型声明方式
- HTML:
<!DOCTYPE html xxxxxxxxxxxxxxxxx>一大串很是麻烦 看着眼疼 - HTML5:
<!DOCTYPE html>舒服~~ ~~
4. HTML5的一些新特性
- 新元素，如
<footer><header><figure><figcaption>等语义标签 - 用于绘画的 canvas 元素
- 支持CSS3，可实现2D/3D制图
- Viedo 和 Audio
- Web存储localStorage 和 sessionStorage，支持本地存储。HTML5之间使用的是cookie
⛳️ 语义化标签 ——传达内容，而不是样式
1. 定义
- 语义化是指HTML中的元素、属性、属性值都拥有某些含义，标签也拥有某些含义。
- 而div和span则是无语义标签，一般用来实现页面布局。前者是块级元素，后者是行级元素。
2. 优点
- 页面代码可读性高，可维护性强，有利于开发者团队进行迭代开发、后期维护
- 在页面没有CSS修饰的情况下，依旧能呈现较好的结构
- 不同语义在搜索引擎中具有不同的权重，方便进行搜索引擎优化SEO，提高网站排名
- 方便屏幕阅读器、盲人阅读器、移动设备等设备解析，提升无障碍性
HTML页面使用者：
开发者-修改维护页面
浏览器-展示页面
搜索引擎-提取关键词和排序
屏幕阅读器-给盲人读页面内容
3. 常见的语义化
- 页面结构语义化：
<title>\<header>\<nav>\<main>\<artitle>\<aside>\<footer> - 标题语义化：
h1~h6 - 图片语义化：用
figure来包裹img元素，figcaption做图注。 若img图片只做装饰，应该用背景图片 - 表格语义化：
table外层，caption标题，thead表头，tbody表身，tfoot表脚
tr行，th表头单元格，td表行单元格。
每个thead、tbody、tfoot都有tr；thead的每项是th，tbody、tfoot的每项是td - 表单语义化：
fieldset与legend标签、label标签，增加表单的语义 - 换行符
br：W3C标准规定，br标签仅用于段落中的换行，即只适合用于p标签内部的换行，不能用于其他标签 - 列表语义化：对于列表型数据，使用
ul或ol，开发中多用ul strong标签和em标签：strong和em在页面中起到强调的语义，在搜索引擎中占有一定的权重。若仅仅是为了简单的加粗或斜体效果，不建议使用strong或em标签，而是采用span标签+css样式来身上实现加粗和斜体。
