html
meta标签
<meta>
标签(单标签),提供有关页面的元信息,位于文档的头部,不包含任何内容。它的属性定义了与文档相关联的名称/值对。
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta http-equiv="refresh" content="3" url="">
<meta http-equiv="expires" content="Wed, 20 Jun 2019 22:33:00">
link标签
<link>
标签(单标签),定义文档与外部资源的关系。
<link rel="stylesheet" href="./css/bootstrap.css">
<link rel="icon" type="image/x-icon" href="./img/logo.ico">
<link rel="dns-prefetch" href="xx.com">
段落标签
<h1>~<h6>
标签(双标签),定义标题的标签。<h1>
标签定义最大的标题,<h6>
标签定义最小的标题。<p>
标签(双标签),定义段落的标签。
文本修饰标签
<strong>
标签(双标签),表示强调,会对文本进行加粗。<b>
标签(双标签),对文本进行加粗。根据html5规范,在没有其他合适标签更合适时,才应该把b
标签作为最后的选项。<em>
标签(双标签),表示强调,会对文本进行斜体。<i>
标签(双标签),对文本进行斜体。<sub>
标签(双标签),定义下标文本。在数学等式、科学符号和化学公式中都非常有用。<sup>
标签(双标签),定义上标文本。在向文档添加脚注以及表示方程式中的指数值时非常有用。<del>
标签(双标签),定义文档中已被删除的文本。<ins>
标签(双标签),定义已经被插入文档中的文本。
文本修饰标签
<br>
标签(单标签),插入换行符。<hr>
标签(单标签),创建一条水平线。<kbd>
标签(双标签),定义键盘文本。
引用标签
<blockquote>
标签(双标签),引用大段的段落解释。<q>
标签(双标签),引用小段的短语解释。<abbr>
标签(双标签),缩写或首字母缩略词。常与title属性一起使用,显示简称/缩写的完整本。<address>
标签(双标签),引用文档地址信息。通常连同其他信息被包含在<footer>
标签中。它不应该用于描述通讯地址,除非它是联系信息的一部分。<cite>
标签(双标签),引用著作的标题。
图片标签
-
<img>
标签(单标签),向网页中嵌入一幅图像。
属性 | 值 | 描述 |
---|
alt(必须) | text | 图片的替代文本 |
src(必须) | url | 显示图片的url |
height | px/% | 设置图片的高度 |
width | px/% | 设置图片的宽度 |
链接标签
属性 | 值 | 描述 |
---|
href(必须) | url | 链接指向的页面的url |
target | _self/_blank | 如何打开链接文档 |
rel | text | 当前文档与被链接文档之间的关系 |
download | filename | 被下载的超链接目标 |
media | media_query | 被链接文档是何种设备优化 |
type | MIME type | 被链接文档的MIME类型 |
<base>
标签(单标签),为页面上的所有链接规定默认地址或默认目标。一般写在<head>
标签里。
列表标签
<ul>
标签(双标签),定义无序列表。常与<li>
一起使用。<ol>
标签(双标签),定义有序列表。常与<li>
标签一起使用。<dl>
标签(双标签),定义定义列表。<dt>
标签(双标签),定义专业术语或名词。<dd>
标签(双标签),对名词进行解释和描述。
表格标签
<table>
标签(双标签),定义html表格,是表格的最外层容器。
属性 | 值 | 描述 |
---|
align | left、center、right | 水平对齐方式 |
valign | left、center、right | 垂直对齐方式 |
cellpadding | px/% | 单元格沿与其内容之间的空白 |
cellspacing | px/% | 单元格之间的空白 |
border | px | 表格的边框 |
<caption>
标签(双标签),定义表格标题。<tr>
标签(双标签),定义html表格中的行。<th>
标签(双标签),定义表格内的表头单元格,可选的属性有rowspan和colspan。<td>
标签(双标签),定义html表格中的标准单元格。<thead>
标签(双标签),定义表格的表头。表格的语义化标签。<tbody>
标签(双标签),定义表格的正文。表格的语义化标签。<tfoot>
标签(双标签),定义表格的页脚。表格的语义化标签。
表单标签
<form>
标签(双标签),定义html表单,是表单的最外层容器。
属性 | 值 | 描述 |
---|
action(必须) | url | 当提交表单时向何处发送表单数据 |
method(必须) | get/post | 发送表单数据的http方法 |
autocomplete | on/off | 是否启用表单的自动完成 |
enctype | | 在发送表单数据之前如何对其进行编码 |
target | _self/_blank | 如何打开action url |
<fieldset>
标签(双标签),将表单内元素进行分组。<legend>
标签为<fieldset>
标签定义标题。<input>
标签(双标签),用于搜集用户信息,根据不同的type属性值,展示不同的控件。
属性 | 值 | 描述 |
---|
type(必须) | button/file/hidden/password/reset/submit/text等 | input元素的类型 |
checked | checked | 加载时被选中 |
disabled | disabled | 加载时禁用此元素 |
height | px/% | input字段的高度 |
width | px/% | input字段的宽度 |
list | datalist-id | 引用包含输入字段的预定义选项的datalist |
max | number/date | 输入字段的最大值 |
min | number/date | 输入字段的最小值 |
maxlength | number | 输入字段中的字符的最大长度 |
multiple | multiple | 允许一个以上的值 |
name | field_name | input元素的名称 |
pattern | regexp_pattern | 输入字段的值的模式或格式 |
placeholder | text | 帮助用户填写输入字段的提示 |
readonly | readonly | 输入字段为只读 |
required | required | 指示输入字段的值是必需的 |
size | number_of_char | 定义输入字段的宽度 |
step | number | 输入字的合法数字间隔 |
value | value | input元素的值 |
<select>
标签(双标签),创建单选或多选的下拉菜单,常与<option>
标签连用。
属性 | 值 | 描述 |
---|
autofocus | autofocus | 在页面加载后文本区域自动获得焦点 |
disabled | disabled | 禁用下拉列表 |
multiple | multiple | 可选择多个选项 |
name | name | 下拉列表的名称 |
required | required | 文本区域是必填的 |
size | number | 下拉列表中可见选项的数目 |
<optgroup>
标签(双标签),定义下拉菜单的选项。可选用label和disabled属性配合。<textarea>
标签(双标签),定义多行的文本输入控件。
属性 | 值 | 描述 |
---|
rows(必须) | number | 文本区内的可见行数 |
cols(必须) | number | 文本区内的可见宽度 |
autofocus | autofocus | 在页面加载后文本区域自动获得焦点 |
disabled | disabled | 禁用该文本控件 |
maxlength | number | 规定文本区域的最大字符数 |
name | name | 文本区的名称 |
placeholder | text | 描述文本区域预期值的简短提示 |
readonly | readonly | 文本区为只读 |
required | required | 文本区域是必填的 |
wrap | hard/soft | 当在表单中提交时,文本区域中的文本如何换行 |
<label>
标签(双标签),input 元素定义标注。它的for 属性应当与相关元素的 id 属性相同。
框架标签
<iframe>
标签(双标签),创建包含另外一个文档的内联框架(即行内框架)。
属性 | 值 | 描述 |
---|
frameborder(必须) | 1/0 | 是否显示框架周围的边框 |
src(必须) | url | 在 iframe 中显示的文档的 url |
height | px/% | iframe的高度 |
width | px/% | 定义 iframe 的宽度 |
marginheight | px | 定义 iframe 的顶部和底部的边距 |
marginwidth | px | 定义 iframe 的左侧和右侧的边距 |
name | name | 规定iframe的名称 |
scrolling | yes/no/auto | 是否在 iframe 中显示滚动条 |
longdesc | px/% | iframe 的较长描述 |
代码标签
<pre>
标签(双标签),定义预格式化的文本。被包围在<pre>
标签中的文本通常会保留空格和换行符。只应该在表示计算机程序源代码或者其他机器可以阅读的文本内容上使用<code>
标签。虽然<code>
标签通常只是把文本变成等宽字体,但它暗示着这段文本是源程序代码。
图像映射标签
<map>
标签(双标签),定义一个客户端图像映射。图像映射指带有可点击区域的一幅图像。<area>
标签永远嵌套在<map>
标签内部。<area>
标签可定义图像映射中的区域。常与name属性连用。
属性 | 值 | 描述 |
---|
alt(必须) | text | 定义此区域的替换文本 |
coords(必须) | 坐标值 | 可点击区域的坐标 |
href(必须) | url | 此区域的目标url |
shape(必须)) | default/rect/circ/poly | 区域的形状 |
多媒体标签
<embed>
标签(双标签),定义嵌入的内容,比如flash动画、插件等。属于html5的新标签。
属性 | 值 | 描述 |
---|
src(必须) | url | 嵌入内容的url |
type(必须) | type | 定义嵌入内容的类型 |
height | px | 设置嵌入内容的高度 |
width | px | 设置嵌入内容的宽度 |
<object>
标签(双标签),定义嵌入的对象,比如flash动画、插件等。需要配合<param>
标签一起完成。
属性 | 值 | 描述 |
---|
data(必须) | url | 引用对象数据的url |
type(必须) | MIME_type | 被规定在data属性中指定的文件中出现的数据的MIME类型 |
<audio>
标签(双标签),嵌入音频文件,比如音乐或其他音频流。属于html5的新标签。
属性 | 值 | 描述 |
---|
src(必须) | url | 播放的音频的url |
autoplay | autoplay | 音频在就绪后马上播放 |
controls | controls | 显示控件按钮 |
loop | loop | 每当音频结束时重新开始播放 |
muted | muted | 静音 |
preload | preload | 音频在页面加载时进行加载,并预备播放 |
<video>
标签(双标签),嵌入视频文件,比如电影片段或其他视频流。属于html5的新标签。
属性 | 值 | 描述 |
---|
src(必须) | url | 播放的视频的url |
height | px | 设置视频播放器的高度 |
width | px | 设置视频播放器的宽度 |
autoplay | autoplay | 视频在就绪后马上播放 |
controls | controls | 显示控件按钮 |
loop | loop | 每当视频结束时重新开始播放 |
muted | muted | 静音 |
preload | preload | 视频在页面加载时进行加载,并预备播放 |
poster | url | 视频下载时显示的图像 |
html5语义化标签
-
<header>
标签(双标签),定义文档的页眉。
-
<main>
标签(双标签),定义文档的主要内容。不兼容IE浏览器。
-
<footer>
标签(双标签),定义文档或节的页脚。通常包含文档的作者、版权信息、使用条款链接、联系信息等等。
-
<hgroup>
标签(双****标签),对网页或区段(section)的标题进行组合。
-
<nav>
标签(双标签),定义导航链接的部分。
-
<article>
标签(双标签),定义独立的自包含内容。
-
<aside>
标签(双标签),定义辅助信息的内容。
-
<section>
标签(双标签),定义文档中的节。比如章节、页眉、页脚或文档中的其他部分。
-
<figure>
标签(双标签),定义独立的流内容。
-
<figcaption>
标签(双标签),定义<figure>
标签的标题。
-
<datalist>
标签(双标签),定义选项列表。常与<option>
标签配合使用,用value属性定义input的值。使用<input>
标签的list属性来绑定datalist。
-
<details>
标签(双标签),用于描述文档或文档某个部分的细节。常与<summary>
标签配合使用,为details定义标题。使用open属性可以让details可见。只兼容Chrome和Safari浏览器。
-
<progress>
标签(双标签),定义进度条。
属性 | 值 | 描述 |
---|
max | number | 任务一共需要多少工作 |
value | number | 已经完成多少任务 |
<meter>标签
(双标签),度量给定范围内的数据。不兼容IE浏览器。
属性 | 值 | 描述 |
---|
value(必须) | number | 度量的当前值 |
min | number | 范围的最小值 |
max | number | 范围的最大值 |
high | number | 被视作高的值的范围 |
low | number | 被视作低的值的范围 |
optimum | number | 度量的优化值 |
属性 | 值 | 描述 |
---|
datetime | datetime | 日期/时间 |
pubdate | pubdate | 指示
元素)的发布日期
|
html5新控件
-
email控件,电子邮件地址输入框。
-
url控件,网址输入框。
-
number控件,数值输入框。
-
range控件,滑动条。
-
date/month/week控件,日期。
-
search控件,搜索框。
-
color控件,颜色。
-
tel控件,电话号码输入框。
-
time控件,时间。
块标签
<div>
标签(双标签),用来划分一个区域,相当于一块区域容器,可以容纳段落、标题、表格、图像等各种网页元素。即html多数的标签都可以嵌套在<div>
标签中,<div>
标签可以嵌套多层<div>
标签,用来将网页分割成独立的、不同的部分,来实现网页的规划和布局。
内联标签
<span>
标签(双标签),用来修饰文字的,div与span都是没有任何默认样式的,需要配合css才行