002HTML常用标签

小何在线

已于 2022-02-03 14:44:55 修改

阅读量5k

点赞数 3

分类专栏： HTML5 文章标签： html

于 2021-09-21 00:17:13 首次发布

本文链接：https://blog.csdn.net/Hyc_cheng/article/details/120391015

版权

HTML5 专栏收录该内容

41 篇文章 0 订阅

订阅专栏

一、标题标签

为了使网页更具有语义化，我们经常会在页面中用到标题标签。HTML 提供了 6 个等级的网页标题

<h1> - <h6>

<h1> 我是一级标题 </h1>

单词 head 的缩写，意为头部、标题。
标签语义：作为标题使用，并且依据重要性递减。

特点：

加了标题的文字会变的加粗，字号也会依次变大。
一个标题独占一行。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="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>
    <h1>标题一共六级选，</h1>
    <h2>文字加粗一行显，</h2>
    <h3>由大到小依次减，</h3>
    <h4>从重到轻随之变。</h4>
    <h5>语法规范书写后，</h5>
    <h6>具体效果刷新见。</h6>
</body>
</html>

<body>
    <h1> 一级标题</h1>
    <h2> 二级标题</h2>
    <h3> 三级标题</h3>
    <h4> 四级标题</h4>
    <h5> 五级标题</h5>
    <h6> 六级标题</h6>
</body>

二、段落标签

在网页中，要把文字有条理地显示出来，就需要将这些文字分段显示。在 HTML 标签中，p标签用于定义段
落，它可以将整个网页分为若干个段落

<p>段落标签</p>

p:指的是 paragraph [ˈpærəɡræf] ，意思是段落。

特点：
1、文本在一个段落中会根据浏览器窗口的大小自动换行。
2、段落和段落之间保有空隙。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>段落标签Demo</title>
</head>
<body>
    <h2>基本信息</h2>
<p>刘德华（Andy Lau），1961年9月27日出生于中国香港，籍贯广东新会，华语影视男演员、歌手、制片人、作词人。</p>
<p>1981年出演电影处女作《彩云曲》。1983年主演的武侠剧《神雕侠侣》在香港取得62点的收视纪录 [1-2]  。1991年创办天幕电影公司 [3]  。2000年凭借警匪片《暗战》获得第19届香港电影金像奖最佳男主角奖 [5]  。2004年凭借剧情片《大块头有大智慧》获得第23届香港电影金像奖最佳男主角奖 [271]  ，同年凭借警匪片《无间道3：终极无间》获得第41届台湾电影金马奖最佳男主角奖 [6]  。2005年获得香港UA院线颁发的全港最高累积票房香港男演员奖 [7]  。2006年获得釜山国际电影节亚洲最有贡献电影人奖 [8]  。2012年凭借剧情片《桃姐》获得金马奖、金像奖最佳男主角奖 [9]  ；同年担任第49届台湾电影金马奖评审团主席 [10]  。</p>
<p>1985年发行首张个人专辑《只知道此刻爱你》 [11]  。1990年凭借专辑《可不可以》在歌坛获得关注 [12]  。1994年获得十大劲歌金曲最受欢迎男歌星奖。1995年在央视春晚上演唱其代表作《忘情水》 [13]  。2000年被《吉尼斯世界纪录大全》评为获奖最多的香港男歌手 [14]  。2004年第六次获得十大劲歌金曲最受欢迎男歌星奖。2015年第5次登上央视春晚并演唱歌曲《回家的路》 [15]  。2020年发行个人首张数字专辑《演·唱》 [261]  。</p>
<p>演艺事业外，刘德华关心公益慈善。1994年创立刘德华慈善基金会。2000年被评为世界十大杰出青年 [16]  。2005年发起亚洲新星导计划 [17]  。2008年被委任为香港非官守太平绅士 [18]  。2010年获得第12届世界杰出华人奖 [19]  。2016年连任中国残疾人福利基金会副理事长 [16]  。</p>
</body>
</html>

