HTML

HTML 链接由 <a> 标签定义。链接的地址在 href 属性中指定：
```
eg:<a href="http://www.w3school.com.cn">This is a link</a>
```
<hr /> 标签在 HTML 页面中创建水平线

<head> 元素是所有头部元素的容器。以下标签都可以添加到 head 部分：<title>、<base>、<link>、<meta>、<script> 以及 <style>。

标签	描述
<head>	定义关于文档的信息。
<title>	定义文档标题。
<base>	定义页面上所有链接的默认地址或默认目标。
<link>	定义文档与外部资源之间的关系。
<meta>	定义关于 HTML 文档的元数据。
<script>	定义客户端脚本。
<style>	定义文档的样式信息。

注释：
```

```
换行：<br/>
background-color :定义背景颜色
```
style="background-color:yellow"
```
font-family：定义字体系列
color:颜色

font-size：字体尺寸

style="font-family:arial;color:red;font-size:20px;"

text-align ：文本的水平对齐方式

style="text-align:center文本格式化标签：

标签	描述
<b>	定义粗体文本。
<big>	定义大号字。
<em>	定义着重文字。
<i>	定义斜体字。
<small>	定义小号字。
<strong>	定义加重语气。
<sub>	定义下标字。
<sup>	定义上标字。
<ins>	定义插入字。
<del>	定义删除字。

计算机输出标签？？
引用、和术语定义？？
HTML <q> 元素定义短的引用。

浏览器通常会为 <q> 元素包围引号。

HTML <blockquote> 元素定义被引用的节。(长引用)

浏览器通常会对 <blockquote> 元素进行缩进处理

<blockquote cite="http://www.worldwildlife.org/who/index.html">
五十年来，WWF 一直致力于保护自然界的未来。
世界领先的环保组织，WWF 工作于 100 个国家，
并得到美国一百二十万会员及全球近五百万会员的支持。
</blockquote>

HTML <abbr> ：对缩写进行标记（定义缩写或首字母缩略语）。

<p><abbr title="World Health Organization">WHO</abbr> 成立于 1948 年。</p>

HTML <dfn> 元素定义项目或缩写的定义：

如果设置了 <dfn> 元素的 title 属性，则定义项目：

<p><dfn title="World Health Organization">WHO</dfn> 成立于 1948 年。</p>

如果 <dfn> 元素包含具有标题的 <abbr> 元素，则 title 定义项目：

<p><dfn><abbr title="World Health Organization">WHO</abbr></dfn> 成立于 1948 年。</p>

否则，<dfn> 文本内容即是项目，并且父元素包含定义：
```
<p><dfn>WHO</dfn> World Health Organization 成立于 1948 年。</p>
```

HTML <address> 元素定义文档或文章的联系信息（作者/拥有者）。

此元素通常以斜体显示。大多数浏览器会在此元素前后添加折行。
```
<address>
Written by Donald Duck.<br> 
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>
```
HTML <cite> 元素定义著作的标题。

浏览器通常会以斜体显示 <cite> 元素。
```
<p><cite>The Scream</cite> by Edward Munch. Painted in 1893.</p>
```
HTML <bdo> 元素定义双流向覆盖（bi-directional override）。

<bdo> 元素用于覆盖当前文本方向（将文本从右向左进行书写）：
```
<bdo dir="rtl">This text will be written from right to left</bdo >
```
使用 Target 属性，你可以定义被链接的文档在何处显示。
- _self：此属性使得目标文档载入并显示在相同的框架或者窗口中作为源文档。
- _blank：此属性使得浏览器总在一个新打开、未命名的窗口中载入目标文档。
- _parent：此属性使得文档载入父窗口或者包含来超链接引用的框架的框架集。如果这个引用是在窗口或者在顶级框架中，那么它与目标 _self 等效。
- _top：此属性使得文档载入包含这个超链接的窗口，用 _top 目标将会清除所有被包含的框架并将文档载入整个浏览器窗口。
```
eg:<a href="http://www.w3school.com.cn/" target="_blank">Visit W3School!</a>
```
name 属性规定锚（anchor）的名称,您可以使用 name 属性创建 HTML 页面中的书签。
```
eg:<a name="label">锚（显示在页面上的文本）</a>
```
<img> 是空标签，意思是说，它只包含属性，并且没有闭合标签。

