HTML语言基础

作者：陆金龙发表时间：2017-10-05 18:46

参考网址：

http://www.w3school.com.cn/html/index.asp

http://www.runoob.com/html/html-tutorial.html

https://www.w3.org/TR/tr-date-all

https://www.w3.org/TR/2014/REC-html5-20141028

1 HTML概述

1.1 HTML简介

HTML即超文本标记语言（HyperText Markup Language），是用来描述网页的一种语言，通过标记符号来标记要显示的网页的各个部分。

HTML是一种规范和标准，通过在文本文件中的标记符，告诉浏览器如何显示其中的内容。HTML文档就是网页，由浏览器解析、显示（浏览器解析是不严格的）。

1.2 HTML发展历程

1991，1993 HTML

1991年Tim Berners-Lee编写了一份叫做“HTML 标签”的文档，内里包括了大约20个用来标记网页的HTML标签。

1993年6月作为互联网工程工作小组（IETF）工作草案发布（并非标准）。

1994 HTML2.0

HTML第一个官方版本是1994年由 IETF（互联网工程任务组）推出的HTML 2.0，HTML 2.0吸纳了img标签。

1995年11月HTML2.0 作为RFC 1866发布。

HTML 3.2 1996年1月14日,W3C推荐标准。

1997，1999 HTML4.0 和HTML4.01

HTML4.0 1997年12月18日W3C推荐标准。

HTML4.01 1999年12月24日W3C推荐标准。

2000，2001 XHTML1.0和XHTML1.1

XHTML1.0 2000年1月26日，W3C推荐标准。没有新标签或属性，要求XML般的严格语法，是XML风格的HTML。2002年8月1日XHTML1.0 （第2版） W3C 推荐标准。

XHTML 1.1 2001年5月31，W3C推荐标准。无法使用 text/htmlmime-type直接输出。

2008 XHTML 2.0更加注重页面规范和可用性，不向前兼容。

XHTML2 2002年8月公开草案初版，2007年9月最终征求意见稿，2008年2月候选推荐稿，2008年6月建议推荐标准，2008年9月推荐版本（recommendation）。2010-12-16 XHMTL2.0 工作组备忘稿（Group Note）。

2009-07-02 发布消息XHTML2工作组预期在2009年底结束工作, W3C 将增加资源支持HTML5。2010-12-17 XHTML2工作组关闭。

2014 HTML5 （2009 HTML草案阶段，2010 移动端如Android发展，对HTML5支持起到推动作用，IE则在往后拉，缓慢持续了几年，直到2014年定稿）

2014-10-28 HTML5 W3C推荐标准最新：2017-10-03 HTML 5.1

HTML 5成为目前最新的HTML标准，HTML 5既支持疏松语法，也支持XHTML 1的严格语法。推荐的在HTML5中同时使用XHTML1语法规范。

1.3 HTML相关技术发展

1996 CSS1 JavaScript

1998 CSS2

2014 CSS3 2014-03-20 Recommendation

2005 AJAX

2 HTML结构

<!DOCTYPE html>

<title>HTML语言</title>

</head>

</body>

</html>

2.1 <!DOCTYPE> 文档类型声明

HTML 4.01 中，<!DOCTYPE> 声明需引用 DTD （文档类型声明）

HTML5 不是基于 SGML，因此不要求引用 DTD

常见的DOCTYPE声明：

HMTL5

<!DOCTYPE html>

XHTML 1.1 与 XHTML 1.0 Strict 相同，但允许添加模块

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

XHTML 1.0 Strict 不包括表象或过时的元素（如 font ），不允许框架集，结构必须按标准格式的 XML 进行书写

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

XHTML 1.0 Transitional 包括表象或过时的元素（如 font ），不允许框架集，结构必须按标准格式的 XML 进行书写。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

XHTML 1.0 Frameset这个 DTD 与 XHTML 1.0 Transitional 相同，但是允许使用框架集内容。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

HTML 4.01 Strict 不包括表象或过时的元素（如 font ），不允许框架集

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

HTML 4.01 Transitional 包括表象或过时的元素（如 font ），不允许框架集

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

HTML 4.01 Frameset 包括表象或过时的元素（如 font ），允许框架集

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

2.2 <head> 所有头部元素的容器

<head> 元素必须包含文档的标题（title）.

<head>可以包含meta 信息、脚本、样式以及其他更多的信息。

<title> 必须有

在 HTML 5 中，不再支持 scheme 属性。在 HTML 5 中有一个新的 charset 属性，它使字符集的定义更加容易。

