常用html标签使用介绍

本文主要记录常用的html标签使用说明，用起来的时候偶尔查查。

常用html标签列表

标签

英文全拼

作用

特点

​​<html></html>​​

html

网页的根标签

所有的标签都要写在这一对根标签里面

​​<head></head>​​

head

网页的头标签

包括完档的属性和信息

​​<body></body>​​

body

网页的主题

包含文档的所有内容

​​<div></div>​​

division

定义一个区域

浏览器通常会在​​<div>​​前后放置一个换行符

​​<!-- 注释 -->​​

-

注释

单标签

​​<br>或<br/>​​

break

换行

单标签，不会在其前后创建空白行

​​<hr>或<hr/>​​

horizontal rule

添加水平线

单标签

​​<img src="">​​

image

添加图片

单标签

​​<embed src="">​​

embed

嵌入外部应用

单标签

​​<meta>​​

meta

提供有关页面的元信息

单标签，​​<meta>​​​标签通常位于​​<head>​​区域内

​​<link>​​

link

定义文档与外部资源的关系

单标签，​​<link>​​​标签只能存在于​​<head>​​区域内，不过它可出现任何次数。

​​<p></p>​​

paragraph

定义段落

自动在其前后创建空白行

​​<h1> to <h6>​​

Header 1 to Header 6

定义标题

h1在一个页面里只能出现一次

​​<strong></strong>​​

strong

文本加粗

加粗标记该文本

​​<b></b>​​

bold

文本加粗

加粗显示文本，不推荐使用

​​<em></em>​​

emphasize

文本倾斜

倾斜标记文本

​​<i></i>​​

italic

文本倾斜

倾斜显示文本，不推荐使用

​​<del></del>​​

delete

文本添加删除线

-

​​<s></s>​​

strike

文本添加删除线

不推荐使用

​​<ins></ins>​​

insert

文本添加下划线

-

​​<u></u>​​

underline

文本添加下划线

不推荐使用

​​<a href="">填写内容</a>​​

anchor

添加超链接

最好使用CSS来改变链接的样式

​​<ul></ul>​​

unordered list

定义无序列表

通常与​​<li>​​标签一起使用

​​<ol></ol>​​

ordered list

定义有序列表

通常与​​<li>​​标签一起使用

​​<li></li>​​

list item

创建列表项

可与各种列表定义标签一起使用

​​<dl></dl>​​

definition list

定义描述列表

通常与​​<dt>​​​和​​<dd>​​一起使用

​​<dt></dt>​​

definition term

定义条目

定义描述列表的项目

​​<dd></dd>​​

definition description

定义描述

对描述列表中的项目进行描述

​​<table></table>​​

table

定义HTML表格

尽可能通过样式改变表格外观

​​<tr></tr>​​

table row

定义表格的行

一个​​<tr>​​​标签包含一个或多个​​<th>​​​或​​<td>​​标签

​​<th></th>​​

table headline

定义表格每一列的标题

该标签的文本通常呈现为粗体且居中

​​<td></td>​​

table data

定义表格中的单元格数据

该标签的文本呈现为普通且左对齐

​​<caption>表格标题</caption>​​

caption

定义整个表格的标题

​​<caption>​​​标签必须直接放在​​<table>​​标签后

​​<input type="">​​

input

定义输入控件

输入字段可通过多种方式改变，取决于type属性

​​select​​

select

定义下拉列表

​​<select>​​​中的​​<option>​​标签定义了列表中的可用选项

​​<option></option>​​

option

定义下拉列表中的可用项

​​<option>​​标签不可自由定义宽高

​​<optgroup></optgroup>​​

options group

定义选项组

​​<optgroup>​​标签用于把相关的选项组合在一起

​​<textarea></textarea>​​

textarea

定义多行的文本输入控件

文本的默认字体是等宽字体

​​<form></form>​​

form

定义表单

​​<form>​​可以包含多个元素

​​<fieldset></fieldset>​​

field set

定义围绕表单中元素的边框

​​<legend>​​​为​​<fieldset>​​定义标题

​​<legend></legend>​​

legend

为​​<fieldset>​​定义标题

​​<legend>​​通过css设定样式

​​<progress></progress>​​

progress

定义运行中的任务进度

​​<progress>​​​是HTML5中的新标签，​​<progress>​​标签不适合用来表示度量衡

​​<meter></meter>​​

meter

度量衡

​​<meter>​​​是HTML5的新标签，​​<meter>​​标签不适合用来表示进度条

​​<audio></audio>​​

audio

添加音频

​​<audio>​​标签是HTML5的新标签

​​<video></video>​​

video

添加视频

​​<video>​​标签是HTML5的新标签

