【前端从0开始】HTML基础——3、HTML标签(1)

1、标签的分类

• 按写法分类：
  • 单标签
    • <标签名 属性=值 />
  • 双标签
    • <标签名 属性=值></标签名>
• 按用途分类：
  • 格式标签、文本标签、图片标签、媒体标签、超链接标签、表单标签、表格标签、列表标签；
• 按属性分类：
  • 块标签(block)：
    • 块标签独占一行，可以设置宽高
  • 行标签(inline)：
    • 行标签与内容排在一排
    • 无法设置宽高
    • 换行符被解析为空格
  • 行块标签(inline-block)
    • 行块标签与内容排在一排
    • 可以设置宽高
    • 换行符被解析为空格

2、格式标签

所有的格式标签都是块标签。

2.1 标题标签

<h1~6 align="left|right|center|inherit"></h1~6>

2.2 段落标签

<p align="left|right|center"></p>

段落标签主要用于HTML文档中的段落内容，p标签内无法嵌套其他的块标签

2.3 水平线标签

<hr width="宽度" size="大小" color="颜色"  noshade />

水平线标签主要用于题目与文章内容的分割作用

2.4 无意义块标签

<div></div>

无意义标签没有固定样式，使用什么样式就会表现出什么样式。

3、文本标签

字体标签：

<font color="颜色"  face="字体" size="字号"></font>

• size：1~7

• 4表示正常，比4小为小号字体，比4大为大号字体
  粗体标签：

• <b></b>
• <strong></strong>
  斜体标签：
• <i></i>
• <em></em>
  下划线标签：<u></u>
  删除线标签：<del></del>
  上标标签：<sup></sup>
  下标标签：<sub></sub>

4、实体字符

• 在HTML中，某些字符是预留的，例如：我们想将<b>显示在页面中，是无法显示出来的，因为我们的浏览器会认为该内容是一个标签。
• 为了可以正常显示这些内容，我们使用实体字符来表示
• 实体字符由三部分组成
  • 以&开始
  • 中间为实体名或实体编号
  • 以；为结尾
• 实体名更便于记忆、实体编号浏览器兼容性更好
• 实体名区分大小写

5、超链接标签

超链接标签行标签

5.1、超链接标签的用法

1、普通连接
2、空连接
3、回到顶部
4、保留原位
5、脚本连接
6、电子邮件
7、拨打电话
8、锚点链接

5.2 常用属性：

标签：<a></a>
属性：
href：链接的地址
target：链接打开方式

• _self：当前页面打开
• _blank：新标签打开链接

5.2、普通连接

基础语法：<a href="链接地址"></a>

我们的连接地址可以是一个URL也可以是一个本地路径

URL相对路径以及绝对路径

• 相对路径
  • images/logo.gif
  • …/css/demo.css
  • ./admin/index.php
• 绝对URL
  • c:/appserver/user/www/images/logo.gif
  • /usr/local/apache/htdocs/index.html
  • http://www.qtummatrix.com

5.3、空连接

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

5.4、返回顶部：

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

5.5、保持原位置

<a href="javascript:;"></a>

5.6、脚本连接

<a href="javascript:alert('hello')"></a>

5.7、电子邮件

<a href="mailto:邮箱地址"></a>

5.8、脚本连接

<a href="tel：电话号码"></a>

5.9、锚点链接

设置锚点：
要跳转的标签设置id属性
链接锚点：
<a href="#id属性值"></a>

注意：
a标签不仅可以给文字添加超链接，也可以为图片，视频，音频，表格等添加超链接
如果通过a标签指向一个URL那么这个URL必须在底之前存在http://或https://

6.1 图片格式分类

设计网页的时候经常使用的三个图片类型：
GIF-------最多支持256色，支持透明，支持多帧动画
JPG|JPEG–支持多色，可以有很高的压缩比，但是是有损压缩不支持透明，不支持动画
PNG-------可以表现很高的压缩比例，使用了无损压缩，图片品质较高，支持透明，不支持动画。

6.2 热点地图

<img src="imgs/2.webp" usemap="#test" alt="中国地图，我滴骄傲">
<map name="test" id="test">
		<!-- rect:正方形 coords="x1,y1,x2,y2" 两个点确定一个正方形 -->
		<area shape="rect" coords="0,0,300,300" href="https://www.baidu.com" alt="">
	
		<!-- circle：圆 coords="x1,y1,r" -->
		<area shape="circle" coords="450,150,150" href="https://www.baidu.com" alt="">
	
		<!-- poly：多边形 coords="x1,y1,x2,y2,...,xn,yn" -->
		<area shape="poly" coords="750,0,600,300,900,300" href="https://www.baidu.com" alt="">
</map>

area的元素永远嵌套在map元素内部，area元素可以定义图像中的某一个区域。
img中的usermap属性可饮用map中的id或name属性，一般情况下我们会将name和id设置成一样的，因为浏览器的不同会选用不同的属性。

7、媒体标签

 <!--  
        object:视频或音频
        embed:视频或音频
        audio：音频
            src：音频路径
            autoplay：自动播放
            controls：音频控件
            preload：预加载
        video：视频
            src：音频路径
            autoplay：自动播放
            controls：音频控件
            preload：预加载
            poster：视频封面
						muted：静音播放
						loop：循环播放
    -->
    <object data="./audio/周杰伦 - 最伟大的作品.flac"></object>

    <embed src="./video/1.MP4" height="300px">

    <audio src="./audio/周杰伦 - 最伟大的作品.flac" autoplay controls></audio>

		<video src="video/1.MP4" controls autoplay></video>

注意：如果无法看到该视频，那么可能不支持该格式的文件，同格式的文件也会因视频本身制作时的编码问题导致无法播放
●object：用于包含对象，比如图像、音频、视频、Java applets、ActiveX、PDF以及Flash
●embed：是html5中的新标签。几乎所浏览器都支持，拥有width和height、src以及type(文件的MIME类型)四个属性
●embed是针对非IE浏览器的
●object主要针对IE浏览器(但是IE死了)
●video在chrome中无法自动播放，但是如果静音的话，就可以进行自动播放了