在 HTML 4.01 中必须得这么写：<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">，在 HTML 5 中，可以这样写：<meta charset="ISO-8859-1">

虽然style可以卸载head外部的其他位置，但是建议css放在head中，能使网页显示效果更好。

"scoped" 属性是 HTML 5 中的新属性，它允许我们为文档的指定部分定义样式，而不是整个文档。如果使用该属性，则样式仅仅应用到 style 元素的父元素及其子元素。

元素既可包含脚本语句，也可以通过 "src" 属性指向外部脚本文件（如果使用 "src" 属性，则 <script> 元素必须是空的）。

虽然可以放到head中，但一般建议放到body后面，这样网页加载会快一些。

在 HTML 4 中，"type" 属性是必需的，但在 HTML5 中是可选的。因此HTML5中<script>标签中type为text/javascript或application/javascript通常就不写type属性，默认这个“script”是 ECMAScript。

"async" 属性是 HTML5 中的新属性规定异步执行脚本（仅适用于链接外部脚本的情况）

2.3 <body>

body的样式相关的属性基本已废弃，HTML5不支持。应该统一按照css规范来实现视觉效果（通过style或class属性使用css来控制样式）。

2.4  注释

使用 在源文档中插入注释，注释不会在浏览器中显示。

注释标签不支持任何标准属性和事件

3 HMTL块元素与内联元素

块元素(block element)和内联元素(inline element)都是HTML规范中的概念。

内联元素(inline element)一般都是基于语义级(semantic)的基本元素。内联元素只能容纳文本或者其他内联元素，常见内联元素"a"。

块元素和内联元素的基本差异是块元素一般都从新行开始，可容纳内联元素和块元素。

css可以强制改变HTML元素的内联或块级特性，比如可以把内联元素加上display:block属性，让其具有块级元素的特点；也可以使用display：inline属性，让div在行内显示换行。

3.1 块元素(block element)

注：HTML4.01和HTML5中不支持的标签不列出。

语义标签：

address 地址语义标签，换行斜体
blockquote 块引用，换行缩进

hr 水平分隔线

格式布局标签：

p 标记一个段落，元素会自动在其前后创建一些空白

h1 - 大标题、h2 - 副标题、h3 - 3级标题、h4 - 4级标题、h5 - 5级标题、h6 - 6级标题
div 定义一个分隔区块或者一个区域部分，常用于组合块级元素，以便通过 CSS 来对这些元素进行格式化

pre 可定义预格式化的文本，被包围在 <pre> 标签中的文本保留空格和换行符，文本也会呈现为等宽字体。不要使用"width" 属性：HTML 4.01已废弃，HTML5 不支持。

组合标签：

ul li 无序列表、ol li 排序列表列表默认带项目符号带缩进

dl dt dd 定义列表标签与 <dt> （定义项目/名字）和 <dd> （描述每一个项目/名字）一起使用

table tr td 表格，主要用于数据展示，而不是布局。

功能标签：

form 交互表单

fieldset 将表单内的相关元素分组，标签会在相关表单元素周围绘制边框。HTML5 中新增了一些 <fieldset> 的新属性：disabled、form、name

iframe 内联框架，src属性制定内联框架的地址。

frames HTML5不支持frames、 frameset、noframes
noframes frames可选内容，在frameset下（对不支持frame的浏览器显示此区块内容）

3.2 内联元素(inline element)

语义或短语标签，利于SEO：

em 强调

strong 粗体强调

code 计算机代码

cite 定义引用如作品的标题默认斜体样式

samp 定义范例计算机代码

kbd 定义键盘文本

dfn 定义一个定义项目

var 定义变量

small 小型文本

big 大字体文本

mark 突出显示

关于语义化标签：像div、span这种标签，Safari浏览器不认为它是可以产生交互的元素，如果又没有在这些元素上直接绑定事件，那些用事件委托绑定的事件就失效了。按照w3c提倡的语义化，用button或者a或者input去写一个按钮的话，这种bug就不会出现了。

格式标签：

br 换行使后面的元素新行开始，但是他本身还是属于上一行的

sub 下标
sup 上标

i 斜体

del 中划线 HTML5 不支持 <strike> 和 <s>标签。请用 <del> 标签代替

q 短引用自动添加引号
abbr 缩写 HTML5 不支持 <acronym> 标签，使用 <abbr> 标签代替它。

功能标签：

span 常用内联容器，定义文本内区块

a 锚点超链接

img 图片

input 输入框

textarea 多行文本输入框

