HTML基础
目录
一、简介
HTML 是用来描述网页的一种语言。
- HTML 指的是超文本标记语言 (Hyper Text Markup Language)
- HTML 不是一种编程语言，而是一种标记语言 (markup language)
- 标记语言是一套标记标签 (markup tag)
- HTML 使用标记标签来描述网页
二、基础
- HTML标题（Heading）是通过
<h1>-<h6>等标签进行定义的。 - HTML 段落是通过
<p>标签进行定义的。 - HTML 链接是通过
<a>标签进行定义的。 - HTML 图像是通过
<img>标签进行定义的。 - HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。
- HTML 标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。
属性总是以名称/值对的形式出现，比如：name="value"。
属性总是在 HTML 元素的开始标签中规定。 <hr />标签在 HTML 页面中创建水平线。
hr 元素可用于分隔内容。- 可以将注释插入 HTML 代码中，这样可以提高其可读性，使代码更易被人理解。浏览器会忽略注释，也不会显示它们。
<!-- 注释内容 -->
# 也可以条件注释
<!--[if IE 8]>
.... some HTML here ....
<![endif]-->
- Html中所有连续的空格、空行都被解释为一个空格。
- 没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。
三、标题
- 标题（Heading）是通过
<h1>-<h6>等标签进行定义的。 <h1>定义最大的标题。<h6>定义最小的标题。- 浏览器会自动地在标题的前后添加空行。
- HTML 会自动地在块级元素前后添加一个额外的空行，比如段落、标题元素前后。
- 空行的高度基本一样的。
- 不要仅仅是为了产生粗体或大号的文本而使用标题，搜索引擎使用标题为您的网页的结构和内容编制索引。
四、段落
- 段落是通过
<p>标签定义的。 - 如果您希望在不产生一个新段落的情况下进行换行（新行），请使用
<br />标签。
五、样式
style 属性用于改变 HTML 元素的样式。
font-family、color 以及 font-size 属性分别定义元素中文本的字体系列、颜色和字体尺寸
text-align 属性规定了元素中文本的水平对齐方式
六、格式化
HTML 可定义很多供格式化输出的元素，比如粗体和斜体字。
- 文本格式化：在一个 HTML 文件中对文本进行格式化。
| 标签 | 描述 |
|---|---|
<b> |
定义粗体文本。 |
<big> |
定义大号字。 |
<em> |
定义着重文字。 |
<i> |
定义斜体字。 |
<small> |
定义小号字。 |
<strong> |
定义加重语气。 |
<sub> |
定义下标字。 |
<sup> |
定义上标字。 |
<ins> |
定义插入字。 |
<del> |
定义删除字。 |
<s> |
不赞成使用。使用 <del> 代替。 |
<strike> |
不赞成使用。使用 <del> 代替。 |
<u> |
不赞成使用。使用样式（style）代替。 |
- 预格式文本
使用 pre 标签对空行和空格进行控制，它保留空格和换行。
- “计算机输出”标签
| 标签 | 描述 |
|---|---|
<code> |
定义计算机代码。 |
<kbd> |
定义键盘码。 |
<samp> |
定义计算机代码样本。 |
<tt> |
定义打字机代码。 |
<var> |
定义变量。 |
<pre> |
定义预格式文本。 |
<listing> |
不赞成使用。使用 <pre> 代替。 |
<plaintext> |
不赞成使用。使用 <pre> 代替。 |
<xmp> |
不赞成使用。使用 <pre> 代替。 |
- 引用、引用和术语定义
| 标签 | 描述 |
|---|---|
<abbr> |
定义缩写。 |
<acronym> |
定义首字母缩写。 |
<address> |
定义地址。 |
<bdo> |
定义文字方向。 |
<blockquote> |
定义长的引用。 |
<q> |
定义短的引用语。 |
<cite> |
定义引用、引证。 |
<dfn> |
定义一个定义项目。 |
七、CSS
当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化。有以下三种方式来插入样式表：
- 外部样式表
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
- 内部样式表
<head>
<style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style>
</head>
- 内联样式
<p style="color: red; margin-left: 20px">
This is a paragraph
</p>
八、链接
HTML 使用超级链接与网络上的另一个文档相连。
超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。
当您把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。
我们通过使用 <a> 标签在 HTML 中创建链接。
有两种使用 <a> 标签的方式：
- 通过使用
href属性 - 创建指向另一个文档的链接 - 通过使用
name属性 - 创建文档内的书签
- 语法
<a href="url">Link text</a>
href 属性规定链接的目
- target属性
使用 target 属性，你可以定义被链接的文档在何处显示。
下面的这行会在新窗口打开文档：
<a href="http://www.w3school.com.cn/" target="_blank">Visit W3School!</a>
- name属性
name属性规定锚（anchor）的名称。- 您可以使用 name 属性创建 HTML 页面中的书签。
- 书签不会以任何特殊方式显示，它对读者是不可见的。
- 当使用命名锚（named anchors）时，我们可以创建直接跳至该命名锚（比如页面中某个小节）的链接，这样使用者就无需不停地滚动页面来寻找他们需要的信息了。
# 在 HTML 文档中对锚进行命名（创建一个书签）
<a name="tips">基本的注意事项 - 有用的提示</a>
# 在同一个文档中创建指向该锚的链接
<a href="#tips">有用的提示</a>
# 在其他页面中创建指向该锚的链接：
<a href="http://www.w3school.com.cn/html/html_links.asp#tips">有用的提示</a>
九、图像
<img>是空标签，意思是说，它只包含属性，并且没有闭合标签。
要在页面上显示图像，你需要使用源属性（src）。src指 "source"。源属性的值是图像的 URL 地址。alt属性用来为图像定义一串预备的可替换的文本。替换文本属性的值是用户定义的。- 在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯，这样有助于更好的显示信息，并且对于那些使用纯文本浏览器的人来说是非常有用的。
十、表格
- 表格由
<table>标签来定义。每个表格均有若干行（由<tr>标签定义），每行被分割为若干单元格（由<td>标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。 - 表格的表头使用
<th>标签进行定义。 - 使用边框属性来显示一个带有边框的表格：
border。
十一、列表
- 无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。
- 无序列表始于
<ul>标签。每个列表项始于<li>。 - 同样，有序列表也是一列项目，列表项目使用数字进行标记。
有序列表始于<ol>标签。每个列表项始于<li>标签。 - 自定义列表不仅仅是一列项目，而是项目及其注释的组合。
- 自定义列表以
<dl>标签开始。每个自定义列表项以<dt>开始。每个自定义列表项的定义以<dd>开始。
十二、HTML 块
HTML 块元素
- 大多数 HTML 元素被定义为块级元素或内联元素。
- 编者注：“块级元素”译为 block level element，“内联元素”译为 inline element。
- 块级元素在浏览器显示时，通常会以新行来开始（和结束）。
例子：<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 进行分类（设置类），使我们能够为元素的类定义 CSS 样式。
为相同的类设置相同的样式，或者为不同的类设置不同的样式。
十四、框架
- 通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。
- 每份HTML文档称为一个框架，并且每个框架都独立于其他的框架。
使用框架的坏处：
- 开发人员必须同时跟踪更多的HTML文档
- 很难打印整张页面
框架结构标签（<frameset>）
- 框架结构标签（
<frameset>）定义如何将窗口分割为框架 - 每个
frameset定义了一系列行或列 rows/columns的值规定了每行或每列占据屏幕的面积
框架标签（Frame）
Frame标签定义了放置在每个框架中的 HTML 文档。- 假如一个框架有可见边框，用户可以拖动边框来改变它的大小。为了避免这种情况发生，可以在
<frame>标签中加入：noresize="noresize"。
十五、内联框架
iframe用于在网页内显示网页。height和width属性用于规定iframe的高度和宽度。frameborder属性规定是否显示iframe周围的边框。iframe可用作链接的目标（target）。- 链接的
target属性必须引用iframe的name属性。
十六、头部
<head>元素是所有头部元素的容器。<head>内的元素可包含脚本，指示浏览器在何处可以找到样式表，提供元信息，等等。
以下标签都可以添加到head部分：<title>、<base>、<link>、<meta>、<script>以及<style>。<title>标签定义文档的标题。<base>标签为页面上的所有链接规定默认地址或默认目标（target）<link>标签定义文档与外部资源之间的关系。<link>标签最常用于连接样式表：<style>标签用于为 HTML 文档定义样式信息。
您可以在style元素内规定 HTML 元素在浏览器中呈现的样式：
元数据（metadata）是关于数据的信息。
<meta>标签提供关于 HTML 文档的元数据。元数据不会显示在页面上，但是对于机器是可读的。
典型的情况是，meta元素被用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据。<meta>标签始终位于head元素中。
元数据可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务。name和content属性的作用是描述页面的内容。
<meta name="keywords" content="HTML, CSS, XML" />
十七、实体
在 HTML 中，某些字符是预留的。如果希望正确地显示预留字符，我们必须在 HTML 源代码中使用字符实体（character entities）。
| 显示结果 | 描述 | 实体名称 | 实体编号 |
|---|---|---|---|
| 空格 | |
  |
