？HTML是用来制作网页的标记语言
？HTML是Hypertext Markup Language的英文缩写，即超文本标记语言
？HTML语言是一种标记语言，不需要编译，直接由浏览器执行
？HTML文件是一个文本文件，包含了一些HTML元素，标签等。HTML文件必须使用html或htm为文件名后缀
？HTML是大小写不敏感的，HTML与html是一样的
？HTML是由W3C的维护的
实例
输出页面
本节文章的主要内容
0x01—基本语法
0x02—表单
0x03—head
0x01-基本语法
*标签
？标签是HTML中最基本单位，也是最重要组成部分。
？通常要用两个角括号括起来：“<”和“>”。
？标签都是闭合的（两种形式：成对与不成对）
<标签名>内容</标签名> 如： <table></table> 即分起始和结束
<标签名 /> 如： <br />
？标签是大小写无关的，<body>跟<BODY>表示意思是一样的，标准推荐使用小写，这样符合XHTML标准
*标签属性
？HTML属性一般都出现在HTML标签中， 是HTML标签的一部分。
？标签可以有属性，它包含了额外的信息。属性的值一定要在双引号中。
？标签可以拥有多个属性。
属性由属性名和值成对出现， 语法<标签名 属性名1="属性值" 属性名2="属性值" … 属性名N="属性值"></标签名>
*HTML注释
语法：<!-- 被注释的内容 -->
*HTML代码格式
任何回车或空格在源代码中都是不起作用，所以在编写HTML代码时，都可以使用回车或者空格进行代码排版，这样可以使代码清晰，也便于团队合作。必须保持严格的缩进规则，以“Tab”键为准。
*HTML字符实体
？特殊字符（实体）：用数值码和引用实体两种方式表示
*主体结构
head标签代表HTML文档的头信息，以<head>开始，</head>结束。头（head）包含了当前文档的一些信息，例如标题信息，meta信息等，正常情况下头信息是不会显示在HTML文档中的。
head元素包含的常用标签
title标签 -- 代表HTML文档的标题
base标签 -- 将相对URL转换为完整的绝对URL
meta标签 -- 用于定义文件信息的名称、内容等信息
link标签 -- 当在文档中声明使用外接资源（如CSS）时使用此标签
style标签 -- 在文档中声明样式时使用此标签
script标签 -- 在文档中使用JavaScript脚本
body中关于样式的设置属性不需要记， 可通过style标签来统一设置
*格式标签
不需要记其样式
*文本标签
示例
输出
*链接标记
a标签 -- 代表HTML链接
a,是anchor（锚）的第一个字母，a标签是成对出现的，即<a>…</a>。
<a href="url" target="_blank">显示的文字</a>
常用属性：
href -- 代表一个url链接源（就是链接到什么地方） url除了是网页外，还可以是其它的文件（如文本文件，pdf文件等）。 url还可以是指向HTML文件中的一个位置。 url还可以是Email地址。 target -- 用来指出哪个窗口或框架应该被此链接打开 target=_blank： 将链接内容在新的浏览窗口中打开。 target=_parent：将链接的内容，当成文件的上一个画面。 target=_self： 将链接的内容，显示在目前的窗口中。 target=_top：这个参数可以解决新内容被旧框窗包围的困扰，使用这参数，会将整个画面重新显示成链接的画面内容。title -- 代表链接的附加提示信息
有三种类型的链接路径
绝对路径 （例如 404,您访问的页面已经不存在！
文档相对路径 （例如 adver/contents.html）
站点根目录相对路径 （例如 /support/app/customer.html，其中“/”表示根目录）
定位网页内部的链接（锚点链接）：
使用<a href=>跳转到第用<a name=“”>定义，例如：<a name=“here1”>第一部分</a>一部分</a>超链接就可以定位到网页中的“第一部分”这个位置。
注意：<a href=>…</a>与<a href=>…</a>的区别
*img标签-- 代表HTML图像
img标签是单独出现的：<img />， img是image（图像）的缩写
常用属性：
alt -- 代表图像的替代文字
src -- 代表一个图像源（就是图像的位置）
border – 代表图片边框的宽度
Height＜/b> -- 代表一个图像的高度
Width＜/b> -- 代表一个图像的宽度
设计网页时经常使用的图片有三种格式：
GIF -- 最多支持256色，支持透明，支持多帧动画显示效果。
JPEG -- 支持多种颜色，可以有很高的压缩比，使用了有损压缩，不支持透明，不支持动画效果。
PNG -- 是一种新的图片技术，可以表现品质比较高的图片，使用了无损压缩，支持透明，不支持动画。
map标签 -- 定义图像点击区域的集合
map标签是成对出现的，即<map>…</map>,而且必须配合area标签使用。
map标签中name与id属性指定的值必须与定义图像点击区中图像（img）的usemap属性指定的值一致。
属性 :
id -- 定义map的名称。
name -- 定义map的名称。
area标签 -- 定义图像点击区域，
area标签是单独出现的，<area />
area标签必须使用在map标签中，而且必须配合img标签使用。
？属性
accesskey -- 链接的快捷键访问方式
alt -- 图像的提示文字
coords -- 定义可点击区域图形的坐标
href -- HTML链接源的URL
nohref -- 图像点击排除的区域，当不使用href时应使用nohref
shape -- 可点击区域的形状
tabindex -- 使用"Tab"键的遍历顺序
target -- 链接目标
<map>与<area>标签应用实例
*表格标签
常见属性
table标签属性
Width＜/b> -- 代表表格的宽度
Height＜/b> -- 代表表格的高度
border -- 代表表格边框（此属性应该使用CSS实现）
cellspacing -- 代表表格边框与表格内容填充的距离，也是内容填充之间的距离（此属性应该使用CSS实现）
cellpadding -- 代表内容填充的宽度（此属性应该使用CSS实现）
th、td标签属性
width与Height＜/b> – 代表宽度与高度
colspan -- 一行跨越多列
rowspan -- 一列跨越多行
align -- 代表水平对齐方式（left（左对齐） | center（居中对齐） | right（右对齐） | justify）（此属性应该使用CSS实现）
valign -- 代表垂直对齐方式（top（顶部对齐） | middle（中部对齐） | bottom（下部对齐） | baseline（基线对齐））（此属性应该使用CSS实现）
tr标签属性：
align与valign具体解释详见上面
0x02 表单*
表单是可以把浏览者输入的数据传送到服务器端的程序（比如ASP,PHP）的HTML元素，服务器端程序可以处理表单传过来的数据，从而进行一些动作。比如，bbs,blog的登陆系统，购物车系统等
form 标签 -- 代表HTML表单
form标签是成对出现的，以<form>开始，以</form>结束
常用属性。
？action -- 浏览者输入的数据被传送到的地方，如一个PHP页面（dofm.php）
？method -- 数据传送的方法
？get -- 此方式传递数据量少，但是传递的信息显示在网址上。
？ post --此方式传送信息多，而且不会把传递信息显示在网址上
？enctype -- 表示将数据发送到服务器时浏览器使用的编码类型
？ application/x- -- 窗体数据被编码为名称/值对。这是标准的编码格式。默认的。
？ multipart/form-data -- 窗体数据被编码为一条消息，页上的每个控件对应消息中的一个部分。
？text/plain -- 以纯文本形式进行编码，其中不含任何控件或格式字符
input 标签 -- 代表HTML表单的单行输入域
？input标签是单独出现的，<input />
？属性。
？type -- 代表一个输入域的显示方式（分为输入型，选择型，点击型）
？text -- 文字输入域（输入型）
？password -- 也是文字输入域，但是输入的文字以密码符号'*'显示（输入型）
？file -- 可以输入一个文件路径（输入型）
？checkbox -- 复选框。可以选择零个或多个（选择型）
？radio -- 单选框。只可以选择一个而且必须选择一个（选择型）
？hidden -- 代表隐藏域，可以传送一些隐藏的信息到服务器
？button -- 按钮（点击型）
？image -- 使用图片来显示按钮，使用src属性指定图像的位置（就像img标签的src属性）（点击型）
？submit -- 提交按钮，表单填写完毕可以提交，把信息传送到服务器。可以使用value属性来显示按钮上的文字（点击型）
？reset -- 重置按钮，可以把表单中的信息清空（点击型）
？name – 此表单项名称
？value -- 输入域的值
？size -- 输入域的长度
？maxlength -- 输入域最多可以输入文字的长度
？checked -- 如果是选择型的输入域，代表已经被选择，值为checked
？readonly -- 输入域可以选择，但是无法修改 ，值为readonly
？disabled -- 输入域无法获得焦点，无法选择，以灰色显示，在表单中不起任何作用。如：disabled="disabled"
？accesskey -- 表单的快捷键访问方式，如值为h即按Alt+h快捷键。
？tabindex -- 输入域的"tab"键遍历顺序
？src -- 当使用图片来表示按钮时，代表图片的位置（URI）
？alt -- 用来替换提交按钮的图片（当在input的src属性定义的图片无法显示时）提示信息。
？textarea 标签 -- 代表HTML表单多行输入域
？此标签是成对出现的，即以<textarea>开始，以</textarea>结束
？属性：
？cols -- 多行输入域的列数
？rows -- 多行输入域的行数
？name – 此表单项名称
？accesskey -- 表单的快捷键访问方式
？disabled 无法获得焦点，无法选择，
灰色显示，表单中无效
？readonly 输入域可以选择，但是无法修改
？tabindex 输入域，使用"tab"键的遍历顺序
select 标签 -- 选择列表标签
？select标签是成对出现的，以<select>开始，以</select>结束
？此标签中的每对option标签代表一个选择项
？属性：
？name – 表单项名称
？size -- 选择域的高度
？multiple -- 可以有多个选择
？disabled -- 以灰色显示，在表单中不起任何作用
？tabindex -- 使用"tab"键的遍历顺序
option 标签 -- 代表选择列表的一个选择项
？option标签是成对出现的，以<option>开始，以</option>结束
？属性：
？label -- 说明选择项
？value -- 说明选择项的值
？selected -- 此选择项已经被选择
？disabled -- 输入框无法获得焦点，以灰色显示，在表单中表示禁用
？tabindex -- 使用"tab"键的遍历顺序
例子：显示以下界面的代码
0x03—head
头元素是指位于<head></head>标签元素，主要包括：
？<title></title>标签对
？<base>标签
？<link>标签
？<meta>标签
<base>标签用于指定网页中的超链接的基准地址，以改变网页中所有使用相对地址的URL的基准地址。
<base>标签通常的使用形式如下：
作用
？Href属性设定该网页中所有使用HTTP协议的相对URL地址的基准地址，若网页中有如<a href=></a>这样的超链接，它不会再象没有使用<base>标签时那样表示当前网页相同目录下的index.html,而是指向了页面
？超链接的target属性用于设定该网页中所有的超链接显示的目标窗口，在<base>标签中设定target属性，可省得在所有的超 链接的<a>标签中都加上target属性。
<link>标签定义了当前文档和另一个文档或资源之间的关系。
几个主要的属性：
HREF
REL与REV
TITLE
TYPE
例如， TYPE=“text/css”、TYPE=“text/javascript”
MEDIA
设置值：screen、print、projection、aural、braille、tty、tv、all
link 创建CSS样式表的链接
<meta>标签
有两种类型的<meta>,用不同的属性名来划分，这两种属性名为：name和http-equiv.
？<meta name=“某个设置” content=“对该设置值进行具体补充说明的信息”>
？<meta http-equiv=“某个设置值” content=“对该设置值进行具体补充说明的信息”>
？name属性用于在网页中加入一些关于网页的描述信息，例如，网页的关键字（可供网页搜索引擎机器人查找、分类）、网页的描述信息等。
？http-equiv属性用于在HTML文档中模拟HTTP协议的响应消息头，例如，告诉浏览器是否缓存该网页、使用什么样的字符集来显示网页内容、隔多长时间自动刷新网页等。
name属性设置
？Keywords
？例如，<meta name=“keywords” content=“php, java, 培训”>
？Description
？Robots
？设置值：index、noindex、follow、nofollow、all、none.
？Generator
？Author
？copyright
http-equiv属性设置
？Content-Type
？例如，<meta http-equiv=“Content-Type” content=“text/html; charset=gb2312”>
？Refresh
？例如，<meta http-equiv=“Refresh” content=“1; url=”>
？Expires
？例如，<meta http-equiv=“Expires” content=“Mon, 12 may 2006 00:20:00 GMT”>,将content设置为0,可以禁止浏览器使用缓存页面。
？Windows-Target
？例如，要防止自己的网页被别人当作一个fame页面调用，可以使用<meta http-equiv=“Windows-Target” content=“_top”>.
？Pragma
？例如，<meta http-equiv=“Pragma” content=“no-cache”>.
？<meta http-equiv=“Cache-Control” content=“no-cache”>
？Page-Enter和Page-Exit
？例如，<meta http-equiv=“Page-Enter” content=“revealTrans（Transition=23, Duration=1.000）”>
meta 定义文件信息的名称、内容，http-equiv、name、content、
1.body
text、bgcolor、background、bgproperties、link、alink、vlink、topmargin、leftmargin
2.格式标签
br换行、p段落、center居中对齐、pre预格式化标记、li列表项目标记、ul无序列表、ol有序列表
hr水平分割线
3.文本标签
hn标题、b加粗、i斜体、u下划线、sub下标、sup上标、font字体标记、tt打字机文字、cite引证举例、em强调斜体、strong强调粗体字、small小型字体、big大型字体
5.图像
<img src="URL" alt="text" width="num" height="num" border="num" />
6.锚点和超链接
<a href="URL" name="name" target="target"> </a>
name属性指定页面的锚点名称，若要链接到该锚点前面加上#
7.表格
table、caption表格名称、tr行标签、td、th单元格
8.表单
form：name名称、method获取方式、action处理程序名称、enctype编码方式、target指定目标窗口目标帧
input：
text、password类型：name控件名称、value初始值、size控件宽度、maxlength输入最大字符数
<input type="text" name="field_name" value="field_value" size="n
" maxlength="n">
<input type="password" name="field_name" value="field_value" size="n
" maxlength="n">
submit提交表单
reset重置表单
button普通按钮
radio单选框
chekbox复选框
textarea多行文本域
select菜单下拉列表域，属性multiple多选、name、size高度
option指定选项，属性value、selected
|
