HTML常用标签-CSDN博客

本文链接：https://blog.csdn.net/jlihan/article/details/140913676

所有标签共有的属性只有3个:id:一个唯一的标识,class：一个类的划分,style：加样式

1、文本标签 span

三个文本标签span，第一个加入样式给hello红色，然后是两个文本标签内容为demohtml

<span style="color: red;">hello</span>
    <span>demohtml</span>
    <span>demohtml</span>

在写代码过程中有换行，但是运行结果无换行，标签间有空格隔开

2、标题标签 h1~h6

使文本竖向放置，有放大加粗效果，放大加粗效果依次减小

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

3、div竖着布局的标签

    <div>竖着布局的标签</div>
    <div>竖着布局的标签</div>
    <div>竖着布局的标签</div>

4、段落标签

自带段落间距

    <p>段落标签</p>
    <p>段落标签</p>
    <p>段落标签</p>

5、超链接标签 a

href 设置资源路径，可以是网络地址也可以是本地文件路径

target 设置打开窗口的方式 _self默认的，在本窗口打开 _blank在新窗口打开

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

6、锚点标签

锚点标签，可以实现如拼多多左下角一键返回顶部效果，或返回想返回的地方

使用方法：在想返回到的地方加锚点，设置其name如aaa，一键返回顶部的地方设置href

里面是要跳转到地方"#+name"，其中我还加入了样式，position用于设置定位模式，fixed 代表固定模式，right: 200px;bottom: 200px; 固定到距浏览器右为200px，距浏览器底为200px，不随浏览器的滚动而滚动。

style="position: fixed;right: 200px;bottom: 200px;

<a name="aaaa">锚点</a>
<a href="#aaaa" style="position: fixed;right: 200px;bottom: 200px;">跳转到h1</a>
<a href="#bbbb" style="position: fixed;right: 200px;bottom: 150px;">跳转到div</a>
<a href="#cccc" style="position: fixed;right: 200px;bottom: 100px;">跳转到p</a>

7、图片标签

src:引用的图片资源

路径：1、相对路径：访问资源与被访问资源的关系

兄弟关系 src="R-C.jpg" 直接访问

叔侄关系 src="img/R-C.jpg"

表兄弟关系 src="./img/R-C.jpg"

2、绝对路径：资源的绝对位置

alt: 当图片资源不能正常展示时，显示alt里面的内容

width="" 设置宽度 height="" 设置高度

<img src="img/R-C.jpg" alt="这是一个风景照片"  style="object-fit: cover;width: 300px;height: 200px;">

style="object-fit: cover;width: 300px;height: 200px;" 为设置样式，object-fit: cover; 保持图片比例不变形，宽度为300px，高度为200px

8、列表标签

无序列表

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

有序列表

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

9、表格标签

<table>放表格的容器

<tr>行

<td>单元格 <th>加粗居中

border 表格有边框

width="500px"

height="400px"

cellpadding="10px" 单元格的填充度

cellspacing="0" 单元格之间的间距 0 表示挨在一起

thead tbody 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">li</td>
                <!-- 把行合并 大小为2 -->
                <td>男</td>
            </tr>
            <tr>
                <td rowspan="2">2</td>
                <!-- 把列合并 大小为2 -->
                <td>zhang</td>
                <td>22</td>
                <td>男</td>
            </tr>
            <tr>
                
                <td>zhao</td>
                <td>20</td>
                <td>女</td>
            </tr>
    </table>

运行效果如下：

10、框架标签 iframe嵌套其他页面

src:嵌套的资源

width:"800px"

height="400px"

frameborder='0' 去掉边框把任意页面嵌入的更真实

<iframe src="https://www.bilibili.com/" width="800px" height="400px" frameborder="0" name="aaa"></iframe>

11、音频 audio

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

autoplay 自动播放

loop 循环播放

<audio src="img/bj.mp3" autoplay loop></audio>

12、视频

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

autoplay 自动播放

loop 循环播放

<video src="img/test.mp4" width="200px" height="200px" controls></video>

13、收集用户信息的标签

<form>
    <input type="text">单行文本框<br><br>
    <input type="password">密码框<br><br>
    <!-- 可实现单选框效果，需注意要把name设为一致才能做到 -->
    <input type="radio" name="sex">男生<input type="radio" name="sex">女生 单选框<br><br>
    <!-- 可实现多选框效果 -->
    <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>
    <!-- min设置最小值 max设置最大值 value设置当前值 -->
    <input type="range" min="0" max="100" value="90">滑块<br><br>
    <!-- step步长 -->
    <!-- step="5" 设置点击一次上下变动值为5 -->
    <input type="number" min="0" max="100" value="10" step="5"> 数字<br><br>
    <select>
    <!-- 下拉框效果 -->
    <option value="">数学</option>
    <option value="">语文</option>
    <option value="">英语</option>
    </select><br><br>
    <!-- 一个可以在浏览器手动调节大小的多行文本域
        rows="10" 最多有10行 cols="50" 一行最多50个
     -->
    <textarea rows="10" cols="50"></textarea>多行文本域<br><br>
    <input type="button" value="普通按钮">
    <!-- 重置按钮，点击后刷新页面恢复数值 -->
    <input type="reset" value="重置按钮">
    <input type="submit" value="提交按钮">
    </form>