整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线：

HTML常用标签的汇总

.标签语义化

提到标签，很多刚入门前端开发的人，肯定都会很纳闷，这么多HTML标签我如何记住呢？我又应该根据什么依据去正确使用它呢？其实这样的问题，我刚开始和大家一样苦闷，但是在我学习Web页面开发的过程中，然后不断的积累，不断的总结，发现要想记住HTML标签以及怎样更好的去使用这些标签，需要做到以下三点：

第一点：不要死记硬背，没意义，只需要记住常用的哪几个足矣。

第二点：根据内容选择使用HTML标签，什么意思呢？见下文分解。

第三点：遵循W3C的规范。

首先，第一点咱们就不用说，不让死记硬背，就是要多写页面，多敲代码，久而久之孰能生巧，巧能生花，慢慢的你就能记住这些标签了，而且在开发页面的过程中，你们会发现，咱们最常用的也就是那么几个而已。

其次，第二点根据内容选择使用HTML标签，这一点非常关键，因为你掌握了这一点，你能很好地去使用HTML标签，并且能让页面变得很优质，这也会提高你网页被搜索引擎收录。

最后，也就是第三点，这一点自然不用怀疑，如果要想让页面更好的在不同的浏览器中呈现出一致的效果，那么必须遵循W3C的规范。

说了这么多，只是一些学习需要注意的问题，下面才是真正解开怎样去使用和记住标签这个谜团的方法。

我们在使用标签的过程中，大家会发现类似的标签，比如标题标签（h1-h6）、p（段落标签）、a（超链接标签）以及图片标签（img）等，通过这些标签的名称，咱们是不是不难理解吧，很直观的就知道这些标签该怎么，用于何处。而这些名称的含义就是我们所说的标签语义化。随着智能手机的出来，移动Web都是通过H5去开发页面，而H5中的HTML标签就比之前版本的HTML标签更加具有语义化。

那么什么是标签语义化呢？所谓的标签语义化，指的就是标签所代表的含义。咱们可以通过标签的含义，正确地去使用它。

标签语义化的作用：

  • 通过使用语义化标签，更能精准地将其把内容呈现出来。
  • 通过使用语义化标签，让页面结构更加的清晰，方便代码的阅读和维护。
  • 能让浏览器或网络爬虫更好地解析，从而更好地分析和抓取网页中的内容。
  • 使用语义化标签还能让搜索引擎得到更好的优化。

如下图所示，通过使用语义化标签和没使用任何标签，就能直观感受到语义化标签的好处。

普通的文本和使用语义化标签后的效果对比图

那么如何去判断一个页面中，语义化是否良好呢？很简单，直接扒掉CSS这层漂亮的衣服，当我们把CSS去掉后，如果页面中的结构依然组织有序，并且有良好的可读性，那么它就是非常良好的。

如何去使用这些标签呢？首先根据内容确定语义化的标签，其次再根据呈现需求，使用CSS样式。因此HTML标签并非通过死记硬背，而是通过在使用的过程中，利用HTML标签的语义化去记忆。如下图所示，通过使用语义化标签，瞬间就能把普通的文本，以更清晰的结构呈现出来。

使用语义化的普通文本，变得更为结构清晰

2.常用标签分类汇总

通常我们常见的标签有标题标签、段落标签、水平线标签、换行标签以及div和span标签，这些标签又被统称为排版标签。

在开发中，排版标签主要是和CSS搭配使用，主要是用于显示网页的整体结构，也是网页布局中常用的标签。下面我一一了解一下。

排版标签：

【1】标题标签（h1-h6）

  • 缩写来源：标题标签的英文单词是head，因此它使用它的缩写h来表示。
  • 语义：标题标签主要是用于突显标题内容，它是h1-h6（分为1级标题、2级标题、3级标题......6级标题），级别依次递减。级别越小，标题就会越小。
  • 语法格式如下：


标题标签的使用

呈现的效果如下：

呈现的效果


一句话总结：使用了标题标签的文字会加粗，会根据级别显示文字的大小，并且一行只能放一个标题。