三、换行标签

在HTML中，一个段落中的文字会从左到右依次排列，直到浏览器窗口的右端，然后才自动换行，如果希望某段文本强制换行显示，就需要使用换行标签

<br  />

br: 单词break的缩写，意思是打断，换行。

特点：

1、<br />是个单标签。
2、<br />标签只是简单地开始新的一行，跟段落不一样，段落之间会插入一些垂直的间距。

四、文本格式化标签

在网页中，有时需要文字设置粗体、斜体、下划线等效果，这时就需要用到HTML中的文本格式化标签，使文字以特殊的方式显示。
标签语义：突出重要性，比普通文字更重要。
在这里插入图片描述
en指的是 emphasize [‘emfəsaɪz] 强调，用倾斜来起到强调作用。
del指的是delete,意思是删除。
ins指的是insert，插入 ins标签准确来说是:插入字效果。
u 指的是 underline ,意思是下划线。

五、盒子标签

div 和 span是没有语义的。它们就是一个盒子，用来装内容的。

<div>这是头部</div>
<span>今日价格</span>

div 指的是 division [dɪˈvɪʒn] ,意思是分隔;分区;
span指的是span[spæn] ,意思是跨度，跨距。

<div></div> :用来布局，但是现在一行只能放一个<div>。大盒子
<span></span> : 一行可以放多个小盒子

六、图像标签

在 HTML 标签中，img 标签用于定义 HTML 页面中的图像。

 <img src="./imags/1.png" alt="替换文本（当图片不能显示时候显示的文字）" title="提示文本（鼠标放到图像上，显示的文字）" />

单词 image 的缩写，意为图像。
src 是<img>标签的必须属性，它用于指定图像文件的路径和文件名。
所谓属性：简单理解就是属于这个图像标签的特性。

在这里插入图片描述
图像标签属性注意点：
① 图像标签可以拥有多个属性，必须写在标签名的后面。
② 属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开。
③ 属性采取键值对的格式，即 key=“value" 的格式，属性 =“属性值”。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图像标签Demo</title>
</head>
<body>
    <div> 
        <img src="./imags/1.png" alt="替换文本（当图片不能显示时候显示的文字）" title="提示文本（鼠标放到图像上，显示的文字）" />
        <img src="./imags/2.png" alt="替换文本（当图片不能显示时候显示的文字）">
        <img src="./imags/3.png" alt="替换文本（当图片不能显示时候显示的文字）">
        <img src="./imags/4.png" alt="替换文本（当图片不能显示时候显示的文字）">
        <img src="./imags/5.png" alt="替换文本（当图片不能显示时候显示的文字）">
        <img src="./imags/6.png" alt="替换文本（当图片不能显示时候显示的文字）">
    </div>
   
</body>
</html>

效果：
在这里插入图片描述

七、超链接标签

在 HTML 标签中，a 标签用于定义超链接，作用是从一个页面链接到另一个页面。

<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>

单词 anchor [ˈæŋkə(r)] 的缩写，意为：锚。

href 超链接地址 hypertext reference [ˈhaɪpərtekst ˈrefrəns] 超链接 a标签的属性
在这里插入图片描述

链接分类

外部链接: 例如< a href="http:// www.baidu.com "> 百度</a >。
内部链接:网站内部页面之间的相互链接. 直接链接内部页面名称即可，例如 < a href="index.html"> 首页 </a >。
空链接: 如果当时没有确定链接目标时，< a href="#"> 首页 </a > 。
下载链接: 如果 href 里面地址是一个文件或者压缩包，会下载这个文件。
网页元素链接: 在网页中的各种网页元素，如文本、图像、表格、音频、视频等都可以添加超链接.
锚点链接: 我们点击链接,可以快速定位到页面中的某个位置.

