菜鸟追梦旅行

这个屌丝很懒，什么也没留下！

热门标签

HTML常用标签_html标签

作者：菜鸟追梦旅行 | 2024-02-16 11:36:41

踩

html标签

HTML常用标签

标签语义
标题标签
段落和换行标签
文本格式化标签
`<div>` 和 `<span>` 标签
图像标签（单标签）
超链接标签（重点）
注释标签
特殊字符
表格标签（重要）
表头单元格标签
列表标签（重要）
表单标签

标签语义

标签的含义，根据标签的语义，在合适的地方给一个最为合理的标签，让页面结构更清晰
1

标题标签

html提供了六个等级的网页标题，即 <h1> - <h6>，h为head的缩写，译为头部、标题。语义：作为标题使用，并且根据重要性递减。
特点：加了标题的文字会变的加粗，字号也会依次变大，h1的字体是最大的
举例：

<!DOCTYPE html>     
<!-- 文档类型声明标签：告诉浏览器这个页面采用html5版本来显示页面 -->
<!-- 一个英文的！就可以快速的自动生成骨架 -->
<html lang="en">   
<head>
    <meta charset="UTF-8">
    <!-- utf-8万国码 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我创建的第一个页面</title>
</head>
<body>
    <h1>标题标签</h1>
    <h2>依次变小</h2>
    <h3>记得保存</h3>
    <h4>网页刷新</h4>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

其运行结果为：
标题标签

段落和换行标签

在html标签中，<p>标签用来定义段落，可以将整个网页分为若干个段落。在编写代码的过程中，文字用回车直接分段后在生成的网页界面中是不会分行的，编写过程中若敲打了一连串的空格，在网页中显示的只会有一个空格，因此一大段的文字必须使用该标签进行分段。
这张图就是没有使用标签的效果

此图是使用段落标签包裹后的结果：
换行标签 <br />，强制换行，单标签
段落标签和换行标签的区别：段落标签，两行之间的距离较大，而换行标签两行之间的距离很小。

文本格式化标签

在网页中，为文字设置粗体、斜体、下划线等效果。标签语义：突出重要性，比普通文字更重要。
1

语义	标签
加粗	`<strong></strong>`或`<b></b>`，推荐第一个
倾斜	`<em></em>`或`<i></i>`，更推荐第一个
删除线	`<del></del>`或`<s></s>`，更推荐第一个
下划线	`<ins></ins>`或`<u></u>` ，更推荐第一个

`<div>` 和 `<span>` 标签

`<div>` 和 `<span>` 是没有语义的，他们只是一个盒子，用来装内容。
1

div是division的缩写，表示分隔、分区；span为跨度、跨距。

特点
<div> 标签用来布局，但是一行只能放一个<div> ，是个大盒子
<span> 标签用来布局，一行可以有多个<span> ，是个小盒子

图像标签（单标签）

图像标签：如何在网页中插入图片？
在HTML标签中，<img>标签用于定义HTML页面中的图像

<img src="图像URL" />   **单标签**
1

其中src是图像标签的必须属性，用于指定图像文件的路径和文件名
图像标签的其他属性：

属性	说明
alt	属性值：文本；替换文本，当图像不能显示时，用该文本替换
title	属性值：文本；提示文本，当鼠标放到图像上时显示的文字
width	属性值：像素；设置图像的宽度
height	属性值：像素；设置图像的高度
border	属性值：像素；设置图像的边框粗细

注意：

1.height和width一般只设置一个即可，另一个会随之等比例缩放。若两个同时设置，容易造成图像的失真。
2.图像标签可以拥有多个属性，必须写在标签名的后面
3.属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开
4.属性采取键值对的格式，即key=“value”的格式，属性=“属性值”

<h4>这是图像标签的使用：</h4>
<img src="sakura.jpg" alt="小樱头像" title="sakura" width="100" border="12" />  
<!-- 相对路径：同级 -->
<img src="images/sakura.jpg" alt="小樱头像" title="sakura" width="100" border="12" />
<!-- 相对路径:下一级文件夹images -->
<img src="../sakura.jpg" alt="小樱头像" title="sakura" width="100" border="12" />
<!-- 相对路径:上一级目录中的一个图像 -->
<img src="../images/sakura.jpg" alt="小樱头像" title="sakura" width="100" border="12" />
<!-- 相对路径:上一级目录中的一个文件夹下的一个图像,上上级目录可写为../../  -->
<img src="C:\Users\szos\Desktop\天道.jpg" title="天道" width="100" border="12" />
<!-- 绝对路径 \ -->
<img src="https://dss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/logo_white-d0c9fe2af5.png"  width="100" border="12" />
<!-- 绝对路径:网络上的图片地址 -->
1
2
3
4
5
6
7
8
9
10
11
12
13

