title: 常用标签详解
date: 2021-11-13 12:49:08
permalink: /pages/3daa61/
categories:

  • web前端
  • HTML5
    tags:

常用标签详解

1. 标题标签 <h1> to <h6>

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title></title>
  6.     </head>
  7.     <body>
  8.         <h1>这是 1 级标题</h1>
  9.         <h2>这是 2 级标题</h2>
  10.         <h3>这是 3 级标题</h3>
  11.         <h4>这是 4 级标题</h4>
  12.         <h5>这是 5 级标题</h5>
  13.         <h6>这是 6 级标题</h6>
  14.     </body>
  15. </html>

3.常用标签详解 - 图1

2. 段落 标签 <p> 、 换行 标签 <br />

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title></title>
  6.     </head>
  7.     <body>
  8.         <p>这个段落里主要说的是 换行标签 <br>
  9.         HTML <br>标记在HTML文档中的文本内定义换行符。
  10.     </body>
  11. </html>

3.常用标签详解 - 图2

3. 文本格式化标签 <strong> 、<em> 、<del> 、<ins>

语义 标签 说明
加粗 <strong> </strong> 或者 <b> </b> 推荐使用 <strong>,语义更强烈
倾斜 <em> </em> 或者 <i></i> 推荐使用 <em>,语义更强烈
删除线 <del> </del> 或者 <s> </s> 推荐使用 <del>,语义更强烈
下划线 <ins> </ins> 或者 <u> </u> 推荐使用 <ins>,语义更强烈 
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title></title>
  6.     </head>
  7.     <body>
  8.         <strong>这是加粗字体</strong>
  9.         <b>这也是加粗字体</b>
  10.         <hr >
  11.         <em>这是斜体</em>
  12.         <i>这也是斜体</i>
  13.         <hr >
  14.         <del>这是字体删除线</del>
  15.         <s>这也是字体删除线</s>
  16.         <hr >
  17.         <ins>这是字体下划线</ins>
  18.         <u>这也是字体下划线</u>        
  19.     </body>
  20. </html>

3.常用标签详解 - 图3

4. 布局标签 <span> 、<div>

<span> 、<div> 没有具体的语义，它们就是一个盒子，用来装内容

<div> 表示分割

<span> 表示跨度，跨距

特点：

  1. <div> ：标签用来布局， 但是一行只能放一个，独占一行。 ——> 大盒子
  2. <span> ：标签用来布局，一行可以有多个， ——> 小盒子
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title></title>
  6.     </head>
  7.     <body>
  8.         <div>
  9.             我是 div ，我独占一行，大盒子
  10.         </div>
  11.         <div>
  12.             我是 div ，我独占一行，大盒子
  13.         </div>
  14.         <span>
  15.             我是 span 1 号，
  16.         </span>
  17.         <span>
  18.             我是 span 2 号，
  19.         </span>
  20.         <span>
  21.             我是 span 3 号，我们都在一行，小盒子
  22.         </span>
  23.     </body>
  24. </html>

3.常用标签详解 - 图4

5.图形标签 <img> 和 路径

图像标签的属性：

属性 属性值 说明
src 图片路径 必须属性
alt 文本 替换文本， 图片在不能显示时，显示的文字
title 文本 提示文本， 鼠标放在图片上时，显示的文字
width 像素 设置图像的宽度
height 像素 设置图像的高度
border 像素 设置图像的表框 
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title></title>
  6.     </head>
  7.     <body>
  8.         <h4>这是一个图像标签</h4>
  9.         <img src="image1.jpg" width="150" height="150" border="5" title="图像标签" />
  10.         <h4>这是 图像标签的 alt 属性</h4>
  11.         <img src="image.jpg" alt="这是一个图片" />
  12.     </body>
  13. </html>

3.常用标签详解 - 图5

图像标签的特点：

  1. 图像标签的 地址属性（src）必须写在最前边
  2. 标签与属性、属性与属性 之间必须用 空格 隔开
  3. 属性采用键值对的格式

相对路径 和 绝对路径

相对路径：

