这是我参与『第四届青训营』笔记创作活动的第1天
1、初识HTML
HTML： Hyper Text Markup Language ----- 超文本标记语言
HTML 不是一种编程语言，而是一种标记语言
① 基本骨架
<!-- 文档类型 -->
<!DOCTYPE html>
<!-- 根标签 -->
<html lang="en">
<!-- 标头部标签 -->
<head>
<!-- 字符集 -->
<meta charset="UTF-8" />
<!-- 标题标签 -->
<title></title>
</head>
<!-- 文档主体内容 -->
<body>
</body>
</html>
② 文档类型
- 指明了文件使用的HTML的版本， 决定了浏览器使用哪一种渲染模式，如果不写DOCTYPE，浏览器会以一种老旧的怪异模式去渲染页面，页面的浏览效果就不太符合预期。
③ 页面语言lang
- lang 指定该HTML标签内容所用的语言
- en --- English zh-CN ----- Chinese
④ HTML 语法
- 标签和属性不区分大小写，推荐小写
- 空标签可以不闭合，比如 input、meta
- 属性值推荐用双引号包裹
- 某些属性值可以省略，比如 required、readonly
2、HTML语义化标签
① 语义化是什么
- HTML中的元素、属性及属性值都拥有某些含义
- 开发者应该遵循语义来编写HTML
- 有序列表用ol；无序列表用ul
- lang 属性表示内容所使用的语言
- ......
② 如何理解HTML语义化 (语义化的好处)
- 让人更容易读懂 (增加代码可读性)
- 让搜索引擎更容易读懂 (SEO)
- 让开发者更易维护代码
- 提升无障碍性
③ 谁在使用我们写的HTML
- 开发者---修改、维护页面
- 浏览器---展示页面
- 搜索引擎---提取关键词、排序
- 屏幕阅读器---给盲人读页面内容
④ 如何做到语义化
- 了解每个标签和属性的含义
- 思考什么标签最适合描述这个内容
- 不使用可视化工具生成代码
3、块状元素 & 内联元素
① 常见的块级元素(display: block / table)
- div --- 常见的块级盒子
- h1 - h6 --- 标题
- table --- 表格
- ul / ol --- 无序列表 / 有序列表
- p --- 段落
- form --- 交互表单
- pre --- 格式化文本
- blockquote --- 块引用
- address --- 地址
② 常见的内联元素(display: inline / inline-block)
- a --- 锚点
- span --- 常用内联容器，定义文本内区块
- input --- 输入框
- img --- 图片
- button --- 按钮
- b --- 加粗
- em --- 强调
- i --- 斜体
- label --- 表格标签
- textarea --- 多行文本输入框
4、HTML 5 新特性
1.语义化标签 (见下文)
2.视频和音频 (见下文)
3.form表单增强
4.Canvas绘图
5.SVG绘图
6.地理位置定位（Geolocation API ）
7.拖放API
8.Web Worker
9.Web Storage
10.Web Socket
① 语义标签
header定义文章的头部，通常是一些引导和导航信息，包含h1~h6、搜索框、logo等。
footer定义section或document的页脚，一般配合address标签(显示地址)，包含作者信息、相关链接等。
article标签包含文章，一般内嵌header、footer、h1、p标签。
aside用来转载非正文内容，对于主题内容的说明，例如广告、侧边栏。
section定义文档中的节，例如小说中的一章。
nav定义显示导航链接
② 视频和音频
视频播放：
<video src=""></video>
- 查看视频的所有属性、方法、事件：
console.log(videoBirds)音频播放：
<audio src=""></audio>
- 查看音频的所有属性、方法、事件：
console.log(bgMusic)
最后
HTML 是前端工程师的必经之路，学习 HTML是作为一名前端开发者的本分，学好 HTML 是作为一名前端开发者的职责，寒霜傲剑，梅花自香，加油！
