一 基本标签
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.<sup></sup>
上标
10.<sub></sub>
下标
三 列表标签
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>