HTML学习指南

超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。

w3c

万维网联盟（World Wide Web Consortium，简称W3C）创建于1994年，是Web技术领域具权威和影响力的国际标准化组织。

W3C主要工作，是制作Web规范。到目前为止，W3C已发布了200多项影响深远的Web技术标准。比如：XHTML、HTML5、XML、CSS、DOM、XSTL等

HTML5

新版本特性

1、淘汰过时的或冗余的属性

2、Indexed DB本地存储功能

3、脱离Flash 和Silverlight直接在浏览器中显示图形或动画

4、一个HTML5文档到另一个文档间的拖放功能

5、提供外部应用和浏览器内部数据之间的开放接口

HTML5的缺点

欧洲网络信息安全机构已经发出警告，HTML5可能并不够安全。

HTML5还没有被各大浏览器所支持

HTML5要求技术必须全部开放，而这可能触及到一些大公司的利益

HTML文档的后缀名

.html
.htm

以上两种后缀名没有区别，都可以使用。

Tips：.htm 应用在早期 DOS 系统，系统现在或者只能有三个字符。

结构

基本结构：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
  </body>
</html>

说明：

<html></html>是文档的开始标记和结束标记。此元素告诉浏览器其自身是一个 HTML 文档，在它们之间是文档的头部和主体
<head></head>元素出现在文档的开头部分。<head>与</head>之间的内容不会在浏览器的文档窗口显示，但是其中的元素有特殊重要的意义
<title></title>定义网页标题，在浏览器标题栏显示
<body></body>之间的文本是可见的网页主体内容

HTML标签是由尖括号包围的关键词，比如 <html>
标签对中的第一个标签是开始标签，第二个标签是结束标签
HTML标签通常是成对出现的（双边标记），比如 <div> 和 </div>
但也有单独呈现的标签（单边标记），如：<br />、<hr />和<img src=“images/1.jpg” />等
标签可以有若干个属性，也可以不带属性。如<head>元素就不带任何属性

语法：

1 2	<标签名属性1=“属性值1” 属性2=“属性值2”……>内容部分</标签名> <标签名属性1=“属性值1” 属性2=“属性值2”…… />

文档声明头

准确的说，<!DOCTYPE html>，它并不是 HTML 标签，它是指明了该页面使用哪个 HTML 版本进行编译。

html4.01版本文档声明头

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

html5版本文档声明头

1	<!DOCTYPE html>

Tips：<!DOCTYPE> 标签没有结束标签。

常见属性

http-equiv属性：相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值

常见用法

content-type

功能：设定当前页面使用的字符集和语言
用法：<meta http-equiv="content-type" content="text/html; charset=utf-8">

refresh(刷新)（不推荐使用）

功能：自动刷新，并指向新的页面
用法：<meta http-equiv="refresh" content=“2;url=http://baidu.com” />

author（作者）

说明：标注网页的作者
用法：<meta name=“author” content=“张三”>

Copyright(版权信息)

功能：说明网站版权信息
用法：<meta name=“copyright" content="信息参数">

description(描述)

功能：简述网站页面内容。
用法：<meta name="description" content="xxxxxx">

例如：

<meta name="description" content="全球最大的中文搜索引擎、致力于让网民更便捷地获取信息，找到所求。百度超过千亿的中文网页数据库，可以瞬间找到相关的搜索结果。">

常用标签

字体修饰

标签	作用
`<b></b>`	加粗效果
`<i></i>`	斜体效果
`<u></u>`	下划线效果
`<s></s>`	删除效果

排版元素

标签	作用
`<p></p>`	用来创建一个段落，该元素自动在其前后创建一些空白
`<br/>`	换行
`<hr/>`	华丽的分割线
`<h1></h1>...<h6></h6>`	6种标题效果标签。分别为h1~h6。字体最大，字体最小

列表

无序列表

<ul>
    <li>内容1</li>
    <li>内容2</li>
</ul>

常用属性：

disc(实心圆点)(默认)
circle(空心圆圈)
square(实心方块)

有序列表

<ol>
    <li>内容</li>
    <li>内容</li>
</ol>

常用属性：

type编号类型，默认为整数，可选（1、A、a、Ⅰ、i）
start起始编号，默认为1，即由最小编号开始

a标签

在所有浏览器中，链接的默认外观是：

未被访问的链接带有下划线而且是蓝色的
已被访问的链接带有下划线而且是紫色的
活动链接带有下划线而且是红色的

语法

1	<a 属性=“属性值”>标签内容</a>

常见属性

属性	值	描述
download	filename	规定被下载的超链接目标。
href	URL	规定链接指向的页面的 URL。
hreflang	language_code	规定被链接文档的语言。
media	media_query	规定被链接文档是为何种媒介/设备优化的。
rel	text	规定当前文档与被链接文档之间的关系。
target	_blank_parent_self_topframename	规定在何处打开链接文档。
type	MIME type	规定被链接文档的的 MIME 类型。

div标签

可定义文档中的分区或节（division/section）。

标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。如果用 id 或 class 来标记

，那么该标签的作用会变得更加有效。

例如：

<div style="color:#00FF00">
  <h3>This is a header</h3>
  <p>This is a paragraph.</p>
</div>

属性

属性	值	描述
align	leftrightcenterjustify	不赞成使用。请使用样式取而代之。规定 div 元素中的内容的对齐方式。

img标签

img 标签向网页中嵌入一幅图像。

