元素
- 块级元素在页面中以块的形式展现。一个块级元素出现在它前面的内容之后的新行上。任何跟在块级元素后面的内容也会出现在新的行上。块级元素通常是页面上的结构元素。例如，一个块级元素可能代表标题、段落、列表、导航菜单或页脚。一个块级元素不会嵌套在一个内联元素里面，但它可能嵌套在另一个块级元素里面。
- 内联元素通常出现在块级元素中并环绕文档内容的一小部分，而不是一整个段落或者一组内容。内联元素不会导致文本换行。它通常与文本一起使用，例如， 元素创建一个超链接， 和 等元素创建强调。
简单来说块级元素就是规定元素的功能、布局，而内联元素则是去修饰
- 空元素
- 例如图片
属性
可以理解为用来描述元素。
属性必须包含：
- 一个空格，它在属性和元素名称之间。如果一个元素具有多个属性，则每个属性之间必须由空格分隔。
- 属性名称，后面跟着一个等于号。
- 一个属性值，由一对引号（“”）引起来。
例如 class = “”
- 布尔属性
一般用来做限制用户输入
<input type="text" disabled="disabled" /> <input type="text" disabled />
使用属性时要注意使用引号，否则会造成缩写的误解
但要注意 单双引号不能混用，但是如果要将引号当做文本显示，则需要使用转义字符。
头
标题
总结：title里是用来描述整个页面，h1只是页面的内容之一
元数据
meta元素：常用的就是用来添加字符集的编码
<meta charset="utf-8" />
添加图标：
<link rel="icon" href="favicon.ico" type="image/x-icon" />
引入js和css
<link rel="stylesheet" href="my-css-file.css" /> <script src="my-js-file.js" defer></script>
设置语言
<html lang="zh-CN"> … </html>
列表
无序列表
<ul> <li>豆浆</li> <li>油条</li> <li>豆汁</li> <li>焦圈</li> </ul>
有序列表
<ol> <li>沿这条路走到头</li> <li>右转</li> <li>直行穿过第一个十字路口</li> <li>在第三个十字路口处左转</li> <li>继续走 300 米，学校就在你的右手边</li> </ol>
斜体
空元素描述
段落 加粗
- 被用来传达传统上用斜体表达的意义：外国文字，分类名称，技术术语，一种思想……
- 被用来传达传统上用粗体表达的意义：关键字，产品名称，引导句……
- 被用来传达传统上用下划线表达的意义：专有名词，拼写错误……
图片
相对路径 ：
绝对路径 ：
备选文本：
矢量图
不受像素的影响 可以自由放大
<img src="equilateral.svg" alt="triangle with all three sides equal" height="87px" width="100px" />
引入svg代码
<svg width="300" height="200"> <rect width="100%" height="100%" fill="green" /> </svg>
响应式图片
即图片可以自适应大小
<img srcset="elva-fairy-480w.jpg 480w, elva-fairy-800w.jpg 800w" sizes="(max-width: 600px) 480px, 800px" src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy" />
srcset 定义了浏览器可选择的图片设置以及每个图片的大小，每张图片信息的设置和前一个用逗号隔开，每个设置要写：
- 一个文件名（elva-fairy-480w.jpg）
- 一个空格
- 图片的固有宽度（以像素为单位）（480w）。注意，这里使用宽度描述符 w，而非你可能期望的 px。图片的固有宽度是它的真实大小，可以通过检查你电脑上的图片文件找到
sizes 定义了一组媒体条件（例如屏幕宽度）并且指明当某些媒体条件为真时，什么样的图片尺寸是最佳选择——这就是我们之前提到的提示。上面的示例中，在每个逗号之前，我们写：
- 一个媒体条件（(max-width:600px)
- 一个空格
- 当媒体条件为真时，图像将填充的槽的宽度（480px）
视频
<video src="rabbit320.webm" controls> <p>你的浏览器不支持 HTML5 视频。可点击<a href="rabbit320.mp4">此链接</a>观看</p> </video>
autoplay ：自动播放
loop：循环播放
muted ： 静音
poster ： 预览
preload : 缓冲
- “none” ：不缓冲
- “auto” ：页面加载后缓存媒体文件
- “metadata” ：仅缓冲文件的元数据
音频与视频几乎一致
表格
每一个表格的内容都包含在这两个标签里：
，这也是表格的基础 :列 ：行 ：标题 属性：colspan 宽度 rowspan高度 可以设置多列样式，但是要注意多列之间要用来精确设置每一列，或者可以使用 span属性来指定列 增加表格的标题