【2】段落标签（p）

  • 缩写来源：p标签的英文单词是paragraph，表示段落的意思。
  • 语义：p标签可以把html文档分割为若干段落。在网页中要想把文字以段落的形式呈现，并且有条不紊的，那么段落就是必备的标签。
  • 语法格式如下：

p标签语法格式


【3】水平线标签（hr）

  • 缩写来源：hr的英文单词是horizontal，表示横线的意思。
  • 语义：它表示分隔线，用于将文字内容分隔开，让文档结构看起来更加清晰，层次分明。当然在网页中除了使用分隔线（hr）标签来实现，还可以通过图片插入以及CSS样式来实现，只不过使用hr标签是最简单的方式。提示：CSS样式是页面中的重点，此处主要是介绍HTML，因此暂不做详细说明。
  • 语法格式：<hr />。
  • 标签特点：它是一个单标签，hr标签默认是以水平线的样式进行显示。

【4】换行标签（br）

  • 缩写来源：br的英文单词是break，打断、换行的意思。
  • 语义：表示换行的意思。在html中，一个段落的文字会从左到右依次排列显示，直到浏览器窗口的最右端，才会自动换行。如果我们在实际开发中碰到需要将文本内容强制换行显示的，此时就可以使用换行标签实现。
  • 语法格式：<br />。
  • 标签特点：它也是一个单标签。
  • 示例：将以下内容通过br标签强制换行

文本

呈现效果：

使用br标签后的效果

【5】div和span标签

  • 缩写来源：div的英文是division，表示分割、分区的意思。span没有缩写，表示跨度、跨距和范围的意思。
  • 语义：div和span标签，没有任何语言，主要是用于网页布局使用。
  • 语法格式：<div>这是一个div盒子</div> <span>这是一个span盒子</span>
  • div和span的区别：div标签，主要是用于布局，在没有使用其它干预的情况下，一行只能放一个div。而span标签，也是用来布局，在没有任何其它的干预的情况下，一行上可以放很多span标签。此处的效果，大家可以根据语法，自行在实现查看一下对比效果。

最后给大家来一个完美的总结：

排版标签的汇总

难道这就完了吗？咱们的标签就只有这些常用的吗？那当然不是，咱们接下来再看我们的文本格式化标签。

文本格式化标签

文本格式化标签的作用：通常文本格式化标签主要用于网页中文字样式的设置，比如字体加粗、斜体或下划线等效果，当然后期也会通过CSS样式来实现，会更加完美。

常见的文本格式化标签如下：

文本格式化标签

它们分别的区别：

  • b和strong：b标签只是加粗，strong除了加粗，还具有强调的意思，更具语义化。
  • i和em：i只是让文本显示斜体的效果，而em在斜体的效果上加强了语义。
  • s和del：s只是让文本显示删除线，而得了不仅显示删除线，还加强了语义。
  • u和ins：u只是添加了下划线，而ins不仅显示了下划线，还加强了语义。

我么网页中除了排版标签、文本格式化标签，当然还少不了图片标签（img），通过图片的展示，会让整个页面更加的生动形象。那么下面再来看一下这个标签吧。

图片标签（img）

  • 缩写来源：img的英文单词是image，表示图像、影像的意思。
  • 语义：用于显示图片内容。
  • 语法格式：<img src='图像url' />，在这个的语法中，我们发现img标签使用了src属性，这个属性主要是用于指定图像的文件路径，也是img的必须属性。
  • img标签常见属性如下所示：

img标签属性

  • 标签特点：img标签主要是用于在网页中插入图像，它是一个单标签。
  • 知识点扩展：通过img标签，我们会发现，html标签除了自身外，它们还具有一些属性，这些属性，我们称为标签属性，通过标签属性可以设置标签的一些外在特性。标签属性的基本语法格式：<标签名 属性1="值1" 属性2="值2" ...>内容 </标签名>。