相对路径分类 符号 说明
同一级路径 图像文件和HTML文件位于同一级 如 :<img src="img.jpg"
下一级路径 / 图像文件 位于 HTML 文件的下一级 如: <img src="images/img.jpg"
上一级路径 ../ 图像文件 位于 HTML 文件的上一级 如: <img src="../img.jpg"

绝对路径：

  1. 在本地文件中，以盘符作为起始的路径
  2. 网络中的 http 路径

6. 超链接 标签 <a>

<a>：定义超链接，从一个页面 链接到 另一个页面

标签属性：

属性 值 说明
href url 用于指定链接目标的 url 地址 （必须属性）
target _blank 在新窗口打开 链接
_self 在原窗口打开 链接， （默认）
_parent 在父窗口打开 链接
_top 在整个窗口打开 链接
framename 在指定窗口打开 链接
download filename 指定下载链接

链接分类：

  1. 外部链接：链接到外部网页
    1. <a href="https://www.baidu.com" target="_blank"> 百度 </a>
  1. 内部链接：网站内部的链接
    1. <a href="index.html" target="_blank"> 首页 </a>
  1. 空链接：href="#" 没有确定链接目标时
    1. <a href="#"> 百度 </a>
  1. 下载链接：地址链接的是某个文件
    1. <a href="image1.jpg"> 下载文件 </a>
  1. 网页元素的链接：将网页元素嵌套在 超链接中
    1. <a href="image1.jpg"> <img src="img.jpg"> </a>

  1. 锚点链接： 点击链接，可以快速跳转到网页中的某个位置

    1. 链接文本中，href 属性的值为 #名字 的形式
    2. 根据 href 属性值，找到标签位置 ```html 第二集

第二集 

  2. 7. 
  3. 阻止链接跳转
  4. ```html
  5. <a href="javascript:void(0);"></a>
  6. <a href="javascript:;"></a>

7. 注释标签 <!--...--> 和 特殊字符

<!--...--> : 用于代码备注 或者 使某些内容不再页面上显示

<!-- <a href="http://www.baidu.com" target="framename">百度</a> -->

常用特殊字符：

特殊字符 描述 字符代码
空格 &nbsp;
< 小于号 &lt;
> 大于号 &gt;
& 和 &amp
© 版权 &amp
™ 商标 &reg

8. 表格标签 <table>、<th>、<tr> 、<td>

表格不是用来布局页面的，而是用来展示数据的

标签 说明
<table> 定义表格
<th> 定义 表头
<tr> 定义 行
<td> 定义 单元格
<caption> 定义表格的 标题
<colgroup> 定义 列的组
<col> 定义 列的属性
<thead> 定义 页眉
<tbody> 定义 主体
<tfoot> 定义 页脚 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <table  border="1" cellspacing="0" cellpadding="0" width="300" height="150">
            <thead>
                <th>姓名</th>
                <th>年龄</th>
                <th>职业</th>
            </thead>
            <tbody>
                <tr>
                    <td>刘德华</td>
                    <td>18</td>
                    <td>演员</td>
                </tr>
                <tr>
                    <td>郭富城</td>
                    <td>20</td>
                    <td>歌手</td>
                </tr>
                <td>张学友</td>
                <td>19</td>
                <td>歌手</td>
            </tbody>
        </table>

    </body>
</html>

3.常用标签详解 - 图6

合并单元格：

rowspan ： 跨行合并，合并代码写在 最上侧的单元格

colspan ： 跨列合并， 合并代码写在最左侧的单元格

cellpadding ： 规定了 单元格边缘 与 内容 之间的空白距离，默认为 1像素

cellspacing ： 规定了 单元格 与 单元格 之间的距离， 默认为 2 像素

align ： 规定了 对齐方式

border ： 规定了 单元格 的边框， 默认为 0 像素

