HTML?
HTML 语言用于描述网页。
- HTML 是指超文本标记语言: Hyper Text Markup Language
- HTML 不是一种编程语言，而是一种标记语言
- 标记语言是一套标记标签 (markup tag)
- HTML 使用标记标签来描述网页
- HTML 文档包含了HTML 标签及文本内容
- HTML 文档也叫做 web页面
HTML 标签
HTML 标记标签通常被称为HTML 标签 (HTML tag)。
- HTML 标签是由尖括号包围的关键词，比如 <html>
- HTML 标签通常是成对出现的，比如 <b> 和 </b>
- 标签对中的第一个标签是开始标签，第二个标签是结束标签
- 开始和结束标签也被称为开放标签和闭合标签
<标签>内容</标签>
HTML 属性
属性是为 HTML 元素提供的附加信息。
HTML 属性
- HTML 元素可以设置属性
- 属性可以在元素中添加附加信息
- 属性一般描述于开始标签
- 属性总是以名称/值对的形式出现，比如：name="value"。
文本格式化标签
| 标签 | 描述 |
|---|---|
| <b> | 定义粗体文本 |
| <em> | 定义着重文字 |
| <i> | 定义斜体字 |
| <small> | 定义小号字 |
| <strong> | 定义加重语气 |
| <sub> | 定义下标字 |
| <sup> | 定义上标字 |
| <ins> | 定义插入字 |
| <del> | 定义删除字 |
HTML "计算机输出" 标签
| 标签 | 描述 |
|---|---|
| <code> | 定义计算机代码 |
| <kbd> | 定义键盘码 |
| <samp> | 定义计算机代码样本 |
| <var> | 定义变量 |
| <pre> | 定义预格式文本 |
HTML 引文, 引用, 及标签定义
| 标签 | 描述 |
|---|---|
| <abbr> | 定义缩写 |
| <address> | 定义地址 |
| <bdo> | 定义文字方向 |
| <blockquote> | 定义长的引用 |
| <q> | 定义短的引用语 |
| <cite> | 定义引用、引证 |
| <dfn> | 定义一个定义项目。 |
1、<!DOCTYPE> 声明
是 document type(文档类型)的简写。！DOCTYPE 是一个文档类型标记，是一种标准通用标记语言的文档类型声明，在 web 设计中用来说明你用的 XHTML 或者 HTML 是什么版本。
<!DOCTYPE> 声明位于文档中的最前面的位置，处于<html> 标签之前。
<!DOCTYPE> 声明不是一个 HTML 标签；它是用来告知 Web 浏览器页面使用了哪种 HTML 版本。
2、HTML <html> 标签
<html> 标签用于创建一个 HTML 文档
简单的 HTML5 文档：
<html>
<head>
<meta charset="utf-8">
<title>文档标题</title>
</head>
<body>
文档内容......
</body>
</html>
3、HTML <title> 标签
<title> 标签定义HTML文档的标题，通常体现了网页的主题内容，浏览器会以特殊的方式来使用标题，并且通常它显示在浏览器窗口的标题栏或状态栏上。
**一个 HTML 文档中不能有一个以上的 <title> 元素。
**如果缺少 <title> 标签，文档作为 HTML 是无效的。当把文档加入用户的链接列表或者收藏夹或书签列表时，<title> 标签的内容将成为该文档链接的默认名称。
4、HTML <body> 标签
<body> 标签表示 HTML 网页的主体部分，该标签内的内容使用户可以看到的。
一个 HTML 文件只能存在一个 <body> 标签。 <body> 元素包含文档的所有内容
5、HTML <h1> - <h6> 标签
标题是通过 <h1> - <h6> 标签进行定义的.<h1>定义最大的标题。<h6> 定义最小的标题。
* 浏览器会自动地在标题的前后添加空行。
*默认情况下，HTML 会自动地在块级元素前后添加一个额外的空行，比如段落、标题元素前后。
搜索引擎使用标题为您的网页的结构和内容编制索引。
因为用户可以通过标题来快速浏览您的网页，所以用标题来呈现文档结构是很重要的。
应该将 h1 用作主标题（最重要的），其后是 h2（次重要的），再其次是 h3，以此类推。
6、HTML <p> 标签
段落是通过 <p> 标签定义的。（浏览器会自动地在段落的前后添加空行。（</p>是块级元素））；
7、HTML <br> 标签
<br> 标签是空标签，可插入一个简单的换行符。
8、HTML <hr> 标签
<hr> 标签在 HTML 页面中创建水平线。
hr 元素可用于分隔内容，使用该元素产生的水平线可以在视觉上将文档分隔成各个部分。
9、 注释写法：<!-- 这是一个注释 --> 可以将注释插入 HTML 代码中，这样可以提高其可读性，使代码更易被人理解。浏览器会忽略注释，也不会显示它们。
10、头部 head 元素
| 标签 | 描述 |
|---|---|
| <head> | 定义了文档的信息 |
| <title> | 定义了文档的标题 |
| <base> | 定义了页面链接标签的默认链接地址 |
| <link> | 定义了一个文档和外部资源之间的关系 |
| <meta> | 定义了HTML文档中的元数据 |
| <script> | 定义了客户端的脚本文件 |
| <style> | 定义了HTML文档的样式文件 |
| 标签 | 描述 |
|---|---|
| <a> | 定义一个超级链接 |
HTML使用标签 <a>来设置超文本链接，是可以从一个页面指向另一个目的端的链接。
超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。
在标签<a> 中使用了href属性来描述链接的地址（URL）。
默认情况下，链接将以以下形式出现在浏览器中：
- 一个未访问过的链接显示为蓝色字体并带有下划线
- 访问过的链接显示为紫色并带上下划线
- 点击链接时，链接显示为红色并带上下划线
空链接：
HTML 空链接：指指向链接后，鼠标变成手形，但单击后仍停留在当前页面。
基本语法：其中“ # ”表示空链接。
<a href="#">链接文字</a>属性：
（1）target
使用 Target 属性，你可以定义被链接的文档在何处显示（在新的出口打开，还是在原有的窗口中打开）。默认的被链接文档会在原有的窗口 中打开的。如果将 target 属性设置为 "_blank" 则文档就会在新窗口打开。
（2）id
id 属性可用于在一个 HTML 文档中创建书签标记。书签是不以任何特殊的方式显示，在HTML文档中是不显示的，所以对于读者来说是隐藏的。
（2）<link>标签
常用于链接 CSS 样式表，例如：<head><link rel="stylesheet" type="text/css" href="styles.css"></head>
（3） <nav> 标签
<nav> 标签表示一个页面中的某个部分，目的是提供导航链接，常见的导航栏的示例是菜单、目录和索引.
例：<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/javascript/">JavaScript</a> |
<a href="/jquery/">jQuery</a>
</nav>
12、HTML <form> 标签
使用 <form> 标签可以向服务器传输数据，该标签的使用示例如下：
带有两个输入字段和一个提交按钮的 HTML 表单：
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="提交">
</form>
- <form> 元素包含一个或多个如下的表单元素：
- <input> 例：<input type="submit" value="提交">
- <textarea> 例：<textarea rows="10" cols="30">...</textarea>
- <button> 例：<button type="button">点我!</button>
- <select> 例：用来创建下拉列表，在表单中接受用户输入，当提交表单时，浏览器会提交选定的项目，或者收集用逗号分隔的多 个选项，将其合成一个单独的参数列表，并且在将 <select> 表单数据提交给服务器时包括 name 属性。 <select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select> - <option> 例：<option> 标签用于定义包含在<select>、<optgroup> 或 <datalist> 元素中的项，可以表示 HTML 文档中 弹出窗口中的菜单项和其他项目表
属性 值 描述 disabled disabled 规定此选项应在首次加载时被禁用。 label text 定义当使用 <optgroup> 时所使用的标注。 selected selected 规定选项（在首次显示在列表中时）表现为选中状态。 value text 定义送往服务器的选项值。 - <optgroup> 例：用于对 <select> 元素所提供的选项进行分组。当您使用一个较长的选项列表时，对相关的选项进行组合会使处理 更加容易。 <select>
<optgroup label="Swedish Cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</optgroup>
<optgroup label="German Cars">
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</optgroup>
</select>属性 值 描述 disabled disabled 规定禁用该选项组。 label text 为选项组规定描述。 - <fieldset> 例： 标签会在相关表单元素周围绘制边框，<legend> 标签为 <fieldset> 元素定义标题。<legend> 必须是 <fieldset> 元素的一个子元素
<form>
<fieldset>
<legend>个人信息:</legend>
姓名: <input type="text"><br>
邮箱: <input type="text"><br>
生日: <input type="text">
</fieldset>
</form> - <label> 例：<label> 标签为 input 元素定义标注（标记）。
label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。
<label> 标签的 for 属性应当与相关元素的 id 属性相同。"for" 属性可把 label 绑定到另外一个元素。请把 "for" 属性的值设置为相关元素的 id 属性的值。
<label for="male" >Male</label>
<input type="radio" name="sex" id="male" value="male"><br>
<label for="female">Female</label>
<input type="radio" name="sex" id="female" value="female"><br>
<input type="submit" value="提交">
</form>
13、表格标签
（1）<table>标签
用来定义 HTML 表格，一个 HTML 表格包括 <table> 元素，一个或多个 <tr>、<th> 以及 <td> 元素。<tr> 元素定义表格行，<th> 元素定义表头，<td> 元素定义表格单元
属性
| 属性 | 值 | 描述 |
|---|---|---|
| align | left center right | HTML5 不支持。HTML 4.01 已废弃。 规定表格相对周围元素的对齐方式。 |
| bgcolor | rgb(x,x,x) #xxxxxx colorname | HTML5 不支持。HTML 4.01 已废弃。 规定表格的背景颜色。 |
| border | 1 "" | 规定表格单元是否拥有边框。 |
| cellpadding | pixels | HTML5 不支持。规定单元边沿与其内容之间的空白。 |
| cellspacing | pixels | HTML5 不支持。规定单元格之间的空白。 |
| frame | void above below hsides lhs rhs vsides box border | HTML5 不支持。规定外侧边框的哪个部分是可见的。 |
| rules | none groups rows cols all | HTML5 不支持。规定内侧边框的哪个部分是可见的。 |
| summary | text | HTML5 不支持。规定表格的摘要。 |
| width | pixels % | HTML5 不支持。规定表格的宽度。 |
表示 HTML 表格的标题，对表格的简单描述，必须直接放置到 <table> 标签之后，
只能对每个表格定义一个标题。通常这个标题会被居中于表格之上。然而，CSS 属性 "text-align" 和 "caption-side" 能用来设置标题的对齐方式和显示位置。
（3）其他表格 标签
| <th> | 定义表格中的表头单元格。 |
| <tr> | 定义表格中的行。 |
| <td> | 定义表格中的单元。 |
| <thead> | 定义表格中的表头内容。 |
| <tbody> | 定义表格中的主体内容。 |
| <tfoot> | 定义表格中的表注内容（脚注）。 |
| <col> | 定义表格中一个或多个列的属性值。 |
| <colgroup> | 定义表格中供格式化的列组。 |
| 列表 | |
| <ul> | 定义一个无序列表 |
| <ol> | 定义一个有序列表 |
| <li> | 定义一个列表项 |
| <dir> | HTML5不再支持。 HTML 4.01 已废弃。 定义目录列表。 |
| <dl> | 定义一个定义列表 |
| <dt> | 定义一个定义定义列表中的项目。 |
| <dd> | 定义定义列表中项目的描述。 |
| <menu> | 定义菜单列表。 |
| <command>New | 定义用户可能调用的命令（比如单选按钮、复选框或按钮）。 |
| <frame> | HTML5不再支持。 定义框架集的窗口或框架。 |
| <frameset> | HTML5不再支持。定义框架集。 |
| <noframes> | HTML5不再支持。 定义针对不支持框架的用户的替代内容。 |
| <iframe> | 定义内联框架。 |
| 图像 | |
| <img> | 定义图像。 |
| <map> | 定义图像映射。 |
| <area> | 定义图像地图内部的区域。 |
| <canvas>New | 通过脚本（通常是 JavaScript）来绘制图形（比如图表和其他图像）。 |
| <figcaption>New | 定义一个 caption for a <figure> element |
| <figure>New | figure 标签用于对元素进行组合。 |
<canvas> 标签是 HTML5 中新定义的标签，它是一个画布标签，只是作为一个图形容器，必须使用脚本来绘制图形。
例：<canvas id="myCanvas"></canvas>
<script type="text/javascript">
var canvas=document.getElementById('myCanvas');
var ctx=canvas.getContext('2d');
ctx.fillStyle='#FF0000';
ctx.fillRect(0,0,80,100);
</script>
17、媒体标签
| Audio/Video | |
| <audio>New | 定义声音，比如音乐或其他音频流。 |
| <source>New | 定义media元素 (<video> 和 <audio>)的媒体资源。media |
| <track>New | 为媒体(<video> 和 <audio>)元素定义外部文本轨道。 |
| <video>New | 定义一个音频或者视频 |
| 音频格式 | MINE-type |
|---|---|
| MP3 | audio/mpeg |
| Ogg | audio/ogg |
| Wav | audio/wav |
| 属性 | 值 | 描述 |
|---|---|---|
| autoplayNew | autoplay | 如果出现该属性，则音频在就绪后马上播放。 |
| controlsNew | controls | 如果出现该属性，则向用户显示音频控件（比如播放/暂停按钮）。 |
| loopNew | loop | 如果出现该属性，则每当音频结束时重新开始播放。 |
| mutedNew | muted | 如果出现该属性，则音频输出为静音。 |
| preloadNew | auto metadata none | 规定当网页加载时，音频是否默认被加载以及如何被加载。 |
| srcNew | URL | 规定音频文件的 URL。 |
例： <audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
...
</audio>
18、元信息
| 元信息 | |
| <head> | 定义关于文档的信息 |
| <meta> | 定义关于 HTML 文档的元信息。 |
| <base> | 定义页面中所有链接的默认地址或默认目标。 |
| <basefont> |
*<base>
<base> 标签是 HTML 语言中的基准网址标记，是一个单标签。位于网页头部文件的 <head> 标签内，一个页面最多只能使用一个 base 元素，用来提供一个指定的默认目标。
<base> 标签为页面上的所有的相对链接规定默认 URL 或默认目标。在一个文档中，最多能使用一个 <base> 元素。 <base> 标签必须位于 <head> 元素内部
<base> 标签应在 <head> 元素中第一个元素的位置，这样 head 区域中其他元素就可以使用 <base> 元素中的信息了。
注释：如果使用了 <base> 标签，则必须具备 href 属性或者 target 属性或者两个属性都具备。
HTML 标签分类总结
html中的标签元素大体被分为三种不同的类型：块级元素、内嵌元素和内嵌块状元素。
常用的块级元素有：
<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>
常用的内嵌元素有：
<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
常用的内嵌块状元素有：
<img>、<input>
注：内嵌元素不能嵌套块级元素；内嵌元素能够嵌套内嵌元素；块级元素能够嵌套内嵌元素；块状元素能够嵌套块状元素（除了p元素，p元素不能相互嵌套，但是p元素能够嵌套其他元素）。
一、块级元素
在html中<div>、 <p>、<h1>、<form>、<ul> 和 <li>就是块级元素。设置display:block就是将元素显示为块级元素。
特点：
1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。
2、元素的高度、宽度、行高以及顶和底边距都可设置。
3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。
二、行内（内嵌）元素
在html中，<span>、<a>、<label>、<input>、 <img>、 <strong> 和<em>就是典型的行内元素（inline）元素。当然块状元素也可以通过代码display:inline将元素设置为行内元素。
行内元素特点：
1、和其他元素都在一行上；
2、元素的高度、宽度、行高及顶部和底部边距不可设置；
3、元素的宽度就是它包含的文字或图片的宽度，不可改变。
二、内嵌块级元素
内嵌块级元素（inline-block）就是同时具备内嵌元素、块级元素的特点，代码display:inline-block就是将元素设置为内嵌块级元素。(css2.1新增)，<img>、<input>标签就是这种内嵌块级标签。
inline-block元素特点：
1、和其他元素都在一行上；
2、元素的高度、宽度、行高以及顶和底边距都可设置
2060
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