要在页面上显示图像，你需要使用源属性src。src 指 "source"。
```
eg:<img src="http://www.w3school.com.cn/images/boat.gif" />
```
alt 属性用来为图像定义一串预备的可替换的文本。替换文本属性的值是用户定义的。
```
eg:<img src="boat.gif" alt="Big Boat">
```
表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data）

边框属性border：

<tableborder="1">
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr>
</table>

表头

表格的表头使用 <th> 标签进行定义，大多数浏览器会把表头显示为粗体居中的文本：

<table border="1">
<tr>
<th>Heading</th>
<th>Another Heading</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
</table>

空单元格 <td></td>中间不加内容：

<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td></td>
<td>row 2, cell 2</td>
</tr>
</table>

带标题：

<table border="6">
<caption>我的标题</caption>
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
</table>

　跨行或列单元格：

<h4>横跨两列的单元格：</h4>
<table border="1">
<tr>
  <th>姓名</th>
  <th colspan="2">电话</th>
</tr>
<tr>
  <td>Bill Gates</td>
  <td>555 77 854</td>
  <td>555 77 855</td>
</tr>
</table>

<h4>横跨两行的单元格：</h4>
<table border="1">
<tr>
  <th>姓名</th>
  <td>Bill Gates</td>
</tr>
<tr>
  <th rowspan="2">电话</th>
  <td>555 77 854</td>
</tr>
<tr>
  <td>555 77 855</td>
</tr>
</table>

单元格边距cellpadding：内容与其边框之间的空白

<table border="1" 
cellpadding="10">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>   
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

单元格间距Cell spacing ：单元格之间的距离

<table border="1" 
cellspacing="10">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>   
</table>

表格背景图像background/颜色bgcolor：

<h4>背景颜色：</h4>
<table border="1" 
bgcolor="red">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>   
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>

<h4>背景图像：</h4>
<table border="1" 
background="/i/eg_bg_07.gif">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>   
</table>

排列内容align：

<table width="400" border="1">
 <tr>
  <th align="left">消费项目....</th>
  <th align="right">一月</th>
  <th align="right">二月</th>
 </tr> 
</table>

框架属性frame：

<table frame="box">
  ········  
</table>
<table frame="above">
  ········
</table>
<table frame="below">
  ·······
</table>
<table frame="hsides">
  ·······
</table>
<table frame="vsides">
 ·······
</table>

无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记，无序列表始于 <ul> 标签。每个列表项始于 <li>。
```
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
```
有序列表也是一列项目，列表项目使用数字进行标记，有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。
```
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
```
自定义列表不仅仅是一列项目，而是项目及其注释的组合。自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。
```
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>
```
不同类型的无序列表：

<ul type="disc">前面带有实心圆点
<ul type="circle">前面带有空心圆点
<ul type="square">前面带有实心方块

不同类型的有序列表：

数字列表：单一个<ol>
字母列表：<ol type="A">
小写字母列表：<ol type="a">
罗马字母列表：<ol type="I">
小写罗马字母列表：<ol type="i">

标签描述

<div> 定义文档中的分区或节（division/section）。

<span> 定义 span，用来组合文档中的行内元素。
iframe 用于在网页内显示网页。

标签	描述
<div>	定义文档中的分区或节（division/section）。
<span>	定义 span，用来组合文档中的行内元素。

语法：

<iframe src="···网页地址·····" width="200" height="200"></iframe>

删除边框：

<iframe src="demo_iframe.htm" frameborder="0"></iframe>

iframe 可用作链接的目标（target）。

链接的 target 属性必须引用 iframe 的 name 属性：

<iframe src="demo_iframe.htm" name="iframe_a"></iframe>
<p><a href="http://www.w3school.com.cn" target="iframe_a">W3School.com.cn</a></p>  链接的目标匹配 iframe 的名称，所以链接会在 iframe 中打开

