超文本标记语言（英语：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 系统，系统现在或者只能有三个字符。

结构

基本结构：

1
2
3
4
5
6
7
8
9
<!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> 标签没有结束标签。

meta

  • <meta>元素可提供有关页面的元信息（meta-information），针对搜索引擎和更新频度的描述和关键词
  • <meta>标签位于文档的头部，不包含任何内容
  • <meta>提供的信息是用户不可见的

常见属性

  • 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=“张三”>
  • 功能：说明网站版权信息
  • 用法：<meta name=“copyright" content="信息参数">

description(描述)

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

例如：

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

常用标签

字体修饰

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

排版元素

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

列表

无序列表

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

常用属性：

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

有序列表

1
2
3
4
<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 来标记
，那么该标签的作用会变得更加有效。

例如：

1
2
3
4
<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 number**date 规定输入字段的最大值。请与 “min” 属性配合使用，来创建合法值的范围。
maxlength number 规定输入字段中的字符的最大长度。
min number**date 规定输入字段的最小值。请与 “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 元素可创建单选或多选菜单。

例如：

1
2
3
4
5
6
<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 规定当在表单中提交时，文本区域中的文本如何换行。。