h1~h6标题 p 段落
- h1：代表页面最大的标题
- h2：代表二级标题
- h3：更弱的标题
- p：段落，表示一大段文字
a 连接，连接到一个地址
<a href = "http://jirengu.com" target = "_blank" title = "筱琦">筱琦.com</a>
<a href = "#">筱琦.com</a>
<a href = "#about">筱琦.com</a>
<a href = "/getCourse">筱琦.com</a>
href后是跳转地址，必备属性。
title属性：鼠标悬浮到标签上的时候看到的内容，不需要点击标签，便可以知道。
#代表的是某点，点击不会跳转也不会刷新。
#about：点击会跳转id=about的链接上。
/相对于跟路径。
img标签用于展示一张图片，自闭合标签，不需要添加内容。
<img src = "http://js.jirengu.com/images/dave.min.svg" alt = "">
alt作用：
1.当图片无法显示的时候，alt会给出一段说明文字，默认不展示，
2. 对于视力有问题的人，用机器的时候，会告诉他们这个地方是一张图片
3. 便于搜索引擎搜索。
div标签，语义是“一大块”，用于给页面划分区块，让结构更清晰。
<div id = "header">......</div>
<div id = "content">......</div>
<div id = "footer">......</div>
id给页面的元素取一个唯一的名字，class代表一类的东西，不同的元素可以添加同一个class。
ul li：定义一个无序列表
- ul：unsort list无序列表
- 用于表示并列的内容
- ul的直接子元素一定是li，不可以在里面添加P等其他标签
- 可以嵌套
ol li：定义一个有序列表
- ol：order list有序列表
- 用于表示带步骤或者编号的并列内容，代码写完默认情况下会有123等顺序。
- ul的直接子元素一定是li，不可以在里面添加P等其他标签
- 可以嵌套
dl dt dd标签
用于展示一系列“标题：内容...”的场景
<dl>
<dt>姓名：</dt>
<dd>李筱琦</dd>
<dt>性质：</dt>
<dd>女</dd>
<dd>23岁</dd>
<dt>最后描述</dt>
<dd>是一名毕业的大学生</dd>
</dl>
**嵌套关系要弄明白，嵌套关系不要弄混。**
主要用于页面表单的输入。
1.png
button： 按钮
<button>点我</button>
strong em
- em：需要强调一下。
- strong：很重要，加粗，重点强调。
- span：对于一些元素，相对里面个别的内容添加一下样式，可以用span把它包围住，之后用CSS定义其颜色。无任何语义。
iframe：用于嵌入一个页面
用于在当前页面嵌入一个页面，主语跨域操作问题
以下代码当前页面上会有饥人谷的页面，点击w3cschool.cc会跳转到w3cschool.cc的页面。即打开w3c的连接是在iframe里面打开，注意target的值和iframe的name值一样。
<iframe src = "https://jirengu.com" name = "mypage"></iframe>
<p><a href = "https://www.w3cschool.cc" target = "mypage">w3cschool.cc</a></p>
应用场景：
- 做一个简单的教程
- 现在有一个网站的后台管理页面，这个管理页面上有很多的区块，每一个区块是一个图表，每个图表在其他的地方都可以用，就可以把一个图表作为一个iframe放到页面上，这样的打开页面就可以看到很多图表，但是这个图表在其他的网站想要使用，写一个iframe之后把网址嵌入进去就可以了，来达到复用东西。
- 当前的Iframe的地址（域名）和你当前页面的地址（域名）是同一个的话，可以用js操作页面的内容，但如果不是同一个的话，JS没办法操作，只能展示。
table 用于展示表格table，tr（一行），th（标题里的一列，显示内容加粗），tr，td（普通行里的一列，显示内容不加粗）
用于展示表格，不要用来布局，thead，tbody，tfoot可省略，浏览器会自动添加border-collapse:collapse；用于合并边框。
<table>
<tr>
<th>姓名</th>
<th>年纪</th>
</tr>
<tr>
<td>小明</td>
<td>18</td>
</tr>
<tr>
<td>小花</td>
<td>20</td>
</tr>
</table>
凡是和样式相关的，都是由CSS控制，标签只是起到语义和结构化的作用
3.png
一些其他标签：
- <!DOCTYPE html>：文档对象模型
- 混杂模式：不加<!DOCTYPE html>，浏览器用自己的方式渲染页面。
- 标准模式:加<!DOCTYPE html>，告诉浏览器如何渲染页面。
- <!DOCTYPE html>的作用是让浏览器进入标准模式，采用HTML5的方式进行页面额加载和渲染。不写的话，页面将进入混杂模式。
- <html ></html>：整个页面的根节点，所有的东西都在这里面，只有一个。里面包含<head>和<body>
- lang = "zh"：告诉浏览器所使用的语言。当打开其他语言的页面，会弹出一个是否翻译成中文的页面的窗口。
- <head></head>：头结点，包含和内容展示无关的东西，<meta><title>,引入的样式表或者一些其他的东西。
- <meta charset = "UTF-8">：内容编码，页面都是用编辑器编辑的，保存为编码格式，格式是由编辑器设置决定的。浏览器打开页面的时候解析编码后的字符串，charset告诉浏览器所保存的编码格式。防止出现乱码。
- <meta http-equiv = "X-UA-Compatible" content = "IE = edge,chrome = 1">：对于双核浏览器，或者装插件的浏览器，加这句话的意思是：如果是IE，就用IE最新版本渲染页面，如果是chrome，就用他的最新版本渲染页面。
- <meta name = "viewport" content = "width = device-width,inital-scale = 1，maximum-scale = 1">如果页面想在移动端展示的比较合理，需要加上这句话。
- <meta name = "keywords" content = "前端 饥人谷">，<meta name = "description" content = "哈哈'>主要是用来优化搜索引擎，便于搜索。
- <body></body>：页面的主体结构。
注意点：
- 标签属性全小写；
- 标签要闭合、自闭标签可以省略/；
- 标题里不能有段落，段落里不能有标题。
块级元素VS行内元素
- 块级元素：占据一整行的空间：a，span，strong，em，img,button
- 行内元素：只占据本身内容的空间：h1-h6， P，div，ol li，ul li
2.png
