HTML常用标签列表

最新推荐文章于 2024-06-13 17:03:30 发布

ZhishuG

最新推荐文章于 2024-06-13 17:03:30 发布

阅读量978

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Web开发文章标签： html w3c

本文链接：https://blog.youkuaiyun.com/DataScientistYong/article/details/78627994

Web开发专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍了HTML的基本概念与常用标签，包括注释、排版、文本处理、列表、图片、表格及表单等元素的使用方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近用HTML比较多, 查了不少学习资料. 索性将整理的常用标签罗列出来, 比看W3C的文档方便一些.

注释标签

<!--注释的内容- ->;

在浏览器里面鼠标右键查看网页源代码是依然可以看见注释的内容

标签/元素

HTML的标签不区分大小写,但是为了兼容XHTML,建议大家都小写;

双标签：开始标签和结束标签一起出现，如:<font>要显示的文字 </font>

没有斜杠的是开始标签，有斜杠的是结束标签。

单标签：<br/> <hr/>,规范的写法是在右尖括号前加上反斜杠。

属性和值

属性和属性值用“=”连接,假如属性值是阿拉伯数字或英文字母可以不使用引号（单引号或双引号）,假如属性值是汉字，那么一定得加上引号,建议都使用引号。每个标签都有id,style,class等核心属性;

标准属性(通用属性)所有标签元素都具有的属性

标签属性中分了三种：

1 HTML 标准属性，可以理解成是几乎所有的HTML和XHTML都有支持的属性；

class 规定元素的类名（classname）；

id 规定元素的唯一 id

style 规定元素的行内样式（inlinestyle）

title 规定元素的额外信息（可在工具提示中显示）

以及其它的语言键盘属性等，上面是几个比较常用的属性。

2 标签上的可选和必选属性，这些属性只正对单个的标签有效果；

3 事件属性，HTML 4 的新特性之一是可以使 HTML 事件触发浏览器中的行为，比方说当用户点击某个HTML 元素时启动一段 JavaScript

嵌套标签

<p><font color='red'>你好 </font></p> 正确

<p><font color='red'>你好</p></font> 错误,浏览器很仁慈,显示没问题

注意:写标签的时候,标签与标签之间是不允许错乱嵌套.

特殊字符与转义字符

<	<	&gt	>	&	&
"	“	®	®	©	©
™	™		空格	&emsp;	空格

HTML常见标签

基本标签

:定义HML注释的标签;

<html>:定义HTML文档的根标签;

<head>:定义HTML页面的头部标签;

<title>:定义HTML页面标题,放置于<head></head>之间;

<body>:定义HTML页面主体部分;

n 设置关键字：<meta name = "keywords" content="Java"/>

n 设置描述： <meta name ="description" content="java培训"/>

n 设置作者： <meta name = "author"content="will"/>

n 设置字符集：

n 设置页面定时跳转：

排版标签

<h1>到<h6>:定义标题一到标题六,和world一致;

<p>:定义段落,有空行，使用如:<p>床前明月光</p><p>疑是地上霜</p>

<div>:定义文档中的结构;为HTML提供结构和背景;

<span>:和<div>基本相似,区别是<span>定义的节默认不换行,长度由内容决定;

<br/>:单标签,插入一个换行;

<hr/>:单标签,定义一条水平线;

<center>:网页的内容默认是居左显示,而<center></center>之间的内容居中;

<address>:表示一个地址,浏览器默认以斜体显示其包含文本;

<pre>:该标签表示的文本可”预格式化”,即该标签能保留文本中的空格,回车,制表符等字符;

文本标签

你好

<font>:用于设置字体颜色,大小,字体;

<b>:定义粗体文本;<b>我是粗体文本</b>

<i>:定义斜体文本;

~~<del>:~~定义~~删除体文~~本,即文本有中线;

<em>:定义强调文本,效果和<i>差不多;

<strong>:定义粗体文本,和<b>效果差不多;

<sup>:定义上标文本,主要做数学上的次方表达式;

<sub>:定义下标文本,主要做化学上的分子式;

<bdo>:定义文本显示方向,属性dir值有ltr(左到右)和rtl(右到左);

<blink>:可定义闪烁文本,但是有浏览器不兼容问题;

语义相关标签

超链接和锚点

a标签:可定义锚(anchor),锚有两种用法：

· 通过使用 href 属性，创建指向另外一个文档的链接（或超链接）;

· 通过使用 name 或id 属性，创建一个文档内部的书签（也就是说，可以创建指向文档片段的链接）;

<a name =”A1”>第一章内容</a>

<a name =”A2”>第二章内容</a>

<a>标签的两个重要属性:

href:它指链接的目标,也就是超链接关联的另一个资源;

target:指定使用框架集中的哪个框架来装载另一个资源;属性值有:

n _slef:表示自身,默认;

