HTML基础之HTML常用标签

TML是一种用来描述网页的标记性语言。学习HTML可能并不难，主要是要记一些HTML标签和标签代表的含义。下面PHP程序员雷雪松根据使用的情况，整理出平时常用的HTML标签。

HTML基础之HTML常用标签-PHP程序员雷雪松的博客

1、最基本的HTML结构

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</body>

</html>

2、最常用的HTML标签

a、布局标签

div标签定义文档中的分区或节（division/section），可以把文档分割为独立的、不同的部分，主要用于布局。

aside标签的内容可用作文章的侧栏，<span style="color: #ff0000;">html5新增标签</span>。

header标签定义页面的头部（介绍信息），<span style="color: #ff0000;">html5新增标签</span>。

section标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分，<span style="color: #ff0000;">html5新增标签</span>。

footer 标签定义文档或节的页脚，通常包含文档的作者、版权信息、使用条款链接、联系信息等等，<span style="color: #ff0000;">html5新增标签</span>。

article标签规定文章独立的其他内容，比如：标题、内容、评论，<span style="color: #ff0000;">html5新增标签</span>。

b、文本标签

h1-h6标签可定义标题

p标签定义段落

b/strong标签加粗

em标签来表示强调的文本，斜体

strong标签表示重要文本

u标签下划线

s标签删除线

br标签表示回车换行

hr标签表示水平线

span标签被用来组合文档中的行内元素。

blockquote标签表示块引用

pre标签可定义预格式化的文本，保持原有格式的一种标签。

sub标签下标，

sup>标签上标

 表示一个空格

©表示版权符

<表示<

>表示>

c、a标签定义超链接，指定页面间的跳转。链接可以指向外部链接或者页面内部id锚点，可以在当前页面打开，新开窗口。

d、多媒体标签

img标签主要在网页中插入图像，可以定义图片替换文本、显示宽度和高度、是否带边框，建议等比例设置，否则图像会变形。

audio标签定义声音，比如音乐或其他音频流。<span style="color: #ff0000;">html5新增标签</span>。

<audio src="someaudio.wav">您的浏览器不支持 audio 标签。</audio>

video标签定义视频，比如电影片段或其他视频流。<span style="color: #ff0000;">html5新增标签</span>。

<video src="movie.ogg" controls="controls">您的浏览器不支持 video 标签。</video>

e、序列化标签

ul和li无序列表标签

<ul>

</ul>

ol和li有序列表标签，可以使用type属性规定有序列表符号的类型。1 按数字有序排列，为默认值，（1、2、3、4）；a 按小写字母有序排列，（a、b、c、d）；A 按字母大写有序排列，（A、B、C、D）。i 按小写罗马字母有序，（i, ii, iii, iv）；I 按小写罗马字母有序，（I, II, III, IV）。

<ol>

</ol>

dl标签定义了定义列表（definition list），dl标签用于结合 dt（定义列表中的项目）和 dd（描述列表中的项目）。

<dl>

<dd>用来计算的仪器 ... ...</dd>

</dl>

f、表格标签

table标签和tr标签，th标签和td标签，合并单元格。

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

g、表单标签

form标签定义提交方式、提交地址、表单字符集以及如何对其进行编码，需要提交的表单一定要放在form标签内。

input标签用于搜集用户信息

密码，输入的字符会被掩码（显示为星号或原点）

文件类型的表单，上传文件时，form表单一定要设置为enctype="multipart/form-data"

隐藏表单

提交

重置

radio单选

<input name="sex" type="radio" value="1" />男

<input name="sex" type="radio" value="2" checked="checked" />女

checkbox多选

<input name="skill" type="checkbox" value="1" checked="checked" />PHP

<input name="skill" type="checkbox" value="2" />前端

<input name="skill" type="checkbox" value="2" />数据库

<span style="color: #ff0000;">注：checked="checked"可以简写成checked</span>

label标签为input元素定义标注，如果您点击label元素文本，就会触发此input控件。

textarea标签，设置文本区内的可见行数和宽度

<textarea name="content" cols="30" rows="10">大段文本输入框</textarea>

button标签定义一个按钮

提交按钮

重置按钮

select标签和option标签下拉列表

单选菜单列表框

<option value="2" selected="selected">raykaeso</option>

</select>

多选列表下拉框，shift加鼠标单击，可以连续选择多个选择，CTRL+鼠标点击，可以点击多个。

<option value="3">raykaeso</option>

</select>

注:selected="selected"可简写成selected，表示选中

3、其他HTML事项

a、HTML标签和属性是不区分大小写的，建议HTML标签和属性都小写，属性值必须用双引号包围。

