HTML 常用标签

一 基本标签

1. <h1>~<h6>

   标题标记，用于表示文档内容的标题内容，以及标题内容的级别

2.<span></span>

   行内元素，和其他元素都在一行上；高，行高及外边距和内边距部分可改变；宽度只与内容有；     行内元素只能容纳文本或者其他行内元素

3. <p></p>

    段落标记，用于表示内容是一个段落

4. <div></div>

   块级元素，总是在新行上开始，占据一整行；高度，行高以及外边距和内边距都可控制；宽带始终是与浏览器宽度一样，与内容无关；它可以容纳行内（内联）元素和其他块元素

5. <hr/>

   水平线

6.<br/>

    换行标记，用于段落内部的换行

二 文本标签

1. <b></b>

   

   样式表现为粗体

2.<strong></strong>

   主旨是强调，表现为粗体

3.<i></i>

   样式表现为斜体

4.<em></em>

    主旨是强调，表现为斜体

5. <big></big>

   定义大字体的文字 不符合标准网页设计的理念 , 不赞成使用

6.<small></small>

   定义小字体的文字

7.<u></u>

   下划线

8.<del></del>

   删除线

9.

   上标

10.

   下标

三 列表标签

1.<ul></ul>

   无序列表标记，表示列表所包含的项是没有先后顺序的；列表项使用<li>表示

2. <ol></ol>

   有序列表标记，表示列表所包含的项是有先后顺序的；列表项使用<li>表示

3. <li></li>

    列表项标记，只能和 <ul> 或 <ol> 结合使用

4.<dl></dl>

    自定义列表：是项目及其注释的组合

5.<dt></dt>

     标明一个术语要说明的对象

6.<dd></dd>

    列表项说明

四 超级链接标签

1.超级链接 <a href="http://www.baidu.com"> 百度链接 </a>

   
   属性 target="_blank" 新页面打开 target="_self" 默认本页打开；

<!-- 
		 html: 超(超链接)文本标记语言   使用标签标记
		 href 链接目标
		 -->
		 <!-- 如果href 中什么都没有写 就代表链接到自己 -->
		 <a href="">链接到自己</a>
		 <a href="https://www.baidu.com/">链接到百度</a>
		 <!-- target 默认值是_self    _blank 空白页 -->
		 <a href="https://www.baidu.com/" target="_blank">在新标签页中打开百度</a>
		 <!-- 如果打开当前网站下链接 可以使用相对路径 -->
		 <a href="./昨日回顾.html">打开昨日回顾.html</a>

   

 2.锚点的使用：

    定义锚点 <a id=“moveto”>moveto</a>

    定义指向该锚地的链接 <a href=“#moveto”>moveto</a>

    邮件连接 <a href="mailto:496575233@qq.com">QQ</a>

<!-- href中不写内容 相当于刷新  刷新后滚动条在顶部 -->.
		<!-- 
		 猫：船锚  用户固定
		 1.目标元素有id属性
		 2.a链接的href一定要和目标元素的id值一样
		 如果 href后只写#  代表回到最顶层 
		 -->
		<p id="top">顶部</p>
		<a href="#middle">回到中部</a>
		<a href="#bottom">回到底部</a>
		<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
		<p id="middle">中部</p>
		<a href="#top">回到顶部</a>
		<a href="#bottom">回到底部</a>
		<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
		<p id="bottom">底部</p>
		<a href="#top">回到顶部</a>
		<a href="#middle">回到中部</a>
		
		
		<a href="#">特殊写法回到顶部</a>

五 媒体标签

 

1.图片标签

    <img src="img/logo.png" alt=" 图片名 ">

2.图片热点

    usemap area

<img src="../img/area.png" usemap="#map1">

		<map name="map1">
			<!-- 当shape为circle圆形 坐标为 中心点(x,y),半径r -->
			<area shape="circle" coords="335,275,140" href="https://www.jd.com" alt="">
			<!-- 当shape为rect矩形  坐标为 左上角(x,y)  右下角（x,y）-->
			<area shape="rect" coords="700,160,950,400" href="https://www.taobao.com" alt="">
			<!-- 当shape为poly多边形  坐标为顺时针 或者逆时针  取所有点的（x,y） -->
			<!-- <area shape="poly" coords="1280,360,1150,260,1520,130,1430,490,1080,680" href="https://www.pinduoduo.com" alt=""> -->
			<!-- <area shape="poly" coords="1280,360,1080,680,1430,490,1520,130,1150,260" href="https://www.pinduoduo.com" alt=""> -->

		</map>

3.视频标签

<video src="audio/02.mp3" controls="controls">不支持H5时显示文字</video>

4.音频标签

<audio src="audio/02.mp3" >当前浏览器不支持audio</audio>