HTML常见标签

画船听雨眠aa

已于 2024-08-02 22:20:15 修改

阅读量630

点赞数 19

文章标签： html 前端

于 2024-08-02 20:08:45 首次发布

本文链接：https://blog.csdn.net/a13641376265/article/details/140873889

版权

1、文本标签（一行）

<span>hello</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>

4、段落标签 <p>

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

5、超链接标签<a>

href 设置资源路径

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

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

6、锚点标签

首先在页面设置锚点，name设置锚点值

<a name="maodian">锚点</a>

再通过超链接跳转到锚点

<a href="#maodian">跳转到锚点</a>

7、图片标签

src：引用图片的路径（绝对路径和相对路径）

alt：当图片不能正常展示时，显示alt中的内容

<img src="img/a.jpg" alt="图片不能正常展示">

8、列表标签

<ul>表示无序列表标签

<ol>表示有序列表标签

常用于重复元素的使用，使用时一般会将标签前的实心原点替换为自己的图片，方便修改样式

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

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

9、表格标签

<table>存放表格的容器

<tr>表示一行

<td>表示一个单元格

<th>单元格中的字体加粗居中（一般用于表头）

表格标签中的属性：

border表格边框

width宽

height高

cellpadding单元格填充度

cellspacing 单元格之间的间距，间距为 0 时表示挨在一起

thead tbody tfoot

rowspan 把行合并

colspan 把列合并

    <table border="1"><!--列表有边框 -->

        <tr>
            <th>id</th>
            <th>name</th>
            <th>age</th>
            <th>grade</th>
        </tr>

        <tr>
            <td>1</td>
            <td>张宇一</td>
            <td>19</td>
            <td>70</td>
        </tr>

        <tr>
            <td>2</td>
            <td>李明名</td>
            <td>20</td>
            <td>70</td>
        </tr>

        <tr>
            <td>3</td>
            <td>李华</td>
            <td>20</td>
            <td>100</td>
        </tr>

    </table>

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

cellspacing="0" 单元格之间的间距 0

<table border="1" ><!--列表有边框 -->

        <tr>
            <th>id</th>
            <th>name</th>
            <th>age</th>
            <th>grade</th>
        </tr>

        <tr>
            <td colspan="2">1</td>
            
            <td>19</td>
            <td rowspan="2">70</td>
        </tr>

        <tr>
            <td>2</td>
            <td>李明名</td>
            <td>20</td>
            
        </tr>

        <tr>
            <td>3</td>
            <td>李华</td>
            <td>20</td>
            <td>100</td>
        </tr>

    </table>

单元格合并

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

src：资源的位置

width height

frameborder="0" 去边框

<iframe src="https://www.bilibili.com/" width-"886px" height="488px" frameborder-"8" name-"aaa"></iframe>

11、音频 audio

controls 手动播放，显示播放器
autoplay 自动播放
loop 循环播放

12、视频 video

controls 手动播放，显示播放器
autoplay 自动播放
loop 循环播放

设置宽高width height

13、收集用户信息的标签

<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="8" max="100" value="90"> 滑块<br><br>	
        	<input type="number" min="0" max="100"	value="18" step="5"> 数字<br><br><!-- step步长 -->		
        	
            <select>	
        	<option value="">数学</option>	
        	<option value="">语文</option>	
        	<option value="">英语</option>	
        	</select><br><br>	
        	
            
            <textarea rows="10" cols="50"></textarea>多行文本域<br><br>	
        
        	<input type="button"value="普通按钮">	
        	<input type="reset" value="重置按钮">	<!-- 要在form表单中才能进行重置 -->	
        	<input type="submit" value="提交按钮">	
    </form>