​​<source>​​

source

定义媒介资源

​​<source>​​标签是HTML5中的新标签

常用标签使用说明

  • 常用写法：​​<img src="" alt="" title=""width="" height=""​​>
  • src：图片的来源（必写属性）
  • alt：图像不显示时的替代文本
  • title：鼠标在移动到元素上的文本提示
  • width/height：图片宽高，没有定义宽高的时候，图片按照百分之百比例显示，更改图片的宽度或者高度，图片等比例缩放

普通用法

  • 常用写法：​​<a href="" title="" target="">填写内容</a>​​
  • href：去往的路径（必写属性）
  • title：鼠标在移动到元素上的文本提示
  • target：规定在何处打开路径
  • _blank：新页面打开
  • _parent：在父窗口中打开链接
  • _self：当前页面跳转（默认值）
  • _top：在当前窗体打开链接，并替换当前的整个窗体
  • 当href的值为javascript:void(0); 或 javascript:; ，表示超链接不做任何事情，不做任何跳转
  • 当href的值为#，表示超链接为空链接，点击此链接时会跳转到页首的位置

锚点链接

锚点链接通过点击超链接，自动跳转到我们设置锚点的位置，类似于word的目录导航。建立锚点的元素必须要有id或name属性，最好两个都有。这里只跳转本页面元素，其他页面跳转自行搜索。
具体做法如下：

  1. 给目标元素设置id值，如​​<p id="id1"></p>​​
  2. 设置锚点超链接，锚点的超链接路径一定包含"#"，后面紧跟元素的id或者name，如​​<a href="#id1"></a>​​

示例如下。为了显示效果，通过使用lorem自动生成随机文本（具体使用方法搜索，一般直接输入就行），lorem*50表示重复lorem15次。

<a href="#id2">a</a>

  <p id="id1">
    (lorem*15)
  </p>

     (lorem*15)

  <p id="id2">
     (lorem*15)
  </p>

超链接全局设置

在页面head中写入代码可以设置超链接的全局跳转设置

<head>
  <!-- 让页面所有的超链接新页面打开 -->
  <base target="_blank">  
</head>

charset编码

  • 常用写法： ​​<meta charset="UTF-8">​​
  • charset：定义文档的字符编码
  • ASCII/ANSI/Unicode：英语
  • GBK：亚洲通用字符集
  • GB2312：中文简体
  • Big5：台澳港繁体
  • UTF-8：世界通用字符集

name

  1. 关键字
  • 常用写法： ​​<meta name="keywords" content="">​​
  • 描述：告诉搜索引擎网页的关键字，尽量将重要的关键词放在前面
  1. 网页描述
  • 常用写法： ​​<meta name="keywords" content="">​​
  • 描述：告诉搜索引擎网页的主要内容
  1. 作者
  • 常用写法： ​​<meta name="author" content="">​​
  • 描述：告诉搜索引擎网页的作者
  1. 文件检索
  • 常用写法： ​​<meta name="robots" content="all | none | index | noindex | follow | nofollow">​​
  • 描述：有时候会有一些站点内容，不希望被ROBOTS抓取而公开。为了解决这个问题，ROBOTS开发界提供了两个办法：一个是robots.txt，另一个是The Robots META标签。
  • content: 文件检索方式
  • all：文件将被检索，且页面上的链接可以被查询 （默认值）
  • none：文件将不被检索，且页面上的链接不可以被查询
  • index：文件将被检索；
  • noindex：文件将不被检索，但页面上的链接可以被查询
  • follow：页面上的链接可以被查询
  • nofollow：文件将不被检索，页面上的链接可以被查询

网页自动跳转

  • 常用写法： ​​<meta http-equiv="Refresh" content="3;url=http://www.baidu.com" />​​
  • 描述：网页5秒后自动跳转到谷歌主页
  • url：为空则刷新本页
  • 常用写法：
  • 描述：规定当前文档与被链接文档/资源之间的关系
  • rel：定义当前文档与被链接文档之间的关系。rel 是 relationship的英文缩写（必写属性）
  • type：规定被链接文档的类型
  • href：链接的文件路径
  • 示例：
  • 链接外部样式表：​​<link rel="stylesheet" type="text/css" href="a.css">​​
  • 设置网页icon图标：​​<link rel="icon" href="a.ico">​​

列表

无序列表

无序列表使用粗体圆点进行标记。简单示例如下。

<ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        ...
    </ul>

有序列表

有序列表使用数字进行标记，我们可以通过整数值start指定列表编号的起始值。简单示例如下。

<ol start="2">
        <li>a</li>
        <li>b</li>
        <li>c</li>
        ...
    </ol>

描述列表

