标签：alt 客户 Enctype 简体 数组 停留时间 不同 vsp w3c
双边标记：<标记名称 属性1=“属性值1” 属性2=“属性值2”></标记名称>
一个人可以看成一个对象，人对象有身高、体重、年龄、学历等特征。
例如：<张三 height=”180” weight=”200” age=”200” edu=”研究生”>
例如：<font size=”7” color=”red” face=“黑体”>李四</font>
单边标记：<标记名称 属性1=“属性值1” 属性2=“属性值2”>
说明：单边标记起一个特殊的作用，比如：换行标记、水平线等
例如：<hr> 水平线标记 <br>换行标记
加粗：<b>内容</b>
斜体：<i>内容</i>
下划线：<u>内容</u>
下标：<sub></sub>
上标：<sup></sup>
字体颜色、大小：<font size=“字号大小，取值1-7” color=“颜色单词”>内容</font>
例如：<font size=”6” color=”blue”>大家好</font>
解决网页乱码的问题：要保证各个环节的字符编码一致
（1）编辑器的编辑环境的字符集： ----->>>建议保存的时候选择为UTF-8
常用的编码 GB2312(简体)、GBK(简体)、BIG5(繁体)、UTF-8(多国语言编码)
（2）<meta>标记的字符集设定与编辑环境的字符集一致
字符集设置：<meta http-equiv=“content-type” content=“text/html;charset=utf-8” >>>>应当与要保存的编码一致
（3）PHP的字符集设置
（4）MySQL的字符集设置
注意：浏览器编码也选择为对应编码 例如UTF-8
任何软件的默认字符编码都是ANSI编码，ANSI在中国，对应的具体的编码是GBK或GB2312。
text：指网页的前景颜色，就是指网页中的文本颜色；
bgcolor：网页的背景颜色
background：网页背景图片路径。background=”images/bg.gif”
例如：<body bgcolor="#999999" background="bgcolor.jpg">
1、水平线：<hr size=“线的粗细” width=“线的宽度” align=“水平对齐方式” noshade>
常用的属性：
size：指定水平线的粗细，单位默认是像素，例如：size=5
width：指定水平线的宽度，取值：固定值、百分比。例如：width=500 width=50%
align：水平线的水平对齐方式，取值：left、center、right
noshade：不加阴影，也就是纯色显示，该属性没有属性值。
提示：HTML中的标记及属性，不区分大小写。
例如：<hr size=“5” width=“50%” align=“center” noshade>
2、段落标记：<p></p>
align：水平对齐，取值：left、center、right
提示：在段落的前后，会自动插入一个空行。
3、标题标记
一级标题：<h1 align=“left|center|right”></h1>
二级标题：<h2></h2>
三级标题：<h3></h3>
四级标题：<h4></h4>
五级标题：<h5></h5>
六级标题：<h6></h6>
4、预排版标记<pre></pre>
含义：将保留其中的所有的空白字符(空格、换行符)。原封不动的输出结果。
说明：真正排网页过程中，<pre>标记几乎用不着。但在PHP中用于打印一个数组时使用。
空格：" "
>：">"
<："<"
&："&"
人民币："¥"
版权："©"
乘号："&time"
除号："÷"
标记结构：
<ul>
<li>内容</li>
<li>内容</li>
……
</ul>
常用属性：
type：指定项目符号的类型，取值：disc(实心圆点)、circle(小圆圈)、square(方块)
提示：这个type属性，既可能给<ul>添加，也可以给<li>添加。
注意：项目符号可以是图片，但是通过CSS设置<li>标记的背景图片来实现。
项目符号之间相互嵌套
<ul>
<li><b>百色市</b>
<ul>
<li>右江区</li>
<li>平果县</li>
<li>隆林县</li>
</ul>
</li>
<li><b>南通市</b>
<ul>
<li>海安</li>
<li>海门</li>
</ul>
</li>
<li>南京市</li>
</ul>
说明：项目符号嵌套，是在某一个<li>标记中来嵌套一个完整的<ul>标记。
<ol>
<li>内容</li>
<li>内容</li>
……
</ol>
常用的属性：
type：编号的类型，取值：1、a、A、I(大罗马)、i(小罗马)
start：从第几开始编号，取值只能是数字。
<h2>编号列表的应用</h2>
<ol>
<li>HTML</li>
<li>CSS</li>
<li type="a" start="3">JavaScript</li>
<li>PHP+MySQL</li>
</ol>
编号列表相互嵌套：跟上面<ul>的嵌套一样，也都是在<li>标记中，来嵌套一个完整的<ol>。
定义列表的格式：
<dl>
<dt>定义标题</dt>
<dd>描述信息</dd>
</dl>
标记的解释说明：
dl，define List
dt，define title
dd，define description
<dl>标记中，至少包含一个<dt>或<dd>标记，也可以包含多个<dt>或<dd>。
<dt>定义标题，这个标记是必须的；
<dd>描述信息，可以根据情况使用，如果不需要它，可以不用加。
<div></div>和<span></span>标记，没有任何意义，但在网页中，又是使用最多的标记。
这两个标记，基本上没有太多的属性。
<div>和<span>这两个标记，一般要结合CSS来实现效果
块元素和行内元素
块元素(标记)：是块元素的前后，会自动插入一个换行符。块元素会另起一行进行排版。
比如：<div>、<p>、<ul><ol><dl>、<pre>、<h1>、<h2>等
行内元素(标记)：行内元素的高度和宽度由内容决定。多个行内元素将排在同一行，不会另起一行进行排版。
比如：<font><b><i><u><a><span>等
英文单词表示：red、green、blue、yellow等。
10进制表示：
有10基本数：0、1、2、3、4、5、6、7、8、9
红色：rgb(255,0,0)
绿色：rgb(0,255,0)
蓝色：rgb(0,0,255)
16进制表示：
有16个基本数：0、1、2、3、4、5、6、7、8、9、A、B、C、D、E、F
红色：#FF0000
绿色：#00FF00
蓝色：#0000FF
<marquee></marquee>
常用属性：
direction：滚动的方向，取值：left、 right、up、 down
behavior：滚动的方式，取值：alternate(弹动)、scroll(滚动)、slide(滚动一次)
bgColor：背景颜色
width：滚动的宽度
height：滚动的高度
align：水平对齐方向，取值：left center right
scrollAmount：滚动的步长值，值越大，滚动的越快。
scrollDelay：两次滚动间的停留时间
例如：<marquee direction="up" width="450" height="300" bgcolor="#FFFF99" behavior="scroll" scrollamount="10" scrolldelay="1000">I can fly</marquee>
1、概念：要想从一个网页跳转到另一个网页，就需要使用“超级链接”来实现。
2、超级链接的标记<a></a>，双边标记，是行内元素
常用属性：
href：目标URL，如：href=http://www.sina.com.cn href=“about/index.html”
name：主要用于设置一个锚点的名称。
target：设置目标页面打开方式。
_blank：在新窗口中来打开目标文件，原来的窗口不关闭
_self：在当前窗口中来打开目标文件，原来窗口中的内容将被替换掉。
_top：在最顶层窗口中来打开目标文件，常用于“框架技术”中
_parent：在父级窗口中来打开目标文件，常用于“框架技术”中
例如：<a href=“http://www.sina.com.cn”></a>
3、URL介绍
URL(Uniform Resource Locator，统一资源定位器)
例如：http://php.cn/view/index.html
一个URL(网址)由四个部分构成：
第一部分：协议，比如：http:// ftp://
如何判断是什么服务器？主要是看安装了什么样的服务器软件？Apache软件是WWW服务器
如果安装了FTP的软件的服务器，FTP服务器；
如果安装了邮箱服务器的软件，那就是“邮件服务器”；
如果安装了MySQL软件的服务器，那就是“数据库服务器”；
第二个部分：主机名，比如：php.cn就是一个主机的二级域名(一级域名是以WWW开头的)。
第三部分：目录名，比如：view/
第四部分：文件名，比如：index.html
4、其它常用的链接
E-mail链接：<a href="mailto:976296751@qq.com">给我发邮件</a>
下载链接：任何网页不能直接执行的文件，都会出现下载对话框。
网页可以直接执行的文件：.html .jpg .png .gif .htm
空链接：<a href="#">bruce</a>
JS空链接：<a href="javascript:void(0)">JS的空链接</a>
提示：在HTML中写JS程序时，一般是以“javascript:”开头，void(0)返回一个假值，什么也不做
JS的弹出一个警告窗口：<a href="javascript:alert(‘Hello bruce ！‘)">请点我！</a>
提示：alert()是JS的Window对象的一个方法，弹出一个字符串信息。
5、锚点链接：实现在一个网页的不同部分进行跳转
第一步：先定义一个锚点(记号)
<a name=“top”></a> 中间一般不写内容
第二步：链接到定义的锚点所在的位置
<a href=“#top”>返回顶部</a>
锚点：通过锚点(记号)，可以访问到一个网页的不同地方。
定义锚点：<a name=“top” id=“top”></a>
说明：name属性是HTML4.0以前使用的，id属性是HTML4.0后才开始使用。为了向前兼容，因此，name和id这两个属性都要写上，并且值是一样的。
HTML的注释：是对某个模块的解释说明，最终在网页中是看不见的。
<!—注释的内容-->
单边标记：<img>
常用的属性
src：指图片的路径，如：src=“images/bg.gif”
width：指图片的宽度，不加单位。Width=400
height：指图片的高度。
align：指图片的水平对齐方式，取值：left center right
border：图片的边框线的粗细
alt：如果图片不显示时，将显示alt指定的内容
hspace：指图片左右的边距
vspace：指图片上下的边距
title：指定图片的提示信息，有利于SEO优化(关键字优化)
说明：title是一个公共的属性，任何标记都有title属性。
注意事项：
（1） 如果要想保证图片等比例缩放，请只设置width和height其中一个。
（2） 如果想实现图文混排的效果，请使用align属性，取值为left或right。
（3）所有的外部文件，图片、视频、音乐、附件等，都没有真正的插入到网页中，而是写入一个链接的地址，在需要显示文件时，就从服务器上调用该文件。因此，网页的大小， 是由文本和标记决定的。
（1）XHTML介绍
XHTML，Extensible Hypertext Markup Language，可扩展超文本标注语言。
XHTML的主要目的，是为了取代HTML，也可以理解为HTML的升级版。
HTML的标记书写很不规范，会造成其它的设备(ipad、手机、电视等)无法正常显示。
XHTML与HTML4.0的标记基本上一样。
XHTML是严格的、纯净的HTML。
（2）编写XHTML的规范
1)所有标记元素都要正确的嵌套，不能交叉嵌套。<h1><font></font></h1>
2)所有的标记都必须小写。
3)所有的标记都必须关闭。
双边标记：<span></span>
单边标记：<br> 转成 <br /> <hr> 转成 <hr /> <img src=“URL” />
4)所有的属性值必须加引号。<font color=“red”></font>
5）所有的属性必须有值。<hr noshade=“noshade”>
<input type=“radio” checked=“checked” />
6）XHTML文档开头必须要有DTD文档类型定义
XHTML编写规范
1）所有的标记、属性都要小写；
2）所有的标记都要关闭，如：<hr /> <br /> <meta /> <img />
3）所有的属性值都要加引号
4）所有的属性都必须要有值，例如：<hr noshade=“noshade” />
5）DTD文档类型定义，DTD就是一套标记的验证规则而已。
严格型：结构(HTML标记)和表现(CSS)完全分离
过渡型：可以在结构中，来书写样式、格式。
框架型：主要用来作框架，将一个浏览器窗口划分成不同的小窗口，一个小窗口中可以来显示一个网页。
DTD，Document Type Definition文档类型定义，是一套标记的规则，理解为一种“验证机制”。
DTD有三种类型：
第一种：Strict严格型：在这种XHTML中，结构中不能出现格式或表现的内容。
格式标记：<font>、<b>、color属性、background属性
这种类型下，在<body>中只有结构标记，不能出现任何的表现。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
第二种：Transitional过渡型：在这种XHTML中，结构中可以出现格式标记或表现(CSS)的内容。(用的最多)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
第三种：Frameset框架型：在这种XHTML中，可以使用框架技术，实现多个网页在一个浏览器窗口中呈现
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
（1）<meta>标记的概念
<meta>标记提供一些元信息，比如：关键字、描述信息、作者、网页刷新、网页过期期限、网页字符集等
（2）<meta>的两个属性
http-equiv：相当于http的文件头信息，告诉浏览器如何正确的显示网页的内容。
name：描述信息，指定网页关键字、网页描述、作者、版权信息
（3）常用的<meta>设置
设置网页的字符集：<meta http-equiv=“content-type” content=“text/html;charset=utf-8” />
网页自动刷新：<meta http-equiv=“refresh”content=“3” /> 3秒自动刷新网页
延迟一定时间后跳转：<meta http-equiv=“refresh” content=“3;url=http://www.sina.com.cn” />
设置网页的关键字：<meta name=“keywords” content=“关键字” />
网页描述：<meta name=“description” content=“描述信息” />
网站作者：<meta name=“author” content=“Bruce” />
1、表格的结构
<table>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
表格结构的说明：
<table>是表格标记，里面包含<tr>行标记；
<tr>代表一个行
<td>或<th>代表一个单元格(列)，<th>标题单元格(内容居中加粗显示)，<td>普通单元格
2、<table>的常用属性
width：表格的宽度
height：表格的高度
border：表格的边线粗细
bordercolor：表格的边线颜色
align：表格的水平对齐方式，取值：left center right
cellpadding：指单元格边线到内容间的距离(内边距)
cellspacing：指两个单元格之间的距离(外边距)
bgColor：表格背景色
background：表格的背景图片
注意：在HTML中所有的属性值都不加px单位，但在CSS中所有数值都必须加单位。
3、<tr>的常用属性
height：一行的高度
bgColor：行的背景色
align：一行的内容水平居中显示，取值：left、center、right
valign：行的内容垂直居中，取值：top、middle、bottom
4、<td>或<th>的属性
width：单元格的宽度
height：单元格的高度
bgColor：背景色
background：背景图片
align：单元格内容水平对齐
valign：单元格内容垂直对齐
rowspan：合并行的单元格(跨行合并)
colspan：合并列的单元格(跨列合并)
表格：很细表格边线的制作
CSS的写法：style="border-collapse:collapse;"
制作网站的一个思路
1） 业务员与客户进行沟通，确定客户的需求。
2） 网站美工来设计一个效果图(Photoshop)，直到客户满意为准。
3） 将效果图源文件，交给排版人员，用HTML+CSS还成效果图所展示的样式。
4） 排版人员，将原效果图进行切割成一个一个的小图片，然后用HTML+CSS还原效果图所展示的样式。
5） 后台程序员开始写程序。
6） 将前台HTML页面与PHP程序综合排版。
1、表单的主要作用：收集用户信息的。
2、表单的工作原理
1）填写有表单的网页，点击“提交按钮”进行提交；
2）表单数据，通过互联网传递到了服务器
3）服务器上有专门的程序，对提交的表单数据进行验证；
4）如果验证通过，直接写入数据库；
5）如果验证失败，将返回一个错误信息；
因此，表单的开发分两个部分，一是前台表单页面的制作和排版，二是后台PHP程序对表单数据的验证和写入数据库。
3、实例：用户登录的表单
<form name=“form1”>
用户名：<input type="text" name="username" size="40" />
密码：<input type="password" name="password" size="40" />
<input type="submit" name="submit" value="提交表单" />
</form>
4、<form>标记常用属性
name：表单的名称，用于JS来操作或控制表单时使用；
id：表单的名称，用于JS来操作或控制表单时使用；
action：指定表单数据的处理程序,如：action=“login.php”
method：表单数据的提交方式，一般取值：get(默认)和post
GET方式：将表单数据，以“name=value”形式追加到action指定的处理程序的后面，两者间用“?”隔开，每一个表单的“name=value”间用“&”号隔开。
特点：只适合提交少量信息，并且不太安全(不要提交敏感数据)、提交的数据类型只限于ASCII字符。
POST方式：将表单数据直接发送(隐藏)到action指定的处理程序。POST发送的数据不可见。
Action指定的处理程序可以获取到表单数据。
特点：可以提交海量信息，相对来说安全一些，提交的数据格式是多样的(Word、Excel、rar、img)
Enctype：表单数据的编码方式(加密方式)，取值：application/x-www-form-urlencoded、multipart/form-data
Enctype只能在POST方式下使用。
Application/x-www-form-urlencoded默认加密方式：除了上传文件之外的数据都可以
Multipart/form-data：上传附件时，必须使用这种编码方式。
5、单行文本框：
<input type=“text” name=“name” value=“默认值” size=“宽度” maxlength=“最大字符数” />
type：指定文本框的类型，取值：text(文本框)、password(密码)、radio(单选)、checkbox(复选框)
name：指定文本框的名称
value：指文本框中默认显示的文本；
size：指文本框的宽度(字符数)
maxlength：最大可以输入多少个字符
注意：表单和表格嵌套时，是在<form>标记中赋套<table>标记。
6、单行密码框
<input type=“password”name=“name”size=“”maxlength=“” />
7、单选项
<input type=“radio”name=“sex”value=“先生” checked=“checked” />先生
<input type=“radio”name=“sex”value=“女士” />女士
Checked属性：是默认选择其中一项。
提示：单选是一组相互排斥的选项，每次只能选择一个，不能同时选择多个。
8、复选框：同时选择多个，也可以一个都不选
<input type=“checkbox” name=“hobby”value=“泡妞” checked=“checked” />泡妞
<input type=“checkbox” name=“hobby”value=“篮球” />篮球
<input type=“checkbox” name=“hobby”value=“吹牛” />吹牛
checked属性：默认选中哪几个选项
提示：复选框也是一组选项，名称是一样的，最终用PHP来获取值时，将产生一个数组(一个名称好几个不同的值)的结果。
9、上传文件
<input type=“file”name=“uploadFile” />
提示：如果要限制上传文件的类型，需要配合JS来实现验证。对上传文件的安全检查：一是扩展名的检查，二是文件数据内容的检查。
10、文本区域
<textarea name=“name” cols=“宽度” rows=“高度”>默认的显示文本</textarea>
11、下拉列表
<select name=“city”>
<option value=“北京市”selected=“selected”>北京市</option>
<option value=“天津市”>天津市</option>
</select>
Selected属性：是默认选中一个下拉列表项；
12、提交按钮、重置按钮、普通按钮、图片按钮
提交按钮：<input type=“submit” name=“submit” value=“提交表单” />
注意：如果按钮上的文本，不想发送到服务，可以不用加name属性
重置按钮：<input type=“reset” name=“reset” value=“重新填写” />
普通按钮：<input type=“button” name=“button” value=“普通按钮”/>
<input type="button" value="提交表单" onclick="javascript:this.form.submit()" />
普通按钮没有任何功能，既不会提交表单，也不会重置表单；如果想实现“提交”“重置”功能，将需要配合JS来实现。
图片按钮：<input type=“image” src=“图片的URL”/>
说明：图片按钮的默认动作，就是提交表单。
浮动框架，就是在一个网页中开一个“小窗口”，在小窗口中来显示一个网页的内容。
<iframe>是<body>的子标记。
<iframe>如果浏览器不支持时，显示的提示信息</iframe>
<iframe>的常用属性
src：引入哪一个网页文件进来；
width：指浮动框架的宽度
height：指浮动框架的高度
frameborder：是否显示框架边框，取值：yes、no、1、0
scrolling：网页内容该如何显示，取值：auto、yes、no
align：实现框架和文本混排
hspace：左右间距
vspace：上下间距
标签：alt 客户 Enctype 简体 数组 停留时间 不同 vsp w3c
原文地址：http://www.cnblogs.com/Qxiaobai/p/7101639.html