超链接标签（重点）

`<a>`标签用于定义超链接，从一个页面连接到另一个页面
1

链接的语法格式
<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
href：此标签的必须属性
target：指定链接页面的打开方式，其中_self为默认值，在当前页面打开，_blank为在新窗口中打开
链接的分类
1.外部链接：如https://www.baidu.com
```
    <a href="https://www.baidu.com/?tn=48021271_24_hao_pg" target="_blank">百度一下</a>
1
```
2.内部链接：网站内部页面之间的相互链接
```
    <a href="某个内部链接" target="_blank">xxxxx</a>
1
```
3.空链接：用 # 号代替
4.下载链接：如果href里面地址是一个文件或者压缩包，会下载这个文件
```
     <a href="文件.exe或者是zip等压缩包形式的链接" target="_blank">下载链接</a>
1
```
5.网页元素的链接：为图片、文本、表格、音频、视频等添加超链接
6.锚点链接：点击此链接，可快速定位到页面中的某个位置。使用步骤：（1）在链接文本的href属性中，设置属性值为 #名字 的形式，如<a href="#life">个人生活</a> (2)找到目标位置标签，在该标签里面添加一个id属性=刚才的名字，如：<h3 id="life">个人生活状态</h3>
如何跳转回去呢？

注释标签

 <!--这是注释，不会在页面中显示-->  快捷键：Ctri+/
1

特殊字符

特殊字符
注意结尾分号，空格、大于号、小于号一定要记住！
在网页中想要显示"<p>"这个内容，可以写成<p>

表格标签（重要）

表格的主要作用：用于显示、展示数据，整齐、可读性好。
表格的基本语法：

<table>
   <tr>
     <td>单元格内的文字</td>   td用于定义表格中的单元格，必须嵌套在tr标签中；td指表格数据（table data），即数据单元格的内容。
 ...
   </tr>    tr标签用于定义表格中的行，必须嵌套在table标签中
 ...
 </table>  table用于定义表格的标签；
1
2
3
4
5
6
7

每写一对<tr></tr>就会产生一行，在这一行当中没写一对就会产生一个单元格，写几对就会有几个单元格，也即有几列。

<table>
        <tr><td>姓名</td><td>性别</td><td>年龄</td></tr>
        <tr><td>李小狼</td><td>男</td><td>15</td></tr>
        <tr><td>木之本樱</td><td>女</td><td>12</td></tr>
</table>            此代码将会产生一个三行三列的表格
1
2
3
4
5

表头单元格标签

<th>标签标示表头部分（table head的缩写），位于表格的第一行或者第一列，表头单元格里面的文本内容加粗居中显示

<table>
        <tr><th>姓名</th><th>性别</th><th>年龄</th></tr>     表头加粗居中显示
        <tr><td>李小狼</td><td>男</td><td>15</td></tr>
        <tr><td>木之本樱</td><td>女</td><td>12</td></tr>
</table>            
1
2
3
4
5

其运行结果：
表头标签

表格结构标签
<thead>：用来标记表头部区域，把表格头部用此标签包裹起来，其内部必须有一个<tr>标签
<tbody>：用来标记表主体部分，吧把表格主体部分用此标签包裹起来
以上两个标签都需要被table标签包裹
合并单元格
（1）跨行合并：rowspan=“合并单元格的个数”
（2）跨列合并：colspan=“合并单元格的个数”
如何写出合并代码？在目标单元格上写。
跨行合并：目标单元格是合并单元格最上侧的单元格；
跨列合并：目标单元格是合并单元格最左侧的单元格；
合并单元格步骤
（1）先确定是跨行合并还是跨列合并
（2）找到目标单元格（所以该标签一定是写在td标签里面的），写上合并方式=合并的单元格数量，如：<td colspan="2"></td>
（3）删除多余的单元格

<!-- 合并单元格 -->
<table border="1" cellspacing="0" align="center" height="250"  width="500">
    <tr>
        <td></td><td colspan="2"></td>    
        <!--   <td></td><td colspan="2"></td><td></td>   跨列合并后删除了第三个单元格-->
    </tr>
    <tr >
        <td rowspan="2"></td><td></td><td></td>
        <!-- 跨行合并（第二行和第三行）  不管是跨行还是跨列合并，其标签都是写在td标签里面的 -->
    </tr>
    <tr>
        <td></td><td></td>
        <!-- <td></td><td></td><td></td> 跨行合并后删除了第三行的第一个单元格-->
    </tr>