select 项目选择

label 表单标签和表单元素组合使用 for=""绑定表单元素的Id值

4 HTML标签详解（部分）

&

由于"&"在html中有特殊作用，显示"&"使用&

<和 >

由于"<"和">"在html中用作标签，因此原样显示时需要转义

显示"<" 使用<

显示">" 使用>

显示空格

浏览器对空格的处理：

如果空格两边均有内容(文本)，那么多个空格与换行视为一个空格
　　如果两边只要要有一边没有内容，就忽略空格
　　如果需要显示空格使用，" "表示一个空格

hr

当内容的主题发生变化时，使用 <hr> 标签进行分隔

所有的布局属性在HTML4.01都已废弃，在HTML5 中也不支持，使用css替代。

pre

预格式化保留原始原样的格式
　<pre>
锄禾日当午，
　　汗滴禾下土。
谁知盘中餐，
　　粒粒皆辛苦。
　</pre>

a标签

a标签锚点

　 <a name="md">这是一个锚点</a>
　　<a href="#md">跳到锚点</a>

a标签超链接
　　<a href="url">连接显示的内容</a>
　　示例：<a href="http://www.baidu.com">百度一下</a>

a标签的target属性

链接的网页在新窗口中打开

a标签内嵌图片

a标签的下载功能

一个下载链接放到客户端是a标签，其href属性是文件的路径，如果是txt或jpg这种文件，点击链接直接在窗口显示。如果是doc或其他文件，无法显示时，就会弹出下载框。

a标签发送邮件

a标签打开视频文件

a标签运行可执行文件

Img标签

width 宽度 height 高度只设置其中一个则等比例缩放，若果设置了两个，则拉伸缩放；
alt 必需的属性，它规定在图像无法显示时的替代文本；
title 鼠标放上去显示
除width height 之外，其他的样式相关的属性都废弃，统一按css规范实现视觉效果

列表

定义列表

<dl>

<dt>Coffee</dt>

<dd>Black hot drink</dd>

<dd>White cold drink</dd>

</dl>

嵌套列表

<ul>

<li>Coffee</li>

<li>Tea

<ul>

<li>Black tea</li>

<li>Green tea</li>

</ul>

</li>

</ul>

列表样式:CSS list-style-type属性

none: 无(取消所有的list样式)

disc: 点

circle: 圆圈

square: 正方形

decimal: 数字

decimal-leading-zero: 十进制数，不足两位的补齐前导0，例如: 01, 02, 03, ..., 98, 99

lower-roman: 小写罗马文字，例如: i, ii, iii, iv, v, ...

upper-roman: 大写罗马文字，例如: I, II, III, IV, V, ...

lower-alpha: 小写英文，例如: a, b, c, ... z

upper-alpha: 大写英文，例如: A, B, C, ... Z

lower-latin: 小写拉丁文，例如: a, b, c, ... z

upper-latin: 大写拉丁文，例如: A, B, C, ... Z

lower-greek: 小写希腊字母，例如: α(alpha), β(beta), γ(gamma), ...

georgian: 乔治亚数字，例如: an, ban, gan, ..., he, tan, in, in-an, ...

armenian: 亚美尼亚数字

inherit:继承

li标签不换行

方式一：float:left

ul{

display:inline;

}

li{

float:left;

}

方式二：display:inline-block

ul{

display:block;

white-space:nowrap;

overflow:auto;

}

li{

display:inline-block;

}

表格

td 的rowspan、colspan属性跨几行跨几列。

表格细边框样式：（注意有兼容性问题）

.tb,tr,td

{

border-collapse:collapse;

}

表单及表单元素

表单标签：包含了处理表单数据所用服务端程序的URL以及数据提交到服务器的方法。

表单域：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等

表单按钮：包括提交按钮、复位按钮和一般按钮；用于将数据传送到服务器上，还可以用表单按钮来控制定义了处理脚本的处理工作。

form 表单标签

action属性的值为接收和处理表单数据的服务端网页地址。

method属性表示提交表单数据http请求方法，post表示使用post方式提交。

</form>

fieldset

在数据周围绘制一个带标题的框,如：

<form>

<fieldset>

<legend>个人信息：</legend>

Name: <input type="text"><br>

Email: <input type="text"><br>

Date of birth: <input type="text">

</fieldset>

</form>

input submit

type为submit的按钮，点击会将表单提交到服务器

</form>

input text文本域

当用户要在表单中键入字母、数字等内容时，就会用到文本域。

<form>

姓名: <input type="text" name="txt_name" /><br />

