HTML学习笔记

来源：互联网发布：柴静知乎公知编辑：程序博客网时间：2024/06/03 10:55

1.HTML 全局属性

new : HTML5 新属性

属性描述accesskey设置访问元素的键盘快捷键。class规定元素的类名（classname）contenteditableNew规定是否可编辑元素的内容。contextmenuNew指定一个元素的上下文菜单。当用户右击该元素，出现上下文菜单data-*New用于存储页面的自定义数据dir设置元素中内容的文本方向。draggableNew指定某个元素是否可以拖动dropzoneNew指定是否将数据复制，移动，或链接，或删除hiddenNewhidden 属性规定对元素进行隐藏。id规定元素的唯一 idlang设置元素中内容的语言代码。spellcheckNew检测元素是否拼写错误style规定元素的行内样式（inline style）tabindex设置元素的 Tab 键控制次序。title规定元素的额外信息（可在工具提示中显示）translateNew指定是否一个元素的值在页面载入时是否需要翻译

••••••••••••

2.标题很重要

请确保将 HTML 标题标签只用于标题。不要仅仅是为了生成粗体或大号的文本而使用标题。

搜索引擎使用标题为您的网页的结构和内容编制索引。

因为用户可以通过标题来快速浏览您的网页，所以用标题来呈现文档结构是很重要的。

应该将 h1 用作主标题（最重要的），其后是 h2（次重要的），再其次是 h3，以此类推。

3.HTML 格式化标签

HTML 使用标签<b> 与<i> 对输出的文本进行格式, 如：粗体 or 斜体

这些HTML标签被称为格式化标签（请查看底部完整标签参考手册）。

通常标签 <strong> 替换加粗标签 <b> 来使用, <em> 替换 <i>标签使用。

然而，这些标签的含义是不同的：

<b> 与<i> 定义粗体或斜体文本。

<strong> 或者 <em>意味着你要呈现的文本是重要的，所以要突出显示。现今所有主要浏览器都能渲染各种效果的字体。不过，未来浏览器可能会支持更好的渲染效果。

4.HTML 文本格式化标签

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

5.HTML "计算机输出" 标签

标签描述<code>定义计算机代码<kbd>定义键盘码<samp>定义计算机代码样本<var>定义变量<pre>定义预格式文本

6.HTML 引文, 引用, 及标签定义

标签描述<abbr>定义缩写<address>定义地址<bdo>定义文字方向<blockquote>定义长的引用<q>定义短的引用语<cite>定义引用、引证<dfn>定义一个定义项目。

7.HTML 超链接（链接）

HTML使用标签 <a>来设置超文本链接。

超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。

当您把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。

在标签<a> 中使用了href属性来描述链接的地址。

默认情况下，链接将以以下形式出现在浏览器中：

一个未访问过的链接显示为蓝色字体并带有下划线
访问过的链接显示为紫色并带上下划线
点击链接时，链接显示为红色并带上下划线

target 属性设置为 "_blank", 链接将在新窗口打开。

id属性可用于创建在一个HTML文档书签标记。

<a id="tips">有用的提示部分</a>

<a href="#tips">访问有用的提示部分</a>

<a href="http://www.runoob.com/html-links.htm#tips"> (从另一个页面创建一个链接到"有用的提示部分(id="tips"）")

电子邮件链接：<a href="mailto:someone@example.com?Subject=Hello%20again" target="_top">

单词之间空格使用%20代替，以确保浏览器可以正常显示文本。

8.HTML head 元素

<head> 元素包含了所有的头部标签元素。在 <head>元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息。

标签描述<head>定义了文档的信息<title>定义了文档的标题<base>定义了页面链接标签的默认链接地址<link>定义了一个文档和外部资源之间的关系<meta>定义了HTML文档中的元数据<script>定义了客户端的脚本文件<style>定义了HTML文档的样式文件

<base> 标签描述了基本的链接地址/链接目标，该标签作为HTML文档中所有的链接标签的默认链接:

meta标签描述了一些基本的元数据。

META元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。

元数据可以使用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他Web服务。

为搜索引擎定义关键词:

为网页定义描述内容:

定义网页作者:

每30秒中刷新当前页面:

在 HTML 中，图像由<img> 标签定义。

<img> 是空标签，意思是说，它只包含属性，并且没有闭合标签。

要在页面上显示图像，你需要使用源属性（src）。src 指 "source"。源属性的值是图像的 URL 地址。

定义图像的语法是：

alt 属性用来为图像定义一串预备的可替换的文本。

替换文本属性的值是用户定义的。

在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯，这样有助于更好的显示信息，并且对于那些使用纯文本浏览器的人来说是非常有用的。

HTML 图像标签

<img>定义图像<map>定义图像地图<area>定义图像地图中的可点击区域

<map> 标签用于客户端图像映射。图像映射指带有可点击区域的一幅图像。

<img>中的 usemap 属性可引用 <map> 中的 id 或 name 属性（取决于浏览器），所以我们应同时向 <map> 添加 id 和 name 属性。

