HTML 相关

时间：2020-04-20 16:12:02 阅读：85 评论：0 收藏：0 [点我收藏+]

HTML 相关
2018/11/29 Chenxin
参考:
http://www.w3school.com.cn/html/html_headings.asp
http://www.runoob.com/tags/tag-pre.html

通用概念
元素
元素 = 开始标签 + 内容 + 结束标签.

块级元素：在浏览器默认显示时以新行来开始（和结束）的元素。
内联元素：又称行内元素，在浏览器默认显示时在同一行按从左至右顺序显示，不单独占一行的元素。

属性
开始标签中那些以名称/值对的形式出现的内容，我们称之为属性。
如：href="http://hanzhaoxin.cnblogs.com/"。（href是属性名称，"http://hanzhaoxin.cnblogs.com/"是属性值）。

常见元素
根元素,元数据元素,脚本元素,块元素,列表元素,表格元素
文本元素,文本格式化元素,计算机输出标签,引用和属于定义,链接与图像

和框架,内联框架表单元素常见属性全局属性包含,核心属性,语言属性,键盘属性常见元素属性,元素的属性,

元素的属性注意事项编写html页面的原则： 1.一定要以开头 2.在中指出正确的字符编码。用来标记 3.在中一定包含一个元素 w3school的教程 HTML元素 <html> 元素定义了整个 HTML 文档。 <body> 元素定义了 HTML 文档的主体。 元素定义一个段落。  定义一个注释. <hr /> 创建水平线。hr 元素可用于分隔内容。 就是没有关闭标签的空元素.在不产生一个新段落的情况下进行换行（新行) 标签.推荐使用 而非 . <a> 标签在 HTML 中创建链接。定义锚。 空的 HTML 元素 没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。在 XHTML、XML 以及未来版本的 HTML 中，所有元素都必须被关闭。 在开始标签中添加斜杠，比如 ，是关闭空元素的正确方法，HTML、XHTML 和 XML 都接受这种方式。 HTML属性 属性总是以名称/值对的形式出现，比如：name="value"。 属性总是在 HTML 元素的开始标签中规定。 始终为属性值加引号 属性值应该始终被包括在引号内。双引号是最常用的，不过使用单引号也没有问题(例如：name=‘Bill "HelloWorld" Gates‘)。 HTML格式化 文本格式化标签 标签描述 定义粗体文本。 <big> 定义大号字。 定义着重文字。 定义斜体字。 定义小号字。 "计算机输出"标签 <code> 定义计算机代码。 引用、引用和术语定义 <abbr> 定义缩写。 <acronym> 定义首字母缩写。 <address> 定义地址。 HTML引用 HTML <q> 元素定义短的引用。 浏览器通常会为 <q> 元素包围引号。(自动添加双引号) HTML <blockquote> 元素定义被引用的节。 浏览器通常会对 <blockquote> 元素进行缩进处理。(自动把一块缩进) HTML <abbr> 元素定义缩写或首字母缩略语。 对缩写进行标记能够为浏览器、翻译系统以及搜索引擎提供有用的信息。 HTML <address> 元素定义文档或文章的联系信息（作者/拥有者）。 此元素通常以斜体显示。大多数浏览器会在此元素前后添加折行。 HTML <cite> 元素定义著作的标题。 浏览器通常会以斜体显示 <cite> 元素。 HTML计算机代码格式 <code> 定义计算机代码文本 Coding Example: <code> <pre> # 因为<code> 元素不保留多余的空格和折行,故还需要一个<pre>元素(定义预格式化文本) var person = { firstName:"Bill", lastName:"Gates", age:50, eyeColor:"blue" } </pre> </code> 条件注释 您也许会在 HTML 中偶尔发现条件注释：  条件注释定义只有 Internet Explorer 执行的 HTML 标签。 HTML样式 style属性 提供了一种改变所有 HTML 元素的样式的通用方法。 样式是 HTML 4 引入的，它是一种新的首选的(推荐的)改变 HTML 元素样式的方式。通过 HTML 样式，能够通过使用 style 属性直接将样式添加到 HTML 元素，或者间接地在独立的样式表中（CSS 文件）进行定义。 <body style="background-color:yellow"> <h2 style="background-color:red">This is a heading</h2> This is a paragraph. </body> HTML CSS 通过使用 HTML4.0，所有的格式化代码均可移出 HTML 文档，然后移入一个独立的样式表。 如何使用样式 当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化。 有以下三种方式来插入样式表. 外部样式表 当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。 <head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head> 内部样式表 当单个文件需要特别样式时，就可以使用内部样式表。你可以在 head 部分通过 <style> 标签定义内部样式表。 <head> <style type="text/css"> body {background-color: red} p {margin-left: 20px} </style> </head> 内联样式(优先级最高) 当特殊的样式需要应用到个别元素时，就可以使用内联样式。使用内联样式的方法是在相关的标签中使用样式属性。 This is a paragraph HTML链接 HTML 链接 - target 属性(新页面打开链接) 使用 Target 属性，你可以定义被链接的文档在何处显示。下面的这行会在新窗口打开文档： <a href="http://www.w3school.com.cn/" target="_blank">Visit W3School!</a> HTML 链接 - name 属性(命名锚) 实例说明 首先，我们在 HTML 文档中对锚进行命名（在目标文本处,创建一个书签）：<a name="tips">基本的注意事项 - 有用的提示</a> (实际文本的地方) 然后，我们在同一个文档中创建指向该锚的链接：<a href="#tips">有用的提示</a> (文档开头,中间,末尾都可以调用). 另外,您也可以在其他页面中创建指向该锚的链接：<a href="http://www.w3school.com.cn/html/html_links.asp#tips">有用的提示</a> 概念 name 属性规定锚（anchor,抛锚停泊）的名称。 您可以使用 name 属性创建 HTML 页面中的书签。书签不会以任何特殊方式显示，它对读者是不可见的。 命名锚的语法： <a name="label">锚（显示在页面上的文本）</a> 提示：您可以使用 id 属性来替代 name 属性，命名锚同样有效。 HTML 图像 <img alt="技术图片" src="url" /> 替换文本属性（Alt） alt 属性用来为图像定义一串预备的可替换文本.当加载不到该图片时,会自动显示该文本. <img alt="技术图片" src="boat.gif" alt="Big Boat"> 图像标签 标签描述 <img alt="技术图片"> 定义图像。 <map> 定义图像地图。 <area> 定义图像地图中的可点击区域。 HTML 表格 表格 <table>表格由 <table> 标签来定义。 <tr> 表格行. <td> 每行被分割为的单元格.td 指table data. 边框属性,带有边框的表格： <table border="1"> 表头 表格的表头使用 <th> 标签定义。 HTML 列表 无序列表:<ul> 标签(unorder list)。每个列表项: <li>。 <ul> <li>Coffee</li> <li>Milk</li> </ul> 浏览器显示如下： * Coffee * Milk 有序列表 <ol> 标签(order list)。每个列表项 <li> 标签。 <ol> <li>Coffee</li> <li>Milk</li> </ol> 浏览器显示如下： 1. Coffee 2. Milk 自定义列表是项目及其注释的组合。 自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。 HTML块 (div 和 span) 可以通过 <div> 和 将 HTML 元素组合起来。大多数 HTML 元素被定义为块级元素或内联元素。 HTML 块元素 块级元素: block level element，内联元素:inline element。块级元素在浏览器显示时，通常会以新行来开始（和结束）。 例子：<h1>, , <ul>, <table> HTML 内联元素 内联元素在显示时通常不会以新行开始。 例子：, <td>, <a>, <img alt="技术图片"> HTML <div> 元素 定义文档中的分区或节（division/section）。 文档中的一个区域显示为蓝色： <div style="color:#0000FF"> <h3>这是一个在 div 元素中的标题。</h3> 这是一个在 div 元素中的文本。 </div> HTML <div> 元素是块级元素，它是可用于组合其他 HTML 元素的容器。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。 <div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法(table)。 HTML 元素 使用 元素对文本中的一部分进行着色：我的母亲有 蓝色 的眼睛。 HTML 元素是内联元素，可用作文本的容器。 元素也没有特定的含义。当与 CSS 一同使用时， 元素可用于为部分文本设置样式属性。 HTML 类 (结合div 或 span) div 块类 对 HTML 进行分类（设置类 class），使我们能够为元素的类定义 CSS 样式。为相同的类设置相同的样式。 <!DOCTYPE html> <html> <head> <style> .cities { background-color:black; color:white; margin:20px; padding:20px; } </style> </head> <body> <div class="cities"> <h2>London</h2> London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants. </div> </body> </html> span 分类行内元素 HTML 元素是行内元素，能够用作文本的容器。设置 元素的类，能够为相同的 元素设置相同的样式。 <!DOCTYPE html> <html> <head> <style> span.red {color:red;} </style> </head> <body> <h1>My Important Heading</h1> </body> </html> HTML布局 使用 <div> 元素的 HTML 布局(需要使用div元素) <div> 元素常用作布局工具，因为能够轻松地通过 CSS 对其进行定位。 使用 HTML5 的网站布局(不用使用div元素) HTML5 提供的新语义元素定义了网页的不同部分： HTML5 语义元素 header 定义文档或节的页眉 nav 定义导航链接的容器 section 定义文档中的节 article 定义独立的自包含文章 aside 定义内容之外的内容（比如侧栏） footer 定义文档或节的页脚 details 定义额外的细节 summary 定义 details 元素的标题 通过表格方式(不推荐) 略 HTML响应式设计 什么是响应式 Web 设计？ <ul> <li>RWD 指的是响应式 Web 设计（Responsive Web Design）</li> <li>RWD 能够以可变尺寸传递网页</li> <li>RWD 对于平板和移动设备是必需的</li> </ul> 创建您自己的响应式设计 创建响应式设计的一个方法，是自己来创建它： <!DOCTYPE html> <html lang="en-US"> <head> <style> .city { float: left; margin: 5px; padding: 15px; width: 300px; height: 300px; border: 1px solid black; } </style> </head> ... 使用 Bootstrap 另一个创建响应式设计的方法，是使用现成的 CSS 框架。 Bootstrap 是最流行的开发响应式 web 的 HTML, CSS, 和 JS 框架。 Bootstrap 帮助您开发在任何尺寸都外观出众的站点：显示器、笔记本电脑、平板电脑或手机. HTML 框架 多个网页显示在一个窗口 <frameset cols="25%,75%"> <frame src="frame_a.html"> <frame src="frame_b.html"> </frameset> 框架 通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。每份HTML文档称为一个框架，并且每个框架都独立于其他的框架。 使用框架的坏处：* 开发人员必须同时跟踪更多的HTML文档.* 很难打印整张页面 框架结构标签（<frameset>）frameset标签声明. 框架标签（Frame）Frame 标签定义了放置在每个框架中的 HTML 文档。 重要提示：不能将 <body></body> 标签与 <frameset></frameset> 标签同时使用！ HTML内联框架 iframe 定义内联的子窗口（框架）,用于在网页内显示网页。添加 iframe 的语法 URL 指向隔离页面的位置。 HTML背景 注意: HTML4 和 XHTML中已被废弃。应该使用层叠样式表（CSS）来定义 HTML 元素的布局和显示属性。 背景颜色（Bgcolor） <body bgcolor="black"> 背景（Background） <body background="http://www.w3school.com.cn/clouds.gif"> HTML 脚本(JavaScript) JavaScript 使 HTML 页面具有更强的动态和交互性。 HTML script 元素 HTML 头部元素 HTML <head> 元素 <head> 元素是所有头部元素的容器。<head> 内的元素可包含脚本，指示浏览器在何处可以找到样式表，提供元信息，等等。以下标签都可以添加到 head 部分：<title>、<base>、<link>、<meta>、<script> 以及 <style>。 HTML <base> 元素 <base> 标签为页面上的所有链接规定默认地址或默认目标（target）： <head> <base href="http://www.w3school.com.cn/images/" /> <base target="_blank" /> </head> HTML <link> 元素 <link> 标签定义文档与外部资源之间的关系。<link> 标签最常用于连接样式表： <head> <link rel="stylesheet" type="text/css" href="mystyle.css" /> </head> HTML <style> 元素 <style> 标签用于为 HTML 文档定义样式信息。您可以在 style 元素内规定 HTML 元素在浏览器中呈现的样式： <head> <style type="text/css"> body {background-color:yellow} p {color:blue} </style> </head> HTML <meta> 元素 元数据（metadata）是关于数据的信息。 <meta> 标签提供关于 HTML 文档的元数据。元数据不会显示在页面上，但是对于机器是可读的。典型的情况是，meta 元素被用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据。 <meta> 标签始终位于 head 元素中。元数据可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务。针对搜索引擎的关键词.一些搜索引擎会利用 meta 元素的 name 和 content 属性来索引您的页面。下面的 meta 元素定义页面的描述：<meta name="description" content="Free Web tutorials on HTML, CSS, XML" /> 下面的 meta 元素定义页面的关键词：<meta name="keywords" content="HTML, CSS, XML" /> name 和 content 属性的作用是描述页面的内容。 HTML <script> 元素 <script> 标签用于定义客户端脚本，比如 JavaScript。 HTML 头部元素标签描述 <head> 定义文档头信息。可包含以下内容. <title> 定义文档标题。 <base> 定义页面上所有链接的默认地址或默认目标。 <link> 定义文档与外部资源之间的关系。 <meta> 定义关于 HTML 文档的元数据。 <script> 定义客户端脚本。 <style> 定义文档的样式信息。 HTML 字符实体如需显示小于号，我们必须这样写：< 或 < HTML 中有用的字符实体: 略 HTML URL 字符编码 URL 编码 URL 只能使用 ASCII 字符集来通过因特网进行发送。由于 URL 常常会包含 ASCII 集合之外的字符，URL 必须转换为有效的 ASCII 格式。 URL 编码使用 "%" 其后跟随两位的十六进制数来替换非 ASCII 字符。 URL 不能包含空格。URL 编码通常使用 + 来替换空格。 HTML 颜色颜色由红色、绿色、蓝色混合而成。颜色值颜色由一个十六进制符号来定义，这个符号由红色、绿色和蓝色的值组成（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。如果需要使用其它的颜色，需要使用十六进制的颜色值。 HTML <!DOCTYPE> <!DOCTYPE> 声明,帮助浏览器正确地显示网页。 Web 世界中存在许多不同的文档。只有了解文档的类型，浏览器才能正确地显示文档。 HTML 也有多个不同的版本，只有完全明白页面中使用的确切 HTML 版本，浏览器才能完全正确地显示出 HTML 页面。这就是 <!DOCTYPE> 的用处。 <!DOCTYPE> 不是 HTML 标签。它为浏览器提供声明信息，即 HTML 是用什么版本编写的。 HTML 版本从 Web 诞生早期至今，已经发展出多个 HTML 版本：版本年份 HTML 1991 HTML+ 1993 HTML 2.0 1995 HTML 3.2 1997 HTML 4.01 1999 XHTML 1.0 2000 HTML5 2012 XHTML5 2013 常用的声明 HTML5 <!DOCTYPE html> HTML 4.01 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> HTML 4.01 快速参考来自 W3School 的 HTML 快速参考。可以打印它，以备日常使用。 HTML Basic Document <html> <head> <title>Document name goes here Visible text goes here Text Elements