HTML5 提供的新语义元素定义了网页的不同部分：

header	定义文档或节的页眉
nav	定义导航链接的容器
section	定义文档中的节
article	定义独立的自包含文章
aside	定义内容之外的内容（比如侧栏）
footer	定义文档或节的页脚
details	定义额外的细节
summary	定义 details 元素的标题

计算机代码元素：

HTML <kbd> 元素定义键盘输入：

<p>To open a file, select:</p>

<p><kbd>File | Open...</kbd></p>

HTML <samp> 元素定义计算机输出示例：

<samp>
demo.example.com login: Apr 12 09:10:17
Linux 2.6.10-grsec+gg3+e+fhs6b+nfs+gr0501+++p3+c4a+gr2b-reslog-v6.189
</samp>

HTML <code> 元素定义编程代码示例：

<code>
var person = { firstName:"Bill", lastName:"Gates", age:50, eyeColor:"blue" }
</code>

<code> 元素不保留多余的空格和折行：

<code>
var person = {
    firstName:"Bill",
    lastName:"Gates",
}
</code>如需解决该问题，您必须在 <pre> 元素中包围代码：

<code>
<pre>
var person = {
    firstName:"Bill",
    lastName:"Gates",
    age:50,
    eyeColor:"blue"
}
</pre>
</code>

HTML <var> 元素定义数学变量：

<p>Einstein wrote:</p>

<p><var>E = m c<sup>2</sup></var></p>

标签	描述
<article>	定义文章。
<aside>	定义页面内容以外的内容。
<details>	定义用户能够查看或隐藏的额外细节。
<figcaption>	定义 <figure> 元素的标题。
<figure>	规定自包含内容，比如图示、图表、照片、代码清单等。
<footer>	定义文档或节的页脚。
<header>	规定文档或节的页眉。
<main>	规定文档的主内容。
<mark>	定义重要的或强调的文本。
<nav>	定义导航链接。
<section>	定义文档中的节。
<summary>	定义 <details> 元素的可见标题。
<time>	定义日期/时间。

显示结果	描述	实体名称	实体编号
空格
<	小于号	<	<
>	大于号	>	>
&	和号	&	&
"	引号	"	"
'	撇号	' (IE不支持)	'
￠	分（cent）	¢	¢
£	镑（pound）	£	£
¥	元（yen）	¥	¥
€	欧元（euro）	€	€
§	小节	§	§
©	版权（copyright）	©	©
®	注册商标	®	®
™	商标	™	™
×	乘号	×	×
÷	除号	÷

HTML 表单用于收集用户输入，<form> 元素定义 HTML 表单。
表单元素指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等
<input> 元素是最重要的表单元素。

<input> 元素有很多形态，根据不同的 type 属性。
eg:

<input type="text"> 定义用于文本输入的单行输入字段：

<form>
 First name:<br>
<input type="text" name="firstname">
<br>
 Last name:<br>
<input type="text" name="lastname">
</form>

<input type="radio"> 定义单选按钮。

<form>
<input type="radio" name="sex" value="male" checked>Male
<br>
<input type="radio" name="sex" value="female">Female
</form>

<input type="submit"> 定义用于向表单处理程序提交表单的按钮

<form action="action_page.php">
First name:
<input type="text" name="firstname" value="Mickey">
<input type="submit" value="Submit">
</form>

<select> 元素定义下拉列表：

<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</select>

<option> 元素定义待选择的选项。
列表通常会把首个选项显示为被选选项。

您能够通过添加 selected 属性来定义预定义选项。
```
<option value="fiat" selected>Fiat</option>
```

<textarea> 元素定义多行输入字段（文本域）：

<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>

<button> 元素定义可点击的按钮：

<button type="button" onclick="alert('Hello World!')">Click Me!</button>

<datalist> 元素为 <input> 元素规定预定义选项列表。

用户会在他们输入数据时看到预定义选项的下拉列表。

<input> 元素的 list 属性必须引用 <datalist> 元素的 id 属性。

