HTML 常用标签总结

  • 前言
  • 常用标签一
    • 1、title 标签
    • 2、meta 标签
    • 3、link 标签
    • 4、script 标签
    • 5、style 标签
    • 6、换行标签
    • 7、分割线
    • 8、注释
    • 9、文本格式化标签
    • 10、特殊字符
  • 常用标签二
    • 1、标题标签 h1~h6
    • 2、段落标签
    • 3、div 标签和 span 标签
    • 3、图片标签和路径
    • 4、超链接标签
    • 5、表格标签
      • 1、表格的主要作用
      • 2、表格标签基本语法
      • 3、表格属性
      • 4、合并单元格
    • 6、列表标签
      • 无序列表
      • 有序列表
      • 自定义列表
    • 7、表单标签
      • 使用表单的目的
      • 表单的组成
      • 表单域
      • input表单控件
      • input表单元素应用
      • select下拉表单元素
      • textarea文本域元素
  • 总结

前言

学习标签是有技巧的，重点是记住每个标签的语义。根据标签的语义，在合适的地方给一个最为合理的标签，可以让页面结构更清晰。本文就介绍了HTMl的一些常用标签。部分不常用的标签，感兴趣的可以去官网学习

以下是本篇文章正文内容，下面案例可供参考

常用标签一

1、title 标签

定义了不同文档的标题，显示在浏览器标题栏

代码：

 <title>标题</title>

代码效果：

2、meta 标签

描述一些基本的元数据，元数据不显示在浏览器上但被浏览器解析

<meta/>使用实例：

<!--1、声明编码-->
<meta charset="utf-8">
<!--2、刷新当前页面-->
<meta http-equiv="refresh" content="1">

3、link 标签

定义了文档于外部资源的关系。通常用于链接样式表

代码：

 <link rel="stylesheet" href="style.css">

4、script 标签

用于加载脚本文件或写脚本代码

代码：

<!--1、加载脚本文件--><script src=""></script><!--写脚本代码--><script>var username = this.getQueryString("username");....</script>

5、style 标签

定义了HTML文档的样式引用地址，或直接添加样式来渲染HTML文档

代码：

  <style>*b {margin: 0;padding: 0;}</style>

6、换行标签

如果希望某段文字强制换行，需要使用换行标签<br/>

注：单词break的缩写，意为打断、换行

标签语义：强制换行

特点：

1、<br/>是个单标签

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

代码：

<p>这是一<br> 段文字</p>

代码效果：

7、分割线

需要在页面中添加分割线，用分割线标签<hr/>

注：单词hr意为水平分隔线

特点：

<hr/>是个单标签

代码：

<hr/>

代码效果：

8、注释

HTML中的注释以<!--开头，以-->结束

快捷键：Ctrl+/

代码：

<!--HTML的注释-->

9、文本格式化标签

在网页中，有时需要为文字设置粗体、斜体或下划线的效果。这时需要HTML中的文本格式化标签，使文字以特殊的方式显示

标签语义：突出重要性，比普通文字更重要

常用的格式化标签：

语义 标签 说明
加粗 <strong></strong>或者<b></b> 更推荐使用<strong>标签，语义更强烈
倾斜 <em></em>或者<i></i> 更推荐使用<em>标签，语义更强烈
删除线 <del></del>或者<s></s> 更推荐使用<del>标签，语义更强烈
下划线 <ins></ins>或者<u></u> 更推荐使用<ins>标签，语义更强烈
上标字 <sup></sup>
下标字 <sub></sub>

代码：

   我是 <strong>马冬梅</strong> 我现在 <b>很胖</b> <br>一下课就 <em> 歪三倒四</em> 还有一个 <i>标签也是倾斜</i> <br>不要 <del>996</del> 不要 <s>995</s> 现价<strong> 007</strong>带回家<br>天上 <ins>星河</ins> 转， <u>人间帘幕垂</u> <br>

代码效果：

10、特殊字符

