# HTML 学习

# XHTML

# 文档基本结构

	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
	<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
	<title>无标题文档</title>
	</head>
	<body>

	</body>
	</html>

文档定义类型
其中 DOCTYPE 元素定义了文档类型，要注意的是元素的名称和属性必须大写，DTD 表示文档类型定义，浏览器根据定义的 DTD 解析页面元素，除非你的 XHTML 确定了一个正确的 DOCTYPE, 否则页面内的元素和 CSS 不能正确生效.
XHTML 提供三种 DTD 文档类型:
过渡型 (Transitional): 要求非常宽松的 DTD.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
严格型 (Strict): 要求严格的 DTD.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
框架型 (Frameset): 专门针对框架页面使用的 DTD.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
对于大多数网页来说，使用过渡型 (Transitional) 是比较理想的选择。因为这种 DTD 允许使用描述性的元素和属性，也比较容易通过 w3c 的代码校验.
声明命名空间
在 xhtml 文档根元素中必须使用 xmlns 属性声明文档的命名空间.xhtml 是 html 向 xml 过渡的标识语言，它需要符合 xml 的规定，因此也需要定义命名空间。又因为 xhtml1.0 还不允许用户自定义元素，因此它的命名空间值都相同.
<html xmlns="http://www.w3.org/1999/xhtml">

# XHTML 基础语法

在文档的开头必须定义文档类型；
在根元素中应声明命名空间；
所有标签必须是闭合的；（HTML 则可以不用）
所有元素和属性都必须小写；（HTML 不在意大小写）
所有的属性都必须用引号 ("") 括起来；（HTML 则不需要）
所有的标签都必须合理嵌套；
所有的属性都必须赋值，没有值的的属性则用自身来赋值；（HTML 则不需要）
所有的符号都必须用编码表示（如小于符号 (<) 则需要用 < 表示；
用 Id 属性代替 name 属性

# HTML5

# 文档基本结构