通过 <datalist> 设置预定义值的 <input> 元素：
```
<form action="action_page.php">
<input list="browsers">
<datalist id="browsers">
   <option value="Internet Explorer">
   <option value="Firefox">
</datalist> 
</form>
```

input的属性：

value 属性规定输入字段的初始值
readonly 属性规定输入字段为只读（不能修改）
disabled 属性规定输入字段是禁用的。

被禁用的元素是不可用和不可点击的
size 属性规定输入字段的尺寸（以字符计）
maxlength 属性规定输入字段允许的最大长度
autocomplete 属性规定表单或输入字段是否应该自动完成。

当自动完成开启，浏览器会基于用户之前的输入值自动填写值。
utofocus 属性是布尔属性。

如果设置，则规定当页面加载时 <input> 元素应该自动获得焦点
form 属性规定 <input> 元素所属的一个或多个表单。

formaction 属性规定当提交表单时处理该输入控件的文件的 URL。

formaction 属性覆盖 <form> 元素的 action 属性。

formaction 属性适用于 type="submit" 以及 type="image"

<form action="action_page.php">
   First name: <input type="text" name="fname"><br>
   Last name: <input type="text" name="lname"><br>
   <input type="submit" value="Submit"><br>
   <input type="submit" formaction="demo_admin.asp"
   value="Submit as admin">
</form>

formenctype 属性规定当把表单数据（form-data）提交至服务器时如何对其进行编码（仅针对 method="post" 的表单）。

formenctype 属性覆盖 <form> 元素的 enctype 属性。

formenctype 属性适用于 type="submit" 以及 type="image"。
formmethod 属性定义用以向 action URL 发送表单数据（form-data）的 HTTP 方法。

formmethod 属性覆盖 <form> 元素的 method 属性。

formmethod 属性适用于 type="submit" 以及 type="image"。
height 和 width 属性规定 <input> 元素的高度和宽度。
list 属性引用的 <datalist> 元素中包含了 <input> 元素的预定义选项。
min 和 max 属性规定 <input> 元素的最小值和最大值。

min 和 max 属性适用于如需输入类型：number、range、date、datetime、datetime-local、month、time 以及 week。
multiple 属性是布尔属性。

如果设置，则规定允许用户在 <input> 元素中输入一个以上的值。

multiple 属性适用于以下输入类型：email 和 file。
pattern 属性规定用于检查 <input> 元素值的正则表达式。

pattern 属性适用于以下输入类型：text、search、url、tel、email、and password。
placeholder 属性规定用以描述输入字段预期值的提示（样本值或有关格式的简短描述）。

该提示会在用户输入值之前显示在输入字段中。

下面是 <form> 属性的列表：

属性	描述
accept-charset	规定在被提交表单中使用的字符集（默认：页面字符集）。
action	规定向何处提交表单的地址（URL）（提交页面）。
autocomplete	规定浏览器应该自动完成表单（默认：开启）。
enctype	规定被提交数据的编码（默认：url-encoded）。
method	规定在提交表单时所用的 HTTP 方法（默认：GET）。
name	规定识别表单的名称（对于 DOM 使用：document.forms.name）。
novalidate	规定浏览器不验证表单。
target	规定 action 属性中地址的目标（默认：_self）。

action 属性定义在提交表单时执行的动作。

向服务器提交表单的通常做法是使用提交按钮。如果省略 action 属性，则 action 会被设置为当前页面

通常，表单会被提交到 web 服务器上的网页。
当用户单击“提交”按钮时，表单数据将发送到服务器("action_page.php" )上的文件中
```
<form action="/action_page.php">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="Bill"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Gates"><br><br>
  <input type="submit" value="Submit">
</form
```

target:属性可设置以下值之一：

值	描述
_blank	响应显示在新窗口或选项卡中。
_self	响应显示在当前窗口中。
_parent	响应显示在父框架中。
_top	响应显示在窗口的整个 body 中。
framename	响应显示在命名的 iframe 中。

默认值为 _self，这意味着响应将在当前窗口中打开。

提交的结果将在新的浏览器标签中打开：

          <form action="/action_page.php" target="_blank">