在链接文本的 href 属性中，设置属性值为 #名字 的形式，如<a href="#two"> 第2集 </a>
找到目标位置标签，里面添加一个 id 属性 = 刚才的名字 ，如：<h3 id="two">第2集介绍</h3

<a href="imags.rar">
	<img src="./imags/3.png" alt="替换文本（当图片不能显示时候显示的文字）">
</a>

    <div> 
        <img src="./imags/1.png" alt="占不支持显示该图片" title="提示文本 记得购买" />
        <a href="http://www.igdmfg.com/" target="_blank">
            <img src="./imags/2.png" alt="占不支持显示该图片" title="提示文本 记得购买" />
        </a>
        <a href="imags.rar"><!-- 超链接下载文件 -->
            <img src="./imags/3.png" alt="占不支持显示该图片" title="提示文本 记得购买" />
        </a>
       
        <img src="./imags/4.png" alt="占不支持显示该图片" title="提示文本 记得购买" />
        <img src="./imags/5.png" alt="占不支持显示该图片" title="提示文本 记得购买" />
        <img src="./imags/6.png" alt="占不支持显示该图片" title="提示文本 记得购买" />

    </div>

八、锚点链接

作用：点击链接，可以快速定位到页面中的某个位置

在链接文本的href属性中，设置属性值为 #名字
找到目标位置标签，里面添加一个 id属性=刚才的名字

<a href = "#two">第二季</a>
<h3 id = "two">第二季介绍</h3>

九、注释

如果需要在 HTML 文档中添加一些便于阅读和理解但又不需要显示在页面中的注释文字，就需要使用注释标签。

注释快捷键为 ctrl + /
注释以 <!-- 开始，以--> 结束

<!-- 注释语句 --> 快捷键: ctrl + /

一句话: 注释标签里面的内容是给程序猿看的, 这个代码是不执行不显示到页面中的.
添加注释是为了更好地解释代码的功能，便于相关开发人员理解和阅读代码，程序是不会执行注释内容的。
在这里插入图片描述

十、特殊字符

在这里插入图片描述
重点记住：空格、大于号、小于号这三个，其余的使用的很少，如果需要使用回头查阅即可

十一、表格标签

table：用来定义表格的标签
tr ：table row 用来定义表格中的行，必须嵌套在标签table中
td：table data 用来定义表格中的单元格，必须嵌套在tr标签中
th：table head 用来定义表格中的表头，表头单元格里面的内容加粗居中显示

    <table>
        <tr><th>姓名</th> <th>年龄</th> <th>性别</th></tr> 
        <tr><td>张三</td> <td>20</td>   <td>男</td> </tr>
        <tr><td>李四</td> <td>25</td>   <td>男</td> </tr>
        <tr><td>如花</td> <td>30</td>   <td>女</td> </tr>           
    </table>

1、表格属性

表格标签的属性实际开发并不常用，因为基本都是通过后面的CSS来设置的。
在这里插入图片描述

    <table border="1" align="center" width="600" cellspacing="0">
        <tr><th>姓名</th> <th>年龄</th> <th>性别</th></tr> 
        <tr><td>张三</td> <td>20</td>   <td>男</td> </tr>
        <tr><td>李四</td> <td>25</td>   <td>男</td> </tr>
        <tr><td>如花</td> <td>30</td>   <td>女</td> </tr>           
    </table>

效果：
在这里插入图片描述

2、表格结构标签

为了更好的表示表格的语义，可以将表格分割成表格头部和表格主体两大部分

用 <thead></thead> 标签表示表格的头部区域，<thead>内部必须拥有<tr>标签，一般是位于第一行
用<tbody></tbody> 标签表示表格的主体区域，主要是用于放数据本体
以上标签都是放在<table></table>标签中

在这里插入图片描述

3、合并单元格