area 元素永远嵌套在 map 元素内部。area 元素可定义图像映射中的区域。

10.HTML 表格
表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

如果不定义边框属性，表格将不显示边框。有时这很有用，但是大多数时候，我们希望显示边框。

表格的表头使用 <th> 标签进行定义。

大多数浏览器会把表头显示为粗体居中的文本：

HTML 表格标签

标签描述<table>定义表格<th>定义表格的表头<tr>定义表格的行<td>定义表格单元<caption>定义表格标题<colgroup>定义表格列的组<col>定义用于表格列的属性<thead>定义表格的页眉<tbody>定义表格的主体<tfoot>定义表格的页脚

11.HTML 列表

无序列表是一个项目的列表，无序列表使用 <ul> 标签

有序列表也是一列项目。有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。

自定义列表不仅仅是一列项目，而是项目及其注释的组合。

自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始

HTML 列表标签

标签描述<ol>定义有序列表<ul>定义无序列表<li>定义列表项<dl>定义定义列表<dt>自定义列表项目<dd>定义自定列表义的描述

12.HTML <div> 和<span>:HTML 可以通过 <div> 和 <span>将元素组合起来。

HTML 区块元素

大多数 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> 元素可用于为部分文本设置样式属性。

HTML 分组标签

标签描述<div>定义了文档的区域，块级 (block-level)<span>用来组合文档中的行内元素，内联元素(inline)

13.HTML 表单和输入:HTML 表单用于搜集不同类型的用户输入。

表单是一个包含表单元素的区域。

表单元素是允许用户在表单中输入内容,比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。

表单使用表单标签 <form> 来设置

HTML 表单标签

New:HTML5新标签标签描述<form>定义供用户输入的表单<input>定义输入域<textarea>定义文本域 (一个多行的输入控件)<label>定义了 <input> 元素的标签，一般为输入标题<fieldset>定义了一组相关的表单元素，并使用外框包含起来<legend>定义了 <fieldset> 元素的标题<select>定义了下拉选项列表<optgroup>定义选项组<option>定义下拉列表中的选项<button>定义一个点击按钮<datalist>New指定一个预先定义的输入控件选项列表<keygen>New定义了表单的密钥对生成器字段<output>New定义一个计算结果

多数情况下被用到的表单标签是输入标签（<input>）。

输入类型是由类型属性（type）定义的。大多数经常被用到的输入类型如下：

文本域（Text Fields）:文本域通过<input type="text"> 标签来设定，当用户要在表单中键入字母、数字等内容时，就会用到文本域。

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

注意:表单本身并不可见。同时，在大多数浏览器中，文本域的缺省宽度是20个字符。

密码字段

密码字段通过标签<input type="password"> 来定义:

<form>
Password: <input type="password" name="pwd">
</form>

注意:密码字段字符不会明文显示，而是以星号或圆点替代。

单选按钮（Radio Buttons）

<input type="radio"> 标签定义了表单单选框选项

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

复选框（Checkboxes）

<input type="checkbox"> 定义了复选框. 用户需要从若干给定的选择中选取一个或若干选项。

提交按钮(Submit Button)

<input type="submit"> 定义了提交按钮.

当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。

重置按钮(reset Button)

此外，还有下拉列表

<form action="">
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat" selected>Fiat</option>
<option value="audi">Audi</option>
</select>
</form>

还可创建按钮

13.HTML 框架iframe：通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。

HTML iframe 标签

标签说明<iframe>定义一个内联的iframe

iframe语法:

该URL指向不同的网页。

height 和 width 属性用来定义iframe标签的高度与宽度。

属性默认以像素为单位, 但是你可以指定其按比例显示 (如："80%").

frameborder 属性用于定义iframe表示是否显示边框。

设置属性值为 "0" 移除iframe的边框:

使用iframe来显示目录链接页面

iframe可以显示一个目标链接的页面

14.HTML 颜色

HTML 颜色由红色、绿色、蓝色混合而成。

HTML 颜色由一个十六进制符号来定义，这个符号由红色、绿色和蓝色的值组成（RGB）。

种颜色的最小值是0（十六进制：#000）。最大值是255（十六进制：#FFF）。

三种颜色红，绿，蓝的组合从0到255，一共有1600万种不同颜色(256 x 256 x 256)。

Web安全色?

数年以前，当大多数计算机仅支持 256 种颜色的时候，一系列 216 种 Web 安全色作为 Web 标准被建议使用。其中的原因是，微软和 Mac 操作系统使用了 40 种不同的保留的固定系统颜色（双方大约各使用 20 种）。

我们不确定如今这么做的意义有多大，因为越来越多的计算机有能力处理数百万种颜色，不过做选择还是你自己。

最初，216 跨平台 web 安全色被用来确保：当计算机使用 256 色调色板时，所有的计算机能够正确地显示所有的颜色。

目前所有浏览器都支持以下颜色名。

141个颜色名称是在HTML和CSS颜色规范定义的（17标准颜色，再加124）。

