Html

133 阅读13分钟
<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 中有用的字符实体

    空格    &nbsp;  &#160;
<   小于号  &lt;	&#60;
>   大于号  &gt;    &#62;
&	和号	&amp;	&#38;
"	引号	&quot;	&#34;
'	撇号 	&apos; (IE不支持)	&#39;
¢	分(cent)	&cent;	&#162;
£	镑(pound)	&pound;	&#163;
¥	元(yen)	&yen;	&#165;
€	欧元(euro)	&euro;	&#8364;
§	小节	&sect;	&#167;
©	版权(copyright)	&copy;	&#169;
®	注册商标	&reg;	&#174;
™	商标	&trade;	&#8482;
×	乘号	&times;	&#215;
÷	除号	&divide;	&#247;

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)