在HTMl页面中，一些特殊的符号不方便直接使用，此时我们就可以使用下面的字符来代替。

特殊字符 描述 字符的代码
不间断空格 &nbsp;
全角空格（1em=16px） &emsp;
半角空格 &ensp;
> 大于号 &gt;
< 小于号 &lt;
& 和号 &amp;
‘’ 引号 &quot;
© 版权 &copy;
® 注册商标 &reg;
￥ 人民币 &yen;
™ 商标 &trade;

注：除了空格、大于号、小于号这三个，其余的使用很少

常用标签二

1、标题标签 h1~h6

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

注：

单词head的缩写，以为头部，标题

标签语义：

作为标题使用，并且依据重要性递减

特点：

1、加了标题的文字会变的加粗，字号也会依次变大。

2、一个标题独占一行

代码：

<h1>标题一共六级选，</h1>
<h2>文字加粗一行显。</h2>
<h3>由大到小以此减，</h3>
<h4>从重到轻随之变。</h4>
<h5>语法规范书写后，</h5>
<h6>具体效果刷新见。</h6>

代码效果：

标题标签与size属性的比较

代码：

<font size="7">这是7号字体</font><hr><h1>这是一号字体</h1><font size="6">这是6号字体</font><hr><h2>这是二号字体</h2><font size="5">这是5号字体</font><hr><h3>这是三号字体</h3><font size="4">这是4号字体</font><hr><h4>这是四号字体</h4><font size="3">这是3号字体</font><hr><h5>这是五号字体</h5><font size="2">这是2号字体</font><hr><h6>这是六号字体</h6><font size="1">这是1号字体</font>

代码效果：

2、段落标签

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

注：

单词paragraph的缩写，以为段落

标签语义：

把HTML文档分割为若干段落

特点：

1、文本在一个段落中会根据浏览器窗口的大小自动换行。

2、段落与段落之间有空隙

代码：

 <p>这是一个段落</p><p><a href="#"><img src="" alt="加载中..."></a></p>

代码效果：

3、div 标签和 span 标签

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

注：

单词division 的缩写是div，意为分割、分区；
span意为跨度、跨距；

特点：

1、div 标签用来布局，一行只能放一个 div 大盒子

2、span 标签用来布局，一行上可以有多个 span 小盒子

代码：

  <div>我是一个div标签。div就是一个容器，可以理解为一个盒子。特点：独占一行</div><div>div是吧，俺也一样</div><span>1:我是一个span标签。这也是一个容器，可以理解为一个装内容的盒子。特点，不会独占一行他有多长呢。内容有多少，我就有多长</span><span>2:span:俺也一样span不会独占一行。内容如果很多很多， 达到了浏览器末尾，自动换行</span>

代码效果：

3、图片标签和路径

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

注：

单词image的缩写，意为图像

必须属性：

“src”是标签的必须属性，用于指定图像文件的路径和文件名

其他属性：

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

注：

1、只设置图像的width/height属性中的一个，图像会等比例缩小或放大

2、图像标签可以拥有多个属性，必须写在开始标签的标签名的后面

3、属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开

4、属性采取键值对的格式，即key="value"的格式

路径

页面中的图片会非常多，通常我们会新建一个文件夹来存放这些图像文件（images），这时再查找图像，就需要采用“路径”的方式来指定图形文件的位置

路径可以分为：

1、相对路径：以引用文件所在位置为参考基础，而建立出的目录路径。简单来说，图片相对于HTML页面的位置

分类 符号 说明
同一路径 图像文件与HTML文件在同一级 如<img src="snowflake.jpg">
下一级路径 /或./ 图像文件位于HTML文件下一级 如 <img src="data:images/snowflake.jpg">
上一级路径 …/ 图像文件位于HTML文件上一级 如 <img src="../images/snowflake.jpg">

注：相对路径是从代码所在的这个文件出发，去寻找目标文件的

2、绝对路径：

是指目录下的绝对位置，直接到达目标位置，通常从盘符开始的路径 如：“D:\web\img\logo.png”;

