IT评测·应用市场-qidao123.com技术社区

标题: 【前端】HTML标签汇总 [打印本页]

作者: 千千梦丶琪 时间: 2024-11-12 07:56
标题: 【前端】HTML标签汇总
目录
展示用户信息的标签
1.文本标签 span
2.标题标签 h1~h6
3.竖着结构的标签 div
4.段落标签 p
5.超链接标签 a
5.1跳转至网上的资源
5.2锚点
6.列表标签
6.1有序列表 ol
6.2无序列表 ul
7.图片标签 img
7.1相对路径
7.1.1兄弟关系
7.1.2叔侄关系
7.1.3表兄弟关系
7.2绝对路径
8.表格标签
8.1形成一个表格
8.2表格的巨细以及边框
8.3表格的优化
8.4单元格合并
8.4.1行合并 rowspan
8.4.2列合并 colspan
9.框架标签 \ 窗口标签 iframe
网络用户信息的标签
1.input + type
1.1.单行文本框 text
1.2.密码框 password
1.3.单选框 radio
1.4.复选框 checkbox
1.5.文件选择器 file
1.6.颜色拾取器 color
1.7.日期选择器 date
1.8.日期时间选择器 datetime-local
1.9.周选择器 week
1.10.滑块 range
1.11.数字输入框 number
2.下拉框 select
3.多行文本域 textarea
4.按钮
4.1普通按钮 button
4.2重置按钮 reset
4.3提交按钮 submit
音频和视频
1.音频 audio
2.视频 video

展示用户信息的标签

1.文本标签 span

<span>hello</span>

复制代码

可以添加 style 样式

<span style="color : green">hello</span>

复制代码

2.标题标签 h1~h6

<h1>h1标题</h1>

复制代码

逐级减小, h4标题和文本一样大 .
3.竖着结构的标签 div

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

复制代码

4.段落标签 p

<p>段落标签</p>

复制代码

段落标签是竖着结构的, 不同点是两个段落之间有较大的空隙
5.超链接标签 a

5.1跳转至网上的资源

<a href="https://www.baidu.com/">超链接至百度</a>

复制代码

href 里面写想要跳转的网址,这里以百度为例
在这里我们没有写 target 属性, 以是 target 会取默认值 _self 导致在本窗口打开新的网站. 为了在新窗口打开,我们把 target 取值为 _blank, 如下

<a href="https://www.baidu.com/" target="_blank">超链接至百度</a>

复制代码

5.2锚点

为了实现同一页面上不同位置的跳转, 我们使用 name 属性标记需要到达的地方

<a name="aaa"></a>

复制代码

然后使用超链接传送到目标位置

<a href="#aaa">跳转到aaa</a>

复制代码

当多个超链接叠放在一起时, 它们会在同一行显示

为了让不同超链接竖着结构, 我们添加

<a href="#aaa">跳转到aaa</a><br><a href="#bbb">跳转到bbb</a><br><a href="#ccc">跳转到ccc</a>

复制代码

为了让超链接固定在网页的某个位置,我们可以添加 style 属性, 如下

<a href="#aaa" style="position: fixed; right: 100px; bottom: 50px;">跳转到aaa</a>

复制代码

当多个超链接叠放在一起时, 我们可以把它们放在一个块级元素中

<span style="position: fixed; right: 100px; bottom: 50px;"> <a href="#aaa">跳转到aaa</a><br> <a href="#bbb">跳转到bbb</a><br> <a href="#ccc">跳转到ccc</a> </span>

复制代码

6.列表标签

6.1有序列表 ol

<ol>
<li>这是有序标签</li>
<li>这是有序标签</li>
<li>这是有序标签</li>
</ol>

复制代码

ol 即 Ordered Labels

为了把标签前面的序号修改为巨细写字母或其他符号, 我们可以使用 type 关键字, 比方

<ol type="a"></ol>

复制代码

除此之外,我们还可以使用 start 标签控制编号从几开始, 比方

<ol type="a" start="2">
<li>这是有序标签</li>
<li>这是有序标签</li>
<li>这是有序标签</li>
</ol>

复制代码

6.2无序列表 ul

<ul>
<li>这是无序标签</li>
<li>这是无序标签</li>
<li>这是无序标签</li>
</ul>

复制代码

7.图片标签 img

在 src 属性里写资源路径, 路径分为相对路径和绝对路径. 图片加载失败时, 显示 alt 属性里面的内容.
7.1相对路径

在相对路径中, 图片与图片有三种位置关系, 分别是兄弟关系叔侄关系表兄弟关系
7.1.1兄弟关系

当 html 文件和 jpg 文件在同一个包中, 它们之间是兄弟关系, 形如
html
index.html
pic.jpg

<img src="pic.jpg" alt="一张图片">

复制代码

为了控制图片的巨细,我们使用 style 属性定义宽和高, 形如

<img src="pic.jpg" alt="一张图片" style="width: 400px; height: 300px">

复制代码

7.1.2叔侄关系

当 html 文件与 jpg 的父级在同一个包中, 它们之间是叔侄关系, 形如
index.html
img
pic.jpg

<img src="img/pic2.jpg" alt="一张图片" style="width: 400px; height: 300px">

复制代码

7.1.3表兄弟关系

当 html 文件的父级与 jpg 的父级在同一个包中, 它们之间是表兄弟关系, 形如
html
          index.html
  img
          pic.jpg
  首先使用 ../ 返回上级, 然后按照叔侄关系处理

<img src="../img/pic3.jpg" alt="一张图片" style="width: 400px; height: 300px">

复制代码

7.2绝对路径

联网复制图片网址, 赋值给 src 即可
8.表格标签