通过描述列表自定义列表，列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。简单示例如下。

<dl>
        <dt>A</dt> <!-- 小标题 -->
            <dd>A1</dd> <!-- 解释标题 -->
            <dd>A2</dd> <!-- 解释标题 -->
        <dt>B</dt> <!-- 小标题 -->
            <dd>B1</dd> <!-- 解释标题 -->
            <dd>B2</dd> <!-- 解释标题 -->
    </dl>

表格

基础表格

  • 常用写法：​​<table width="" height="" border="" cellspacing="" cellpadding=""></table>​​
  • width：表格宽度
  • height：表格高度
  • border：边框宽度
  • cellspacing：单元格间距
  • cellpadding：内容与边框间距

简单示例如下。

<table width="300px" height="100px" border="2" cellspacing="5px" cellpadding="0">
<caption>表格标题</caption> <!-- 定义表格标题 -->

<tr>
    <!-- 定义表格的行 -->
    <td>A1</td> <!-- 定义表格该行第一列中的数据 -->
    <td>B1</td>
    <td>C1</td>
</tr>
<tr>
    <!-- 定义表格的行 -->
    <th>A</th> <!-- 定义表格每一列的标题 -->
    <th>B</th>
    <th>C</th>
</tr>
<tr>
    <td>A2</td>
    <td>B2</td>
    <td>C2</td>
</tr>
</table>

单元格合并

  • 常用写法：​​<td colspan=“” rowspan=“”></td>​​
  • 描述：告诉表格该单元格可以横跨colspan列，纵跨rowspan行

简单示例如下。

<table border="2" cellspacing="1px" width="400px" height="100px">
<caption><strong>表格标题</strong></caption> <!-- 定义表格标题 -->
<tr height="100">
    <!-- 定义表格的行 -->
    <td colspan="2">A1</td> <!-- 定义该行可以横跨两列 -->
    <td>B1</td>
</tr>

<tr height="100">
    <td>A2</td>
    <td>B2</td>
    <td rowspan="2">C</td> <!-- 定义该行可以横跨两行 -->
</tr>

<tr height="100">
    <td>A3</td>
    <td>B3</td>
</tr>
</table>

对于​​<input>​​不同的type属性值，输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。

文本输入框

  • 常用写法：​​<input type="text" name="" maxlength="" readonly="" disabled="" value="">​​
  • type：规定输入字段的类型
  • name：输入框的名字
  • maxlength：输入文本长度
  • readonly：输入框是否只读
  • disabled：输入框是否未激活
  • value：输入框默认值

简单示例如下。

<input type="text" name="username" maxlength="6" readonly="readonly" disabled="disabled" value="用户名">

密码输入框

  • 常用写法：​​<input type="password" name="">​​
  • type：规定输入字段的类型
  • name：输入框的名字
  • 密码输入框的其他参数和文本输入框一样

简单示例如下。

<input type="password" name="pwd" maxlength="6" readonly="readonly" disabled="disabled" value="密码">

单选框

  • 常用写法：​​<input type="radio" name="" checked="checked">​​
  • type：规定输入字段的类型
  • name：输入框的名字
  • checked：设定该输入框被预先选定
  • 想要多个单选框只能有一个被选中，设置所有单选框的name值相同即可实现

示例一，两个单选框都可以被选中

<div>
    <input type="radio" name="man" checked="checked">男
</div>
<div>
    <input type="radio" name="woman">女
</div>

示例二，两个单选框只能有一个被选中

<div>
    <input type="radio" name="gender" checked="checked">男
  </div>
  <div>
    <input type="radio" name="gender">女
  </div>

下拉列表

​​<select>​​

  • 常用写法：​​<select multiple=""></select>​​
  • multiple：当该属性为true时，可选择多个选项。

​​<optgroup>​​

  • 常用写法：​​<optgroup label=""></optgroup>​​
  • label：设定选项组的描述。

​​<option>​​

  • 常用写法：​​<option value="" selected="">选项值</option>​​
  • value：定义送往服务器的选项值。
  • selected：当该属性为true时，该选项被默认选择。

示例一，单选下拉列表

<select>
    <option value="a">a</option>
    <option value="b">b</option>
    <option value="c" selected='selected'>c</option>  <!-- 默认选中 -->
  </select>

示例二，带组合的单选下拉列表

<select>
    <optgroup label="A">
      <option value="a1">a1</option>
      <option value="a2" selected='selected'>a2</option>
    </optgroup>
    <optgroup label="B">
      <option value="b1">b1</option>
      <option value="b2">b2</option>
    </optgroup>
  </select>

示例三，带组合的多选下拉列表