Tips：<img> 标签并不会在网页中插入图像，而是从网页上链接图像。<img> 标签创建的是被引用图像的占位空间。

必需的属性

属性	值	描述
alt	text	规定图像的替代文本。
src	URL	规定显示图像的 URL。

可选的属性

属性	值	描述
height	pixels%	定义图像的高度。
ismap	URL	将图像定义为服务器端图像映射。
longdesc	URL	指向包含长的图像描述文档的 URL。
usemap	URL	将图像定义为客户器端图像映射。
width	pixels%	设置图像的宽度。

table标签

标签定义 HTML 表格。

简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。

tr 元素定义表格行，th 元素定义表头，td 元素定义表格单元。

属性

属性	值	描述
border	pixels	规定表格边框的宽度。
cellpadding	pixels%	规定单元边沿与其内容之间的空白。
cellspacing	pixels%	规定单元格之间的空白。
frame	voidabovebelowhsideslhsrhsvsidesboxborder	规定外侧边框的哪个部分是可见的。
rules	nonegroupsrowscolsall	规定内侧边框的哪个部分是可见的。
summary	text	规定表格的摘要。
width	%pixels	规定表格的宽度。

form标签

标签用于为用户输入创建 HTML 表单。表单用于向服务器传输数据。

表单能够包含 input 元素，比如文本字段、复选框、单选框、提交按钮等等。

属性

属性	值	描述
accept-charset	charset_list	规定服务器可处理的表单数据字符集。
action	URL	规定当提交表单时向何处发送表单数据。
autocomplete	onoff	规定是否启用表单的自动完成功能。
enctype	见说明	规定在发送表单数据之前如何对其进行编码。
method	getpost	规定用于发送 form-data 的 HTTP 方法。
name	form_name	规定表单的名称。
novalidate	novalidate	如果使用该属性，则提交表单时不进行验证。
target	_blank_self_parent_topframename	规定在何处打开 action URL。

input标签

<input> 标签用于搜集用户信息。

根据不同的 type 属性值，输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。

属性

new : HTML5 中的新属性。

属性	值	描述
accept	mime_type	规定通过文件上传来提交的文件的类型。
alt	text	定义图像输入的替代文本。
autocomplete	onoff	规定是否使用输入字段的自动完成功能。
autofocus	autofocus	规定输入字段在页面加载时是否获得焦点。（不适用于 type=”hidden”）
checked	checked	规定此 input 元素首次加载时应当被选中。
disabled	disabled	当 input 元素加载时禁用此元素。
form	formname	规定输入字段所属的一个或多个表单。
formaction	URL	覆盖表单的 action 属性。（适用于 type=”submit” 和 type=”image”）
formenctype	见注释	覆盖表单的 enctype 属性。（适用于 type=”submit” 和 type=”image”）
formmethod	getpost	覆盖表单的 method 属性。（适用于 type=”submit” 和 type=”image”）
formnovalidate	formnovalidate	覆盖表单的 novalidate 属性。如果使用该属性，则提交表单时不进行验证。
formtarget	_blank_self_parent_topframename	覆盖表单的 target 属性。（适用于 type=”submit” 和 type=”image”）
height	pixels%	定义 input 字段的高度。（适用于 type=”image”）
list	datalist-id	引用包含输入字段的预定义选项的 datalist 。
max	numberdate	规定输入字段的最大值。请与 “min” 属性配合使用，来创建合法值的范围。
maxlength	number	规定输入字段中的字符的最大长度。
min	numberdate	规定输入字段的最小值。请与 “max” 属性配合使用，来创建合法值的范围。
multiple	multiple	如果使用该属性，则允许一个以上的值。
name	field_name	定义 input 元素的名称。
pattern	regexp_pattern	规定输入字段的值的模式或格式。例如 pattern=”[0-9]” 表示输入值必须是 0 与 9 之间的数字。
placeholder	text	规定帮助用户填写输入字段的提示。
readonly	readonly	规定输入字段为只读。
required	required	指示输入字段的值是必需的。
size	number_of_char	定义输入字段的宽度。
src	URL	定义以提交按钮形式显示的图像的 URL。
step	number	规定输入字的的合法数字间隔。
type	buttoncheckboxfilehiddenimagepasswordradioresetsubmittext	规定 input 元素的类型。
value	value	规定 input 元素的值。
width	pixels%	定义 input 字段的宽度。（适用于 type=”image”）

select标签

select 元素可创建单选或多选菜单。

例如：

<select>
  <option value ="Aha">Name</option>
  <option value ="12">Age</option>
  <option value="man">Gender</option>
  <option value="5">Grade</option>
</select>

textarea标签

文本区中可容纳无限数量的文本，其中的文本的默认字体是等宽字体（通常是 Courier）。

可以通过 cols 和 rows 属性来规定 textarea 的尺寸，不过更好的办法是使用 CSS 的 height 和 width 属性。

属性

属性	值	描述
autofocus	autofocus	规定在页面加载后文本区域自动获得焦点。
cols	number	规定文本区内的可见宽度。
disabled	disabled	规定禁用该文本区。
form	form_id	规定文本区域所属的一个或多个表单。
maxlength	number	规定文本区域的最大字符数。
name	name_of_textarea	规定文本区的名称。
placeholder	text	规定描述文本区域预期值的简短提示。
readonly	readonly	规定文本区为只读。
required	required	规定文本区域是必填的。
rows	number	规定文本区内的可见行数。
wrap	hardsoft	规定当在表单中提交时，文本区域中的文本如何换行。。