8.1形成一个表格

table 是放表格的容器, tr 是表格的行, td 是表格的单元格, 没有列的概念, 如下

<table>
<tr>
<td>id</td>
<td>姓名</td>
<td>年龄</td>
<td>性别</td>
</tr>
</table>

复制代码

此为一行四列

<table>
<tr>
<td>id</td>
<td>姓名</td>
<td>年龄</td>
<td>性别</td>
</tr>
<tr>
<td>1</td>
<td>张三</td>
<td>13</td>
<td>男</td>
</tr>
<tr>
<td>9</td>
<td>李四</td>
<td>14</td>
<td>女</td>
</tr>
<tr>
<td>85</td>
<td>王五</td>
<td>15</td>
<td>男</td>
</tr>
</table>

复制代码

此为四行四列

8.2表格的巨细以及边框

为了让表格有边框, 我们添加 border 属性

<table border="1"></table>

复制代码

我们使用 width, height 控制表格的宽和高

<table border="1" width="300px" height="150px"></table>

复制代码

8.3表格的优化

相较于 <td> 标签, <th> 标签有加粗和居中的效果

<table>
<tr>
<th></th>
</tr>
</table>

复制代码

为了不让内容紧贴边框, 我们使用 cellpadding 属性控制单元格填充度

<table cellpadding="10px"></table>

复制代码

为了改变单元格间的间距, 我们使用 cellspacing 属性, 通常将其置为 0 以取消间距

<table cellspacing="0"></table>

复制代码

被 <thead> 标签包围的行在顶端显示, 被 <tfoot> 标签包围的行在底端显示, <tbody> 在中间显示
8.4单元格合并

8.4.1行合并 rowspan

rowspan 将不同行合并

<td rowspan="3"></td>

复制代码

8.4.2列合并 colspan

colspan 将不同列合并

<td colspan="2"></td>

复制代码

9.框架标签 \ 窗口标签 iframe

<iframe src=""></iframe>

复制代码

在 src 中放入目标网址, 以牛客为例

<iframe src="https://www.nowcoder.com/"></iframe>

复制代码

此时的窗口是有边框的, 为了取消边框, 我们把 frameborder 属性设置为 0

<iframe src="https://www.nowcoder.com/" frameborder="0"></iframe>

复制代码

为了修改窗口巨细, 我们调解宽高属性

<iframe src="https://www.nowcoder.com/" frameborder="0" width="1650px" height="800px"></iframe>

复制代码

我们可以使用 name 属性标识窗口, 共同超链接的target 属性到达在此窗口跳转不同链接的效果

<a href="https://www.nowcoder.com/" target="abc">跳转到牛客</a>
<a href="https://leetcode.cn/" target="abc">跳转到力扣</a>
<a href="https://www.bilibili.com/v/douga/" target="abc">跳转到bilibili</a>
<iframe src="https://www.nowcoder.com/" name="abc" frameborder="0" width="1650px" height="800px"></iframe>

复制代码

网络用户信息的标签

1.input + type

使用 input 标签网络用户信息时, 根据 type 属性的值举行区分
1.1.单行文本框 text

<input type="text"> 单行文本框

复制代码

1.2.密码框 password

<input type="password"> 密码框

复制代码

1.3.单选框 radio

使用 name 属性举行匹配, name 值相同为一组

<input type="radio" name="sex"> 男 <input type="radio" name="sex"> 女单选框

复制代码

1.4.复选框 checkbox

<input type="checkbox"> 足球 <input type="checkbox"> 篮球 <input type="checkbox"> 排球复选框

复制代码

1.5.文件选择器 file

<input type="file">

复制代码

1.6.颜色拾取器 color

<input type="color">

复制代码

1.7.日期选择器 date

<input type="date">

复制代码

1.8.日期时间选择器 datetime-local

<input type="datetime-local">

复制代码

1.9.周选择器 week

<input type="week">

复制代码

1.10.滑块 range

<input type="range">

复制代码

滑块的属性: min 最小值, max 最大值, value 滑块的默认值

<input type="range" min="0" max="100" value="80">

复制代码

1.11.数字输入框 number

数字输入框中只能输入数字

<input type="number">

复制代码

数字输入框的属性: min 最小值, max 最大值, value 输入框的默认值, step 步长

<input type="number" min="0" max="100" value="80" step="5">

复制代码

2.下拉框 select

<select>
<option>语文</option>
<option>数学</option>
<option>英语</option>
<option>体育</option>
</select>

复制代码

3.多行文本域 textarea

<textarea cols="30" rows="10"></textarea>

复制代码

4.按钮

4.1普通按钮 button

<input type="button" value="普通按钮1">

复制代码

4.2重置按钮 reset

<input type="reset" value="重置按钮2">

复制代码

重置按钮会将同一个 form 表单内的输入内容重置

4.3提交按钮 submit

<input type="submit" value="提交按钮3">

复制代码

提交按钮会将同一个 form 表单内的输入内容提交, 提交后会刷新

<form> <textarea cols="30" rows="10"></textarea> <br><br> <input type="button" value="普通按钮1"><br><br> <input type="reset" value="重置按钮2"><br><br> <input type="submit" value="提交按钮3"> </form>

复制代码

音频和视频

1.音频 audio

<audio src="" controls></audio>

复制代码

在 src 中写资源路径, 加入 controls 属性后手动控制音频播放

将 controls 属性改为 autoplay 属性, 进入网页自动播放

<audio src="" autoplay></audio>

复制代码

2.视频 video

<video src="" controls width="500px" height="100px"></video>

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

欢迎光临 IT评测·应用市场-qidao123.com技术社区 (https://dis.qidao123.com/)