HTML
HTML（HyperText Markup Language）就是超文本标记语言。"超文本"就是表示页面内可以包含非文字元素，如：图片、链接、音乐等等。
它是⼀种建立网页文件的语言，通过标记式的指令（Tag），将影像、声音、图片、文字等链接显示出来。这种标记性语言是因特网上网页的主要语言。
HTML 网页文件可以使用记事本、写字板、HBuilder、Sublime 等编辑工具来编写，以 .htm 或.html 为文件后缀名保存。将 HTML网页文件用浏览器打开显示，若测试没有问题则可以放到服务器（Server）上，对外发布信息。
基础语法
标签的分类
块级元素
元素都从新的一行开始，并且其后的元素也另起一行；元素的高度、宽度、行⾼以及顶和底边距都可设置；元素宽度在不设置的情况下，是它本身⽗容器的100%（和父元素的宽度⼀致），除非设定一个宽度。
行内元素
和其他元素都在一行上；元素的高度、宽度及顶部和底部边距不可设置；元素的宽度就是它包含的文字或图片的宽度，不可改变。
行内块状元素
和其他元素都在一行上；元素的高度、宽度、行高以及顶和底边距都可设置。
标签
HTML 标记是由"<“和”>“所括住的指令标记，用于向浏览器发送标记指令。
主要分为：单标记指令、双标记指令（由”<起始标记>“＋内容＋”</结束标记>"构成）。
为了便于理解，将HTML标记语言大致分为：基本标记、格式标记、文本标记、图像标记、表格标记、链接标记、表单标记和帧标记等。
单标签（单标签不设置属性）
例：
<br/>、<hr/>
单标签属性（单标签(也叫空元素)，设置属性值）
例：
<hr width="800" />
双标签（双标签，不设置属性值）
例：
<title>…</title>
双标签属性（双标签，设置属性值）
例：
<body bgcolor="red">…</body>
<font size="7">…</font>
整体结构
例：
/*Document Type HyperText Mark-up Language，⽂档中超⽂本标记
语⾔的类型，可告知浏览器怎么解析该⽂档。*/
<!DOCTYPE html>
//haml标志用于HTML文档的最前边，用来标识 HTML文档的开始
<html>
/*head构成 HTML⽂档的开头部分。head标志对之间的内容
是不会在浏览器的框内显示出来的，两个标志必须⼀块使⽤*/
<head>
/*meta⽤来提供关于⽂档的信息，起始属性为：charset="utf8"。
表示告诉浏览器⻚⾯采⽤的什么编码，⼀般来说我们就⽤ utf8*/
<meta charset="utf-8" />
/*title定义⽂档的标题。通常把它放置在浏览器窗⼝的标题栏或状态栏上。
把⽂档加⼊⽤户的链接列表或者收藏夹或书签列表时，标题将成为该⽂档链
接的默认名称。*/
<title></title>
</head>
<body>
//(主体内容)⼀般情况下⼤部分浏览器上显示的内容，都放在body中
</body>
</html>
//标志放在HTML文档的最后边，用来标识HTML文档的结束
常用标签
HTML页面是由标签组成，不同的标签浏览器对其进行不同样式和内容的渲染 ，我们需要记忆常用的标签即可。大致可分为如下几类：标题、水平线、段落、换行、图片、表格、超链接、列表、表单、下拉列表、div 和 span等。
标题和水平线
标题
h1 - h6 标签可定义标题，标题依次递减，由于 h 元素拥有确切的语义，因此请慎重地选择恰当的标签层级来构建文档的结构。请不要利用标题标签来改变同⼀行中的字体大小。相反，我们应当使用层叠样式表定义来达到漂亮的显示效果。
例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<!--
标题 （块级元素：元素会自动换行）
h1~h6，依次递减
-->
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>
</body>
</html>
水平线
hr 标签在 HTML 页面中创建⼀条水平线（horizontal rule）可以在视觉上将文档分隔成各个部分。在 HTML中，hr 标签没有结束标签。
例：
<!-- hr 水平线-->
<hr>
<hr width="80%" >
<hr width="80%" align="left" >
<hr width="80%" align="left" size="5" >
<hr width="80%" align="left" size="5" color="black" >
段落和换行
段落
p标签定义段落。p 元素会⾃动在其前后创建⼀些空⽩。浏览器会⾃动添加这些空间，也可以在样式表中规定。
例：
<!-- p
段落，行之间会有间隙
属性：align对齐方式
center 居中对齐
left 居左对齐（默认）
right 居右对齐 -->
<p align="center">...</p>
<p align="right">...</p>
换行
br 标签为换行符号 br 标签是空标签（意味着它没有结束标签，因此这是错误的。
注意：br 标签只是简单地开始新的一行，而当浏览器遇到 p 标签时，通常会在相邻的段落之间插入⼀些垂直的间距。应使用br 来输⼊空行，而不是分割段落。
例：
<!-- br
换行，单标签
HELLO将换行到下一行打印
-->
你好<br>HELLO
列表
常用属性
无序列表
例：
<!--
无序列表
<ul>
<li></li>
</ul>
-->
<ul type="disc">
<li>好好学习</li>
<li>天天向上</li>
<li>天天向上</li>
</ul>
结果：
有序列表
例：
<!--
有序列表
<ol>
<li></li>
</ol>
-->
<ol type="a">
<li>好好学习</li>
<li>天天向上</li>
<li>天天向上</li>
</ol>
结果：
div和span
div
<div是⼀个块级元素，通常与css配合使用，用于布局。
div 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。
div 是⼀个块级元素。这意味着它的内容自动地开始⼀个新行。实际上，换行是 div 固有的唯⼀格式表现。可以通过 div 的 class 或 id 应用额外的样式。
<!--
div
层，默认宽度占父元素的总宽度（默认含一行）
属性：
对齐方式
宽度 width
高度 height
-->
<div style="width: 200px;">
你好
</div>
<div>
Hello
</div>
结果：
span
span标签被用来组合文档中的行内元素 ，span 没有固定的格式表现。当对它应用样式时，它才会产生视觉上的变化 。
例：
<!--
span
块，默认是有多少内容占多少地方
-->
<span>
你好
</span>
<span>
Hello
</span>
结果：
格式化标签
font
规定文本的字体、字体尺寸、字体颜色
例：
<!--
font
规定文本的字体、字体尺寸、字体颜色
-->
<font color="red" size="4" face="楷体">
规定文本的字体、字体尺寸、字体颜色
</font>
结果：
pre
定义预格式化的文本，被包围在 pre 元素中的文本通常会保留空格和换行，而文本也会呈现为等宽字体。
例：
<!--
pre
定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。
而文本也会呈现为等宽字体
-->
<pre>
定义预格式化的文本。
被包围在 pre 元素中的文本通常会保留空格和换行符
而文本也会呈现为等宽字体
</pre>
文本标签
b（粗文本）、i（斜体文本）、u（下划线文本）、del （中划线文本）、sub（下标文本）、sup（上标文本）
例：
<!--
<b>（粗文本）、<i>（斜体文本）、<u>（下划线文本）、
< del >（中划线文本）、<sub>（下标文本）、<sup>（上标文本）
-->
<b>你好</b>
<strong>你好</strong>
<i>你好</i>
<u>你好</u>
<del>你好</del>
H<sub>2</sub>O
2<sup>3</sup>
结果：
a标签
a标签定义超链接，⽤于从⼀张⻚⾯链接到另⼀张⻚⾯。
a元素最重要的属性是 href 属性，它指示要链接的⽬标位置，同时没有href属性a标签内的内容与普通⽂本没有区别，也就失去了超链接的功能。
若是想要跳转到当前⻚⾯，那么href的值为#。被链接⻚⾯通常显示在当前浏览器窗⼝中，除⾮您规定了另⼀个⽬标（target 属性）。
常用属性：
例：
<!--
a标签
超链接，用来从一个页面链接到另一个页面
属性：
href：需要链接的页面地址 （如果不设置这个标签，
则和普通的文本没有区别）
target：打开的方式
_self：当前窗口（默认）
_blank：新开空白窗口
锚点的实现
1. a标签
设置name属性值
2.其他标签（包含a标签）
设置id属性值
锚点：
<a href="#name属性值或id属性值"></a>
-->
百度 <br>
<a href="http://www.baidu.com">百度</a><br>
<a href="http://www.baidu.com" target="_self">百度</a><br>
<a href="http://www.baidu.com" target="_blank">百度</a><br>
图片
img 元素向网页中嵌入一幅图像。
注意：从技术上讲，img 标签并不会在网页中插⼊图像，而是从网页上链接图像。img 标签创建的是被引用图像的占位空间。
必须属性
常用属性
例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>img标签</title>
</head>
<body>
<!--
img标签
图片标签，引入一张图片 （图片的地址）
属性：
src：需要引入的图片的地址
width：宽度
height：高度
title：当鼠标悬停在图片上时，显示的文字
-->
//引入了百度首页图片
<img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" />
//引入img文件夹下的图片
<img src="img/test.jpg" width="200px" height="200px" border="3" alt="新安" title="雨后新安江薄雾轻罩 楼阁若隐若现如仙境" />
</body>
</html>
表格
①table 标签定义 HTML表格。
②tr 标签定义表格的行。tr元素包含一个或多个th或td元素。
③td 标签定义 HTML 表格中的标准单元格。
④th 定义表格内的表头单元格。th元素内部的文本通常会呈现为居中的粗体文本，而 td 元素内的文本通常是左对齐的普通文本。
⑤简单的HTML表格由table元素以及⼀个或多个tr、th、或td元素组成。
理解：table相当于⼀个表格的外框，tr为行，td为⼀个⼀个单元格，th为有标题作用的单元格，th中的内容同时有加粗的效果。
常用属性
tr常用属性
例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>table表格</title>
</head>
<body>
<!--
table表格
table 表格标签
tr 表格的行
th 表头，居中且字体加粗
td 标准单元格，居左对齐
table属性
border 边框
width 宽度
height 高度
align 表格对齐方式
tr属性
align 单元格的内容的水平对齐方式
valign 垂直方向的对齐方式
style="border-collapse: collapse;"
边框的显示效果
collapse 合并边框
separate 分离边框（默认）
-->
<table border="1" width="600px" height="300px" align="center" style="border-collapse: collapse;">
<tr>
<th>姓名</th>
<th>密码</th>
<th>年龄</th>
</tr>
<tr align="center" valign="top" bgcolor="aquamarine">
<td>张三</td>
<td>123456</td>
<td>18</td>
</tr>
<tr align="right">
<td>李四</td>
<td>123321</td>
<td>19</td>
</tr>
</table>
</body>
</html>
结果：
表单
form
form 标签用于为用户输⼊创建 HTML 表单。
表单能够包含 input 元素，比如文本字段、复选框、单选框、提交按钮等等。还可以包含 textarea等元素。
表单用于向服务器传输数据。form 元素是块级元素，其前后会产生折行。
常用属性
method
表单提交方式：get、post。
get： 默认，主动的获取方式，数据放在url上，数据的容量有限，安全性差，有缓存。
post： 数据放在请求实体中，数据量理论上没有限制，相对安全，没有缓存。
input
input 标签⽤于搜集⽤户信息。
根据不同的 type 属性值，输⼊字段拥有很多种形式。输⼊字段可以是⽂本字段、复选框、单选按
钮、按钮等等。
常用属性
若上传文件，请求方式为post，且表单添加⼀个属性:enctype=“multipart/form-data”
注意：
- 没有name属性的属性是无法提交到后台的！
- Radio单选按钮以name相同为一组。
- Checkbox复选按钮以name相同为一组。
textarea
该标签定义多行的文本输入控件。文档本区中可容纳无限数量的文本，可以通过 cols 和 rows 属性来规定 textarea 的尺寸；cols规定文本区内的可见宽度；rows规定文本区内的可件行数。
例：
<textarea>content</textarea>
label
label 标签为input 元素定义标注（标记）。
label元素不会呈现任何的特殊效果。
label标签的for属性应当与相关元素的id属性相同，此时点击label标签会⾃动为元素聚焦。
例：
<label for="username">⽤户名：</label>
<input type="text" id="username" name="username"/>
button
常用属性
例：
<button>按钮</button>
select
select⽤于定义下拉列表
select常用属性
option常用属性
例：
<select name="color" >
<option value="red">红⾊</option>
<option value="green">绿⾊</option>
<option value="blue">蓝⾊</option>
</select>
结果：
常用字符实体
在 HTML 中，某些字符是预留的。
在 HTML 中不能使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签。如果希望正确地显示预留字符，我们必须在 HTML 源代码中使用字符实体（character entities）。实体名称对大小写敏感。
145
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