<select multiple=”multiple”>
    <optgroup label="A">
      <option value="a1">a1</option>
      <option value="a2" selected='selected'>a2</option>
    </optgroup>
    <optgroup label="B">
      <option value="b1" selected='selected'>b1</option>
      <option value="b2">b2</option>
    </optgroup>
  </select>

多选框

  • 常用写法：​​<input type="checkbox" checked="">​​
  • type：规定输入字段的类型
  • checked：设定该输入框被预先选定

简单示例如下。

<input type="checkbox"  checked="checked">A
  <input type="checkbox">B

文本框

  • 常用写法：​​<textarea cols="" rows="" placeholder=""></textarea>​​
  • cols：控制可见文本的列数
  • rows：控制可见文本的行数
  • placeholder：提示字符

简单示例如下。

<textarea cols="5" rows="2" placeholder="text"></textarea>

文本上传控件

  • 常用写法：​​<input type="file" accept=""/>​​
  • accept：规定提交的文件的类型

简单示例如下。

<input type="file" accept="image/gif, image/jpeg"/>

其他类型按钮

<input type="submit">文件提交按钮
  <input type="button" value="">普通按钮
  <input type="image" src="">图片按钮
  <input type="reset">重置按钮
  <input type="url">网址控件
  <input type="date">日期控件 
  <input type="time">时间控件
  <!--email提供了邮箱的完整验证，必须包含@和后缀，如果不满足验证，会阻止表单提交-->
  <input type="email">邮件控件
  <input type="number" step="3">数字控件
  <input type="range" step="100">滑块控件
  <input type="color">颜色控件

表单

示例一，普通表单

<form>
    First name: <input type="text" name="fname"><br>
    Last name: <input type="text" name="lname"><br>
    <input type="submit" value="提交">
  </form>

示例二，带分组信息表单

<form>
    <fieldset>
      <legend>Personalia:</legend>
      First name: <input type="text" name="fname"><br>
      Last name: <input type="text" name="lname"><br>
      <input type="submit" value="提交">
    </fieldset>

    First nameA: <input type="text" name="fname"><br>
    Last nameB: <input type="text" name="lname"><br>
  </form>

与

​​<progress>​​​与​​<meter>​​主要区别和用法见​​HTML5 progress和meter控件​​

​​<progress>​​

  • 常用写法：​​<progress value="" max=""></progress>​​
  • value：规定进程的当前值
  • max：规定需要完成的值

简单示例如下。

<progress value="60" max="100"></progress>

​​<meter>​​

  • 常用写法：​​<meter min="" low="" high="" max="" value="" optimum=""></meter>​​
  • value：规定度量的当前值
  • max：规定被界定为高的值的范围
  • min：规定被界定为低的值的范围
  • low：规定被界定为低的值的范围
  • high：规定被界定为高的值的范围
  • optimum：规定度量的最优值
  • 具体使用见​​meter标签改变颜色规则​​

简单示例如下

<meter min="0" low="40" high="90" max="100" value="91"></meter>
<meter min="0" low="40" high="90" max="100" value="90"></meter>

多媒体资源

​​<audio>​​

  • 常用写法：​​<audio src="" controls autoplay loop></audio>​​
  • src：规定音频文件的url
  • controls：如果出现该属性，显示音频播放器的控制面板（比如播放/暂停按钮）
  • autoplay：如果出现该属性，自动播放音频
  • loop：如果出现该属性，循环播放音频

简单示例如下

<audio src="demo.mp3" controls autoplay></audio>

​​<video>​​

  • 常用写法：​​<video src="" width="" height="" poster="" controls autoplay loop></video>​​
  • src：规定视频文件的url
  • width：设置视频播放器的宽度（pixels）
  • height：设置视频播放器的高度（pixels）
  • poster：设置视频未播放时展示的画面
  • controls：如果出现该属性，显示音频播放器的控制面板（比如播放/暂停按钮）
  • autoplay：如果出现该属性，自动播放音频
  • loop：如果出现该属性，循环播放音频

简单示例如下

<video src="demo.mp4" controls autoplay height="500px" poster="0.jpg"></video>

​​<source>​​

  • 常用写法：​​<source src="" type="">​​
  • src：规定媒体文件的url
  • type：规定媒体文件的类型
  • 因为不同浏览器支持的媒体格式不同，当添加媒体文件时，需要考虑浏览器是否支持它们。我们可以准备多种不同格式的媒体文件，然后使用source 标签，让浏览器从上到下选择支持的媒体格式

简单示例如下

<video controls>
    <source src="demo.mp3" type="audio/mp3">
    <source src="demo.mp4" type="video/mp4">
    您的浏览器不支持video元素。
  </video>

特殊字符

​​HTML特殊字符编码对照表​​

参考