目前记录的主要是自己遇到的一些内容,有些暂未记录的内容以(-)在目录中标出
详细完整的HTML内容见这里
标题和目录中的<...>
均省略(不然显示不出来orz)
!DOCTYPE 声明
声明位于文档中的最前面的位置,处于 标签之前,是用来告知 Web 浏览器页面使用了哪种 HTML 版本没有结束标签,不区分大小写
在HTML 4.01中需引用DTD(文档类型声明),因为HTML 4.01基于SGML(标准通用标记语言),HTML5不要求引用
常见的 DOCTYPE 声明
HTML 5
<!DOCTYPE html>
HTML 4.01 Strict
这个 DTD 包含所有 HTML 元素和属性,但不包括表象或过时的元素(如 font )。框架集是不允许的。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
HTML 4.01 Transitional
这个 DTD 包含所有 HTML 元素和属性,包括表象或过时的元素(如 font )。框架集是不允许的。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
HTML 4.01 Frameset
这个 DTD 与 HTML 4.01 Transitional 相同,但是允许使用框架集内容。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
XHTML 1.0 Strict
这个 DTD 包含所有 HTML 元素和属性,但不包括表象或过时的元素(如 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
这个 DTD 包含所有 HTML 元素和属性,包括表象或过时的元素(如 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">
XHTML 1.1
这个 DTD 与 XHTML 1.0 Strict 相同,但是允许您添加模块(例如为东亚语言提供 ruby 支持)。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
HTML全局属性
<html ...>
告知浏览器这是一个 HTML 文档,是 HTML 文档中最外层的元素
lang
规定元素内容的语言
<element lang="language_code">
class
规定元素的类名,类名不能以数字开头
class 属性不能在以下 HTML 元素中使用:base, head, html, meta, param, script, style 以及 title
<element class="value">
//多个类用空格分隔类名
id
规定元素的唯一id
data-*
data-*属性用于存储私有页面后应用的自定义数据,可以在所有的 HTML 元素中嵌入数据
自定义的数据可以让页面拥有更好的交互体验(不需要使用 Ajax 或去服务端查询数据)
data-* 属性由以下两部分组成:
- 属性名不要包含大写字母,在 data- 后必须至少有一个字符。
- 该属性可以是任何字符串
tabindex(?)
规定当使用 “tab” 键进行导航时元素的顺序
charset(-)
事件属性(-)
标签
html
<html>
<head>
这里是文档的头部 ... ...
...
</head>
<body>
这里是文档的主体 ... ...
...
</body>
</html>
head
定义文档的头部,文档的头部描述了文档的各种属性和信息,包括文档的标题、在 Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。
<title>
定义文档的标题,它是 head 部分中唯一必需的元素。
应该把 <head>
标签放在文档的开始处,紧跟在 <html>
后面,并处于 <body>
标签或 <frameset>
标签之前。
<head>
<title>文档的标题</title>
</head>
title(-)
meta
元数据(Metadata)是数据的数据信息。
标签提供了 HTML 文档的元数据,比如针对搜索引擎和更新频度的描述和关键词。元数据不会显示在客户端,但是会被浏览器解析。META元素通常用于指定网页的描述,关键词,文件的最后修改时间,作者及其他元数据。元数据可以被使用浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他 Web 服务调用。 **位于 head 区域内部**,元数据通常以 名称/值 对出现,`` 标签的属性定义了与文档相关联的名称/值对。 **实例** 定义文档关键词,用于搜索引擎:<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
定义web页面描述:
<meta name="description" content="Free Web tutorials on HTML and CSS">
定义页面作者:
<meta name="author" content="Hege Refsnes">
每30秒刷新页面:
<meta http-equiv="refresh" content="30">
<!-- 针对手持设备优化,主要是针对一些老的不识别viewport的浏览器,比如黑莓 -->
<meta name="HandheldFriendly" content="true">
<!-- 微软的老式浏览器 -->
<meta name="MobileOptimized" content="320">
<!-- uc强制竖屏 -->
<meta name="screen-orientation" content="portrait">
<!-- QQ强制竖屏 -->
<meta name="x5-orientation" content="portrait">
<!-- UC强制全屏 -->
<meta name="full-screen" content="yes">
<!-- QQ强制全屏 -->
<meta name="x5-fullscreen" content="true">
<!-- UC应用模式 -->
<meta name="browsermode" content="application">
<!-- QQ应用模式 -->
<meta name="x5-page-mode" content="app">
<!-- windows phone 点击无高光 -->
charset属性
规定 HTML 文档的字符编码,charset 属性可以通过任意元素上的 lang 属性来重写
HTML5 中的新属性,且替换了:
<meta charset="character_set">
character_set 常用的值:
UTF-8 - Unicode 字符编码
ISO-8859-1 - 拉丁字母表的字符编码
name属性
“keywords” 是一个经常被用到的名称。它为文档定义了一组关键字。某些搜索引擎在遇到这些关键字时,会用这些关键字对文档进行分类。
http-equiv属性
为名称/值对提供了名称。并指示服务器在发送实际的文档之前先在要传送给浏览器的 MIME 文档头部包含名称/值对。
当服务器向浏览器发送文档时,会先发送许多名称/值对。虽然有些服务器会发送许多这种名称/值对,但是所有服务器都至少要发送一个:content-type:text/html。这将告诉浏览器准备接受一个 HTML 文档。
使用带有 http-equiv 属性的 标签时,服务器将把名称/值对添加到发送给浏览器的内容头部
content属性
定义http-equiv或name属性相关的元信息content 属性始终要和 name 属性或 http-equiv 属性一起使用
scheme属性(HTML5不支持)
link(-)
<link>
标签定义文档与外部资源的关系,最常见的用途是链接样式表
link 元素是空元素,它仅包含属性,此元素只能存在于 head 部分,不过它可出现任何次数。
rel 属性 必需
定义当前文档与被链接文档之间的关系
<link rel="value">
值 | 描述 |
---|---|
alternate | 链接到该文档的替代版本(比如打印页、翻译或镜像) |
author | 链接到该文档的作者 |
help | 链接到帮助文档 |
icon | 导入表示该文档的图标 |
license | 链接到该文档的版权信息 |
next | 表示该文档是集合中的一部分,且集合中的下一个文档是被引用的文档 |
prefetch | 规定应该对目标资源进行缓存 |
prev | 表示该文档是集合中的一部分,且集合中的上一个文档是被引用的文档 |
search | 链接到针对文档的搜索工具 |
stylesheet | 要导入的样式表的 URL |
URL统一资源定位系统(uniform resource locator)是因特网的万维网服务程序上用于指定信息位置的表示方法
样式表(style sheet)是关于文件对标题和正文的默认字体、大小、颜色、前页外观、单个部分的排列间隔、行间距、四周页边距、标题间距离等元素的定义
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言
href属性
定义被链接文档的位置
href 属性规定外部资源(通常是样式表文件)的位置(URL)
可能的值:
绝对 URL - 指向另一个网站(比如 href=“http://www.example.com/theme.css”)
相对 URL - 指向网站内的一个文件(比如 href="/themes/theme.css")
//实例
<link rel="stylesheet" type="text/css" href="theme.css">
style
<style>
标签定义 HTML 文档的样式信息,每个 HTML 文档能包含多个 <style>
标签
在 <style>
元素中,您可以规定在浏览器中如何呈现 HTML 文档
如果没有使用 “scoped” 属性,则每一个 <style>
标签必须位于 head 头部区域(?????为什么我看的代码是写在head外部的??而且运行时这里没有报错?
type属性
(必需)规定样式表的 MIME 类型,type 属性指示 <style>
与 </style>
标签之间的内容
值 “text/css” 指示内容是标准的 CSS
<style type="MIME_type">
//MIME_type样式表的 MIME 类型,目前,唯一可能的值是 "text/css"
media属性(-)
为样式表规定不同的媒体类型
scoped属性(-)
(HTML5)如果使用该属性,则样式仅仅应用到 style 元素的父元素及其子元素。
body
定义文档的主体,包含文档的所有内容(比如文本、超链接、图像、表格和列表等等)
支持全局属性、事件属性
div
定义 HTML 文档中的一个分隔区块或者一个区域部分,常用于组合块级元素,以便通过 CSS 来对这些元素进行格式化
<div>
元素经常与 CSS 一起使用,用来布局网页。
默认情况下,浏览器通常会在 <div>
元素前后放置一个换行符。然而,您可以通过使用 CSS 改变这种情况
支持全局属性、事件属性
a
<a>
标签定义超链接,用于从一个页面链接到另一个页面,最重要的属性是 href 属性,它指定链接的目标。
在所有浏览器中,链接的默认外观如下:
- 未被访问的链接带有下划线而且是蓝色的
- 已被访问的链接带有下划线而且是紫色的
- 活动链接带有下划线而且是红色的
如果没有使用 href 属性,则不能使用 hreflang、media、rel、target 以及 type 属
通常在当前浏览器窗口中显示被链接页面,除非规定了其他 target
使用 CSS 来改变链接的样式
<a>
标签既可以是超链接,也可以是锚。在 HTML5 中,<a>
标签是超链接,但是假如没有 href 属性,它仅仅是超链接的一个占位符
href属性
规定链接的目标 URL
<a href="URL">
超链接的 URL。可能的值:
- 绝对 URL - 指向另一个站点(比如
href="http://www.example.com/index.htm"
) - 相对 URL - 指向站点内的某个文件(
href="index.htm"
) - 锚 URL - 指向页面中的锚(
href="#top"
)
form
用于创建供用户输入的 HTML 表单,<form>
元素包含一个或多个如下的表单元素:
<input>
, <textarea>
, <button>
, <select>
, <option>
, <optgroup>
, <fieldset>
, <label>
method 属性
method 方法规定如何发送表单数据(form-data)(表单数据会被发送到在 action 属性中规定的页面中)
表单数据可被作为 URL 变量的形式来发送(method=“get”)或者作为 HTTP post 事务的形式来发送(method=“post”)
- get
默认
将表单数据(form-data)以名称/值对的形式附加到 URL 中
URL 的长度是有限的(大约 3000 字符)
绝不要使用 GET 来发送敏感数据!(在 URL 中是可见的)
对于用户希望加入书签的表单提交很有用
GET 更适用于非安全数据,比如在 Google 中查询字符串 - post
以 HTTP post 事务的形式发送表单数据
将表单数据附加到 HTTP 请求的 body 内(数据不显示在 URL 中)
没有长度限制
通过 POST 提交的表单不能加入书签
action 属性
规定当提交表单时,向何处发送表单数据
<form action="URL">
label
<label>
标签为 input 元素定义标注(标记)
label 元素不会向用户呈现任何特殊效果。不过,它为鼠标用户改进了可用性。如果您在 label 元素内点击文本,就会触发此控件。就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上(?)
“for” 属性可把 label 绑定到另外一个元素,把 “for” 属性的值设置为相关元素的 id 属性的值
eg.输入框的名字or选择题的选项描述
for 属性
for 属性规定 label 绑定的表单元素
form 属性(-)
input
<input>
标签规定了用户可以在其中输入数据的输入字段,<input>
元素在 <form>
元素中使用,用来声明允许用户输入数据的 input 控件
输入字段可通过多种方式改变,取决于 type 属性
<input>
元素是空的,它只包含标签属性
type 属性
type 属性规定要显示的 元素的类型,默认类型是:text
属性值
值 | 描述 |
---|---|
button | 定义可点击的按钮(通常与 JavaScript 一起使用来启动脚本) |
checkbox | 定义复选框。 |
colorNew | 定义拾色器。 |
dateNew | 定义 date 控件(包括年、月、日,不包括时间)。 |
datetimeNew | 定义 date 和 time 控件(包括年、月、日、时、分、秒、几分之一秒,基于 UTC 时区)。 |
datetime-localNew | 定义 date 和 time 控件(包括年、月、日、时、分、秒、几分之一秒,不带时区)。 |
emailNew | 定义用于 e-mail 地址的字段。 |
file | 定义文件选择字段和 “浏览…” 按钮,供文件上传。 |
hidden | 定义隐藏输入字段。 |
image | 定义图像作为提交按钮。 |
monthNew | 定义 month 和 year 控件(不带时区)。 |
numberNew | 定义用于输入数字的字段。 |
password | 定义密码字段(字段中的字符会被遮蔽)。 |
radio | 定义单选按钮。 |
rangeNew | 定义用于精确值不重要的输入数字的控件(比如 slider 控件)。 |
reset | 定义重置按钮(重置所有的表单值为默认值)。 |
searchNew | 定义用于输入搜索字符串的文本字段。 |
submit | 定义提交按钮。 |
telNew | 定义用于输入电话号码的字段。 |
text | 默认。定义一个单行的文本字段(默认宽度为 20 个字符)。 |
timeNew | 定义用于输入时间的控件(不带时区)。 |
urlNew | 定义用于输入 URL 的字段。 |
weekNew | 定义 week 和 year 控件(不带时区 |
name属性
name 属性规定 <input>
元素的名称。
name 属性用于在 JavaScript 中引用元素,或者在表单提交后引用表单数据
只有设置了 name 属性的表单元素才能在提交表单时传递它们的值
required属性
required 属性是一个布尔属性,规定必需在提交表单之前填写输入字段
required 属性适用于下面的 input 类型:text、search、url、tel、email、password、date pickers、number、checkbox、radio 和 file
placeholder属性
placeholder 属性规定可描述输入字段预期值的简短的提示信息(比如:一个样本值或者预期格式的短描述)
该提示会在用户输入值之前显示在输入字段中
button
<button>
标签定义一个按钮。
在 <button>
元素内部,您可以放置内容,比如文本或图像。这是该元素与使用 <input>
元素创建的按钮之间的不同之处
始终为 <button>
元素规定 type 属性
type
规定按钮的类型
submit | 该按钮是提交按钮(除了 Internet Explorer,该值是其他浏览器的默认值) |
button | 该按钮是可点击的按钮(Internet Explorer 的默认值) |
reset | 该按钮是重置按钮(清除表单数据) |
span
用于对文档中的行内元素进行组合,标签提供了一种将文本的一部分或者文档的一部分独立出来的方式
被 <span>
元素包含的文本,您可以使用 CSS 对它定义样式,或者使用 JavaScript 对它进行操作
h1→h6(-)
script
<script>
标签用于定义客户端脚本,比如 JavaScript,既可包含脚本语句,也可以通过 “src” 属性指向外部脚本文件。
JavaScript 通常用于图像操作、表单验证以及动态内容更改。
<noscript>
(-)
如果使用 “src” 属性,则 <script>
元素必须是空的
有多种执行外部脚本的方法:
如果 async=“async”:脚本相对于页面的其余部分异步地执行(当页面继续进行解析时,脚本将被执行)
如果不使用 async 且 defer=“defer”:脚本将在页面完成解析时执行
如果既不使用 async 也不使用 defer:在浏览器继续解析页面之前,立即读取并执行脚本
客户端脚本(-)
scr属性
规定外部脚本文件的 URL
在网站中的多个页面上运行相同的 JavaScript,就应该创建外部 JavaScript 文件,而不是重复编写相同的脚本。把脚本文件以 .js 扩展名进行保存,然后在 <script>
标签中使用 src 属性引用它
外部脚本文件不能包含 <script>
标签
<script src="URL">
转义字符
空格
×
乘号
相关内容补充
URL相对路径
- 同一目录
- 子目录
- 父目录
…/表示源文件所在目录的上一级目录,…/…/表示源文件所在目录的上上级目录,以此类推
未解决
- .alert{ }
<style type="text/css">
.alert{
margin: 0 auto 20px;
text-align: center;
}
</style>
- data-dismiss=“alert”
<a class="close" data-dismiss="alert" href="#">×</a>
- role
- aria-labelledby
<div class="modal fade" id="modal_info" tabindex="-1" role="dialog" aria-labelledby="addModalLabel">
- aria-label
- aria-hidden
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
- [ ]