一 排版标签（div,span）
1块级标签
<!--div：把标签中的内容作为一个块儿来对待(division)。必须单独占据一行。-->
<!--div标签的属性：-->
<!--align="属性值"：设置块儿的位置。属性值可选择：left、right、 center-->
<!--<span>和<div>唯一的区别在于：<span>是不换行的，而<div>是换行的。-->
<!--div标签是一个容器级标签，里面什么都能放，甚至可以放div自己。-->
<!--span也是表达“小区域、小跨度”的标签，但是是一个文本级的标签。-->
<!--就是说，span里面只能放置文字、图片、表单元素。 span里面不能放p、h、ul、dl、ol、div-->
例子：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>块级标签</title> 6 </head> 7 <body> 8 <div> 9 北京 10 </div> 11 <div> 12 上海 13 </div> 14 <span> 15 北京 16 </span> 17 <span>上海</span> 18 </body> 19 </html>
2 段落标签<p>
属性：
- align='属性值'：对齐方式。属性值包括：left、center、right
例子：
<p>这是一个段落</p> <p align="center">这是另一个段落</p>
p标签是一个文本级标签，p里面只能放文字、图片、表单元素。其他的一律不能放。
例子：
1 <p>秦岭大山里的墓葬群，西北戈壁中的无人区，浩瀚深海下的失落遗迹，雪域高原上的死亡禁区…… 2 或许有一天，当你因为贪婪而拿了不该拿的东西时，你就会发现睡觉时有东西站你旁边，告诉你，天黑了，一起来玩玩吧<br> 3 <!--a标签是超链接--> 4 <a href="http://www.baidu.com">百度一下</a> 5 6 </p>
二 字体标签 h1~h6、<sup>、<sub>和特殊字符
例子：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <!--字体标签包含：h1~h6、<sup>、<sub>--> 5 <meta charset="UTF-8"> 6 <title>字体标签</title> 7 </head> 8 <body> 9 <h1>北京</h1> 10 <h2>北京</h2> 11 <h3>北京</h3> 12 <h4>北京</h4> 13 <h5>北京</h5> 14 <h6>北京</h6> 15 <!--上标--> 16 2<sup>8</sup> 17 <!--下标--> 18 2<sub>8</sub> 19 <!--空格--> 20  <br> 21 <!--小于号--> 22 <<br> 23 <!--大于号--> 24 ><br> 25 <!--符合&--> 26 &<br> 27 <!--双引号--> 28 "<br> 29 <!--单引号--> 30 '<br> 31 <!--版权--> 32 ©<br> 33 <!--商标--> 34 ™ 35 </body> 36 </html>
三 超链接<a>
例子：
<a href="#">跳转到顶部</a> <a href="http://www.baidu.com">百度一下</a>
特殊的几个链接
<a href="javascript:alert(1)">内容</a> <a href="javascript:;">内容</a>
- javascript:;表示什么都不执行，这样点击
<a>时就没有任何反应 例如：<a href="javascrip:;">内容</2 - javascript:是表示在触发
<a>默认动作时，执行一段JavaScript代码。 例如：<ahref="javascript:alert()">内容</a>
四 图片标签<img>
1，img属性：
width：宽度height：高度title：提示性文本。公有属性。也就是鼠标悬停时出现的文本。align：指图片的水平对齐方式，属性值可以是：left、center、right-
alt：当图片显示不出来的时候，代替图片显示的内容。alt是英语 alternate “替代”的意思。（有的浏览器不支持）
例子
<img src="./timg.jpg" alt="紫霞仙子" title="美女" width="400">
注意事项：
（1）如果要想保证图片等比例缩放，请只设置width和height中其中一个。
（2）如果想实现图文混排的效果，请使用align属性，取值为left或right
如果点击图片想跳转到一个链接，应该是：
<a href="http://www.baidu.com"> <img src="./test.jpg" alt="紫霞仙子" title="美女" width="400"> </a>
五 标签总结
1 文本级标签和排版标签
文本级的标签：p、a、span、i、em 只能放文本、图片、表单元素
排版标签：div、ul、ol、li、
2 行内标签和块级便签
行内标签：文本级标签中除了p，其它标签都是行内标签（行内块）
块级标签：所有的排版标签都是块级标签，再加上p
3 行内标签和块级标签的特点
行内标签：display：inline;
（1）在一行内显示
（2）不能设置宽高
（3）它的宽和高是内容的宽高
块级标签：display:block;
（1）独占一行
（2）可以设置宽高
（3）它的宽是父盒子的宽度100%；
行内块标签：img input display:inline-block;
（1）在一行内显示
（2）可以设置宽高
通过display属性对标签进行转化 none|inline-block|block