<html> 定义 HTML 文档
<h1> 定义标题的开始
<h1> to <h6> 定义 HTML 标题
<h1 align="center"> 拥有关于对齐方式的附加信息。
<hr> 定义水平线
<body> 定义 HTML 文档的主体
<body bgcolor="yellow"> 拥有关于背景颜色的附加信息
<p> 段落 使用空的段落标记 <p></p> 去插入一个空行是个坏习惯。用 <br /> 标签代替它!
<br /> 如果您希望在不产生一个新段落的情况下进行换行(新行) <br /> 元素是一个空的 HTML 元素。由于关闭标签没有任何意义,因此它没有结束标签
<br> 还是 <br /> 您也许发现 <br> 与 <br /> 很相似 在 XHTML、XML 以及未来的 HTML 版本中,不允许使用没有结束标签(闭合标签)的 HTML 元素。
即使 <br> 在所有浏览器中的显示都没有问题,使用 <br /> 也是更长远的保障
<table> 定义 HTML 表格
<table border="1"> 拥有关于表格边框的附加信息
属性和属性值对大小写不敏感,不过,万维网联盟在其 HTML 4 推荐标准中推荐小写的属性/属性值
始终为属性值加引号
属性值应该始终被包括在引号内。双引号是最常用的,不过使用单引号也没有问题。
在某些个别的情况下,比如属性值本身就含有双引号,那么您必须使用单引号,例如:
name='Bill "HelloWorld" Gates'
应该避免使用下面这些标签和属性
<center> 定义居中的内容
<font> 和 <basefont> 定义 HTML 字体
<s> 和 <strike> 定义删除线文本
<u> 定义下划线文本
align 定义文本的对齐方式
bgcolor 定义背景颜色
color 定义文本颜色
<pre> 预格式文本 它保留了空格和换行。标签很适合显示计算机代码
文本格式化标签
<b> 定义粗体文本
<big> 定义大号字
<em> 定义着重文字
<i> 定义斜体字
<small> 定义小号字
<strong> 定义加重语气
<sub> 定义下标字
<sup> 定义上标字
<ins> 定义插入字
<del> 定义删除字
<s> 不赞成使用。使用 <del> 代替
<strike> 不赞成使用。使用 <del> 代替
<u> 不赞成使用。使用样式(style)代替
“计算机输出”标签
<code> 定义计算机代码
<kbd> 定义键盘码
<samp> 定义计算机代码样本
<tt> 定义打字机代码
<var> 定义变量
<pre> 定义预格式文本
<listing> 不赞成使用。使用 <pre> 代替
<plaintext> 不赞成使用。使用 <pre> 代替
<xmp> 不赞成使用。使用 <pre> 代替
引用、引用和术语定义
<abbr> 定义缩写
<acronym> 定义首字母缩写
<address> 定义地址
<bdo> 定义文字方向
<blockquote> 定义长的引用 浏览器通常会对 <blockquote> 元素进行缩进处理
<q> 定义短的引用语 浏览器通常会为 <q> 元素包围引号
<cite> 定义引用、引证 定义著作的标题
<dfn> 定义一个定义项目
HTML 注释标签
<!-- 在此处写注释 -->
注释对于 HTML 纠错也大有帮助,因为您可以一次注释一行 HTML 代码,以搜索错误:
<!--[if IE 8]>
.... some HTML here ....
<![endif]-->
条件注释定义只有 Internet Explorer 执行的 HTML 标签。
样式
<style> 定义样式定义
<link> 定义资源引用
<div> 定义文档中的节或区域(块级)
<span> 定义文档中的行内的小块或区域
<font> 规定文本的字体、字体尺寸、字体颜色。不赞成使用。请使用样式
<basefont> 定义基准字体。不赞成使用。请使用样式
<center> 对文本进行水平居中。不赞成使用。请使用样式
HTML 链接
链接的 HTML 代码很简单。它类似这样:
<a href="url">Link text</a>
使用 Target 属性,你可以定义被链接的文档在何处显示。 下面的这行会在新窗口打开文档:
<a href="http://www.w3school.com.cn/" target="_blank">Visit W3School!</a>
HTML 链接 - name 属性
name 属性规定锚(anchor)的名称。 您可以使用 name 属性创建 HTML 页面中的书签。 书签不会以任何特殊方式显示,它对读者是不可见的。 当使用命名锚(named anchors)时,我们可以创建直接跳至该命名锚(比如页面中某个小节)的链接,这样使用者就无需不停地滚动页面来寻找他们需要的信息了。
命名锚的语法:
<a name="label">锚(显示在页面上的文本)</a>
锚的名称可以是任何你喜欢的名字 您可以使用 id 属性来替代 name 属性,命名锚同样有效
首先,我们在 HTML 文档中对锚进行命名(创建一个书签):
<a name="tips">基本的注意事项 - 有用的提示</a>
然后,我们在同一个文档中创建指向该锚的链接:
<a href="#tips">有用的提示</a>
您也可以在其他页面中创建指向该锚的链接:
<a href="http://www.w3school.com.cn/html/html_links.asp#tips">有用的提示</a>
在上面的代码中,我们将 # 符号和锚名称添加到 URL 的末端,就可以直接链接到 tips 这个命名锚了。
基本的注意事项 - 有用的提示:
注释:请始终将正斜杠添加到子文件夹。假如这样书写链接:href="http://www.w3school.com.cn/html",就会向服务器产生两次 HTTP 请求。这是因为服务器会添加正斜杠到这个地址,然后创建一个新的请求,就像这样:href="http://www.w3school.com.cn/html/"。
提示:命名锚经常用于在大型文档开始位置上创建目录。可以为每个章节赋予一个命名锚,然后把链接到这些锚的链接放到文档的上部。如果您经常访问百度百科,您会发现其中几乎每个词条都采用这样的导航方式。
提示:假如浏览器找不到已定义的命名锚,那么就会定位到文档的顶端。不会有错误发生。
在新的浏览器窗口打开链接
<a href="http://www.w3school.com.cn/" target="_blank">Visit W3School!</a>
如果把链接的 target 属性设置为 "_blank",该链接会在新窗口中打开
跳出框架
<a href="/index.html"
target="_top">请点击这里!</a>
HTML 图像
<p>
一幅图像:
<img src="/i/eg_mouse.jpg" width="128" height="128" />
</p>
图像标签(<img>)和源属性(Src)
在 HTML 中,图像由 <img> 标签定义
<img> 是空标签,意思是说,它只包含属性,并且没有闭合标签
要在页面上显示图像,你需要使用源属性(src)。src 指 "source"。源属性的值是图像的 URL 地址
替换文本属性(Alt)
alt 属性用来为图像定义一串预备的可替换的文本。替换文本属性的值是用户定义的。
<img src="boat.gif" alt="Big Boat">
在浏览器无法载入图像时,替换文本属性告诉读者她们失去的信息。此时,浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯,这样有助于更好的显示信息,并且对于那些使用纯文本浏览器的人来说是非常有用的。
背景图片
<body background="/i/eg_background.jpg">
排列图片
<html>
<body>
<h2>未设置对齐方式的图像:</h2>
<p>图像 <img src ="/i/eg_cute.gif"> 在文本中</p>
<h2>已设置对齐方式的图像:</h2>
<p>图像 <img src="/i/eg_cute.gif" align="bottom"> 在文本中</p>
<p>图像 <img src ="/i/eg_cute.gif" align="middle"> 在文本中</p>
<p>图像 <img src ="/i/eg_cute.gif" align="top"> 在文本中</p>
<p>请注意,bottom 对齐方式是默认的对齐方式。</p>
</body>
</html>
HTML 表格
<html>
<body>
<p>每个表格由 table 标签开始。</p>
<p>每个表格行由 tr 标签开始。</p>
<p>每个表格数据由 td 标签开始。</p>
<h4>一列:</h4>
<table border="1">
<tr>
<td>100</td>
</tr>
</table>
<h4>一行三列:</h4>
<table border="1">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
</table>
<h4>两行三列:</h4>
<table border="1">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>
</body>
</html>
<caption> 定义表格标题
<th> 定义表格的表头
<tr> 定义表格的行
<td> 定义表格单元
<thead> 定义表格的页眉
<tbody> 定义表格的主体
<tfoot> 定义表格的页脚
<col> 定义用于表格列的属性
<colgroup> 定义表格列的组
无序列表
无序列表是一个项目的列表,此列项目使用粗体圆点(典型的小黑圆圈)进行标记。
无序列表始于 <ul> 标签。每个列表项始于 <li>
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
有序列表
同样,有序列表也是一列项目,列表项目使用数字进行标记。
有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
<ol> 定义有序列表
<ul> 定义无序列表
<li> 定义列表项
<dl> 定义定义列表
<dt> 定义定义项目
<dd> 定义定义的描述
<dir> 已废弃。使用 <ul> 代替它
<menu> 已废弃。使用 <ul> 代替它
Html 块
HTML 块元素
可以通过 <div> 和 <span> 将 HTML 元素组合起来
块级元素在浏览器显示时,通常会以新行来开始(和结束)
例子:<h1>, <p>, <ul>, <table>
HTML 内联元素
内联元素在显示时通常不会以新行开始。
例子:<b>, <td>, <a>, <img>
HTML <div> 元素
HTML <div> 元素是块级元素,它是可用于组合其他 HTML 元素的容器。
<div> 元素没有特定的含义。除此之外,由于它属于块级元素,浏览器会在其前后显示折行。
如果与 CSS 一同使用,<div> 元素可用于对大的内容块设置样式属性。
<div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 <table> 元素进行文档布局不是表格的正确用法。<table> 元素的作用是显示表格化的数据。
HTML <span> 元素
HTML <span> 元素是内联元素,可用作文本的容器。
<span> 元素也没有特定的含义。
当与 CSS 一同使用时,<span> 元素可用于为部分文本设置样式属性。
<head> 定义关于文档的信息
<title> 定义文档标题
<base> 定义页面上所有链接的默认地址或默认目标
<link> 定义文档与外部资源之间的关系
<meta> 定义关于 HTML 文档的元数据
<script> 定义客户端脚本
<style> 定义文档的样式信息
HTML 中有用的字符实体
空格  
< 小于号 < <
> 大于号 > >
& 和号 & &
" 引号 " "
' 撇号 ' (IE不支持) '
¢ 分(cent) ¢ ¢
£ 镑(pound) £ £
¥ 元(yen) ¥ ¥
€ 欧元(euro) € €
§ 小节 § §
© 版权(copyright) © ©
® 注册商标 ® ®
™ 商标 ™ ™
× 乘号 × ×
÷ 除号 ÷ ÷
URL - Uniform Resource Locator
scheme://host.domain:port/path/filename
scheme - 定义因特网服务的类型。最常见的类型是 http
host - 定义域主机(http 的默认主机是 www)
domain - 定义因特网域名,比如 w3school.com.cn
:port - 定义主机上的端口号(http 的默认端口号是 80)
path - 定义服务器上的路径(如果省略,则文档必须位于网站的根目录中)
filename - 定义文档/资源的名称
HTML 表单
<input> 元素
<input> 元素是最重要的表单元素。
<input> 元素有很多形态,根据不同的 type 属性。
这是本章中使用的类型:
text 定义常规文本输入
radio 定义单选按钮输入(选择多个选择之一)
submit 定义提交按钮(提交表单)
文本输入
<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-handler)提交表单的按钮。
表单处理程序通常是包含用来处理输入数据的脚本的服务器页面。
表单处理程序在表单的 action 属性中指定:
<form action="action_page.php">
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form>
Action 属性
action 属性定义在提交表单时执行的动作。
向服务器提交表单的通常做法是使用提交按钮。
通常,表单会被提交到 web 服务器上的网页。
在上面的例子中,指定了某个服务器脚本来处理被提交表单:
HTML Form 属性
accept-charset 规定在被提交表单中使用的字符集(默认:页面字符集)
action 定向何处提交表单的地址(URL)(提交页面)
autocomplete 规定浏览器应该自动完成表单(默认:开启)
enctype 规定被提交数据的编码(默认:url-encoded)
method 规定在提交表单时所用的 HTTP 方法(默认:GET)
name 规定识别表单的名称(对于 DOM 使用:document.forms.name)
novalidate 规定浏览器不验证表单
target 规定 action 属性中地址的目标(默认:_self)