或者完整的网络地址 如 “http://www.baidu.com”;

4、超链接标签

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

1、链接的语法格式

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

注：

单词anchor的缩写，意为锚

2、链接属性

属性 属性值 说明
href url 用于指定链接目标的URL地址，（必须属性）当为标签应用href属性时，它才具有超链接的功能
target _self（默认值） _blank（在新窗口打开）
rel 规定当前文档与目标 URL 之间的关系
type 规定目标 URL 的 MIME 类型

3、链接的分类

  • 外部链接

    例如：

    <a href="http://www.baidu.com">百度</a>

  • 内部链接

    网站内部页面之间的相互连接，直接链接内部页面名称即可

    例如：

    <a href="index.html">首页</a>

  • 空链接

    如果当时没有确定链接目标时

    <!--1、“#”-->
<a href="#">首页</a>
<!--2、“javascript;”-->
<a href="javascript;">首页</a>

  • 下载链接

    如果href里面的地址是一个文件或者压缩包，会下载这个文件

    <a href="xxx.zip">点击下载</a>

  • 网页元素链接

    在网页中的各种网页元素，如文本、图像、表格、音频、视频等都可以添加超链接

    • 创建图片链接

      <a href="#"><img  border="10" src="xx.jpg" alt="" width="" height="" title="">
</a>

    • 无边框的图片链接

      <a href="#"><img  border="0" src="xx.jpg" alt="" width="" height="" title="">
</a>

    • 链接到图片

      <a href="xx.jpj">连接到图片</a>

  • 锚点链接

    用法：

    1、在文档中插入id，设置锚点；

    2、在HTML文档中（或者其他HTML文档中）创建一个链接可以跳转到设有锚点的位置；

    <p id="tips"> 有用的提示部分</p>
<a href="#tips">访问有用的提示部分</a>
<a href="xx.html/#tips">访问xx.html文档中有用的提示部分</a>

5、表格标签

1、表格的主要作用

表格主要用于显示、展示数据，因为它可以让数据显示的非常的规整，可读性非常好。

2、表格标签基本语法

<table><caption>表格标题</caption><thead><tr><th>表头单元格1</th><th>表头单元格2</th></tr></thead><tbody><tr><td>普通单元格1</td><td>普通单元格2</td></tr></tbody><tfoot><tr><td>普通单元格3</td><td>普通单元格4</td></tr></tfoot>
</table>

  • 表格基础标签：

    1、<table></table>用于定义表格的标签

    2、<tr></tr>标签用于定义表格的行，必须嵌套在<table>标签中

    3、<th></th>标签用于定义表格的第一行或第一列，表头单元格里面的文本内容加粗居中显示

    4、<td></td>标签用于定义表格中的单元格，必须嵌套在标签中

    5、<caption></caption>标签用于定义表格的标题，会在表格上方显示

  • 表格结构标签：

    1、标签——表格的头部

    2、 标签——表格主体

    3、 标签——表格底部

3、表格属性

表格标签的这部分属性在开发中我们不常用，后面通过css来设置

属性名 属性值 描述
align left | center | right 规定表格相对周围元素的对齐方式
border 1或 “ ” 规定表格单元格是否拥有边框，默认为“ ”，表示没有边框
cellpadding 像素值 规定单元格边沿与其内容之间的空白，默认1像素
cellspacing 像素值 规定单元格之间的空白，默认2像素
width 像素值或百分比 规定表格的宽度

4、合并单元格

  • 跨行合并：rowspan=“合并单元格的个数”

  • 跨列合并：colspan=“合并单元格的个数”

代码：

   <table border="1" width="500" height="500" align="center" cellpadding="0" cellspacing="0"><!-- 第一行 --><tr><td></td><!-- 第二列 往后跨1列合并 把第第一行的三列 合并掉--><td colspan="2"></td><!-- <td></td> --></tr><tr><td rowspan="2"></td><td></td><td></td></tr><tr><!-- 被合并掉的单元格一定要记得 删除掉，不然会继续占有位置 挤出去其他的单元格 --><!-- <td></td> --><td></td><td></td></tr></table>

