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