method 属性规定在提交表单时所用的 HTTP 方法（GET 或 POST）：

<form action="action_page.php" method="GET">

或：

<form action="action_page.php" method="POST">

autocomplete 属性规定表单是否应打开自动完成功能。

启用自动完成功能后，浏览器会根据用户之前输入的值自动填写值。
```
<form action="/action_page.php" autocomplete="on">
```
ovalidate 属性是一个布尔属性。

如果已设置，它规定提交时不应验证表单数据。

未设置 novalidate 属性的表单：
```
<form action="/action_page.php" novalidate>
```

password:定义密码字段

<form>
 User name:<br>
<input type="text" name="username">
<br>
 User password:<br>
<input type="password" name="psw">
</form>

submit:定义提交表单数据至表单处理程序的按钮。

<form action="action_page.php">
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
<input type="submit" value="Submit">
</form>

radio: 定义单选按钮。

<form>
<input type="radio" name="sex" value="male" checked>Male
<br>
<input type="radio" name="sex" value="female">Female
</form>

checkbox":定义多选框,复选框允许用户在有限数量的选项中选择零个或多个选项。

<form>
<input type="checkbox" name="vehicle" value="Bike">I have a bike
<br>
<input type="checkbox" name="vehicle" value="Car">I have a car 
</form>

button>：定义按钮

<input type="button" onclick="alert('Hello World!')" value="Click Me!">

number：用于应该包含数字值的输入字段。

能够对数字做出限制。根据浏览器支持，限制可应用到输入字段。

<form>
  Quantity (between 1 and 5):
  <input type="number" name="quantity" min="1" max="5">
</form>这里列出了一些常用的输入限制

属性	描述
disabled	规定输入字段应该被禁用。
max	规定输入字段的最大值。
maxlength	规定输入字段的最大字符数。
min	规定输入字段的最小值。
pattern	规定通过其检查输入值的正则表达式。
readonly	规定输入字段为只读（无法修改）。
required	规定输入字段是必需的（必需填写）。
size	规定输入字段的宽度（以字符计）。
step	规定输入字段的合法数字间隔。
value	规定输入字段的默认值。

date：用于应该包含日期的输入字段。

<form>
  Birthday:
  <input type="date" name="bday">
</form>

color：用于应该包含颜色的输入字段

<form>
  Select your favorite color:
  <input type="color" name="favcolor">
</form>

range：用于应该包含一定范围内的值的输入字段，该内容显示为滑块控件。
```
<form>
  <input type="range" name="points" min="0" max="10">
</form>
```

month：允许用户选择月份和年份。

<form>
  Birthday (month and year):
  <input type="month" name="bdaymonth">
</form>

email：用于应该包含电子邮件地址的输入字段。

<form>
  E-mail:
  <input type="email" name="email">
</form>

<form>
  Search Google:
  <input type="search" name="googlesearch">
</form>

search： 用于搜索字段（搜索字段的表现类似常规文本字段）

 HTML 中播放音频

<embed> 标签定义外部（非 HTML）内容的容器。
```
<embed height="100" width="100" src="song.mp3" />
```
<object tag> 标签也可以定义外部（非 HTML）内容的容器
```
<object height="100" width="100" data="song.mp3"></object>
```

HTML 中播放视频

embed> 标签的作用是在 HTML 页面中嵌入多媒体元素。

<embed src="movie.swf" height="200" width="200"/><object> 标签的作用是在 HTML 页面中嵌入多媒体元素

<object> 标签的作用是在 HTML 页面中嵌入多媒体元素
```
<object data="movie.swf" height="200" width="200"/>
```

<video> 标签的作用是在 HTML 页面中嵌入视频元素

<video width="320" height="240" controls="controls">
  <source src="movie.mp4" type="video/mp4" />
  <source src="movie.ogg" type="video/ogg" />
  <source src="movie.webm" type="video/webm" />
Your browser does not support the video tag.
</video>

标签：定义,标签,元素,表单,HTML,属性
From： https://www.cnblogs.com/sxr0316/p/17734562.html

相关文章

赞助商

阅读排行