标签属性的特点：

  • 一个标签可以拥有多个属性，必须写在开始标签中，位于标签名后面。
  • 属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开。
  • 任何标签的属性都有默认值，省略该属性则使用默认值。
  • 标签的属性采用的是键值对的格式key="value"的形式。

图片标签属性使用

链接标签

  • 缩写来源：a标签的英文单词是anchor，表示锚、铁锚的意思。
  • 语义：表示超文本链接。
  • 语法格式：<a href ="跳转目标" target="目标窗口的弹出方式">文本或图像</a>。
  • 常见的属性：

a标签的常见属性

提示：

  • 比如添加作为外部链接，需要添加外部地址。
  • 内部链接，就是页面直接内部相互链接，因此只需要使用名称即可，比如

内部链接地址

  • 如果没有确定链接目标，通常使用"#"表示暂时空链接。
  • 除了可以创建文本链接，还可以给网页中的元素，如图像、表格、音频、视频都可以添加超链接。

注释标签

  • 注释标签：用于在HTML文档中添加一些便于阅读和理解，但又不需要显示在页面中的文字说明，此时就需要使用注释标签。它是HTML中的一种特殊标签，它不会在浏览器中显示，但是会在源代码中查看到。
  • 语法格式：

注释标签


  • 提示：注释通常是给咱们开发者看的，程序是不会执行这个代码的。

好了，各位小伙伴，今天我就给大家分享到这儿了，希望我给大家总结的内容，能帮到正在浏览我这篇内容的前端开发者，也希望你们有所收获。如果喜欢的，可以点击关注，会继续给大家分享更多的内容。

、跳出新页面：

<basetarget=”_blank”>target="_self"不跳转

<form action="xxx.htm" target="_blank">form表单提交的跳转设置

2、点击按钮跳出别的页面添加

<a href="#" onclick="openZoosUrl();return false;">

onclick="return false"

3、display:block;块级元素，也就是说它可以设置一些宽高，独占一行，比如，div元素，p元素等display:inline-block,行级元素，也就说它可以使得同样设置成行级元素的元素一起在一行，然后可以设置宽高，这个适应于制作一个导航菜单，将每个菜单项设置成行级元素。它的宽和高默认是内容的宽和高,典型的元素是表单类的元素。dispaly:inline.行级元素，不可设置宽和高，默认宽高是内容的宽和高，典型的比如，span,

4、html鼠标小手：

cursor:pointer;

5、html背景图属性：

background-size:100%;，但是你的图片宽度，高度要设置成100% ，要注意的是.php的文件里面这个background-image:url();不好用，失效，你要使用网站的绝对路径background:url('/20151106/404/image/404.png') no-repeat 4px 5px;}background:url("11111.jpg");background-repeat:no-repeat;background-size:100%;width:100%;height:100%;