This is a paragraph

(line break)

(horizontal rule)

This text is preformatted

Logical Styles
This text is emphasized
This text is strong
This is some computer code

Physical Styles
This text is bold
This text is italic

Links, Anchors, and Image Elements
This is a Link

Send e-mail
A named anchor:
Useful Tips Section 创建锚
Jump to the Useful Tips Section 调用锚

Unordered list

First item
Next item

Ordered list

First item
Next item

Definition list

First term: Definition
Next term: Definition

Tables

someheader	someheader
sometext	sometext

Frames

Forms

Entities
< is the same as <
> is the same as >
? is the same as ?

Other Elements

Text quoted from some source.

Address 1

Address 2

City

form 表单
HTML 表单用于搜集不同类型的用户输入。
表单元素指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等等。

元素
元素是最重要的表单元素。元素有很多形态，根据不同的 type 属性。这是本章中使用的类型：
类型描述
text 定义常规文本输入。
radio 定义多选一
submit 定义提交按钮（提交表单）
如,

Action 属性
action 属性定义在提交表单时执行的动作。提交到服务器上的某个程序,指定了某个服务器脚本来处理被提交表单：

如果省略 action 属性，则 action 会被设置为当前页面。

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

或

Name 属性
如果要正确地被提交，每个输入字段必须设置一个 name 属性。