代码效果：

6、列表标签

  • 无序列表

<ul>标签表示HTML页面中项目的无序列表，一般会以项目符号呈现列表项，而列表项使用<li>标签定义

基本语法：

<ul><li>列表项1</li><li>列表项2</li><li>列表项3</li>
</ul>

注：

1、无序列表的各个列表之间没有顺序之分，是并列的；

2、<ul>中只能嵌套<li>，直接在<ul>标签中输入其他标签或者文字的做法是不被允许的；

3、<li>之间相当于一个容器，可以容纳所有元素；

4、无序列表会带有自己的样式属性，在实际使用时，我们会使用css来设置

代码：

 <ul><li>Web前端</li><li>java</li><li>python</li><li>UI设计</li></ul>

代码效果：

  • 有序列表

有序列表即为有排列顺序，其各个列表会按照一定的顺序排列定义

在HTML标签中，<ol>标签用于定义有序列表，列表排序以数字来显示，并且使用<li>标签来定义列表项

基本语法：

<ol><li>列表项1</li><li>列表项2</li><li>列表项3</li>
</ol>

注：

1、<ol>中只能嵌套<li>，直接在<ol>标签中输入其他标签或者文字的做法是不被允许的；

2、<li>之间相当于一个容器，可以容纳所有元素；

3、无序列表会带有自己的样式属性，在实际使用时，我们会使用css来设置

代码：

 <h2>粉丝排行榜</h2><ol><li>刘德华 10000</li><li>刘若英 1000</li><li>迪丽热巴 100</li><li> 古力娜扎 10 </li><li>马尔扎哈 1</li></ol>

代码效果：

  • 自定义列表

自定义列表通常用于对术语的解释和描述，定义列表的列表是没有任何项目符号

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

基本语法：

<dl><dt>名词1</dt><dd>名词1解释1</dd><dd>名词2解释2</dd>
</dl>

注：

1、<dl>里面只能包含<dt>和<dd>

2、<dt>和<dd>个数没有限制

代码：

 <!-- 自定义列表 dl  dt  dd --><dl><dt>帮助中心</dt><dd>账户管理</dd><dd>购物指南</dd><dd>订单操作</dd><dt>服务支持</dt><dd>服务1</dd><dd>服务2</dd><dd>服务3</dd></dl>

代码效果：

7、表单标签

  • 使用表单的目的

为了收集用户信息

  • 表单的组成

在HTML中，一个完整的表单通常由表单域、表单控件和提示信息3各部分构成

  • 表单域

包含表单的区域。在HTML标签中，标签用于定义表单域，以实现用户信息的收集和传递；

<form>会把它范围内的表单元素信息提交给服务器

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

常用属性：

属性 属性值 作用
action URL 指定接收并处理表单数据的服务器程序的URL地址
method get/post 设置表单数据提交的方式
name 名称 指定表单的名称，以区分同一个页面中的多个表单域

  • input表单控件

    1、input输入表单元素

    <input>用于收集用户信息

    特点：

    <input>标签为单标签，一行上可以有多个<input>小盒子

    在<input>标签中，包含一个type属性，根据不同的type属性值，输入字段拥有很多形式：

属性值 描述
button 定义可点击按钮
checkbox 复选框
file 输入字段和“浏览”按钮，供文件上传
hidden 定义隐藏的输入字段
image 图像形式的提交按钮
password 密码字段。该字段中的字符被掩码
radio 单选按钮
reset 重置按钮
submit 提交按钮
text 单行输入字段，默认宽度20个字符

其他常用属性：

属性 属性值 描述
name 自定义 input元素的名称
value 自定义 input元素的值
checked checked 规定input元素首次加载时应当被选中
maxlength 正整数 规定输入字段中的字符的最大长度

注：

1、name和value是每个表单元素都有的属性值，主要给后台人员使用