|
| < | 小于号 | < |
< |
|大于号|
>|>
& |和号|&|&
"| 引号|"|"
' |撇号|'(IE不支持)|'
￠| 分（cent）|¢|¢
￡| 镑（pound）|£|£
￥| 元（yen）|¥|¥
€| 欧元（euro）|€|€
§| 小节|§|§
©| 版权（copyright）|©|©
®| 注册商标|®|®
™| 商标|™|™
×| 乘号|×|×
÷| 除号|÷|÷
十八、URL
- URL - Uniform Resource Locator
统一资源定位器（URL）用于定位万维网上的文档（或其他数据）。 - URL 只能使用 ASCII 字符集来通过因特网进行发送。
由于 URL 常常会包含 ASCII 集合之外的字符，URL 必须转换为有效的 ASCII 格式。 - URL 编码使用 "
%" 其后跟随两位的十六进制数来替换非 ASCII 字符。 - URL 不能包含空格。URL 编码通常使用
+来替换空格。
十九、颜色
- 颜色由一个十六进制符号来定义，这个符号由红色、绿色和蓝色的值组成（RGB）。
- 每种颜色的最小值是0（十六进制：
#00）。最大值是255（十六进制：#FF）。 - 大多数的浏览器都支持颜色名集合。
- 提示：仅仅有 16 种颜色名被 W3C 的 HTML4.0 标准所支持。它们是：
aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow。
如果需要使用其它的颜色，需要使用十六进制的颜色值。
二十、文档类型
<!DOCTYPE>声明帮助浏览器正确地显示网页。<!DOCTYPE>不是 HTML 标签。它为浏览器提供一项信息（声明），即 HTML 是用什么版本编写的。
二十一、XHTML
XHTML 是以 XML 格式编写的 HTML。
- XHTML 指的是可扩展超文本标记语言
- XHTML 与 HTML 4.01 几乎是相同的
- XHTML 是更严格更纯净的 HTML 版本
- XHTML 是以 XML 应用的方式定义的 HTML
- XHTML 是 2001 年 1 月发布的 W3C 推荐标准
- XHTML 得到所有主流浏览器的支持
与 HTML 相比最重要的区别：
文档结构
- XHTML DOCTYPE 是强制性的
<html>中的 XML namespace 属性是强制性的<html>、<head>、<title>以及<body>也是强制性的
元素语法
- XHTML 元素必须正确嵌套
- XHTML 元素必须始终关闭
- XHTML 元素必须小写
- XHTML 文档必须有一个根元素
属性语法
- XHTML 属性必须使用小写
- XHTML 属性值必须用引号包围
- XHTML 属性最小化也是禁止的
二十二、表单
HTML 表单用于搜集不同类型的用户输入。
<form> 元素
HTML 表单用于收集用户输入。
<form> 元素定义 HTML 表单：
<input> 元素
<input>元素是最重要的表单元素。<input>元素有很多形态，根据不同的 type 属性。
| 类型 | 描述 |
|---|---|
text |
定义常规文本输入。 |
radio |
定义单选按钮输入（选择多个选择之一） |
submit |
定义提交按钮（提交表单） |
Action 属性
action属性定义在提交表单时执行的动作。- 向服务器提交表单的通常做法是使用提交按钮。
- 通常，表单会被提交到 web 服务器上的网页。
method 属性
规定在提交表单时所用的 HTTP 方法（GET 或 POST）：
您能够使用 GET（默认方法）：
- 如果表单提交是被动的（比如搜索引擎查询），并且没有敏感信息。
当您使用 GET 时，表单数据在页面地址栏中是可见的：
GET 最适合少量数据的提交。浏览器会设定容量限制。
您应该使用 POST：
- 如果表单正在更新数据，或者包含敏感信息（例如密码）。
POST 的安全性更加，因为在页面地址栏中被提交的数据是不可见的。
Name 属性
如果要正确地被提交，每个输入字段必须设置一个 name 属性。
用 <fieldset> 组合表单数据
<fieldset>元素组合表单中的相关数据<legend>元素为<fieldset>元素定义标题。
下面是 <form> 属性的列表：
| 属性 | 描述 |
|---|---|
accept-charset |
规定在被提交表单中使用的字符集（默认：页面字符集）。 |
action |
规定向何处提交表单的地址（URL）（提交页面）。 |
autocomplete |
规定浏览器应该自动完成表单（默认：开启）。 |
enctype |
规定被提交数据的编码（默认：url-encoded）。 |
method |
规定在提交表单时所用的 HTTP 方法（默认：GET）。 |
name |
规定识别表单的名称（对于 DOM 使用：document.forms.name）。 |
novalidate |
规定浏览器不验证表单。 |
target |
规定 action 属性中地址的目标（默认：_self）。 |
二十三、表单元素
<input> 元素
- 最重要的表单元素是
<input>元素。 <input>元素根据不同的type属性，可以变化为多种形态。
<select> 元素（下拉列表）
<select>元素定义下拉列表。<option>元素定义待选择的选项。- 列表通常会把首个选项显示为被选选项。
- 您能够通过添加
selected属性来定义预定义选项。
<textarea> 元素
<textarea>元素定义多行输入字段（文本域）：
<button> 元素
<button> 元素定义可点击的按钮：
HTML5 表单元素
HTML5 增加了如下表单元素：
<datalist><keygen><output>
注释：默认地，浏览器不会显示未知元素。新元素不会破坏您的页面。
HTML5 <datalist> 元素
<datalist>元素为<input>元素规定预定义选项列表。- 用户会在他们输入数据时看到预定义选项的下拉列表。
<input>元素的list属性必须引用<datalist>元素的id属性。
HTML5 输入类型
HTML5 增加了多个新的输入类型：
- color
- date
- datetime
- datetime-local
- month
- number
- range
- search
- tel
- time
- url
- week
注释：老式 web 浏览器不支持的输入类型，会被视为输入类型 text。
输入限制
这里列出了一些常用的输入限制（其中一些是 HTML5 中新增的）：
| 属性 | 描述 |
|---|---|
| disabled | 规定输入字段应该被禁用。 |
| max | 规定输入字段的最大值。 |
| maxlength | 规定输入字段的最大字符数。 |
| min | 规定输入字段的最小值。 |
| pattern | 规定通过其检查输入值的正则表达式。 |
| readonly | 规定输入字段为只读（无法修改）。 |
| required | 规定输入字段是必需的（必需填写）。 |
| size | 规定输入字段的宽度（以字符计）。 |
| step | 规定输入字段的合法数字间隔。 |
| value | 规定输入字段的默认值。 |
浙公网安备 33010602011771号