Html常用标签

来源：cnblogs　　作者：猿木头　　时间：2021/4/12 9:37:50　　对本文有异议

HTML标签

分类

- 块元素：页面中独占一行的元素（block element) 例如：标题标签，p标签····
  - 在网页中一般通过块元素对页面进行布局
- 行内元素：页面中不会独占一行的元素（inline element)
  - 主要用于包裹文字
注：一般情况下会在块元素中放行内元素，而不会在行内元素中放块元素

? p标签中不能放任何块元素
- 双标签：由开始和结束两个标签符组成
- 单标签：用一个标签符号完整描述某个功能 .例：< hr> 水平线 < br> 换行

mate标签

<meta charset="UTF-8"> <!--字符编码集-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!--设置视口大小适配-->
    <meta name="keywords" content="web,网页制作,设计,html">
    <meta name="description" content="专业">
    <!-- 
		meta 用于设置网页中的一些元数据，元数据不是给用户看
		charset 指定网页的字符集
		name 指定数据的名称
		content 指定数据的内容
		keywords 网站关键字，可同时指定多个关键字，之间用 , 隔开
		description 网站的描述 
		会显示在搜索引擎的搜索结果的中
		 -->
<meta http-equiv="refresh"content="3;url=http://www.baidu.com">
<!--将页面重定向到另一个网站-->

文本标签

标题标签

<!--标题标签：
        块元素：页面中独占一行的元素（block element)
        h1-h6一共六级标题，重要性依次递减,h1最重要，h6最不重要
        <h1>标题标签在网页中的重要性仅次于title标签，一般一个页面标题标签只会使用h1-h3
    -->
    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6>

hgroup标签

为标题标签分组，可将一组相关的标题同时放入hgroup
```
<hgroup>
    <h1>静夜思</h1>
    <h2>李白</h2>
</hgroup>
```
p标签

页面中的一个段落，独占一行，属于块元素
```
<p>
    
</p>
```

blockquote 长引用标签

<blockquote>
    缩进效果
</blockquote>

em 斜体
```
<p>
    html<em>学</em>习
</p>
```
strong 强调加粗字体

<p>
    网页<strong>设计</strong>
</p>

br 标签换行
```
<br> 
```

布局标签（结构化语义标签）

H5新增：

header：表示网页的头部
article：表示一个独立的文章
main：表示网页的主体部分（一个页面中只会有一个main)
footer:表示网页的底部
nav:表示网页中的导航
aside：和主体相关的其他内容
section：表示独立的区块，上边标签都不能使用时使用

常用方式：

div:没有语义，用来表示一个区块，主要布局元素
span: 行内元素，无任何语义，一般用于在网页中选中文字

其他常用标签

列表

有序列表

语法：使用ol标签来创建有序列表，li 表示列表项

<ol>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ol>

无序列表

语法：使用ul标签来创建有序列表，li 表示列表项

<ul>
    <li>结构</li>
    <li>表现</li>
    <li>行为</li>
</ul>

定义列表

语法：使用dl标签来创建，dl 表示定义的内容，dd 来对内容进行解释说明

<dl>
    <dt>结构：</dt>
    <dd>结构用于对网页元素进行整理和分类，主要包括XML和XHTML</dd>
</dl>
<dl>
    <dt>表现：</dt>
    <dd>表现用于设置网页元素的版本、颜色、大小等外观样式，主要指的时CSS</dd>
</dl>
<dl>
    <dt>行为：</dt>
    <dd>行为是指网页模型的定义及交互的编写，主要包括DOM和ECMAScript两个部分</dd>
</dl>

注：列表之间可以相互嵌套

超链接

定义：超链接可以让我们从一个页面跳转到其他页面或者是当前页面的其他位置
属性：
- href 指定跳转的目标路径
  
  --值可以是一个外部网站的地址
  
  --可以是一个内部网页的地址
- target 指定超链接打开的位置
  
  --可选值：
  
  ? _self 默认值，在当前页面打开超链接
  
  ? _blank 在一个新标签中打开超链接

语法：使用 a 标签来定义超链接

 <a href="https://www.qq.com" target="_blank">腾讯qq</a>
    <a href="html基本语法.html"target="_self">超链接</a><!--同一目录-->

锚点

id属性：（唯一不重复）

? 每一个标签都可添加一个id属性

? id属性就是元素的唯一标识，同一页面中不能出现重复的id属性
- 回到当前页面顶部：直接将超链接的 href 属性设置为 #
- 可以跳转到当前页面的指定位置，只需将href属性设置为 #目标元素的id属性值
```
 <a href="#bottom">去底部</a>
 <a href="#">回顶部</a>
<p id="bottom">
   teday do you do;
</p>   
```
补充
1. 相对路径
  
  一般相对路径都会使用 . 或 .. 开头
  
  ./ 表示当前文件所在目录
  
  ../ 表示当前文件所在目录的上一级目录
  
  以上两种写法都可以省略不写，都相当于默认写了 ./
2. 绝对路径
  
  包含盘符的整个路径
3. 占位符
  
  在开发中可将 # 作为超链接的路径占位符使用
  
  javascript:;来作为href属性，点击超链接什么都不会发生

图片标签

定义：用于向当前页面中引入一个外部图片

? 使用img标签来引入外部图片，img标签是一个自结束标签

? 属于替换元素，在块元素和行内元素之间，具有两种元素的特点
属性
- src 属性：指定的外部图片的路径
- alt 图片的描述，默认情况下不会显示，有些浏览器会在图片无法加载时显示
  
  ? 搜索引擎会根据alt中的内容来识别图片，如果不写alt属性，图片不会被搜索引擎收录
- title 鼠标悬停时显示的内容
- width 图片的宽度（单位是像素px)
- height 图片的高度
  
  宽度和高度若只修改了一个，另一个会等比例缩放

语法

<img src="img.jpg" alt="木头" title="munu" width=500>

补充：图片格式
- jpg ：支持颜色比较丰富，不支持透明效果，不支持动图，一般来显示照片
- gif ：颜色较少，支持简单透明，支持动图，单一图片动图
- png ：颜色丰富，支持复杂透明，不支持动图，专为网页而生
- webp：具有以上的所有优点，缺点：兼容性不好
- base64: 将图片使用base64编码，这样可以将图片转换为字符，通过字符的形式引入图片，一般都是一些需要和网页一起加载的图片才会使用base64
选择原则：效果一样用小的，效果不一样，用效果好的

音视频标签

audio

定义：用来向页面中引入一个外部的音频文件
- 音频文件引入时，默认情况下不允许用户自己控制播放停止
属性
- controls 是否允许用户控制播放
- autoplay 音频文件是否自动播放
  
  大部分浏览器不会自动对音乐进行播放
- loop 音乐是否循环播放

语法：

<audio src="./mp4/20200816150618_0.mp4" controls autoplay loop></audio>

注：除了通过src来指定文件路径外，还可通过source来指定文件目录

兼容所有浏览器

<audio controls>
                对不起！您的浏览器不支持播放，请升级您的浏览器！ 
                <source src="../mp3/赵紫骅 - 可乐.mp3">
   				 <source src="../mp3/赵紫骅 - 可乐.ogg">
                <embed src="../mp3/赵紫骅 - 可乐.mp3" type="audio/mp3" width="200" height="300"> <!--ie8之前-->
            </audio>