文档类型说明
HTML5 文档类型说明，代码如下，需要出现在 HTML 文件的第一行，其主要作用是告诉浏览器要处理的文档类型，如果你不写的话，浏览器一般也能识别，个人建议还是写上。
<!DOCTYPE html>
HTML 标签
HTML 的标记有很多，我们接下来一段时间将会学习一些标记。HTML5 主要用来写一个网页的大概结构，至于排版，渲染 SS 来处理。下面是一张 HTML5 元素周期表。
HTML 标记代表文档的开始，由于 HTML 语言语法的松散特性，该标记可以省略，，但是为了使之符合 Web 标准和文档的完整性，我们要养成良好的编写习惯，建议不要省略。这也是许多程序员笔试 HTML 语言的地方，语法松散。
HTML 标记以 <html> 开头，以 </html > 结尾，文档的所有内容书写在开头和结尾的中间部分。语法格式如下：
<html>
.....
</html>
头标记
头标记 head 用于说明文档头部相关信息，一般包括标题信息、元信息、定义 CSS 样式和脚本代码等。以 <head> 开始，以 </head> 结尾，语法格式如下：
```
<head>
.....
</head> 
```
<head> 元素的作用范围是整篇文档，定义在 HTML 文档头部的内容往往不会再网页上直接显示。
标题标记
HTML 页面的标题一般是用来说明页面的用途，它显示在浏览器的标题栏中。以 <title> 开始，以 ``` 结尾，语法格式如下：
<title>
.....
</title>
元信息标记
<meta> 标记可以提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键字。 <meta> 标记位于文档的头部，不包含任何内容。 <meta> 标记的属性定义了与文档相关联的名称 / 值。
示例：
<meta charset="utf-8">

# HTML5 新增语法

元素的标记可以省略：
- 不允许写结束标记的标签：br,input,link,meta
- 可以省略结束标记的元素：li,dt,dd,p,tr,td,th
- 可以省略全部标记的元素：html,head,body

具有 Boolean 值的属性示例：

	<input type="checkbox" checked /> //表示true
	<input type="checkbox" checked="checked" /> //表示true
	<input type="checkbox" checked='' /> //表示true
	<input type="checkbox"/> //表示false

属性值的既可以使用双引号也可以使用单引号，在属性值不包含空字符串， < , > , = , '' , "" 等字符时，属性值两边的引号可以省略。

# HTML5 元素

# 结构元素

header ：表中页面中一个内容区块或整个页面标题；
footer ：表示整个页面或页面中一个内容区块的脚注。一般来说，它会包含创作者的姓名、创作日期以及创作者的联系信息；
section ：表示页面中的一个内容区块，一般由内容及其标题组成，多个相邻 section 之间具有一定联系，表示文档结构；
article ：表示页面中的一块与上下文不相关的独立内容，如博客中的一篇文章或报纸中的一篇文章；
aside ：表示 article 元素的内容之外的、与 article 元素的内容相关辅助信息；
nav ：表示页面中导航链接的部分；
main ：表示网页中的主要内容。主要内容区域指与网页标题或应用程序中本页面主要功能直接相关或进行扩展的内容；
figure ：表示一段独立的流内容，一般表示文档主体流内容中的一个独立单元。可以使用 figcaption 元素为 figure 元素组添加标题；
address ：文档作者信息；

继承于 HTML4：

h1~h6 ：标题标签

	<h1>一级标题</h1>
	<h2>二级标题</h2>

p ：段落标签
<p>段落标签</p>

容器标签

	<div>占一行,大盒子</div>
	<span>小盒子</span>

水平线标签
<hr>
换行标签 (无额外行间距)
<br />
<br>
注释标签

表格标签

	<table>
	<tr> <th>姓名</th> <th>性别</th> </tr>
	<tr> <td>刘德华</td> <td>男</td> </tr>
	</table>

table ：定义表格；

caption ：定义表格标题， caption 标签必须紧随 table 标签之后，且只能为每个表格定义一个标题。

tr ：在表格里定义一行；

th ：定义表头单元格；

td ：在表格里定义一个单元格；

thead ：定义表头结构；

tbody ：定义表格主体结构；

tfoot ：定义表格的页脚结构；

col ：在表格里定义一个或多个列的属性值；

colgroup ：定义表格列的分组；

table 属性

th、td 属性

属性	值	描述
align	left;right;center;justify;char	规定单元格内容的水平对齐方式。
axis	category_name	对单元格进行分类。
char	character	规定根据哪个字符来进行内容的对齐。
charoff	number	规定对齐字符的偏移量。
colspan	number	设置单元格可横跨的列数。
rowspan	number	规定单元格可横跨的行数。

合并单元格

	<!-- 跨列 --> <td colspan="2"></td>
	<!-- 跨行 --> <td span="2"></td>

列表标签
无序列表
<ul>
<li></li> <li></li>
</ul>
有序列表
<ol>
<li></li> <li></li>
</ol>
属性值描述
reversed reversed 规定列表顺序为降序。(9,8,7...)
start number 规定有序列表的起始值。
type 1；A；a；I；i 规定在列表中使用的标记类型。
自定义列表
<dl>
<dt></dt>
<dd></dd> <dd></dd>
</dl>

属性	值	描述
reversed	reversed	规定列表顺序为降序。(9,8,7...)
start	number	规定有序列表的起始值。
type	1；A；a；I；i	规定在列表中使用的标记类型。

# 内容及修饰元素

突出文本

<mark>高亮文本</mark>

继承于 HTML4：

文本修饰元素

加粗标签

	<strong>强调标签</strong>
	<b>字体加粗标签</b>

倾斜标签

	<em>倾斜标签</em>
	<i>倾斜标签</i>

删除线标签

	<del>删除线</del>
	<s>删除线</s>

下划线标签

	<ins>下划线</ins>
	<u>下划线</u>

引用标签

	<q>行内引用（如言论）</q>
	<cite>参考文献的引用</cite>
	<blockquote>
	一段引用（如注释或摘录）
	</blockquote>

图像标签

<img src="img.jpg" alt="替换文字" title="提示文本" />

超链接标签

	<a href="外部链接" target="_blank">超链接</a>
	<a href="#">空链接</a>
	<a href="下载文件路径">下载链接</a>

定义热点区域

热点区域就是为图像的局部区域定义超链接，当点击该热点区域时，会触发超链接，并跳转到其他网页或者页面的位置。热点区域是一种特殊的超链接形式，常用来在图像中设置导航，用户可以在一幅图定义多个热点区域，以实现单击不同的热区连接到不同的页面。

定义热点区域，需要使用 <map> 和 < area > 标签来配合使用

<map>：定义热点区域，包含必须的 ID 属性，定义热点区域的 ID，或者定义可选的 name 的值属性，也可以作为一个句柄，与热点图像进行绑定；

<area>：定义图像映射中的区域，area 匀速必须嵌套在标签中，该标签包含一个必须设置的属性 alt，定义热点区域的替换文本。

<img> 中的 usemap 属性可引用 < map > 中的 id 或 name 属性（根据浏览器），所以应同时向 < map > 添加 id 和 name 属性，且设置相同的值。

area 属性：

属性	取值	说明
coords	坐标值	定义可点击区域（鼠标敏感的区域）的坐标
href	URL	定义此区域的目标 URL
nohref	nohref	从图像映射除某个区域
shape	default、rectangle（矩形） circle（圆形） polygon（多边形）	定义区域的形状
trarget	_blank　　_parent　　_self　　_top	规定在何处打开 href 属性指定的位置

	<div class="map">
	<img src="1.jpg" alt="df" usemap="Map" >
	<map name="Map" id="Map">
	<area shape="circle" coords="200,300,100" href="https://www.baidu.com/s?wd=西藏自治区" alt="西藏自治区">
	</map>
	</div>

内联框架 iframe

一个内联框架被用来在当前 HTML 文档中嵌入另一个文档。

<iframe src="demo.html" height="300" width="500" name="demo" scrolling="auto" sandbox="allow-same-origin"></iframe>

# 功能元素

hgroup ：用于对页面中一个内容区块的标题进行整合；
video ：定义视频流；
<video src="xxx.mp4"></video>
audio ：定义音频流；
<audio src='xxx.mp3'></audio>
embed ：用来插入各种多媒体，格式可以是 Midi、Wav、AIFF、AU、MP3 等。
<embed src="horse.wav" />
dialog ：定义对话框或窗口；
figcaption ：定义 figure 元素的标题；
time ：表示日期或时间，也可以同时表示两者；
canvas ：表示图形，如图表和其他图像。元素本身没有行为，仅提供一块画布，但他把一个绘制 API 展现给客户端 javascript 以使脚本把想绘制的东西绘制到这块画布上；
output ：表示不同类型的输出，比如脚本的输出；
menu ：表示菜单列表。当希望列出表单控件时使用该标签；

details ：表示用户要求得到并且可以得到的细节信息。它可以与 summary 元素配合使用，summary 元素提供标题或图例。标题是可见的，用户单击标题时，会显示出细节信息。summary 元素应该是 details 元素的第一个子元素；

	<details>
	<summary>老鼠</summary>
	短尾毛丝鼠体型较大，体长30～38cm，尾长10cm左右；长尾毛丝鼠体型较小，体长24～28cm，尾长14～15cm。
	一般雌鼠体重510～710g，雄鼠体重425～570g。前半身似兔，后半身似鼠，耳大钝圆，尾毛蓬松。眼睛明亮，鼻端两侧有许多长须。标准毛丝鼠皮毛呈蓝灰色，腹部渐淡至白色，腹中部有分界明显的白色带。
	</details>

progress ：显示进度
<progress max='100'>50</progress>

command ：按钮

属性	值	描述
checkedNew	checked	规定当页面加载时，command 是否被选中。仅用于 radio 或 checkbox 类型。
disabledNew	disabled	规定 command 是否可用。
iconNew	URL	规定作为 command 来显示的图像的 URL。
labelNew	text	必需。规定 command 的名字，对用户可见。
radiogroupNew	groupname	规定可进行切换且将被切换的 command 所属的组名。仅在类型为 radio 时使用。
typeNew	checkboxcommandradio	定义 command 的类型。默认是 "command"。

继承于 HTML4：

form 表单标签
表单属性:
action ：定义提交表单时要执行的操作；
target ：规定提交表单后在何处显示响应（默认值为 _self ，这意味着响应将在当前窗口中打开。）；
method ：指定提交表单数据时要使用的 HTTP 方法；
autocomplete ：规定表单是否打开自动完成功能（H5）；
novalidate ：规定提交时不验证表单数据（H5）；
enctype ：定义发送表单数据 http 字符的编码格式；
<input> 标签
type 属性值：
1. text ：文本输入框
  - placeholder：提示文本（H5）
  - value：默认值
  - name：名称
  - readonly：只读，布尔属性
  - required：必须输入，布尔属性（H5）
  - disabled：不可用，布尔属性（input，select,textarea 的通用属性）
  - minlength：最小长度，提交时判定
  - maxlength：最大可输入的长度
  - pattern：正则匹配（H5）
  - autocomplete ：自动记录输入，以后输入时可以自动选择完成。可选值为 on/off，默认 on（H5）
  - autofocus：使某表单控件自动获取焦点
2. password ：密码输入框，属性于 text 一样；
3. hidden ：隐藏域，提交网页中不显示的信息，其只包含一个 value 属性；
4. file ：可以将文件以二进制数据的形式上传到服务器（method 属性必须设置为 post，enctype 属性必须设置为 multipart/form-data）；
5. button ：普通按钮；
6. submit ：提交按钮，属性同普通按钮；
7. image ：图片按钮，同提交按钮一样，只是用属性 src 替换了 value ，并拥有专有属性 height 和 width ；
8. radio ：单选按钮
  - name：名称，必须，相同名称可实现单选按钮组
  - checked：默认选中
  - value：显示名称
9. checkbox ：复选按钮；
10. reset ：重置按钮，将表单里所有组件输入的内容还原为初始内容；
11. email ：自动验证输入值是否为有效邮箱的文本输入框（H5）；
12. url ：自动验证输入值是否为有效网址的文本输入框（H5）；
13. number ：输入数值的文本框（H5）
  专有属性：
  max，min，step，value
14. range ：外表为滑动条的数值输入文本框，属性值与 number 相同（H5）；
15. data mouth week time datetime-local ：日期选择器（H5）；
16. search ：搜索关键词的文本框；
<label> 标签
textarea ：大文本标签
可以允许用户输入大容量信息，其属性大部分与 input 标签相同；
专有属性：
cols ：设置文本区域内可见字符的宽度；
rows ：设置文本区域内可见行数；
wrap ：定义输入内容大于文本区域宽度（cols）时的显示方式：
soft：默认值，提交时文本内容不换行
hard：文本内容换行（必须设置 cols 值）
<select> 下拉列表标签
专有属性：
- size：定义下拉菜单中显示的项目数目；
- multiple：定义下拉菜单可以多选；
<link>
<link> 标签定义文档与外部资源的关系。其中 <link> 标签最常见的用途是链接样式表。
<head>
<link rel="stylesheet" type="text/css" href="theme.css" />
</head>
注释：link 元素是空元素，它仅包含属性。此元素只能存在于 head 部分，不过它可出现任何次数。

# HTML5 属性

# 全局属性

accesskey
使用快捷键访问经常用到的元素 alt+*（继承于 HTML4）；
示例：
<a href="www.xxx.com" accesskey="x"></a>
class
将元素归类（继承于 HTML4）；
contenteditable
让用户能够修改页面上的内容，且该属性可继承于父元素；
示例：
<ul contenteditable='true'>
<li>1</li>
<li>2</li>
</ul>
contextmenu
为 div 元素设定快捷菜单，这种菜单会在受到用户右键点击触发的时候弹出来；
dir
用于规定元素中文字的方向，从左到右，或者从右到左；
draggable、dropzone
表示元素是否可以被拖放，两者搭配使用；
hidden
隐藏相关元素；
id
给元素分配一个唯一的标识符，通常用来将样式应用到元素上或者在 js 程序中用来选择元素；也可以导航到文档中的特定位置（继承于 HTML4）；
lang
说明元素内容使用的语言，属性值使用的是有效的 ISO 语言代码（继承于 HTML4）；
spellcheck
可以用来表明浏览器是否应该对元素的内容（其中包括： input 元素中的文本值、 <textarea> 中的文本值、可编辑元素中的文本值）进行拼写检查，只有用在用户可以编辑的元素上时才有意义；
style
用来直接在元素身上定义 css 样式（继承于 HTML4）；
tabindex
html 页面上的键盘焦点可以通过按 Tab 键在各元素之间切换，使用 tabindex 属性可以改变默认的转移顺序（继承于 HTML4）；
title
定义元素的提示文本（继承于 HTML4）；
alt
定于元素的替换文本（继承于 HTML4）；
data-*
data-* 属性用于存储页面或应用程序的私有自定义数据。
data-* 属性赋予我们在所有 HTML 元素上嵌入自定义 data 属性的能力。
存储的（自定义）数据能够被页面的 JavaScript 中利用，以创建更好的用户体验（不进行 Ajax 调用或服务器端数据库查询）。
data-* 属性包括两部分：
- 属性名不应该包含任何大写字母，并且在前缀 "data-" 之后必须有至少一个字符
- 属性值可以是任意字符串
注释：用户代理会完全忽略前缀为 "data-" 的自定义属性。
<ul>
<li data-animal-type="鸟类">喜鹊</li>
<li data-animal-type="鱼类">金枪鱼</li>
<li data-animal-type="蜘蛛">蝇虎</li>
</ul>

# 特殊字符

前端

	<dl>
	<dt></dt>
	<dd></dd> <dd></dd>
	</dl>
	<!--dl 里只能有 dt 与 dd-->

	<head>
	<link rel="stylesheet" type="text/css" href="theme.css" />
	</head>

	<ul>
	<li data-animal-type="鸟类">喜鹊</li>
	<li data-animal-type="鱼类">金枪鱼</li>
	<li data-animal-type="蜘蛛">蝇虎</li>
	</ul>

	<html>
	.....
	</html>

	<title>
	.....
	</title>

	<br />
	<br>

	<ul>
	<li></li> <li></li>
	</ul>

# HTML 学习

# XHTML

# 文档基本结构

# XHTML 基础语法

# HTML5

# 文档基本结构

# HTML5 新增语法

# HTML5 元素

# 结构元素

# 内容及修饰元素

# 功能元素

# HTML5 属性

# 全局属性

# 特殊字符

Typora使用教程

计量经济学