n _blank:新窗口;

n _top:顶层框架;

n _parent:父框架;

<base>:标签为页面上的所有链接指定默认地址或默认目标;<base>必须位于<head></head>标签之间;

<a>标签还可以发送邮件:

列表相关标签

中国四大名著

1) 三国

2) 演义

3) 红楼梦

4) 西游记

<ul>:定义无序列表;该元素只能包含<li>子标签;

type属性:可指定列表项目符号类型,属性值有:

l disc:表示实心圆点;● 默认

l square:表示空心圆圈;○

l circle:表示实现方块;■

<ol>:定义有序列表;该元素只能包含<li>子标签;

type属性:可指定列表项目序号类型,属性值有:

A:表示使用大写英文字母作为序号;如A、B、C 等;

a:表示使用小写英文字母作为序号;如a、b、c 等;

I:表示使用大写罗马数字作为序号;如I、II、III 等;

i:表示使用小写罗马数字作为序号;如i、ii、iii 等;

1:表示使用阿拉伯数字作为序号;如1、2、3 等;

start属性:可表示列表的起始序号;

<li>:定义列表项目,该标签可以包含多种子元素;如<li>三国演义</li>

<dl>:用于定义列表;该标签只能有<dt>,<dd>两种子标签;

<dt>:定义列表项的标题;

<dd>:定义普通列表项;

图片标签

img标签,用于向网页中嵌入一张图片;请注意,从技术上讲<img> 标签并不会在网页中插入图像,而是从网页上链接图像。

<img> 标签有两个必需的属性：src和alt:

src:该属性指定显示图片文件所在位置;

alt:该属性指定一段文本,可用于当图片不能显示时显示的提示信息;

title:鼠标在图片上会显示图片的描述信息

height:指定图片高度,可是像素值或百分比;

width:指定图片宽度,可是像素值或百分比;

<img>做图片超链接;

表格标签

<table>:用于定义表格,<table>由0或1个<caption>子标签,0到1个<thead>子标签,0到1个<tfoot>子标签,多个<tr>子标签,多个<tbody>子标签组成;

<table>常用的属性如下:

border:指定表格边框的宽度,默认是0;

cellpadding:指定单元格内容和单元格边框的间距,值可是像素或百分比;

cellspacing:指定单元格之间的间距,值可是像素或百分比;

width:指定表格的宽度,值可是像素或百分比;

<caption>:用于定义表格的标题,必须放在<table></table>之间;

<tr>:定义表格行,该标签内只能有<td>或<th>子标签;

<td>:定义单元格,放在<tr>中,表示把一行分成N个单元格;(N取决于N对<td>);

<td>常见属性如下:

n colspan:指定该单元格跨多少列,属性值是数字;

n rowspan:指定该单元格横跨的行数;

n height:指定单元格的高度;

n width:指定单元格的宽度;

<th>:定义表格页眉的单元格;用法和<td>标签一直,只是显示效果有差别;

<tbody>:定义表格的主体,该标签只能包含<tr>子元素;使用<tbody>标签可以将一个表格分成几个独立的部分;<tbody>可以讲表格里的一行或多行合并成一组,以后使用Ajax编程的时候常常需要动态修改表格的某几行,此时就得使用<tbody>标签了;

<thead>:定义表格头,用法和<tbody>一致,功能有点差别;

<tfoot>:定义表格脚,用法和<tbody>一致,功能有点差别;

<thead>,<tbody>,<tfoot>标签可以对表格的行进行分组,每对<tbody>就是一组;除此之外,当创建某个表格时.希望拥有一个标题行,以及底部的一个统计行;当打印表格式,表格头和表格脚的数据也会包含在数据的页面上;

无论<thead>,<tbody>,<tfoot>三者的先后顺序如何,页面上总会是最上面显示表格头,中间是显示表格体,最下面显示表格脚数据;一般开发中建议从上到下的顺序是:<thead>,<tfoot>,<tbody>;好处是即使网速慢没有加载出表格体的数据,但是表格头和表格脚的信息会先显示出来,以”安抚民心”;

表单标签

form标签,用于生成输入表单,该标签不可见;在HTML5之前,表单控件,如单行文本框,密码框,单选框等都必须放在<form></form>之间;常见属性如下:

n action:必填属性,表示当点击”提交”按钮时,表单数据提交到哪个地址;

n method:指定表单提交时的请求类型,该属性值有get或post,分别用于GET或POST请求,默认是get方式,开发建议使用post方式;

n enctype:指定表单数据的编码方式,属性有3个值:

application/x-www-form-urlencoded	默认,只处理表单控件里的value属性值;
multipart/form-data	以二进制流的方式处理表单数据,文件上传时必须使用该属性值;
text/plain	不对特殊字符编码,适合于表单的属性值为mailto”URL形式,也就是说该方式适用于表单邮件的发送;