2、name表单元素的名称，要求单选按钮要有相同的name值

3、checked属性主要针对单选按钮和复选按钮

4、maxlength是用户可以在表单元素输入的最大字符数，一般较少使用

  • input表单元素应用

1、有些表单元素刚打开就默认显示几个文字

方法：

用户名：<input type="text" value="请输入用户名">

代码效果：

2、区分不同的表单

方法：

用户名：<input type="text" value="请输入用户名" name="username">

注：radio如果是一组，我们必须给他们命名相同的名字

3、单选按钮或复选按钮默认选中

方法：

性别：<input type="radio" name="sex" value="man" checked="checked">男
<input type="radio" name="sex" value="woman" checked="checked">

代码效果：

4、点击标签内的文本时，浏览器自动将焦点（或光标）转到或者选择对应的表单元素上，用来增加用户体验

方法一：

性别：
<label for="sex1">男</label>
<input type="radio" name="sex" value="man" checked="checked" id="sex1">
<label for="sex2">女</label>
<input type="radio" name="sex" value="woman" checked="checked" id="sex2">

注：标签的for属性应当与元素的id属性相同

方法二：

性别：
<label>
<input type="radio" name="sex" value="man" checked="checked">男
</label>
<label>
<input type="radio" name="sex" value="woman" checked="checked">女
</label>

代码效果：

  • select下拉表单元素

语法：

<select><option>选项一</option><option>选项二</option><option>选项三</option>
</select>

注：

1、<select>中至少包含一对<option>

2、在<option>中定义selected=“selected”时，当前页即为默认选项

代码：

 <form action="#">籍贯：<select><option value="">--请选择你的城市--</option><option value="" >河南</option><option value="">海南</option><!-- <option value="" selected="selected">云南</option> --><option value="" >云南</option><option value="" selected>安南</option></select></form>

代码效果：

  • textarea文本域元素

语法：

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

注：

1、通过<textarea>标签可以轻松创建多行文本输入框

2、cols=“每行中的字符数” ，rows=“显示的行数”，实际开发中不会使用，都是用css来改变大小

代码：

   <form action="#"><!-- cols  控制的是宽度   --><!-- rows  控制的是高度   -->自我介绍：<textarea name="introduction"  cols="10" rows="20" placeholder="听说你上得了厅堂下得了厨房为啥没对象" >兄弟你放心吧，爱情都轮不上你，疫情也没你啥事</textarea></form>

代码效果：

总结

以上就是今天要讲的内容，本文仅仅简单介绍了HTML常用的标签的使用，感兴趣的朋友可以在官网学习其他的标签。另外HTML5的标签会在后面总结，笔芯更新的进度是根据学习进度来，有时候可能会推迟，请见谅哈

