在前端三大件（网页元素、CSS层叠样式表、JavaScript）中，网页元素像骨骼，定义好大体框架和功能；CSS像皮肤，用来美化和增添细节；JS像肌肉，负责让整个系统动起来。

因此今天开始会将这几部分内容梳理一下记录下来，今天就从常见的HTML标签开始。

 

基础

<h1> to <h6>

定义html标题。

 

<p>

定义一个段落，会自动在前后创建一些空白。

 

<br> 或者 <br />

插入一个简单的换行符，两行之间没有段落间的空白，是空标签所以没有结束标签。

 

<hr>

定义一个水平分隔线，是空标签所以没有结束标签。

 

<!– –>

定义注释。

 

格式

<abbr>

the<abbr title="World Health Organization">WHO</abbr> was found in 1948

表示一个缩写词或者首字母缩略词。

 

<strong> 或者 <b>

粗体文本

 

<em> 或者 <i>

斜体文本

<i>经常被国内开发者去除斜体样式当作图标标签来用。

 

<del> 或者 <s>

删除线文本

 

<ins> 或者 <u>

下划线文本

 

<u>

下划线词，可与<ins>叠加使用

 

<small>

小型文本（和旁注）

 

<bdo>

<bdo dir="rtl">左往右从子文段该</bdo>

覆盖默认的文本方向

 

<sub>

下标文本

 

<sup>

上标文本

 

<pre>

预格式化文本，常用来表示程序代码

 

表单

<form>

定义一个表单域，包含许多表单元素，在点击提交时将内部所有表单元素信息提交到后台。

  • action属性为一个url地址，用来定义后台服务器的url地址。
  • method属性可取值为GET或者POST，用来定义表单数据的提交方式。
  • name属性用于指定表单名称，后台用来区分同一个页面中的多个表单域。

 

<input>

输入元素，注意它是一个空标签没有结束标签。

  • type必须属性，用于定义不同的输入表单元素，比较常用的有以下几类：
  • value属性，当前表单的值。
  • name属性，当前表单的名称，radio元素有相同的name属性就能实现多选一。
  • checked属性，可取值checked，代表是否已选中，在checkbox和radio元素中常用。
  • maxlength属性，用来限制最大输入字符长度，在text和password元素中常用。

type的不同类型：

text:      定义文本输入框，默认宽度20字符。
password:  定义密码输入框，输入的字符会被隐藏。
button:    定义可点击按钮。
checkbox:  定义复选框。
radio:     定义单选按钮，用来实现多选一。
file:      定义文本输入框和“浏览”按钮，供文件上传。
image:     定义图像形式的按钮。
reset:     定义重置按钮，可以清除表单域中的所有数据。
submit:    定义提交按钮，可以把表单域中数据发送到后台。

html5新增的input类型

email:     定义文本输入框，限制必须为Email类型
url:       定义文本输入框，限制必须为url类型
date:      定义日期选择表单
time:      定义时间选择表单
month:     定义月选择表单
week:      定义周选择表单
number:    定义文本输入框，限制必须为数字类型
tel:       定义文本输入框，限制必须为手机号码类型
search:    定义文本输入框，用于搜索
color:     定义颜色选择表单

 

<button>

定义一个按钮，内部是可以是文本或者图像。

 

<label>

为input元素定义标注。可以绑定一个input元素，当点击label标签内的文本或图像时，浏览器自动将焦点（光标）转到或选择对应的表单元素上，增加用户体验。

例如，选择性别时点击性别图像即可勾选复选框，或者点击密码提示文字，即可激活密码输入框。

  • for属性，值为要绑定的input元素的id。

 

<select>

下拉列表选择元素，使用方式如下：

<select>
    <option>选项1</option>
    <option>选项2</option>
    <option>选项3</option>
    ...
</select>
  • selected属性，可取值selected，默认选择的元素。

 

<textarea>

文本域表单元素，多行文本输入组件，当需要输入大量文本时可以使用。

  • cols属性，每行的字符数；rows属性，显示的行数，较少使用。

 

html5新增的表单属性

  • required=”required”，该表单不可为空
  • placeholder属性，提示文本
  • autofocus=”autofocus”，页面加载完成后自动聚焦到该表单
  • autocomplete属性， 自动完成，默认开启
  • multiple=”multiple”，可以多选文件提交

 

框架

<iframe>

定义一个内联框架，用来在当前html文档中嵌入另一个文档。

  • src属性，定义文档来源。
  • height、width属性，定义高度宽度。
  • width属性，定义宽度。
  • name属性，定义名称。

 

媒体

<img>

图像，空标签，没有结束标签。

  • src属性，必需属性，定义图片路径。
  • alt属性，替换文本，图像不能显示时的文字。
  • title属性，提示文本，鼠标放在图像上显示的文字。
  • width、height属性：图像宽高。

 

<video>

插入一段视频。

由于兼容性问题，尽量使用mp4格式的视频。

  • src属性，必需属性，定义视频路径。
  • autoplay=”autoplay”，自动播放。
  • muted=”muted”，静音播放，另外谷歌浏览器需要添加此属性解决自动播放问题。
  • loop=”loop”，循环播放。
  • controls=”controls”，向用户展示播放控件。
  • poster属性，加载等待的画面图片

 

<audio>

音频标签。

由于兼容性问题，尽量使用mp3格式。

  • src属性，定义音频路径
  • autoplay=”autoplay”，自动播放，谷歌浏览器禁用了
  • loop=”loop”，循环播放
  • controls=”controls”，向用户展示音频播放控件

 

链接

<a>

超链接标签

  • href属性，必需属性，内容为# 代表空链接，内容为css选择器，则跳转到所选元素位置（锚点链接）。
  • target属性：用于指定链接页面的打开方式。默认为_self 当前窗口跳转，设置为_blank 为新开页面打开。

 

列表

<ul>

定义一个无序列表，子元素只能是<li> 标签。

 

<ol>

定义一个有序列表，子元素只能是<li> 标签。

 

<li>

定义一个列表项，子元素可以是任意标签。

 

<dl>

定义一个无序列表，内部元素只能为<dt> （名词）和<dd> （名词解释），例如：

<dl>
    <dt>特长</dt>
    <dd>唱歌</dd>
    <dd>跳舞</dd>
    <dd>钢琴</dd>
    <dt>爱好</dt>
    <dd>音乐</dd>
    <dd>电影</dd>
</dl>

表格

<table>

定义一个表格，包裹下面所有标签。

  • cellpadding属性：单元格内容与边框间的空白，默认1px。
  • cellspacing属性：单元格之间的距离，默认2px。

 

<tr>

定义表格中的行。

 

<td>

定义表格中的单元格。

  • colspan属性：跨列合并单元格，合并后删除多余的单元格。
  • rowspan属性：跨行合并单元格，合并后删除多余的单元格。

 

<th>

第一行单元格。自带加粗并居中。

 

<thead>

将第一行单元格包裹起来，方便css选择。

 

<tbody>

将数据行单元格包裹起来，方便css选择。

 

样式/结

<div>

表示分割、分区，单独占一行。

 

<span>

表示跨度、跨距。一行可以放多个。

 

特殊字符

空格:     &nbsp;
小于号<:  &lt;
大于号>:  &gt;
与&:      &amp;
人民币￥:  &yen;
版权©:    &copy;
注册商标®: &reg;
度°:      &deg;
平方²:    &sup2;

人的两只眼睛，全是平行的，但却不平等看人。

人的两只耳朵是分在两边，却总好偏听一面之词。

人只有一张嘴，却总能说出两面话。

——甘地