HTML
2015-8-31
HTML超文本标记语言（HyperText Markup Language）
是一种纯文本类型的语言。使用带有尖括号的“标记”将网页中的内容逐一标识出来。
用来设计网页的标记语言
用该语言编写的文件，以.html或者.htm为后缀
由浏览器解释执行
HTML页面上，可以嵌套用脚本语言编写的程序段，如：VBScript，JavaScript
HTML基础语法
1、标记语法
HTML用于描述功能的符号称为“标记”，比如<p>、<h1>等
标记在使用时必须使用尖括号括起来（<>）
有封闭类型标记，也有非封闭类型的标记
封闭：成对出现，有开始，有结束，也叫双标签。如：<a></a>
非封闭：只有开始没有结束，也叫单标签。如：<br>、<hr>、<img>
2、元素，即标记
每一对尖括号包围的部分
如<body></body>包围的部分就叫做body元素
元素就像是小标签，用于标识网页文档的不同部分
元素可以包含文本内容和其他元素，也可以是空的，比如前面所述的空标记
元素嵌套
元素之间可以相互嵌套，形成更为复杂的语法
注意：要注意嵌套的标签顺序；代码要以缩进的方式体现出来
3、属性和值
属性用来修饰元素
<标记名称 属性名=“属性值” 属性名=“属性值”></标记名称>
属性的声明必须位于开始标记里；一个元素的属性可能不止一个，多个属性之间用空格隔开；多个属性之间不区分先后顺序
每个属性都有值
属性和属性的值之间用等号连接；属性的值包含在引号中
<p align=”center”>这是一个P</p>
标准属性（公共属性、通用属性）：
大部分标签所具备的属性，
如：id（定义所在标签的唯一标识名称）
Title（鼠标移入到当前标签所在区域时所显示的文字）
Class（引用样式表中的指定类样式）
Style（定义当前标签的行内样式）
4、注释
注释只在编辑文档情况下可见，在浏览器展示页面时并不会显示
为代码添加适当的注释是一种良好的编码习惯
添加注释的语法如下：
<!--注释的文本内容-->
Ps：“<!--”和”-->”之间的任何内容都不会显示在浏览器中；注释不可以嵌套在其他注释中；注释不可以嵌在<>标记中；
5、HTML和XHTML、HTML5
1999年12月24日，W3C推荐标准HTML4.01
XHTML于2000年的1月26日成为W3C标准
与HTML4.01几乎相同；更严格更纯净的HTML版本
HTML5的目标，就是更为简洁的HTML代码（不再严格要求，并保证兼容性）
6、HTML文档的结构
文档类型声明 <!DOCTYPE html>
<html>整个文档的包含元素
<head>页面头部
<body>页面主体部分
-----------------------------------------------------
2015-9-01
1、<head >元素
作用：网页头部，主要包含网页的说明信息。
① 网页标题 <title></title>
----标题内容出现在浏览器最上方；标题标签没有任何属性；标题只能出现在head标签中；一个网页最多只能有一个标题。
② 网页的编码格式
默认编码：ISO-8859-1
通过meta标签
<meta http-equiv=”content-type”content=”text/html;charset=utf-8”/>
通过meta标签 <meta charset=”utf-8”/>
③ 声明内部样式表 <style></style>
④ 引入外部样式表
⑤ 声明内部的js（javascript）脚本 <script></script>
⑥ 引入外部的js（JavaScript）脚本
⑦ 声明其他元素，如关键字、描述等
添加网页的描述和关键字。Meta：一般做说明信息的声明。
常用属性：http-equiv(编码) content name charset（编码）
添加关键<meta name=”keywords” content=”关键字描述”/>
添加描述 <meta name=”description” content=”描述内容”/>
2、文本标记
作用：文本是网页上的重要部分；直接书写的文本会用浏览器的样式显示；包含在标记中的文本则会被显示为标记所拥有的样式。
特殊字符：通过转义字符(改变了单词的原有的意思，被解释成一种全新的含义)来表示特殊符号.
空格：
< ：< 小于
> ：> 大于
¥ ：¥ 人民币
©：© 企业标识
“：" 引号
文本样式：对文本进行修饰。
<b>...</b> 加粗
<i>...</i>倾斜
<u>...</u>下划线
<s>...</s>删除线
<sup>...</sup>上标
<sub>...</sub>下标
3、标题元素 <hn> </hn>
标题元素让文字以醒目的方式显示，旺旺用于文章的标题
<h1></h1> 一级标题
<h2></h2> 二级标题
.
.
<h6></h6> 六级标题
4、段落元素 <p></p>
P提供了结构化文本的方式，具备一定的格式。
与其他文本用换行区分；添加垂直空白距离，作为段落的间距
P标签的常用属性：align：文本在p标签内的水平对齐方式
align=”center/left/right”
5、换行标记 <br>
在任何地方创建手工换行
6、分区元素
多用于布局；方便以后对文本添加不同的样式
块分区元素：该元素会自动占一行
<div></div>
行内分区元素：众多的行内元素不会换行，在一行内显示
<span></span>
7、块级元素和行内元素
块级元素：div , p , hr , hn , ol , ul ....
作用：多数用于网页布局
行内元素：span, b, s, u, i,sub,sup.....
作用：包围文本，方便为文本添加效果
8、分割线 <hr>
作用：在网页构建一条水平线。空标记。属于块级元素。
常用属性：size：尺寸，水平线的粗细程度
width：水平线的长度。（取值可以给具体值，可以给百分比（可随浏览器大小调整））
align：水平对齐方式（center、left、right）
color：颜色
9、预格式化标签<pre></pre>
保留源文件当中的空格和换行格式
1、图像与链接
URL：统一资源定位器，用来标识网络中的任何资源
文本、图片、音视频文件、段落，或其他超文本
即路径，指从当前位置到目标位置所经过的路线
路径在web页面主要有三种形式：
绝对路径：文件从最高级目录下开始的完整路径
如： E:\LXD_silence\HTML5Basic\Day01\demo01.html。
完整的URL组成：协议（http://）；主机名或域名（www.baidu.com）；
目录路径（img）；资源名称：音视频、图片、html（logo.gif）
如： http://www.baidu.com/img/logo.gif
特点：无论当前资源路径是什么，使用绝对路径总能找到需要的资源。
相对路径：指文件的位置相对于当前文件的位置。它包括目录名，或指向一个可
以从当前目录出发找到该文件的路径。
平级用名字；子级进目录；父级向上返
根相对路径： /image/user.jpg
2、图像元素<img>
使用<img>元素将图像添加到页面；是一个空标记<img />
属性： src：指定显示图像的路径
width：图像宽度
height：图像高度
title：鼠标移动到图片上所显示的文字
alt：图片不显示的时候的文字
3、链接元素<a></a>
使用<a>元素创建一个超级链接，语法如下：
<a href=” ” target=” ”>文本</a>
属性： href：链接URL
target：目标，可取值为_blank(新窗口中打开)、_self（在自身所在的页面打开网页）
name：锚点名称
链接的各种表现形式：
① 下载资源：<a href=”bac.rar”>下载</a>
② 页面跳转：<a href=”abc.html”>网页</a>
③ 电子邮件链接：<a href=”mailto:zhaoxu@tarena.com.cn”>联系我们
</a>
④ 返回页面的空链接：<a href=”#”></a>
⑤ 链接到JavaScript：<a href=”javascript”>JS</a>
锚点
通过a定义锚点：html中的锚点相当于是html文档中某个位置的记号
定义锚点： <a name=”锚点名（anchorname）”></a>
跳转到锚点：<a href=”#锚点名”></a>
跳转到其他锚点处：<a href=”页面的url#锚点名”></a>
2015-9-02
4、表格元素<table></table>
表格的作用：具备固定格式的信息的布局。
定义表格用 <table>
定义行<tr>
定义列<td>（单元格）
所有放在table里的内容必须放在td里
<table></table>属性
边框属性：border 边框宽度
bordercolor 边框颜色
尺寸： width 宽 height 高 （可以是绝对的数值，也可以是百分比）
背景： bgcolor 背景色 background 背景图
细节： align 水平对齐方式
cellspacing 单元格与单元格之间的距离（单元格的外边距）
cellpadding 单元格内文本与单元格边框的距离（单元格的内边距）
<tr></tr>属性
height
align 内容在单元格的水平位置（left/center/right）
valign 内容在单元格的垂直位置（top/middle/bottom）
<td></td>属性
width 宽 height 高
bgcolor 背景颜色
align 水平位置对齐方式 valign 垂直位置对齐方式
colspan 跨列
rowspan 跨行
<caption></caption>属性
<caption>表格的标题</caption> 标题默认将在表格上方居中显示。紧随table标签之后
<th></th>属性
列标题，与td是平级的（th是表头，默认居中、加粗）
行分组
表头行分组：thead
表主体行分组：tbody
表尾行分组：tfoot
5、结构标记
header 文档头部、页头（使用率较高，可以在同一个页面多次使用）
nav 导航 一般用于制作页面中的主导航
section 文档的节；文档的主体内容（使用率高，可多次使用）
aside 独立于主体内容之外的内容。如 边栏、侧导航...
article 文档中引用的一段文字。如文章、帖子、博客....
footer 页脚、文章结尾（使用率较高）
6、列表
有序列表：<ol></ol>
<ol>属性：type: A / a / I / i / 1 定义序列的样式（a/A/I/i/1）
start 定义列表项是从几开始的
列表项：<li></li>
无序列表：<ul></ul>
<ul>属性：type: disk/circle/square (实心圆、空心圆、方块)
列表项前的样式
列表项：<li></li>
定义列表：<dl></dl>
多数出现在图文混排的样式效果中
<dl> 定义列表
<dt></dt> 列表标题（可以插入图像）
<dd></dd> 列表内容（做文字描述 ）
</dl>
7、表单
①表单标签：<form></form>（不放在form中的数据是提交不到服务器上的）
属性：action动作（服务器处理数据的程序地址，由服务器端开发人员来
提供，默认提交到本页。）
method 表单将以什么样的方式将数据提交给服务器
（是以明文还是密文的方式）， 默认值：get
取值：post 以密文的方式发送数据到服务器上，
不限制传递数据的长度
get 以明文的方式发送数据到服务器上，
限制传递数据的长度2kb
name 定义表单的名称
enctype 表单数据的编码方式
②表单元素(控件)
作用：专门接受用户的数据
1.Input元素
type:类型
<input type=”text” /> 文本框。接受用户输入的普通数据
<input type=”password” /> 密码框。
以密文的方式显示数据，密码的录入使用该控件
<input type=”checkbox” /> 复选框。注意：name属性要一致
<input type=”submit” value=”按钮上显示的文字”/> 提交按钮。
功能：用于提交表单到服务器上
<input type=””> 重置按钮。
作用：将所有的表单元素恢复到默认值状态
2、textarea多行文本域
3、select和option
4、其他元素
原文：http://www.cnblogs.com/--silence/p/4960492.html