HTML常用标签

html有许多常用标签，本人在学习编写代码过程中，共总结以下13种常用的标签。

所有的标签都是用来形成独立的使用空间的，理解标签的含义，对编写前端代码有很大的好处。

所有标签共有的属性一共就三个：id，class，style。id对标签进行唯一的识别，class对标签实现一个类的划分，比如性别等，sytle加样式。

1、文本标签span

首先是纯文本标签，顾名思义，纯文本标签就是用来显示文本的。

<!-- 1 文本标签span -->
<span style="color: red;">hello</span>

显示结果如下：

2、标题标签h

每个标签本质上都是形成独立空间，但有些标签有自己的特性，标题标签具有字体放大加粗效果，即在不加样式的情况下依然对文本进行放大加粗，通常有6级标题（h1~h6）

<!-- 2 标题标签 -->
     <h1>标题</h1>
     <h2>标题</h2>
     <h3>标题</h3>
     <h4>标题</h4>
     <h5>标题</h5>
     <h6>标题</h6>

显示结果如下：

3、div标签

div标签单纯实现元素竖着布局，没有其他任何效果。

<!-- 3 div竖着布局标签 -->
    <div>标题（竖）</div>
    <div>标题（竖）</div>
    <div>标题（竖）</div>
    <div>标题（竖）</div>

显示结果如下：

4、段落标签p

段落标签，也是让元素竖着布局，但是会使标签元素之间有间隔，主要用于文本段落。

 <!-- 4 段落标签 -->
    <p>段落标签1</p>
    <p>段落标签2</p>
    <p>段落标签3</p>

显示结果如下：

5、超链接标签a

超链接标签对应为a标签，实现跳转就是要用a标签，其中href为资源路径，target 为设置窗口打开方式：1、_self 默认的的开方式，在本窗口打开  2、_blank 在新的窗口打开 3、窗口名 指定窗口打开

<a href="https://www.bilibili.com/" target="aaa">点击跳转</a>

显示结果如下：

6、锚点标签a

锚点标签也是a标签，锚点可以理解为提前预埋好的标记，用于快速跳转。

其中，name是给锚点起个名字，用于快速跳转，href#name可以实现锚点的跳转，即跳转到name处。

此外，可以给锚点跳转位置加样式，fixed是将内容固定在页面位置展示，属性可以自行设置。

<!-- 6 锚点标签
        name 锚点值 
    -->
<a name="aaaa">锚点</a>
<a href="#aaaa" style="position: fixed; right: 200px; bottom: 200px;">跳转到h1</a><br>
<a href="#bbbb" style="position: fixed; right: 250px; bottom: 150px;">跳转到div</a><br>
<a href="#cccc" style="position: fixed; right: 300px; bottom: 100px;">跳转到p</a>

显示结果如下：

7、图片标签img

src表示引入图片资源的路径，路径又分为相对路径和绝对路径，相对路径分为兄弟关系，叔侄关系，表兄弟关系。兄弟关系表示访问者与被访问者在同一文件夹下，叔侄关系表示访问者和被访问者上一级文件夹在同一个文件夹，表兄弟关系表示两个上一个文件夹在同一个文件夹。绝对路径表示文件的绝对位置。

alt表示图片不能正常显示时显示的默认内容。

width设置图片宽

height设置图片的高（宽高没有都定义则1：1根据设置进行图片修改）

<!-- 7 图片标签
    src:引用的图片资源
    路径：
        相对路径：访问资源与被访问资源的关系
            兄弟关系：src=“OIP-c.jpg”
            叔侄关系：src=“img/OIP-c.jpg”
            表兄弟关系：src=“../img/OIP-c.jpg”
        绝对路径:资源的绝对位置
    
    alt:当图片不能正常显示时显示此内容
    width:"100px"
    height:"400px"
-->
<img src="宫殿.jpg" alt="这是一张宫殿图片" style="object-fit: cover;width: 200px;height: 400px;">

显示结果如下：

8、列表标签 ul、li

无序列表用ul li ，有序列表用ol li

<!-- 8 列表标签 -->
<u1>
    <li>列表标签</li>
    <li>列表标签</li>
    <li>列表标签</li>
</u1>