用

组合表单数据

元素组合表单中的相关数据元素为

元素定义标题。实例

Personal information: First name:

Last name:

HTML Form 属性
以下表单已设置所有可能的属性：

下面是

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

form 表单元素
元素

元素定义下拉列表.

元素 <textarea> 元素定义多行输入字段（文本域）<textarea name="message" rows="10" cols="30">The cat was playing in the garden.

HTML5 表单元素
HTML5 增加了如下表单元素：

元素为元素规定预定义选项列表。用户可以手动输入,或者从下拉中选择参考的几个项目.

实例
用户会在他们输入数据时看到预定义选项的下拉列表。元素的 list 属性必须引用元素的 id 属性。

form 表单 imput 元素的输入类型
输入类型：text
定义供文本输入的单行输入字段

输入类型：password
定义密码字段

输入类型：submit
定义提交表单数据至表单处理程序的按钮。
表单处理程序（form-handler）通常是包含处理输入数据的脚本的服务器页面。
在表单的 action 属性中规定表单处理程序（form-handler）

Input Type: radio
定义单选按钮

Input Type: checkbox
定义复选框

Input Type: button
<input type="button> 定义按钮

HTML5 输入类型
HTML5 增加了多个新的输入类型：

color 用于应该包含颜色的输入字段。
date 用于应该包含日期的输入字段。
datetime 允许用户选择日期和时间（有时区）。
datetime-local 允许用户选择日期和时间（无时区）。
email 用于应该包含电子邮件地址的输入字段。
month 允许用户选择月份和年份。
number 用于应该包含数字值的输入字段
range 用于应该包含一定范围内的值的输入字段。
search 用于搜索字段（搜索字段的表现类似常规文本字段）。
tel 用于应该包含电话号码的输入字段。
time 允许用户选择时间（无时区）。
url 用于应该包含 URL 地址的输入字段。
week 允许用户选择周和年。
注释：老式 web 浏览器不支持的输入类型，会被视为输入类型 text。

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

form表单中 input 元素的属性
value 属性
value 属性规定输入字段的初始值,

readonly 属性
readonly 属性规定输入字段为只读（不能修改)

disabled 属性
disabled 属性规定输入字段是禁用的。被禁用的元素是不可用和不可点击的。被禁用的元素不会被提交。

size 属性
size 属性规定输入字段的尺寸（以字符计）

maxlength 属性
maxlength 属性规定输入字段允许的最大长度

HTML5 属性
HTML5 为增加了如下属性：