<table border="1" cellspacing="0" cellpadding="0" width="500" height="200" >
            <thead align="center">
                <th colspan="5" height="30" bgcolor="darkkhaki">个人简介</th>
            </thead>
            <tbody  align="center">
                <tr>
                    <td>姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名:</td>
                    <td width="100"></td>
                    <td>性&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别:</td>
                    <td width="100"></td>
                    <td rowspan="4" width="100">照片</td>
                </tr>
                <tr>
                    <td>婚姻状况:</td>
                    <td></td>
                    <td>出生年月:</td>
                    <td></td>
                </tr>
                <tr>
                    <td>民&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;族:</td>
                    <td></td>
                    <td>政治面貌:</td>
                    <td></td>
                </tr>
                <tr>
                    <td>身&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;高:</td>
                    <td></td>
                    <td>学&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;历:</td>
                    <td></td>
                </tr>
            </tbody>
        </table>

3.常用标签详解 - 图7

9. 列表标签 <ul> 、<ol> 、<dl>

表格 是用来 展示数据 的， 列表 是用来 布局 的

无序列表 <ul> 、 有序列表 <ol>

特点：

  1. 顺序不用：

    1. 无序列表：各个列表项之间没有顺序级别，是并列的
    2. 有序列表：各个列表项之间是有先后顺序的
  2. 列表标签之间 只能使用 <li> </li> 标签，其他标签或文字不允许使用；
  3. <li> </li> 标签之间可以使用任何标签
  4. 列表会自带样式属性，可以在 css 中设置

自定义列表 <dl> </dl>

<dl> 标签用于定义描述列表（或 定义列表），该标签会与 <dt>(定义项目/名字) 和 <dd>（描述每一个项目/名字）一起使用

特点：

  1. <dl> </dl> 里面 只能包含 <dt> 和 <dd>
  2. <dt> 和 <dd> 个数没有限制，经常 一个 <dt> 对应多个 <dd>
  3. <dt> 和 <dd> 在同一级别
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <table border="1" cellspacing="0" cellpadding="0" width="500">
            <caption>列表</caption>
            <thead>
                <th>无需列表</th>
                <th>有序列表</th>
                <th>自定义列表</th>
            </thead>
            <tr>
                <td>
                    <ul>
                        <li>无需列表</li>
                        <li>无需列表</li>
                        <li>无需列表</li>
                    </ul>
                </td>
                <td>
                    <ol>
                        <li>有序列表</li>
                        <li>有序列表</li>
                        <li>有序列表</li>
                    </ol>
                </td>
                <td>
                    <dl>
                        <dt>自定义列表</dt>
                        <dd>自定义</dd>
                        <dd>自定义</dd>
                        <dd>自定义</dd>
                    </dl>
                </td>
            </tr>
        </table>

    </body>
</html>

3.常用标签详解 - 图8

标签 定义 说明
<ul></ul> 无需标签 只能包含<li>,没有顺序，<li>可以包含任何标签
<ol></ol> 有序标签 只能包含<li>,有顺序，<li>可以包含任何标签
<dl></dl> 自定义标签 只能包含<dt>和<dd>,<dt>和<dd>可以包含任何标签

10. 表单标签 <form>

一个完整的表单通常由 表单域 、表单控件（表单元素）、和提示信息 3个部分构成

表单域 <form>

表单域 是一个包含 表单元素 的区域

<form> 标签用于定义表单域，以实现用户信息的收集和传递

<form> 会把它范围内的表单信息传递给服务器

语法：

<form action="url地址" method="提交方法" name="表单域名称">
    表单控件
</form>

常用属性：

属性 值 描述
action URL 规定当提交表单时向何处发送表单数据。
autocompleteHTML5 on off 规定是否启用表单的自动完成功能。
method get post 规定用于发送表单数据的 HTTP 方法。
name text 规定表单的名称。
novalidateHTML5 novalidate 如果使用该属性，则提交表单时不进行验证。
target _blank _self _parent _top 规定在何处打开 action URL。

表单元素 <input>

<input> 标签用户收集用户信息，根据不用的 type 属性值，输入字段拥有多种形式（可以是文本、复选框、单选框、按钮等等）

语法：

<imput type="属性值" />

特点：

  1. <input /> 标签为单标签
  2. type 属性通过设置不同的属性值来控制类型

<input> 常用属性：