这个是给页面加背景的body{padding: 0px;margin: 0px;background-color:#494949;width:100%;height:100%;}.

还有在设置背景图片的时候可以使用背景background-image:url("");这个属性来设置背景，但是图片要用gif的格式

6、按输出方式来显示文本格式:<pre></pre>横线:<hr /><q></q>双引号标签下划线<ins></ins>

7、html---position/relative/absolute/fixed/三种布局定位方式的总结relative是按照自身来说，absolute是按照浏览器来说，但是要注意的是，如果他有父级元素的话，那么他就是依照父级元素来进行改变位置的。

8、无序列表去掉前面黑点li{list-style:none;}

9、隐藏元素 - display:none或visibility:hidden

display-这个元素，设置之后原本的元素不会占用当前的空间，不会影响布局，但是后者，隐藏之后还会占用空间

10、HTML隐藏多余

Div{overflow:hidden}

10、隐藏自适应：overflow:auto;

11、关于框架的问题

这个是接受你要显示页面

indx.php是框架显示的页面，最上面，也就是没按键显示

<iframe src="index.php" style="width:100%;height:100%;border:none " name="main"></iframe>

这个是你点击之后想在哪显示后面加：target=""

<a href='../admin/shopclass/add.php' target="main">添加分类</a>

12、关于背景的高的问题，也就是说你定义了一个div但是没有搞，是为了让你的图片在上面。那么就有这个属性了

overflow:hidden;

也就是你本身是属于父级元素的，但是你float就脱离了文本，变成浮动的，所有就不会在用父子元素的空间，所以就父级加上这个overflow:hidden;

13、锚点的设置

在你想跳转的页面的地方加上：<a name="miao">

然后在你想加链接的地方加上<a href="#miao">去找锚点</a>

14.点击换验证码图片

<img src="../public/common/yzm.php" alt="" style="cursor:pointer" onclick="this.src='../public/common/yzm.php?rand='+Math.random()">

15、圆角

border-radius:5px;

16、textarea的左侧文字在最左边

style="vertical-align:top"



17、html块状元素和内联元素的总结，块状元素可以设置margin，但是使用margin的时候要符合：1.块状元素，2.有宽高，其中内联元素不能设置margin和宽高的属性，只能设置padding

  1. TML基础简介

    超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。您可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。

HTML是一个网页文件的拓展名，和txt、jpg、mp3一样，是一个文件格。.html文件就是网页文件。

2.html 的格式化标签

<!DOCTYPE>

<html>

--html是一个双标签 开始标签

<head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />

<title>

</title> --可能是标题

</head>

<body>--用来存放页面中的内容

</body>

</html> --结束标签

DOCTYPE----文档类型声明
meta标签----设置页面编码格式，关键字，以及页面的描述
<title></title>--------->标题部分
<head></head>------>页面的头部分
<body></body>------>页面的主体部分

2.内容标签

这其中<hr> <br> 是单标签

<div></div> <span></span> 无意义区块容器标签

eg:

<div id="header" style="background-color:#FFA500;">

<h1 style="margin-bottom:0;">主要的网页标题</h1></div>

HTML标记—注释标记

<!--注释语句-->
标题：
<h1>这是一个标题</h1>
<h2>这是一个标题</h2>
<h3>这是一个标题</h3>
段落：
<p>这是一个段落。</p>
<p>这是另外一个段落。</p>

HTML 链接

<!--提示:在 href 属性中指定链接的地址。-->

<a href="http://www.runoob.com">这是一个链接</a>

当您点击 HTML 页面中的某个链接时，对应的 <a> 标签指向万维网上的一个地址。

一个统一资源定位器(URL) 用于定位万维网上的文档。

URL - 统一资源定位器

scheme - 定义因特网服务的类型。最常见的类型是 http

host - 定义域主机（http 的默认主机是 www）

domain - 定义因特网域名，比如 runoob.com

:port - 定义主机上的端口号（http 的默认端口号是 80）

path - 定义服务器上的路径（如果省略，则文档必须位于网站的根目录中）。

filename - 定义文档/资源的名称

这里需要注意:使用超链接做下载,并不是超链接完成的下载功能,而是通过超链接跳转到了一个有下载功能的页面。

常见的 URL Scheme

HTML 图像

alt 属性用来为图像定义一串预备的可替换的文本。

3.HTML属性

属性实例:

HTML 链接由 <a> 标签定义。链接的地址在 href 属性中指定：<a href="http://www.runoob.com">这是一个链接</a>

4.HTML 表格

表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。表格的表头使用 <th> 标签进行定义。

<table border="1">

<tr>

<th>Header 1</th>

<th>Header 2</th>

</tr>

<tr>

<td>row 1, cell 1</td>

<td>row 1, cell 2</td>

</tr>

<tr>

<td>row 2, cell 1</td>

<td>row 2, cell 2</td>

</tr>

</table>

5.HTML 表单

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

表单元素是允许用户在表单中输入内容,比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。

文本域（Text Fields）

文本域通过<input type="text"> 标签来设定

当用户要在表单中键入字母、数字等内容时，就会用到文本域

密码字段

密码字段通过标签<input type="password"> 来定义:

<form>

FirstName: <input type="text" name="firstname"><br>

Password: <input type="password" name="pwd">

</form>

单选按钮（Radio Buttons）

<input type="radio"> 标签定义了表单单选框选项

<form>

<input type="radio" name="sex" value="male">Male<br>

<input type="radio" name="sex" value="female">Female

</form>

单选有时需要设置默认选项,需要设置checked属性:

<input type="radio" name="sex" checked ="checked"/>男

复选框（Checkboxes）

<input type="checkbox"> 定义了复选框. 用户需要从若干给定的选择中选取一个或若干选项。

<form>

<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>

<input type="checkbox" name="vehicle" value="Car">I have a car

</form>

多选框一般不需要设置默认选项,如果要设置,也是设置checked属性

提交按钮(Submit Button)

<input type="submit"> 定义了提交按钮.

当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。:

<form name="input" action="html_form_action.php" method="get">

Username: <input type="text" name="user">

<input type="submit" value="Submit">

</form>

这里需要注意的是: Submit必须要和form一起使用才能达到效果

action 设置表单提交参数路径

method 当前请求方式(同iOS开发网络请求一样,get/post)

假如您在上面的文本框内键入几个字母，然后点击确认按钮，那么输入数据会传送到 "html_form_action.php" 的页面。该页面将显示出输入的结果。

图片按钮(使用不多)

Select下拉框

selected默认选项

<select>

<option selected="selected" >选项一</option>

<option>选项二</option>

</select>

Textarea文本域

<textarea></textarea>

6.HTML 列表

HTML 支持有序、无序和定义列表:

无序列表使用 <ul> 标签

<ul>

<li>列表项</li>

<li>列表项</li>

<li>列表项</li>

</ul>

有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。

列表项项使用数字来标记。

<ol>

<li>第一个列表项</li>

<li>第二个列表项</li>

<li>第三个列表项</li>

</ol>

自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。

<dl>

<dt>Coffee</dt>

<dd>- black hot drink</dd>

<dt>Milk</dt>

<dd>- white cold drink</dd>

</dl>

去除点去除下划线

a {

text-decoration: none;

}

ul {

list-style: none;

}

7.内联样式- 在HTML元素中使用"style" 属性

HTML样式实例 - 背景颜色

<body style="background-color:yellow;">

<h2 style="background-color:red;">这是一个标题</h2>

<p style="background-color:green;">这是一个段落。</p>

</body>

HTML 样式实例 - 字体, 字体颜色 ，字体大小

我们可以使用font-family（字体），color（颜色），和font-size（字体大小）属性来定义字体的样式:

HTML 样式实例 - 文本对齐方式

<h1 style="text-align:center;">居中对齐的标题</h1>

而关于其他CSS内容,这里就简单介绍一下:

内部样式表

当单个文件需要特别样式时，就可以使用内部样式表。你可以在<head> 部分通过 <style>标签定义内部样式表:

<head>
<style type="text/css">
body {background-color:yellow;
}
p {color:blue;}
</style>
</head>

外部样式表

当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

HTML 样式标签

最后提一下什么是Web安全色?

数年以前，当大多数计算机仅支持 256 种颜色的时候，一系列 216 种 Web 安全色作为 Web 标准被建议使用。其中的原因是，微软和 Mac 操作系统使用了 40 种不同的保留的固定系统颜色（双方大约各使用 20 种）。

216 跨平台 web 安全色被用来确保：当计算机使用 256 色调色板时，所有的计算机能够正确地显示所有的颜色。


在线咨询
上一篇：在网页开发中，我们需要掌握的常用HTML标签有哪些？
下一篇：CSS标签显示模式（display）

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

推荐阅读
友情链接 海原县 宿迁 普洱 饶河县 宕昌县 秀城区 网站制作
Copyright © 2002-2019 雨点网络设计有限公司 版权所有   冀ICP备11025394号
联系电话：   E-mail：279303980@qq.com  
主营业务：技术文章网站建设、网站定制、技术文章营销型网站建设、技术文章网站优化、技术文章微商城制作、三级分销系统开发
电话沟通
在线客服