HTML常用标签

1.标题

标题标签：<h*>标题</h*>（*代指数字1~6） ,h1-h6大小依次递减（尽量少使用h1标题）

（块级元素：自动换行）

2.段落标签:<p> </p>     p标签;会自动换行 块级元素

3.换行标签： br 单标签<br> </br>

4.水平线标签：hr 单标签<hr> </hr> ;常用属性：color颜色  size粗细   width长度（百分比(只写数字)或px）

5.列表

5.1.有序列表

<ol type=" ">/<!--默认小圆点，也可选择-->
    <li> </li>
</ol>

5.2无序列表

<ul>
    <li> </li>
</ul>

5.3.div标签 块级元素 ;默认占全部的宽度，有多少内容高度占多少，可以设置div的宽(width)高（heigth)

<div style="width: 100px;height:100px"align=" ">这是一个div</div>
<!--align可以是right center left-->

span:行内元素 （不会自动换行 ）（有多少内容占多少地方）

6.格式化标签：

6.1.font标签：color字体颜色   size字体尺寸   face字体风格

<font color=" "size=" "face=" ">Hello World</font>

6.2 pre:预格式化标签 保留空格和换行

<pre>
Hello World <!--文字前边空多长运行结果就空多长--><!--里边什么格式输出就什么格式-->
</pre>

 b加粗        i倾斜        u下划线        del中划线        sub下标        sup上标

<p><b>以后</b>的<strong>你</strong>会<i>感谢</i>现在<u>努力</u>的<del>自己</del></p>

运行结果：以后的你会感谢现在努力的自己 

7.a标签：超链接标签，用于链接到一个新的URL

常用属性：href:需要跳转的地址;target:打开窗口的方式：_self:当前窗口_blank在空白窗口打开

<a herf="链接" target=" ">文字</a><!--点击文字可跳转到相应链接--》

 作为锚点：
 1. a标签的name属性

<a name="top"></a>

2.其他的id属性

<div id="top"></div>

3. 锚点的使用：

<a href="#top"></a> 

<a href="#">返回顶部</a>
<!--点击“返回顶部”字样刷新页面即返回顶部-->
<a name="yyds">文字</a>
<a href="#yyds">balabala</a>
<!--运行结果：点击“balabala”被标记的字“字体”所在的那一行为本页的第一行-->
<h2 id="yydsn">段落</h2>
<a href="#yydsn">balabala</a>
<!--运行结果点击“balabala”被标记的字“段落”所在的那一行为本页的第一行-->

8.img标签：

src:需要引入的图片的地址（必须属性）

alt:当图片破损时显示的文本内容

title:当鼠标停留在图片上时显示的文本

width:图片的宽度

height:图片的高度

border:图片边框

<img src=" "width=" "height=" "title=" "/>
<!--scr为图片地址，width为图片宽度，height为图片高度，title为当鼠标停留在图片上时显示的文本-->

10.表格标签

table:表格

tr:行

td:标准单元格

th:表头（字体居中，加粗效果）

table的属性：

width:表格宽度

border:边框

align:多起方式

<table width="400px" align="center" border="1"style="border-collapse: collapse;">
<!--style="border-collapse: collapse;"合并边框 默认独立分开，align="center"表格居中-->
    <tr align="center">
		<th>  </th>
		<th>  </th>
		<th>  </th>
	</tr>
	<tr align="center" bgcolor="bisque"><!--align="center"文字居中，bgcolor="bisque"设置背景颜色-->
		<td> </td>
		<td>  </td>
		<td>  </td>
	</tr>
	<tr>
		td>  </td>
		<td>  </td>
		<td>19</td>
	</tr>
	<tr>
		<td>  </td>
		<td>  </td>
		<td>  </td>
	</tr>
    <!--四行三列-->
</table>