HTML纲要
主要章节：
1.HTML基础语法
2.文本样式
3.HTML对象
4.框架集
一、HTML基础语法
1.HTML概述
HTML[HyperText Markup Language]，超文本标记语言。
XHTML[Xtensibile HyperText Markup Language]，扩展的超文本标记语言。
作用：完成创建Web页面，以html或htm为后缀，由浏览器解释执行
2.Web概述
Web：
根据网站是否可以交互分为静态网页和动态网页
静态网页：.htm，.html
动态网页：..jsp，.aspx，.php，.shtm，.shtml
Web相关技术：
客户端技术：运行于客户端，由浏览器来解释运行
HTML，CSS，JavaScript，浏览器兼容问题
服务端技术：运行于服务端，可以和数据库进行交互
ASP.NET(Active Server Page)
PHP(Hypertext Preprocessor)
JSP(Java Server Page)
Web浏览器：
A.主要功能：
B.代理访问者提交请求
C.作为HTML解释和内嵌脚本程序执行器
D用图形化方式显示HTML文档
3.标记
标记(Tag)，也称为元素(Element)，完成某些功能字符串。
标记的分类
A.按照是否包含子标记或内容
单标记：<标记名称/>
双标记：<标记名称>...</标记名称>
B.按是否换行
内联对象：不换行
块级对象：换行
4.属性(Attribute，对象的特征描述)
对象的特征元素，用来修饰元素，每个属性都有值，一个标记的属性可有多个，每个元素都有自己特有的属性，有些属性大多数元素都支持，成为通用属性（标准属性，公共属性）：
id，title，class，style。
<标记名称 属性名称="值" 属性名称="值" .../>
<标记名称 属性名称="值" 属性名称="值">...</标记名称>
5.注释：〈！--注释--〉
6.XHTML文档的规范
A.标记名称及属性名称必须为英文小写字母
B.必须有关闭标记，标记之间必须顺序嵌套
C.单标记必须以"/>"结尾
D.属性之间不区分先后顺序
E.属性值必须括在引号之间
XHTML的合法性验证，验证地址http：//validator.w3.org
7.XHTML文档的结构
<!DOCTYPE html DTD>
<html xmlns="http：//www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type" content="text/html;charset=编码方式"/>
<title>标题</title>
</head>
<body>
正文
</body>
</html>
DTD[Document Type Defination]，文档类型定义，在文档的起始用DOCTYPE声明指定版本和风格，DTD用来定制文档的结构，其实是从XML的技术借鉴的。
XHTML 1.0的DTD类型有三种：
一、Strict(严格)
<!DOCTYPE html "-//W3C//DTD XHTML 1.0Strict//EN" "http：//www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
二、Transitional(过渡)
<!DOCTYPE html "-//W3C//DTD XHTML 1.0Transitional//EN" "http：//www.w3.org/TR/xhtml1/DTD/xhtml1-transtional.dtd">
三、Frameset(框架集)
<!DOCTYPE html "-//W3C//DTD XHTML 1.0Frameset//EN" "http：//www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
例：
<！DOCTYPE html PUBLIC "-//W3C//DTD XHTML1.0 Transitional//EN"
"http：//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http：//www.w3.org/1999/xhtml">
<head></head>
<body></body>
</html>
命名空间：xmlns，解决标记名称冲突问题
〈html xmlns="http：//www.w3.org/1999/xhtml"〉
1999目录中的xhtml文件
头元素：
<head></head>元素用于为页面定义全局信息，是所有其它元素的容器，包含在<html>紧跟在起始标签<html>之后
可包含：
title，meta，script，style，link等
<！DOCTYPE htmlPUBLIC "-//W3C//DTD XHTML1.0 Transitional//EN "
<html xmlns="http：//www.w3.org/1999/xtml">
<head>
</head>
</html>
头部文档内容：
<title></title>用于为文档定义标题，标题元素内容出现在浏览器顶部，没有属性，必须出现在<head>元素中，一个文档只能有一个标题元素
<html xmlns="http：//www.w3.org/1999/xtml">
<head>
<title>我的第一个HTML页面</title>
</head>
<body></body>
</html>
<meta/>元数据元素，用于定义网页的基本信息，单标记，常用属性：
Content、http-equiv
<html xmlns="http：//www.w3.org/1999/xtml">
<head>
<title>我的第一个HTML页面</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>编码方式
<meta name="refresh" content="10 "/>设置刷新频率
</head>
</html>
二、HTML文本样式
1.文本标记概述
文本标记的作用：
文本是网页上的重要组成部分，直接书写的文本会用到浏览器默认的样式显示，包含在标记中的文本会被显示为标记所拥有的格式。
2.标题元素：<hn>标题，n=1，2，3，4，5，6</hn>
让文本以醒目的方式显示，用于文章的标题
3.段落元素：<p>段落</p>
会用单独的段落显示，与前后的文本换行分开，添加段落标记
常用属性：对齐方式，align
align的属性值：
Justfy：两端对齐，用于首字母有标点的情况
Center：居中
Left：左对齐
Right：右对齐
4.换行元素：</br>，在任何地方创建于手工换行
单词间用空格隔开，否则默认为1个单词，不予换行
5.分区元素：<span>和<div>
块分区元素：<div></div>
行内分区元素：<span></span>，设置同一行文字内的不同格式
例：
<div style="color：blue;">
<p>first</p>
</div>
<p>
一周畅销<spanstyle="color：red;">榜</span>
</p>
行内元素和块级元素：
块级元素：块级元素会独占一行，元素前后都会自动换行
以下元素默认情况下为块级元素: div,p,h1,h2,h3,h4,h5,h6,ul,ol,li,br
行内元素：不会换行，可以和其他行内元素位于同一行
如：<span>、<a>
块级元素将上下排列;内联元素将水平排列。
6.文本样式：
加粗：<b></b>，<strong></strong>
倾斜：<i></i>，<em></em>
下划线：<u></u>
删除线：<s></s>，<strike></strike>
上标：<sup></sup>
下标：<sub></sub>
字体：
<font face="字体" size="字号1-7" color="颜色">
</font>
7.特殊字符：
HTML实体：
大于">"：>
小于"<"：≶
单引号" ‘ ’ "：'(IE不支持)，'（都支持）
双引号" "" "：" (中文引号不用实体)
连接符"&"：&
注册商标（圆里有个R）：®
版标符号（圆里有个C）：©
日元：¥
不间断空格：
空格折叠：多个空格或制表符压缩成单个空格，不管输入多少个空格，只显示一个
想要输入多个不间断空格需要转义
三、HTML对象
1.URL
URL（UniformResource Locator）：统一资源定位器，用来标识网络中的任何资源，包括文本、图片、音视频文件、段落、或其他超文本
完整URL组成：协议、机名、路径名、文件名
http：//www.w3.org/TR/CSS2/syndata.html
"http："：协议名
"/TR/CSS2/"：路径
"syndata.html"：要链接的文件名
三种路径方式：
一、相对路径：文件的位置是相对于当前文件的位置
A：若当前文档和目标文档在同一目录内，可直接书写目标文档全程即可
例："syndata.html"
B：若当前文档和目标文档所在文件夹位于同一目录内，则书写成"目录名称/目标文档全称"
例："TR/CSS2/syndata.html"
C：若当前文档所在目录和目标文件位于同一目录内，则写成"../目标文件全称"
二、根相对路径：根相对路径，从站点根目录开始的路径，总是以"/"开头
例：/TR/CSS2/syndata.html
三、绝对路径：从文件最高级目录下开始的完整的协议名称、主机名称、路径及文档全程，无论当前路径是什么，使用绝对路径总是能找到要链接的文件
例：http：//www.w3.org/TR/CSS2/syndata.html
2.图像元素
使用<img/>元素将图片添加到页面，单标记
必须属性：src，alt(没有通不过验证)
src：图像的URL
alt：图像注释，只有IE可见，因此应使用公共属性title，但alt不可缺，没有alt不通过验证
常用属性：width，height，border(边框宽度)
浏览器支持的图片：gif，jpg/jpeg，png
gif：支持动画，支持透明色，但仅支持256种颜色，图片会失真，出现色块，文件较小
jpg：不支持动画和透明色，支持256x256种颜色，使用最多
png：不支持动画，支持透明色，支持256，256x256，4G三类颜色，可取代jpg
3.链接
作用：实现一个页面到另一个页面的跳转，<a></a>
属性：href：目标文档的链接
target：窗口形式，属性值：_self，自身窗口打开，默认；_blank，新窗口打开
<a href="http：//www.w3.org/TR/CSS2/syndata.html" target="_bank">
</a>
六种表现形式：
1.链接到网页——常见
2.链接到下载资源，首先使用压缩软件将下载资源进行压缩，然后再将链接的目标文档设置为压缩包的文件即可
3.电子邮件链接
href="mailto：电子邮件地址"
4.链接到JavaScript
href="javascript：window.confirm"询问对话框，例："确定要删除吗？"
href="javascript：window.alert"警示对话框，例："错误！"
5.空连接，没有目标文档，其行为由JS控制
href="javascript：void（0）"，保持
href="#"返回顶部
6.锚点链接
锚点是文档中某行的一个记号，用于链接到文档中的某个位置，适合做帮助页面，快速定义到某个特定部分
A：创建锚点
<a name=" 锚点名称">锚点</a>
B：链接到锚点，在锚点前加上"#"
<a href="#锚点名称">回到锚点</a>
例：
<a name=" top">锚点</a>
<br/><br/><br/><br/><br/>
<a href="#top">回到顶部</a>
4.列表
列表是指将具有相似特征或者具有先后顺序的几行文字进行对齐排列，所有的列表都由列表类型和列表项组成
列表类型：
一、有序列表<ol></ol>
用于列出页面上有特定次序的项目
属性：type：1，a，A;罗马字符：i，I
Start="4"，起始编号，此处不管什么类型的编号，其实编号必须写阿拉伯数字
例：
<ol>
<li>One</li>
<li>Two<li>
</ol>
效果：
1.One
2.Two
二、无序列表<ul></ul>
用于列出页面上没有特定次序的项目
属性：type：disc，实心圆；circle，空心圆；square，实心矩形
列表项：<li></li>，用于指示具体的列表内容，列表中包含的每一项都必须在起始标记<li>和结束标记</li>之间
列表嵌套：将列表元素嵌套使用，可创建多层列表，用于创建文档大纲，导航菜单等
例：
<ol>
<li>
Web基础知识
<ul>
<li>Web的工作原理</li>
</ul>
</li>
<li>
HTML快速入门
<ul>
<li>基础语法</li>
</ul>
</li>
</ol>
效果：
1.Web基础知识
o Web的工作原理
2.HTML快速入门
o基础语法
7.表格
通常用来组织结构化的信息，由单元格矩形框从左到右，从上到下排列，实现页面布局，显示规则有序的数据
创建表格：<table></table>
创建表行：<tr></tr>
创建单元格：<td></td>;<th></th>
表格样式统一定义：<tbody></tbody>
例：<tr><tr>
<tbody style=”color:gray”>
<tr></tr>
<tr></tr>
</tbody>
表格标题：<caption></caption>
默认在表格上方居中显示，必须紧跟随<table>之后，每个表格只能定义一个标题。
例：<table>
<caption>我的表格</caption>
<tr>
<td>第1行，第1列<td>
<td>第1行，第2列<td>
<tr>
</table>
<td>和<th>区别：
<th></th>：加黑加粗
<td></td>：正常
例：
<table >
<tr>
<td>第1行，第1列<td>
<td>第1行，第2列<td>
<tr>
<tr>
<td>第2行，第1列<td>
<td>第2行，第2列<td>
<tr>
</table>
表格常用属性：
border：边框大小，不写该属性，默认表格边框隐藏
bordercolor：边框颜色
bgcolor：背景颜色
width：宽度，不设定，则默认根据内容设定
height：高度
align：水平对齐方式
cellpadding：内边距，单元格边框与内容之间的间距
cellspacing：外边距，单元格之间的间距
表行常用属性：
align：水平对齐方式
valign：垂直对齐方式
单元格常用属性：
align：水平对齐方式
valign：垂直对齐方式
width：宽度
height：高度
colspan：跨列
rowspan：跨行
！！注意表格没有——valign：垂直对齐方式
不规则表格：
设置<td>跨行或者跨列属性
跨列colspan：
水平方向延伸，值为一正整数，代表此单元格共占用的单元格数！而不是水平延伸的单元格数！！
rowspan：
垂直方向延伸，值为正整数，代表此单元格共占用的单元格数！而不是垂直延伸的单元格数！！
嵌套表格：
在单元格中放入表格
<td>中再含<table>元素
水平分隔线：
<hr width="宽度" size="高度" align="水平对齐方式(left|center|rgiht)" color="颜色"/>
8.表单
表单的作用：
显示、收集客户端信息提交给服务器，表单其实就是数据表结构的一个反映，真实的数据表结构往往多于表单分析结果
表单有两个基本部分：
1.实现数据交互的可见界面元素，比如文本框或按钮
2.提交后的表单处理
定义表单：使用成对的<form></form>创建一个表单
主要属性：
action：定义表单被提交时发生的动作，通常包含服务方法的URL（比如JSP，PHP），接收浏览器提交数据的服务器页面的URL地址，如果省略该属性或属性值为空，则代表提交给自身
method：指出表单数据的提交方式，取值为get或者post
get：提交数据以名/值对形式附在URL地址，字符提交量最多256个字符
post：以名/值对形式附在http的请求头部，字符提交量无限制
enctype：表单数据进行编码的方式
name：表单名称
表单控件：
表单可以包含很多不同类型的控件，表单控件元素是包含在表单元素中具有可视化外观的HTML元素，用于访问者输入信息
表单控件元素有：
input：单标记</input>，用于收集用户信息
主要属性：
type：创建各种类型的输入字段，比如文本输入控件（文本输入框），文本输入控件、 按钮、单选框、复选框、选项框、文件选择框和隐藏控件等
文本框和密码框：
type="text"：文本框，不写type默认为文本框
type="password"：密码框
主要属性：
value：访问者自由输入任何文本
maxlength：限制输入的字符数
readonly：设置文本控件为只读
单选框和复选框：
type="radio"：单选框，若不设置name值，则不被认为是一组单选框，实现不了单选
type="checkbox"：复选框
主要属性：
value：文本，当提交form时，如果选中了此单选按钮，value就被发送到服务器，单选框，复选框，列表框必须赋予有效值
name：用于实现分组，一组单选框或者复选框的名称必须相同
checked：设置选中，默认
按钮：
提交按钮：type="submit"：传送表单数据给服务器端或其它程序处理
重置按钮：type="reset"：取消，清空表单的内容并把所有表单控件设置为最初默认值，未提交
普通按钮：type="button"：自定义按钮，用于执行客户端脚本，其行为由js控制
主要属性：value：按钮的标题文本
隐藏域：
type="hidden"：在表单中包含不希望用户看见的信息
文件选择框：即浏览框
type="file"：选择要上传的文件
如果有浏览框，该表单提交方式只能为post，且必须设置表单的enctype="muitipart/form-data"(编码方式)
弊端：不同浏览器的视觉效果不一样，且同时只能上传1个文件，可用第三方插件解决此类问题
共有属性：
name：控件的名称，所有表单控件必须赋予含义明确的名称
value：访问者自由输入任何文本
选项框：
1.下拉选项框
2.滚动列表
<select><select>创建选项框
主要属性：
name：选项框命名
size：大于1，则为滚动列表
mutiple：设置多选，mutiple="multiple"，一般为单选
<option></option>：select子标签，创建选项
主要属性：
value：选项的值
selected：预选中
多行文本框：
<textarea></textarea>：创建文本输入框
主要属性：
rows：行数
cols：列数
readonly：只读
HTML在线编辑器：UEditor，CKEdior，kindEditor，可编辑文本，可取代多行文本框
其它控件：
<label></label>：将文本与控件联系在一起后，单击文本，效果就同单击控件一样
两种方式：1.如果两对象相邻，则用<label>标签对包含关联部分
2.如果不想邻，利用for属性
主要属性：for：标识与该元素相联系的控件的ID值
例1：
<label ><input type="checkbox"/>不要公开我的个人信息</label>
例2：
<input id="depublic"type="checkbox"/><label for="depublic">不要公开我的个人信息</label>
为控件分组：
<fieldset><fieldset>：为控件分组
<legend></legend>：fieldset的子标签，为分组指定一个标题
四、框架集
文档结构：
<!DOCTYPE htmlPUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http：//www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<htmlxmlns="http：//www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type" content="text/html;charset=编码方式"/>
<title>标题</title>
</head>
<frameset rows="行数兼行高" cols="列数兼列宽">
<framesrc="网页URL"name="名称"id="名称"/>
....
</frameset>
<noframes>
<body>
....
</body>
</noframes>
</html>
附：
单标记：<meta/>,<br/>,<img/>，<input/>
166
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