属性 值 描述
checked checked checked 属性规定在页面加载时应该被预先选定的 <input> 元素。 (只针对 type=”checkbox” 或者 type=”radio”)
maxlength number 属性指定 <input> 元素中允许的最大字符数。
name text name 属性指定 <input> 元素的名称。
type button checkbox color date datetime datetime-local email file hidden image month number password radio range reset search submit tel text time url week type 属性规定要显示的 <input> 元素的类型。
value text 指定 <input> 元素 value 的值。

特点：

  1. name 和 value 是每个表单元素都有的属性值，主要给后台人员使用
  2. 单选框 和 复选框 要有 相同的 name 值
  3. checked 属性：主要规定了表单中的默认选择项
  4. maxlength 属性：规定了输入框的最大可输入字符数

type 属性值：

属性值 说明
button 定义可点击按钮
checkbox 定义复选框
file 定义输入字段和“浏览”按钮，供文件上传
hidden 定义隐藏的输入字段
image 定义图像形式的提交按钮
password 定义密码字段，该字段中的字符默认为掩码
radio 定义单选框按钮
reset 定义重置按钮，重置按钮会清空表单中的所有数据
submit 定义提交按钮，提交按钮会把表单数据发送到服务器
text 定义单行的输入字段，用户可以在其中输入文本

标注标签 <label>

<label>标签 为 input 元素定义 标注

  1. 用于绑定一个表单元素，当单机 <label>标签内的文本时，浏览器会自动将光标 转到 或 选择 对应的表单元素上
  2. <label> 标签的 for 属性值 与 相关元素的 id 属性值 相同

语法：

<label for="sex"> 男 </label>
<input type="radio" id="sex" />

下拉框 <select>

语法：

<select>
    <option>...</option>
    <option>...</option>
    <option>...</option>
    ...    
</select>

特点：

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

富文本 <textarea>

<textarea> 标签：用于定义多行文本的输入控件

语法：

<textarea rows="3" cols="20">
    文本内容
</textarea>

特点：

  1. cols = ”每行中的字符数“， rows = ”显示的行数“ ， 通过改变参数值可以控制窗口大小
  2. 实际开发中，不会使用 cols 和 rows 参数，通过 css 来控制窗口大小
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <form action="标题标签.html" method="get">
            <div >
                <label for="username">用户名称：</label>
                <input type="text" placeholder="请输入用户名" id="username">
            </div>
            <div >
                <label for="password">密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码：</label>
                <input type="password" placeholder="请输入密码" id="password">
            </div>
            <div >
                <label>性&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别：</label>
                <input type="radio" name="sex" checked="男" id="sex_nj" value="男">
                <label for="sex_nj"> 男 </label>
                <input type="radio" name="sex" id="sex_nv" value="nv">
                <label for="sex_nv"> 女 </label>
            </div>
            <div >
                <label>爱&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;好：</label>
                <input type="checkbox" name="aihc" id="aihc_d" value="打酱油">
                <label for="aihc_d"> 打酱油 </label>
                <input type="checkbox" name="aihc" id="aihc_m" value="摸鱼">
                <label for="aihc_m"> 摸鱼 </label>
                <input type="checkbox" name="aihc" id="aihc_f" value="发呆">
                <label for="aihc_f"> 发呆</label>
            </div>
            <div >
                <label for="jigr">籍&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;贯：</label>
                <select name="" id="jigr">
                    <option value="浙江" selected="selected">浙江</option>
                    <option value ="甘肃">甘肃</option>
                    <option value ="江苏">江苏</option>
                </select>
            </div>
            <div >
                <label>上传头像：</label>
                <input type="file">
            </div>
            <div >
                <label>验&nbsp;证&nbsp;码：</label>
                <input type="text" maxlength="6" placeholder="请输入验证码">
                <input type="button" name="" id="" value="发送验证码" />
            </div>
            <div >
                <input type="reset" maxlength="6" value="重新填写">
                <input type="submit" name="" id="" value="提交信息" />
            </div>
            <div id="">
                <label>自我介绍:</label>
                <textarea rows="" cols=""></textarea>
            </div>
        </form>        
    </body>
</html>

3.常用标签详解 - 图9