b、HTML标签都是以开始标签起始，以结束标签终止。大部分HTML标签都是成对出现的，称为双标签，比如：p标签、div标签，也有的HTML标签在开始标签中结束的标签，称为单标签，比如：hr标签、br标签。大多数 HTML 元素可拥有属性，文本内容都是写在开始标签与结束标签之间。

c、HTML标签之间尽量缩进与换行，每行代码不要过长，方便阅读和维护。

d、HTML标签使用必须符合标签嵌套规则。禁止a标签嵌套a标签，p标签嵌套div标签。

e、建议不使用HTML已经废弃的或者不赞成使用的标签，少使用table布局、iframe框架嵌套以及flash播放器。

来源：PHP程序员雷雪松的博客 -HTML基础之HTML常用标签（http://www.leixuesong.cn/2045）

例

使用 <summary> 元素：

<p>All content and graphics on this web site are the property of the company Refsnes Data.</p>

</details>

浏览器支持

目前，只有 Chrome 和 Safari 6 支持 <summary> 标签。

标签定义及使用说明

<summary> 标签为 <details> 元素定义一个可见的标题。当用户点击标题时会显示出详细信息。

HTML 4.01 与 HTML5之间的差异

<summary> 标签是 HTML5 中的新标签。

提示和注释

注释：<summary> 元素应该是 <details> 元素的第一个子元素。

全局属性

<summary> 标签支持 HTML 的全局属性。

事件属性

<summary> 标签支持 HTML 的事件属性。

如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039，我们一起飞！

lt;form> 标签用于为用户输入创建 HTML 表单。

表单能够包含 input 元素，比如文本字段、复选框、单选框、提交按钮等等。

表单还可以包含 menus、textarea、fieldset、legend 和 label 元素。

表单用于向服务器传输数据。

下面小编为大家介绍几个常用的表单标签。

<datalist>标签

这个标签规定了 <input> 元素可能的选项列表。

一般会被用来在为<input> 元素提供"自动完成"的特性。用户能看到一个下拉列表，里边的选项是预先定义好的，将作为用户的输入数据。

我们来演示一个案例，大家就知道怎么用了：

上面这个小代码，我们看得出，input标签的list属性值和datalist标签的id是一样的，没错，它们就是这样来相互关联起来的。当它们结合起来之后，不仅可以像select标签一样可以通过下拉来选择已有的选项，还可以根据用户输入的字符，对选项进行匹配筛选。

效果图如下：

有了datalist标签，我们实现这种效果起来十分简单，不需要任何的JavaScript代码也能轻松实现。

<output>标签：

标签定义不同类型的输出。比如脚本的输出、一些加减乘除的运算结果，我们都可以使用这个标签。

我们来举个例子：输入的数字乘以2后得到的结果，我们用output输出显示。

我们用oninput属性监听着表单的变化，并把得到的结果赋值到output标签的value。我们来看看效果图：

其中，output标签是可以离开form表单标签的，但是，如果你这样做的话，必须给output标签添加form属性，其属性值是与其相关联form表单的id。

我们来将output移到form表单的外面试试：

<form id="demo" oninput="b.value = parseInt(a.value)*2">
 <input type="number" name="a"> 乘以2=
</form>
<output form="demo" name="b" for="a"></output>

跟上面的代码有几处不同之处，form标签多了一个id，值为“demo”，output标签被移到了form标签外面，不再是form标签的子节点，变成了兄弟节点（当然你可以把它移到文档的其他位置）。output标签还多了一个form属性，此时，它的值正好是form标签的id值：“demo”。这种写法，代码同样是奏效的。

<keygen>标签

这个标签相信大家很少用到，但是也是为了学习，我们来了解一下就好。

这个标签规定用于表单的密钥对生成器字段。当提交表单时，私钥存储在本地，公钥发送到服务器，这种机制是专为使用基于Web的证书管理系统。

我在MDN（Mozilla Developer Network）的网站上看到了关于它的一些介绍：

There iscurrently discussion among Web browser makers whether to keep this feature ornot. Until a decision is reached, it is better to continue to consider thisfeature as deprecated and going away.

大意是：目前各大浏览器厂商还在讨论是否要保留它，在讨论结束之前，你最好还是别用它。

而另一段话则是更加直接明了：

This featurehas been removed from the Web standards. Though some browsers may still supportit, it is in the process of being dropped. Do not use it in old or newprojects. Pages or Web apps using it may break at any time.

大意是：虽然有些浏览器还支持它，但是这个特性已经被移除出web标准了，以后别使用它了。

在线咨询

上一篇：html基本单词
下一篇：html常用代码大全

您的项目需求

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

整合营销服务商

HTML基础之HTML常用标签

1、最基本的HTML结构

2、最常用的HTML标签

3、其他HTML事项

<datalist>标签

<output>标签：

<keygen>标签

您的项目需求