年龄: <input type="text" name=" txt_age " />

</form>

textarea 多行文本域

白日依山尽，

黄河入海流。

欲穷千里目，

更上一层楼。

</textarea>

非单值表单元素：radio、checkbox、select

radio单选按钮

将文字放在label标签中，绑定一个radio的id，点击label标签中的内容与点击radio效果一样。

　 <input id ="fm" type = "radio" name = "sex" /><label for = "fm" >female</label>

<br/>

</form>

checkbox 复选框

将文字放在label标签中，绑定一个checkbox 的id，点击label标签中的内容与点击checkbox 效果一样。

<div>

</div>

</form>

select

<select>选择列表元素
<option>选择列表条目元素

示例：

设置size属性：

　　　　-> size默认为1，就是ComboBox，只将选中的项显示出来，其他项在下拉列表中。
　　　　-> 设置size为n，表示显示n行的ListBox，一次显示n项，大于n项时可滚动查看。

设置multiple：

默认情况是单选，在select中添加multiple属性即可多选，如设置size="3" multiple="multiple"时，效果如下

iframe标签

iframe 元素会创建包含另外一个文档的内联框架（即行内框架）

动态设置资源

var frame=document.getElementById("iframe");

frame.src= "http://iprogram.com.cn";

获取iframe文档内的元素

使用window.frames[0].document获取文档

以id获取的方式~~window.frames["iframe"].document~~在火狐浏览器上取不到

var iframedoc = window.frames[0].document;

使用jQuery和选择器可从内联文档获取元素

var html =$(iframedoc ).find(“html”);

var body = $(iframedoc ).find(“body”);

//如果内联文档有类名为label的元素有id为btn_submit的元素，可以这样获取

var label= $(iframedoc ).find(“.label”);

var button = $(iframedoc ).find(“#btn_submit”);

frameset (帧标签)

HTML5已经不支持不推荐使用

示例（可嵌套使用）：

<noframes><body>您的浏览器不支持</body>frameset</noframes>
　</frameset>

</html>

<frameset></frameset>
　　一个html中直接写上frameset，不需要提供<html>、<body>等标签
　　在frameset中可以添加frame标签，默认就是一个页面，用src写地址
　　在frameset标签中有两个常见的属性
　　rows 行分大小 rows="30%,40%,*"
　　cols 列分大小
　　frame标签中有个属性表示noresize="noresize"，使得页面不能调整大小

<noframes>
　　并非所有浏览器都兼容frameset，那么如果有不兼容的时候，可以提供noframes标签，在不兼容的情况下，显示noframes中的内容，如：
<noframes><body>您的浏览器不支持</body>frameset</noframes>

（<body></body> 标签不能与 <frameset></frameset> 标签同时使用！不过包含一段文本的 <noframes> 标签，必须将这段文字嵌套于 <body></body> 标签内。）

5 HTML规范

5.1 HTML与XML比较

都是标记语言，注释相同，可以通过DOM控制，可以通过CSS控制；不同在于xml主要存储数据，html注重展示数据，xml语法更加严格规范。

XHTML是符合xml语法规范的HTML ，是更严格更纯净的 HTML 版本。

5.2 XHTML标准规范（XHTML1）

HTML标准规范现状

XHTML1让杂乱的HTML4代码有了新书写和解释规范，使网页能够被浏览器正确及较快地编译。目前大多网站为了seo和多浏览器支持，都采用XHTML1标准写法。

XHTML1以后，出现了XHTML2和HMTL5两种不兼容的、互相竞争的标准。XHTML2相比XHMTL1有很大的变化，且不兼容XHML1及以前的标准，没有得到浏览器厂商的支持。HTML 5是由包括Google、Mirosoft、Mozilla、Opera、Apple在内多家浏览器厂商共同起草的下一代web规范，增加了很多符合最新web发展趋势的功能。最终W3C停止了对XHTML2的开发，转而大力支持HTML5的规则制定，并于2014年发布了HTML5 的W3C推荐标准版。

HTML5既支持宽松的语法规范，也支持严格的XHML1规范，最新的HTML编写规范推荐在HTML5文档中使用XHML1规范。

XHML1标准规范特点

标签：有始有终，小写规范。标签必须有结束标签，不能省略。
　　内容：body分工，内容其中。
　　注释：跨行注释，不要嵌套。
　　属性：键值双引，空格分列。属性名与属性值成对出现，属性名小写，属性值使用双引号。

标识：使用id做为元素的唯一标志，而不是name。