这是我参与「第五届青训营 」笔记创作活动的第15天，关于前端与html的知识点总结，包括：什么是HTML？、HTML语法和语义化是什么等知识点。
———Zy_Thomas
什么是HTML
超文本标记语言 HyperText Markup Language
- HyperText（包含图片，标题，链接，表格等）
- Markup Language（标记语言，开始和结束标签组成）
标签
<img src="abc.jpg"></img> 标签中可添加属性
属性
属性由属性名和属性值组成 <img src="abc.jpg"></img>
- 属性名，例：src
- 属性值，例：abc.jpg
- 双标签可在开始标签末尾添加“/”变为单标签
HTML版本
在html文件开头声明，例：,浏览器根据此标签来决定此文件是什么html版本，用那种渲染模式来渲染，若未写此标签，浏览器会以怪异模式来渲染，造成显示效果可能与预期有差异。
html文档结构
根标签
<html></html>
head标签
位置在根标签内，页面需要的但是又不需要直接显示给用户的，页面标题等
body标签
位置在head标签下面，body的内容是需要显示给用户的
HTML语法
- 标签和属性不区分大小写，推荐小写
- 空标签可以不闭合
- 属性值推荐双引号包裹
- 某些属性值可以省略，比如required、readonly
标签种类
标题标签
有h1-h6，6种大小
列表标签
- 无序列表
<ol><li></li></ol> - 有序列表
<ul><li><li></ul> - 自定义列表
<dl><dt></dt><dd></dd></dl>
链接标签
<a href="链接地址">文字内容</a>
视音频标签
- 视频
<video src="" controls></video> - 音频
<audio src="" controls></audio> - controls表示浏览器是否显示播放控件
引用标签
- 长引用blockquote标签，可添加属性cite，值为引用文章段落的地址
- 短引用cite标签，表示引用的文章、书籍名称等
- 具体引用q标签
代码标签
- 单行代码
<code></code> - 多行代码
<pre><code><code></pre>
页面结构
语义化是什么
- HTML中的元素、属性及属性值都拥有某些含义
- 开发者应该遵循语义来编写HTML
- 有序列表用ol，无序列表用ul
- lang属性表示内容所使用的语言
如何做到语义化
-
了解每个标签和属性的含义
-
思考什么标签最适合描述这个内容
-
不使用可视化工具生成代码