HTML 常用标签标签相关推荐

  1. [Jsp] 如何在JSP页面快速输出从Servlet接收的数据_看JSTL常用C标签的威力

    JSTL的常用C标签 1)c:out 单值输出 语法: <c:out value="" /> <c:out value=""></ ...

  2. HTML一些常用的标签

    html常用的标签一般用以下这些: div.p.span.img.h1~h6.from.table.th.td.a.br.ul.li.ol.button.input.nav.main.section. ...

  3. 显示多文档标签_HTML常用基础标签，前端从入门到精通

    首先,我们来理解一下一个网页的基本组成 代码如下 一个网页是有许许多多的标签对组成的,即开始标签-结束标签,都是成对出现(当然我们后面会说的还存在单标签,表示自闭合标签,例如: ) 对上述的标签先来解 ...

  4. 网页最少要有一个html标签,PHP_网页开发人员必须知道的10个不常用HTML标签， 网页开发人员常常希望能 - phpStudy...

    网页开发人员必须知道的10个不常用HTML标签 网页开发人员常常希望能够了解并掌握多种语言,结果是,学习一门语言的所有内容是棘手的,但是却很容易发现你并没有完全利用那些比较特殊却很有用的标签. 不幸的 ...

  5. python——前端常用的标签

    1.meat标签 meta标签的使用meta标签共有两个属性:http-equiv和name;不同的属性又有不同的参数值,这些不同的参数值就实现了不同的网页功能.name属性 name属性主要用于描述 ...

  6. 前端开发~H5 ·学习笔记 ·001——【HTML介绍、常用HTML标签】

    文章目录 一.HTML介绍 1.介绍 2.HTML标签 (1).介绍 (2).嵌套 (3).属性 3.HTML文档结构 (1).完整结构 (2).<!DOCTYPE html>标签 (3) ...

  7. HTML新增便签source语义,互联网的原理,常用标签,标签分类,HTML杂项,CSS

    一.互联网的原理 1.1 什么是上网 用客户端向服务器端请求数据 客户端: 设备:PC.手机.平板.智能手表.电视.无人设备 设备的软件:浏览器.播放器 服务器端设备: 服务器端Http服务器软件: ...

  8. 常用html标签 —— 链接的颜色

    常用html标签 功能 代码 说明 空格   non-breaking space 1. <a> <a> 标签可定义锚.锚 (anchor) 有两种用法: 通过使用 href ...

  9. HTML结构及常用的标签

    Web前端开发介绍 Web概述 Web开发技术分为客户端开发技术和服务端开发技术,HTML属于客户端开发种的一种语言,客户端开发还有哪些语言呢?看下图Web开发框架: Web前端开发语言主要包含:ht ...

  10. HTML常用的标签：

    常用的标签: 1.标题标签h1-h6(重要) 为了使网页更具有语义化,我们经常会在页面中用到标题标签,HTML提供了6个等级的网页标题,即h1-h6. <h1>这是一级标题</h1& ...

最新文章

  1. 问题记录：如何比较两个字符串的相似度
  2. css3的动画详解 html直接可以运行
  3. viewport实现html页面动态缩放/meta viewport/viewport
  4. 问号在c语言中运算符,C# 运算符 ?、??、?: 各种问号的用法和说明
  5. 关于EFCore线程内唯一
  6. tomcat之 JDK8.0安装、tomcat-8.5.15安装
  7. 2016-2018年机器学习大赛TOP开源作品汇总
  8. 在LaTex中插入代码块
  9. 一些css/css3特效以及边框流光特效实现
  10. 使用Java实现经典的进程同步问题--哲学家进餐问题
  11. c语言将一句英文逆序输出,C++实现英文句子中的单词逆序输出的方法
  12. 360极速浏览器存放插件文件在电脑中位置路径
  13. linux中文件夹的作用
  14. 基于js的火星坐标、百度坐标、WGS84坐标转换
  15. mysql锁机制和索引_MySql锁机制及索引 · 十年饮冰，难凉热血
  16. Linux系统查看gcc,g++,java 等的版本
  17. 联想RD650服务器主板维修,免工具设计 徒手拆解ThinkServer RD650
  18. 计算机丢失slimage.dll,slimage.dll
  19. Dell G3-3579 安装 Ubuntu16.04 并安装显卡驱动
  20. C++(36)——有一门课不及格的学生

热门文章

  1. 仿闲鱼 底部菜单html,GitHub - 494293346/rotateMenu: 仿闲鱼首页，“底部加号弹出菜单选项” 界面，动画效果可能跟闲鱼有点不一样...
  2. 项目管理系统软件有哪些？这10款最好用的项目管理软件值得推荐
  3. java-php-python-springboot智慧问诊系统计算机毕业设计
  4. IOS开发常用工具网站
  5. ICDM‘20 AANE: Anomaly Aware Network Embedding For Anomalous Link Detection论文笔记
  6. 相比于传统的 App，基于小程序所设计导出的 App 有什么优点
  7. 白皮书：对数放大器选择方法
  8. soap php 模块,soap 应用
  9. Python-Pyecharts画图(中国地图，桑葚图，迁移图)[四]
  10. 什么叫做支路_什么是支路、回路？什么是二次回路？