<ol>
    <li>列表标签</li>
    <li>列表标签</li>
    <li>列表标签</li>
</ol>

显示结果如下：

9、表格标签table

html中没有列的概念，列的效果是行里面加几个单元格营造出来的列的效果。

<!-- 9 表格标签
    <table>放表格的容器
    <tr>行
    <td>单元格 <th>加粗居中

    border 表格有边框
    width=“500px”
    height=“400px” 
    cellpadding=“10px” 单元格填充度,即内容与边框之间的距离
    cellspacing=“0” 单元格之间的间距 0表示挨在一起
    
    thead 默认设置为第一行
    tody  默认设置为中间
    tfoot 默认设置为最后一行
    
    rowspan 把行合并
    colspan 把列合并

-->
<table border="1">
    <tr>
        <th>id</th>
        <th>name</th>
        <th>age</th>
        <th>sex</th>
    </tr>
    <tr>
        <td>1</td>
        <td colspan="2">张三</td>

        <td>男</td>
    </tr>
    <tr>
        <td rowspan="2">2</td>
        <td>李四</td>
        <td>20</td>
        <td>男</td>
    </tr>
    <tr>
        <td>王五</td>
        <td>20</td>
        <td>女</td>
    </tr>

显示结果如下：

10、框架标签iframe

框架标签的主要功能是嵌套其他页面

 src表示嵌套的资源

width height 设置宽高

frameborder=“0” 去掉边框 把任意页嵌入更真实 

name 给窗口起个名字 可以与超链接a标签使用实现跳转

<!-- 10 框架标签    iframe嵌套其他页面
     src:嵌套的资源
     width=“800px”
     height=“400px”
     frameborder=“0” 去掉边框 把任意页嵌入更真实     
    -->
    <br><br>
    <a href="https://www.bilibili.com/" target="aaa">跳转到B站</a>
    <iframe src="https://www.bilibili.com/" width="800px" height="400px" framebirder="0" name="aaa"></iframe>
    <br><br>

显示结果如下：

11、音频标签audio

src 表示音频资源

controls 表示手动播放，让播放器显示出来

autoplay 表示自动播放

loop 表示循环播放

<!-- 11 音频audio
        controls 手动播放，让播放器显示出来
        autoplay 自动播放
        loop 循环播放 
      -->
   <audio src="img/bj.mp3" autoplay loop></audio>

显示结果如下：

12、视频标签video

controls 表示手动播放，让播放器显示出来

autoplay 表示自动播放

loop 表示循环播放

width height 设置宽高

<!-- 12 视频 video
        controls 手动播放，让播放器显示出来
        autoplay 自动播放
        loop 循环播放 
        width=“200px”
        height=“200px”
    -->
    <video src="img/meeting_01.mp4" width="200px" height="200px" controls></video>

显示结果如下：

13、信息收集标签

收集信息的标签大部分是input 用type做区分。

<!--收集信息的标签 -->
    <form><!--收集信息提交走需要把这些东西放到form表单里面-->
        <input type="text">单行文本框<br><br>
        <input type="password">密码框<br><br>
        <input type="radio" name="sex">男生 <input type="radio" name="sex">女生   单选框<br><br>
        <!-- name属性值相同的，只能选一个 -->
        <input type="checkbox">篮球 <input type="checkbox">足球 <input type="checkbox">乒乓球    复选框<br><br>
        <input type="file">文件选择器<br><br>
        <input type="color">颜色拾取器<br><br>
        <input type="date">日期<br><br>
        <input type="datetime-local">日期时间<br><br>
        <input type="week">周选择器<br><br>
        <input type="range" min="0" max="100" value="90">滑块<br><br>
        <!-- step步长 -->
        <input type="number" min="0" max="100" value="20" step="5">数字<br><br>

        <select>
            <!-- 不加value 选中为文本，加walue就是选中value值 -->
            <option value="">数学</option>
            <option value="">语文</option>
            <option value="">英语</option>
        </select><br><br>

        <textarea rows="10" cols="50">多行文本域</textarea>
        <!-- rows表示显示多少行 cols表示一行显示多少文本 -->

        <input type="button" value="普通按钮">
        <input type="reset" value="重置按钮">
        <input type="submit" value="提交按钮">
    </form>

显示结果如下：