1、块标签

（1）div 标签（页面布局）

块属性标签，没有任何意义的标签，通常用来进行页面布局

1	<div style="border:1px #f00 solid">千里冰封</div>

效果如下：

千里冰封

（2）h 标题标签(h1-h6)

h1 的权限较大！！

1
2
3

<h1>我是一个粉刷匠</h1>
<h2>一闪一闪亮晶晶</h2>
<h3>新年好啊</h3>

效果如下：

我是一个粉刷匠

一闪一闪亮晶晶

新年好啊

（3）p 段落标签

它的里面一般包含一段文字

1	<p>今天有个好天气，台风刚过境，所有阴霾皆被一扫而空！</p>

今天有个好天气，台风刚过境，所有阴霾皆被一扫而空！

（4）hr br 标签

hr分割线 br换行符

1 2	<hr> 好还是<br />不好

效果如下：

好还是
不好

（5）无序列表 ul>li

可以设置它的 list-sytle-type 属性

square 实心方块

circle 空心圆

dotted 实心圆

none 取消列表样式

disc 高版本系统下的默认样式

<ul style="list-style-type:square;">        
    <li>昨天</li>        
    <li>今天</li>        
    <li>明天</li> 
</ul>

效果如下：

昨天
今天
明天

（6）有序列表 ol>li

可以设置它的 list-sytle-type 属性

lower-alpha 小写字母

upper-alpha 大写字母

lower-roman 小写罗马文

upper-roman 大写罗马文

<ol style="list-style-type:upper-roman;">
        <li>过去</li>
        <li>现在</li>
        <li>将来</li>
</ol>

效果如下：

过去
现在
将来

ol,ul,li 都是块属性标签，且 ol,ul 的子元素，必须是 li （列表项）标签

（7）自定义列表 dl>dt dl>dd

dl: 块标签，定义列表的父元素
dt: 块标签，定义列表的标题项
dd: 块标签，定义列表的列表项

<dl>
    <dt>早餐</dt>
    <dd>包子</dd>
    <dd>油条</dd>
    <dd>豆浆</dd>    
    <dt>中餐</dt>
    <dd>米饭</dd>
    <dd>面条</dd>
    <dd>螺蛳粉</dd>
</dl>

效果如下：

早餐: 包子; 油条; 豆浆
中餐: 米饭; 面条; 螺蛳粉

##### （8） address 地址标签

1	<address>山东省济南市高新区</address>

效果如下：

山东省济南市高新区

（9）blockquote 引用标签

引用标签，一般是引用的一段文字，
他的 cite 属性表示该文字引用的文献名目>

1	<blockquote cite="毛主席语录">要想知道梨子的味道，你必须亲自尝一尝</blockquote>

效果如下：

要想知道梨子的味道，你必须亲自尝一尝

2、行标签(包括图片)

（1）span 标记标签(渲染文字)

标记标签，没有实际意义，通常用来渲染文字

（2）a 标签（超链接）

属性:

herf 属性，用来设置超链接的地址
target 属性，用来设置标签页的打开方式（ _blank 在新标签页打开；_self 默认值，在当前页打开）
a 标签的作用：

1.设置超链接
2.设置锚点(不能设置 herf 为空，这样会导致页面刷新)
通常用来回到顶部，即是herf=”#”

如果在开发过程中需要设置a标签点击没有效果（不动）则可以设置herf属性为 ##即是：herf=”##”

快速直达，页面的某一部分
3.下载文件
如果设置的下载文件是音频、视频、图片、文档等，都需要进过压缩后，再在 herf 上设置文件的路径
如果是文本类型的文件，可以（不用压缩）直接把文件路径，设置在 herf 属性上，直接由浏览器打开

//超链接
<a href="http://www.baidu.com" >百度</a>
<a href="./case.html" target="_blank">案例</a>

<hr/>
//设置锚点
<div id="ye" style="height: 100px;background: #ff0;" ></div>
<div id="gr" style="height: 100px;background: #04be02;"></div>

<a href="#ye">黄色块</a>
<a href="#gr">绿色块</a>
<!-- 直达 -->
<a href="#">回到顶部</a>
<!-- 从下往上找#后的 -->
<a href="##">点不动</a>   
<!-- 找#号后面的#，没有就不动 -->
//下载文件
<a href="./abc.txt">下载</a>
<a href="./QQ.zip">下载文件</a>

效果如下：

//超链接
百度
 案例

//设置锚点

黄色块
 绿色块

回到顶部

点不动

//下载文件
下载
 下载文件

（3）强调、加粗、斜体标签

strong 强调标签（加粗）
em 强调并斜体
b 文本加粗bold（不常用，h5中即将废弃）
i 文本倾斜incline
var文本倾斜（不常用，h5中即将废弃）

（4）引用标签q、格式化pre、嵌套代码code标签

q 引用标签，其引用的内容都比较简短

pre 标签，用来格式化输出

code 标签，一般是嵌套代码使用

1
2
3

&lt;   在html中渲染为 <
&gt;   在html中渲染为 >
&nbsp; 在html中渲染为 空格

//引用
<span>子曰：</span>
<q>学而时习之</q>

<p>
种豆南山下
草盛豆苗稀
</p>
//格式化输出
<pre>
种豆南山下
草盛豆苗稀
</pre>
//输出标签代码
<code>
&lt;p&gt;陶渊明&lt;/p&gt;
</code>
//输出空格
<code>
巴啦&nbsp啦
</code>

效果如下：

子曰：学而时习之

种豆南山下草盛豆苗稀

种豆南山下
草盛豆苗稀


<p>陶渊明</p>


巴啦 啦

（5）img 标签 (特殊的行属性标签)

src 属性

用来设置图片资源的地址/路径，src资源的缩写resource

文件资源路径分为以下三种：
    a.网络路径
        是图片的网络地址
    b.绝对路径
        从 服务器的根目录 开始查找，直到找到需要的文件的整个路径，一般 不使用
    c.相对路径（最常用的！从当前位置开始）
        相对于 当前文件所在的资源路径
          ./ 代表：当前目录
          ../代表：上一级目录
          
<!-- 绝对路径（从根目录开始）,记得！！反斜杠，如从day01服务器里找到，本网页即02图片，双击即可-->
<img src="D:代码/01HTML/day02/images/a.jpg"  width="800" height="500" alt="">
<!-- 相对路径（从当前文件的位置开始）-->
<img src="./images/b.jpg" width="500" height="500" alt="">
<img src="./images/b.jpg" width="500"   alt="">

alt 属性

用来解释图片的内容

作用：

1.当图片没有被加载出来时，会显示alt的内容
2.通过alt属性，告诉浏览器当前图片的内容
width/height 属性（一般只设其中一个）

设置图片的宽和高。在实际的开发过程中，一般只设置单个的宽或者高，另一侧根据比例显示大小

3、块和行标签的总结

（1）块属性标签

a.独自占据一行空间（从上至下竖向排列）
b.支持宽和高的设置,设置完宽和高以后，仍然独占一行
c.支持上下 padding 和上下 margin

（2）行属性标签

a.不会独占一行空间（从左至右横向排列）
b.无法设置宽和高，他的宽和高由内容 撑开 
c.不支持上下 padding  和  上下 margin

4、标签的嵌套

标签嵌套规则

块标签作为一个布局标签，可以嵌套所有！的标签

行标签并不能嵌套块标签

以下标签不能相互嵌套
p 标签，h1-h6 都不能相互嵌套（并且他们也不能嵌套块标签）
a 标签不能相互嵌套

原文链接：HTML基础：块级与行级标签详解