</table>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

列表标签（重要）

列表：用来布局页面，整齐、整洁、有序。
列表可以分为三大类：有序列表、无序列表、自定义列表。
1
2

无序列表（重点）
<ul>标签标示HTML页面中项目的无序列表，一般以项目符号呈现列表项，而列表项使用<li>标签定义，其语法为：

 <ul>
        <li>列表项1</li>
        <li>列表项2</li>
        <li>列表项3</li>
    ...
 </ul>
1
2
3
4
5
6

（1）无序列表的各个列表项之间没有顺序级别之分，是并列的。
（2）<ul></ul>之间只能嵌套<li></li>，不可以输入其他标签或者文字
（3）<li></li>之间相当于一个容器，可以容纳所有元素
（4）无序列表会带有自己的样式属性，可用css设置

自定义列表（重点）
常用于对属于或名字进行解释说明
如图中每一列下面的内容都是围绕顶部的内容进行解释说明，这种模块可用自定义列表
![自定义列表](https://img-blog.csdnimg.cn/344516b039a445f89c1843203a00df11.png

语法格式：

<dl>
    <dt>关于我们</dt>         dl-dt-dd 大佬-带头大哥-弟弟
    <dd>官方微信</dd>
    <dd>联系我们</dd>
    <dd>公益基金会</dd>
</dl>
1
2
3
4
5
6

（1）<dl></dl>里面只能包含<dt>和<dd>
（2）<dt>和<dd>个数没有限制，通常是一个<dt>对应多个<dd>

有序列表（理解）
各个列表项会按照一定的顺序排列定义；用标签<ol></ol>

语法格式
     <h4>the order</h4>
    <ol>
        <li>liu</li>
        <li>li</li>
        <li>qian</li>
    </ol>
1
2
3
4
5
6
7

表单标签

用来收集用户信息
1

表单的组成：表单域、表单控件、提示信息。

（1）表单域：包含表单元素的区域。在HTML标签中，<form>标签用于定义表单域，该标签会把它范围内的表单元素信息提交给服务器。

<form action="url地址" method="提交方式" name="表单域名称">
    各种表单元素控件
</form>
1
2
3

（2）表单控件

1、input输入表单元素（单标签）：
该标签用于收集用户信息，在该标签中，包含一个type属性，根据不同的type属性值，输入字段会拥有很多种形式，可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等。
语法：<input type="属性值 " />
type相关属性：

属性值	描述
button	定义可点击按钮，多数用于通过js启动脚本
checkbox	定义复选框
file	定义输入字段和浏览按钮，供文件上传
hidden	定义隐藏的输入字段
image	定义图像形式的提交按钮
password	定义密码字段，该字段中的字符被掩码
radio	定义单选按钮
reset	定义重置按钮，重置按钮会清除表单中的所有数据
submit	定义提交按钮，提交按钮把表单数据发送到服务器
text	定义单行的输入字段，用户可在其中输入文本，默认宽度为20个字符

<input>标签的其它属性

属性	属性值	描述
name	由用户自定义	定义input元素的名称
value	由用户自定义	规定input元素的值（相当于提示信息）
checked	checked	规定此input元素首次加载时应当被选中
maxlength	正整数	规定输入字段中的字符的最大长度

只有当name属性值相同时，单选按钮才能实现单选
单选框和复选框要有相同的name值
value属性用在提交、重置按钮上可以改变按钮上的文字
checked：单选框、复选框默认被选中的内容

 sex:<input type="radio" name="sex" />man <input type="radio" name="sex"/>woman<br>
 hobby:<input type="checkbox" name="hb"/>sing <input type="checkbox" name="hb"/>hiking <input type="checkbox" name="hb"/>swim
1
2

label标签
<label>标签为input元素定义标注。用于绑定一个表单元素，当点击标签内的文本是，浏览器就会自动将光标转到对应的表单元素上，增强用户体验
<label>标签的for属性应当与相关元素的id属性相同
label 2、select下拉表单元素
在页面中，如果有多个选项让用户选择，想要节约页面空间是，可使用<select>标签控件定义下拉列表

<select>
             <option selected="selected">河北</option>   
            <option>上海</option>
            <option>北京</option>
        </select>
1
2
3
4
5

<select>中至少包含一对<option>
在<option>中定义selected="selected"时，当前项即为默认选中项

3、textarea文本域表单元素

当用户需要输入内容较多的情况下，使用此标签；可定义多行文本输入；
语法：
1
2

意见反馈：
        <textarea>
            happy
        </textarea>
1
2
3
4

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/菜鸟追梦旅行/article/detail/92785