跨行合并：rowspan=“合并单元格的个数”
跨列合并：colspan=“合并单元格的个数”
在这里插入图片描述

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

    <table border="1" width="800" height="250" cellspacing="0" cellpadding="0">

        <tr>
            <th colspan="5">个人简历</th>
        </tr>
        <tr>
            <th width="120">姓名：</th>
            <td width="200"></td>
            <th  width="120">性别：</th>
            <td  width="200"></td>
            <th rowspan="4">照片</th>
        </tr>
        <tr>
            <th >婚姻状况：</th>
            <td></td>
            <th  >出生年月：</th>
            <td></td>
        </tr>
        <tr>
            <th>民族：</th>
            <td></td>
            <th>政治面貌：</th>
            <td></td>
        </tr>
        <tr>
            <th>身高：</th>
            <td></td>
            <th>学历：</th>
            <td></td>
        </tr>
    </table>

效果如下：
在这里插入图片描述

十二、列表标签

表格是用来显示数据的，那么列表就是用来布局的。
列表最大的特点就是整齐、整洁、有序，它作为布局会更加自由和方便。
根据使用情景不同，列表可以分为三大类：无序列表、有序列表和自定义列表。
在这里插入图片描述

在这里插入图片描述

1、无序列表

标签表示HTML页面中项目的无序列表，一般会以项目符号呈现列表项，而列表项使用
标签定义。无序列表的基本语法格式如下：

<ul>
	<li>列表项</li>
	<li>列表项</li>
	<li>列表项</li>
	<li>列表项</li>
	<li>列表项</li>
</ul>

ul 指的是 unorder list ，意思是无序的列表
li 指的是 list item ，意思是列表项

注意：

1、无序列表的各个列表项之间没有顺序级别之分，是并列的。
2、<ul>中只能嵌套<li></li>，直接在<ul></ul>标签中输入其他标签或者文字的做法是不允许的。
3、<li></li>之间相当于一个容器，可以容纳所有的元素。
4、无序列表会带有自己的样式属性，但在实际使用时，我们会使用CSS来设置。

2、有序列表

在这里插入图片描述

3、自定义列表

自定义列表的使用场景：
自定义列表常用于对术语或者名词进行解释和描述，定义列表的列表项前没有任何项目符号。
在这里插入图片描述

    <div>
        <dl>
            <dt>购物指南</dt>
            <dd>
                <a href="#">购物流程</a> 
            </dd>
            <dd>
                <a href="#">会员介绍</a>  
            </dd>
            <dd>
                <a href="#">生活旅行/团购</a>  
            </dd>
            <dd>
                <a href="#">常见问题</a>   
            </dd>
            <dd>
                <a href="#">大家电</a>   
            </dd>
            <dd>
                <a href="#">联系客服</a>   
            </dd>
    
            <dt>购物指南</dt>
            <dd>
                <a href="#">购物流程</a> 
            </dd>
            <dd>
                <a href="#">会员介绍</a>  
            </dd>
            <dd>
                <a href="#">生活旅行/团购</a>  
            </dd>
            <dd>
                <a href="#">常见问题</a>   
            </dd>
            <dd>
                <a href="#">大家电</a>   
            </dd>
            <dd>
                <a href="#">联系客服</a>   
            </dd>
    
            <dt>购物指南</dt>
            <dd>
                <a href="#">购物流程</a> 
            </dd>
            <dd>
                <a href="#">会员介绍</a>  
            </dd>
            <dd>
                <a href="#">生活旅行/团购</a>  
            </dd>
            <dd>
                <a href="#">常见问题</a>   
            </dd>
            <dd>
                <a href="#">大家电</a>   
            </dd>
            <dd>
                <a href="#">联系客服</a>   
            </dd>
    
            <dt>购物指南</dt>
            <dd>
                <a href="#">购物流程</a> 
            </dd>
            <dd>
                <a href="#">会员介绍</a>  
            </dd>
            <dd>
                <a href="#">生活旅行/团购</a>  
            </dd>
            <dd>
                <a href="#">常见问题</a>   
            </dd>
            <dd>
                <a href="#">大家电</a>   
            </dd>
            <dd>
                <a href="#">联系客服</a>   
            </dd>
    
            <dt>购物指南</dt>
            <dd>
                <a href="#">购物流程</a> 
            </dd>
            <dd>
                <a href="#">会员介绍</a>  
            </dd>
            <dd>
                <a href="#">生活旅行/团购</a>  
            </dd>
            <dd>
                <a href="#">常见问题</a>   
            </dd>
            <dd>
                <a href="#">大家电</a>   
            </dd>
            <dd>
                <a href="#">联系客服</a>   
            </dd>
        </dl>
    </div>