Remark 提示: 17标准颜色：黑色，蓝色，水，紫红色，灰色，绿色，石灰，栗色，海军，橄榄，橙，紫，红，白，银，蓝绿色，黄色。点击其中一个颜色名称（或一个十六进制值）就可以查看与不同文字颜色搭配的背景颜色。

颜色值由十六进制来表示红、绿、蓝（RGB）。

每个颜色的最低值为0(十六进制为00)，最高值为255(十六进制为FF)。

十六进制值的写法为#号后跟三个或六个十六进制字符。

三位数表示法为：#RGB，转换为6位数表示为：#RRGGBB。

15.HTML 脚本

avaScript 使 HTML 页面具有更强的动态和交互性。

HTML <script> 标签

JavaScript 最常用于图片操作、表单验证以及内容动态更新。

HTML<noscript> 标签

只有在浏览器不支持脚本或者禁用脚本时，才会显示 <noscript> 元素中的内容：

HTML 脚本标签

标签描述<script>定义了客户端脚本<noscript>定义了不支持脚本浏览器输出的文本

16.HTML 字符实体

HTML 中的预留字符必须被替换为字符实体。

一些在键盘上找不到的字符也可以使用字符实体来替换。

在 HTML 中，某些字符是预留的。

在 HTML 中不能使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签。

如果希望正确地显示预留字符，我们必须在 HTML 源代码中使用字符实体（character entities）。字符实体类似这样：

&entity_name;

或

&#entity_number;

如需显示小于号，我们必须这样写：< 或 < 或 <

Remark 提示： 使用实体名而不是数字的好处是，名称易于记忆。不过坏处是，浏览器也许并不支持所有实体名称（对实体数字的支持却很好）。

不间断空格(Non-breaking Space)

HTML 中的常用字符实体是不间断空格( )。

浏览器总是会截短 HTML 页面中的空格。如果您在文本中写 10 个空格，在显示该页面之前，浏览器会删除它们中的 9 个。如需在页面中增加空格的数量，您需要使用   字符实体。

HTML字符实体

Note

实体名称对大小写敏感！

17.HTML URL:统一资源定位器(Uniform Resource Locators)

URL是一个网页地址。

URL可以由字母组成，如"W3CSchools.cc"，或互联网协议（IP）地址： 192.68.20.50。大多数人进入网站使用网站域名来访问，因为名字比数字更容易记住。

Web浏览器通过URL从Web服务器请求页面。

当您点击 HTML 页面中的某个链接时，对应的 <a> 标签指向万维网上的一个地址。

一个统一资源定位器(URL) 用于定位万维网上的文档。

一个网页地址实例: http://www.w3cschool.cc/html/html-tutorial.html 语法规则:

scheme://host.domain:port/path/filename

说明:

scheme - 定义因特网服务的类型。最常见的类型是 http
host - 定义域主机（http 的默认主机是 www）
domain - 定义因特网域名，比如 w3cschool.cc
:port - 定义主机上的端口号（http 的默认端口号是 80）
path - 定义服务器上的路径（如果省略，则文档必须位于网站的根目录中）。
filename - 定义文档/资源的名称

常见的 URL Schemes

以下是一些URL scheme：

Scheme访问用于...http超文本传输协议以 http:// 开头的普通网页。不加密。https安全超文本传输协议安全网页，加密所有信息交换。ftp文件传输协议用于将文件下载或上传至网站。file 您计算机上的文件。

18.HTML 速查列表

HTML 基本文档

<!DOCTYPE html>
<html>
<head>
<title>文档标题</title>
</head>

</html>

基本标签（Basic Tags）

<h1>最大的标题</h1>
<h2> . . . </h2>
<h3> . . . </h3>
<h4> . . . </h4>
<h5> . . . </h5>
<h6>最小的标题</h6>

<p>这是一个段落。</p>
<br> （换行）
<hr> （水平线）

文本格式化（Formatting）

<b>粗体文本</b>
<code>计算机代码</code>
<em>强调文本</em>
<i>斜体文本</i>
<kbd>键盘输入</kbd>
<pre>预格式化文本</pre>
<small>更小的文本</small>
<strong>重要的文本</strong>

<abbr> （缩写）
<address> （联系信息）
<bdo> （文字方向）
<blockquote> （从另一个源引用的部分）
<cite> （工作的名称）
<del> （删除的文本）
<ins> （插入的文本）
<sub> （下标文本）

<sup> （上标文本）

链接（Links）

普通的链接： <a href="http://www.example.com/">链接文本</a>
图像链接： <a href="http://www.example.com/"><img src="URL" alt="替换文本"></a>
邮件链接： <a href="mailto:webmaster@example.com">发送e-mail</a>

书签：
<a id="tips">提示部分</a>
<a href="#tips">跳到提示部分</a>

图片（Images）

样式/区块（Styles/Sections）

无序列表

有序列表

定义列表

表格（Tables）

框架（Iframe）

表单（Forms）

实体（Entities）

19.XHTML:XHTML 是以 XML 格式编写的 HTML。(http://www.runoob.com/html/html-xhtml.html)

0 1