效果：
在这里插入图片描述

十三、表单标签

1、为什么需要表单
使用表单的目的就是为了收集用户信息。
在我们网页中，我们也需要跟用户进行交互，收集用户资料，此时就需要表单。
2、表单的组成

在这里插入图片描述
3、表单域
表单域就是一个包含表单元素的区域。
在HTML标签中，form标签用于定义表单域，以实现用户信息的收集和传递。
form标签会把它范围内的表单元素信息提交给服务器。

在这里插入图片描述

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

4、表单控件(表单元素)

<input type="属性值"  />

input输入表单元素

input是个单标签，type 属性设置不同的属性值用来指定不同的控件类型(文本字段、复选框、单选按钮、按钮等)
在这里插入图片描述
除 type 属性外，标签还有很多其他很多属性，其常用属性如下：

在这里插入图片描述
name 和 value 是每个表单元素都有的属性值，主要给后端人员使用。
name 是表单元素的名字，要求单选框和复选框要有相同的name值
checked 属性主要针对于单选框和复选框，主要作用是一打开页面，就可以默认选中某个表单元素

例子1：

注意：单选框必须都有相同的名字，否则单选功能实现不了
  性别:  男<input type="radio" name="sex" value="男"/> 女<input type="radio"name="sex" value="女"/> <br />

效果：

在这里插入图片描述

例子2：

点击了提交按钮，可以把表单域form里面的表单元素 里面的值 提交给后台服务器
<input type="submit" value="免费注册"/>

效果：
在这里插入图片描述
例子3：

重置按钮可以还原表单元素初始的默认状态
  <input type="reset" value="重新填写"/>

效果：
在这里插入图片描述

label标签

label标签为input元素定义标注。
label标签用于绑定一个表单元素，当点击label标签内的文本时，浏览器会自动将焦点（光标）转到或者选择对应的表单元素上，用来增加用户体验。

语法：

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

核心：label标签的for属性应当与相关元素的id属性相同。

    <label for="username">用户名:</label><input type="text" name="username" id="username"><br />
    <label for="passwd">密码:</label><input type="text" name="passwd" id="passwd">

效果：
在这里插入图片描述

select下拉列表

使用场景：在页面中，如果有多个选项让用户选择，并且想要节约页面空间时，我们可以使用select标签控件定义下拉列表。
语法：

<select>
	<option>选项1</option>
	<option>选项2</option>
	<option>选项3</option>
	.....
</select>

特点：
1、select标签中至少包含一对option
2、在option中定义 select = “selected” 时，当前项即为默认选中项。

 <label for="select">籍贯:</label>
 <select id="select">
         <option>广东</option>
         <!-- 默认选择东北 -->
         <option selected="selected">东北</option>
         <option>陕西</option>
 </select>

效果：
在这里插入图片描述

textarea文本域

使用场景：当用户输入内容较多的情况下，我们就不能使用文本框表单了，此时我们可以使用textarea标签。
在表单元素中，textarea标签是用于定义多行文本输入的控件。
使用多行文本输入控件，可以输入更多的文字，该控件常用于留言板，评论。

语法：

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

1、通过textarea标签可以轻松地创建多行文本输入框。
2、cols = “每行中的字符数” , rows = “显示的行数” ,我们在实际开发中不会使用，都是用CSS来改变大小。

    <form>
        <label for="mytextarea">留言板:</label>
        <textarea rows="5" cols="30" id="mytextarea"></textarea>
    </form>

效果：
在这里插入图片描述

总结：

表单元素我们学了三大组

input 输入表单元素

select 下拉表单元素

textarea 文本域表单元素

这三组表单元素都应该包含在 form 表单域里面，并且有 name 属性

十四、综合案例–注册页面

在这里插入图片描述

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="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>
    <h4> 青春不常在，抓紧谈恋爱</h4>
    <table border="1">
       
        <tr>
            <td>性别</td> 
            <td>
                <input type="radio" name="sex" id="nan"><label for="nan"> <img src="./imags/man.jpg" /> 男 </label>
                <input type="radio" name="sex" id="nv"><label for="nv"><img src="./imags/women.jpg" /> 女 </label>
            </td>
        </tr>
        <tr>
            <td>生日</td>
            <td>
                <select name="selectYear" id="selectYear" >
                    <option>--请选择年--</option>
                    <option>1990</option>
                    <option>1991</option>
                    <option>1992</option>
                    <option>1993</option>
                    <option>1994</option>
                    <option>1995</option>
                </select>
                <select name="selectMonth" id="selectMonth" >
                    <option>--请选择月--</option>
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                    <option>4</option>
                    <option>5</option>
                    <option>6</option>
                    <option>7</option>
                    <option>8</option>
                    <option>9</option>
                    <option>10</option>
                    <option>11</option>
                    <option>12</option>
                </select>
                <select name="selectDay" id="selectDay" >
                    <option>--请选择日--</option>
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                    <option>4</option>
                    <option>5</option>
                    <option>6</option>
                    <option>7</option>
                    <option>8</option>
                    <option>9</option>
                    <option>10</option>
                    <option>11</option>
                    <option>12</option>
                    <option>13</option>
                    <option>14</option>
                    <option>15</option>
                    <option>16</option>
                    <option>17</option>
                    <option>18</option>
                    <option>19</option>
                    <option>20</option>
                    <option>21</option>
                    <option>22</option>
                    <option>23</option>
                    <option>24</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>所在地区</td>
            <td><input type="text" value="北京思密达" /></td> 
        </tr>
        <tr>
            <td>婚姻状况</td>
            <td>
                <input type="radio" checked="checked" name="marriageChecked"/>未婚<input type="radio" name="marriageChecked" />已婚
                <input type="radio" name="marriageChecked" />离婚
            </td>
        </tr>
        <tr>
            <td>学历</td>
            <td><input type="text" value="幼儿园"></td>
        </tr>
        <tr>
            <td>喜欢的类型</td>
            <td>
                <input type="checkbox" name="preferCheckBox" />妩媚的
                <input type="checkbox" name="preferCheckBox" />可爱的
                <input type="checkbox" name="preferCheckBox" />小鲜肉
                <input type="checkbox" name="preferCheckBox" />老腊肉
                <input type="checkbox" name="preferCheckBox" checked="checked" />都喜欢
            </td>
        </tr>
        <tr>
            <td>自我介绍</td>
            <td><input type="textarea" value="自我介绍" rows="5" /></td>
        </tr>
        <tr>
            <td></td>
            <td><input type="submit" value="免费注册"></td>
        </tr>
        <tr>
            <td></td>
            <td><input type="checkbox" name="agreeCheckBox" checked="checked" />我同意注册条款和会员加入标准</td>
        </tr>
        <tr>
            <td></td>
            <td><a href="#">我是会员，立即登录</a></td>
        </tr>
        <tr>
            <td></td>
            <td>
                <h4>我承诺</h4>
                <ul>
                    <li>年满18岁，单身</li>
                    <li>抱着严肃的态度</li>
                    <li>真诚寻找另一半</li>
                </ul>
            </td>
        </tr>
    </table>

</body>
</html>