一、XHTML基础
1.XHTML能做什么?
XHTML能实现网页的结构。
2.什么是HTML、XHTML?
HTML[HyperText Markup Language],超文本标记语言。
XHTML[eXtensible HyperText Markup Language],扩展的超文本标记语言
HTML最终的发展方向:HTML5
HTML/XHTML、CSS、JavaScript称为客户端
技术。客户端技术是由浏览器解释执行的。客户
端技术最大的难点就在于浏览器的兼容性。
主流浏览器:IE、Firefox、Chrome、Safari、Opera
3.什么是标记?
标记(Tag),也称为元素(Element),它就是完成
某些功能的字符串。
4.标记的分类
4.1 根据是否包含子标记或内容
单标记:<标记名称/>
双标记:<标记名称>...</标记名称>
例1:
<a><b>...</b></a>
例2:
<b><a>....</a></b>
4.2 根据是否自然换行
内联对象:不换行
块级对象:可自然换行
5.标记的属性
<标记名称 属性名称="值" 属性名称="值".../>
<标记名称 属性名称="值" 属性名称="值">...</标记名称>
公共属性
id
style
class,CSS类
title,注释
6、XHTML文档的规范
A.标记名称必须为英文小写字母
B.标记之间必须顺序嵌套
C.单标记必须以"/>"结尾
D.属性名称必须为英文小写字母
E.属性值必须括在引号之间
7.W3C的合法性验证
http://validator.w3.org
8.XHTML文档的结构
<!DOCTYPE html PUBLIC DTD>
<html xmlns="http://www.w3.org">
<head>
<title>标题</title>
</head>
<body>
正文
</body>
</html>
9.DTD
DTD[Document Type Defination],文档类型声明
DTD实现的功能是定义文档结构，如谁根元素?
根元素有哪些一级子元素？这些元素又有什么样属性?这些属性中哪些是必选的，哪些是可选的？等信息。
在XHTML中DTD主要有三类：
Strict,严格类型
Transitional,过渡类型
Frameset,框架类型
命名空间(namespace),解决标记名称冲突。
二、文本样式
加粗:<b>...</b>
加粗:<strong>...</strong>
倾斜:<i>...</i>
倾斜:<em>...</em>
下划线:<u>...</u>
删除线:<s>...</s>
删除线:<strike>...</strike>
上标:<sup></sup>
下标:<sub>...</sub>
span标记:<span>...</span>
font标记(W3C不推荐):
<font color="颜色" size="字号(1~7)" face="字体">...</font>
三、段落与换行
段落:
<p align="left|center|right">...</p>
换行:
<br/>
四、标题
<h1 align="left|center|right">...</h1>
...
<h6 align="left|center|right">...</h6>
五、HTML实体(HTML Entity)
大于号:>
小于号:<
单引号:'(IE不支持)或'
双引号:"
&(And)符号:&
不间断空格:
六、图像
1.浏览器支持的图像格式
gif,支持透明色，支持动画,仅支持256种颜色。
jpg/jpeg,不支持透色，不支持动画，但支持1670万种颜色。
png,支持透色，但不支持动画，仅支持颜色有256，1670万和4G种三种。
2.图像的标记
<img src="图像URL" width="宽度" height="高度" alt="注释" border="边框宽度"/>
说明:
A.图像的src和alt属性必须存在。
B.alt属性只有IE浏览器支持。
C.如果省略图像的alt属性，那么其无法通过W3C的合法性验证。
七、路径
1.绝对路径:由完整的协议名称、主机名称、路径及文档全称组成。
http://www.sina.com.cn
ftp://195.168.0.30/download/02.rar
2.相对路径,从当前文档开始的路径。
2.1)、
如果当前文档和目标位置位于同一目录下,则
直接书写目标文档全称即可。(图-1)
2.2)、
如果当前文档和目标文档所在目录位于同一目录
下,则书写成：目录名称/目标文档全称
2.3)、
如果当前文档所在目录与目标文档位于同一目录
下,则书写成: ../目标文档全称
例如:
浏览器URL地址为:
http://www.a.com/a/b/c.html?id=3&pid=6
而通过查看网页源代码，发现其中某一张图像的标记是这样写的：
<img src="../images/aa.jpg"/>
那么这张图像的绝对路径就是：
http://www.a.com/a/images/aa.jpg
3.根相对路径,从站点根目录开始的路径，总是以
"/"开头。
八、链接
1.链接的标记
<a href="目标文档URL" target="窗口形式">文本/图像</a>
窗口形式:
_self:在自身窗口打开(默认)
_blank:在新窗口打开
_parent:在父窗口打开
_top:在顶窗口打开
框架名称:在指定框架打开
提示:
如果为图像添加链接的话，在IE浏览器中图像
将被蓝色框线包围。
去掉框线:
A.为图像添加border="0"属性
B.通过CSS样式实现
2.链接的表现形式(P13~P14)
2.1)、目标文档为网页
静态网页: .htm .html
动态网页: .jsp .aspx .php .shtm .shtml
2.2)、链接到下载资源
首先将下载资源使用压缩软件/命令进行压缩，
然后将链接的目标文档指向该压缩包即可。
2.3)、电子邮件链接
<a href="mailto:电子邮件地址">文本/图像</a>
2.4)、锚点链接(书签链接)
A.创建锚点
<a name="名称"></a>
B.链接到锚点
B1.链接元素(文本/图像)与锚点同一页面
<a href="#锚点名称">文本/图像</a>
B2.链接元素(文本/图像)与锚点不同页面
<a href="目标文档URL#锚点名称">文本/图像</a>
2.5)、链接到JavaScript
<a href="javascript:JS代码">文本/图像</a>
2.6)、空链接(没有目标文档，其行为由JS控制)
返回页面的顶部
<a href="#">文本/图像</a>
保持原始位置
<a href="javascript:void(0)">文本/图像</a>
九、表格
1.表格的作用
A.页面的布局
B.显示规则有序的数据
2.表格
<table>
<tr>
<td|th>...</td|/th>
...
</tr>
...
</table>
表格的属性(P16)
width:宽度
height:高度
bgcolor:背景颜色
background:背景图像
border:边框宽度
bordercolor:边框颜色
align:水平对齐方式(left|center|right)
cellpadding:内边距(内容与框线之间的距离)
cellspacing:外边距(相邻单元格之间的距离)
单元格属性
align:水平对齐方式(left|center|right)
valign:垂直对齐方式(top|middle|bottom)
bgcolor:背景颜色
background:背景图像
rowspan:行合并的数目
colspan:列合并的数目
十、有序列表和无序列表
1.无序列表(P15)
<ul type="disc(实心圆)|circle(空心圆)|square(方形)">
<li>...</li>
...
</ul>
2.有序列表(P14)
<ol type="1|a|A|i|I" start="起始序号">
<li>...</li>
</ol>
1.XHTML能做什么?
XHTML能实现网页的结构。
2.什么是HTML、XHTML?
HTML[HyperText Markup Language],超文本标记语言。
XHTML[eXtensible HyperText Markup Language],扩展的超文本标记语言
HTML最终的发展方向:HTML5
HTML/XHTML、CSS、JavaScript称为客户端
技术。客户端技术是由浏览器解释执行的。客户
端技术最大的难点就在于浏览器的兼容性。
主流浏览器:IE、Firefox、Chrome、Safari、Opera
3.什么是标记?
标记(Tag),也称为元素(Element),它就是完成
某些功能的字符串。
4.标记的分类
4.1 根据是否包含子标记或内容
单标记:<标记名称/>
双标记:<标记名称>...</标记名称>
例1:
<a><b>...</b></a>
例2:
<b><a>....</a></b>
4.2 根据是否自然换行
内联对象:不换行
块级对象:可自然换行
5.标记的属性
<标记名称 属性名称="值" 属性名称="值".../>
<标记名称 属性名称="值" 属性名称="值">...</标记名称>
公共属性
id
style
class,CSS类
title,注释
6、XHTML文档的规范
A.标记名称必须为英文小写字母
B.标记之间必须顺序嵌套
C.单标记必须以"/>"结尾
D.属性名称必须为英文小写字母
E.属性值必须括在引号之间
7.W3C的合法性验证
http://validator.w3.org
8.XHTML文档的结构
<!DOCTYPE html PUBLIC DTD>
<html xmlns="http://www.w3.org">
<head>
<title>标题</title>
</head>
<body>
正文
</body>
</html>
9.DTD
DTD[Document Type Defination],文档类型声明
DTD实现的功能是定义文档结构，如谁根元素?
根元素有哪些一级子元素？这些元素又有什么样属性?这些属性中哪些是必选的，哪些是可选的？等信息。
在XHTML中DTD主要有三类：
Strict,严格类型
Transitional,过渡类型
Frameset,框架类型
命名空间(namespace),解决标记名称冲突。
二、文本样式
加粗:<b>...</b>
加粗:<strong>...</strong>
倾斜:<i>...</i>
倾斜:<em>...</em>
下划线:<u>...</u>
删除线:<s>...</s>
删除线:<strike>...</strike>
上标:<sup></sup>
下标:<sub>...</sub>
span标记:<span>...</span>
font标记(W3C不推荐):
<font color="颜色" size="字号(1~7)" face="字体">...</font>
三、段落与换行
段落:
<p align="left|center|right">...</p>
换行:
<br/>
四、标题
<h1 align="left|center|right">...</h1>
...
<h6 align="left|center|right">...</h6>
五、HTML实体(HTML Entity)
大于号:>
小于号:<
单引号:'(IE不支持)或'
双引号:"
&(And)符号:&
不间断空格:
六、图像
1.浏览器支持的图像格式
gif,支持透明色，支持动画,仅支持256种颜色。
jpg/jpeg,不支持透色，不支持动画，但支持1670万种颜色。
png,支持透色，但不支持动画，仅支持颜色有256，1670万和4G种三种。
2.图像的标记
<img src="图像URL" width="宽度" height="高度" alt="注释" border="边框宽度"/>
说明:
A.图像的src和alt属性必须存在。
B.alt属性只有IE浏览器支持。
C.如果省略图像的alt属性，那么其无法通过W3C的合法性验证。
七、路径
1.绝对路径:由完整的协议名称、主机名称、路径及文档全称组成。
http://www.sina.com.cn
ftp://195.168.0.30/download/02.rar
2.相对路径,从当前文档开始的路径。
2.1)、
如果当前文档和目标位置位于同一目录下,则
直接书写目标文档全称即可。(图-1)
2.2)、
如果当前文档和目标文档所在目录位于同一目录
下,则书写成：目录名称/目标文档全称
2.3)、
如果当前文档所在目录与目标文档位于同一目录
下,则书写成: ../目标文档全称
例如:
浏览器URL地址为:
http://www.a.com/a/b/c.html?id=3&pid=6
而通过查看网页源代码，发现其中某一张图像的标记是这样写的：
<img src="../images/aa.jpg"/>
那么这张图像的绝对路径就是：
http://www.a.com/a/images/aa.jpg
3.根相对路径,从站点根目录开始的路径，总是以
"/"开头。
八、链接
1.链接的标记
<a href="目标文档URL" target="窗口形式">文本/图像</a>
窗口形式:
_self:在自身窗口打开(默认)
_blank:在新窗口打开
_parent:在父窗口打开
_top:在顶窗口打开
框架名称:在指定框架打开
提示:
如果为图像添加链接的话，在IE浏览器中图像
将被蓝色框线包围。
去掉框线:
A.为图像添加border="0"属性
B.通过CSS样式实现
2.链接的表现形式(P13~P14)
2.1)、目标文档为网页
静态网页: .htm .html
动态网页: .jsp .aspx .php .shtm .shtml
2.2)、链接到下载资源
首先将下载资源使用压缩软件/命令进行压缩，
然后将链接的目标文档指向该压缩包即可。
2.3)、电子邮件链接
<a href="mailto:电子邮件地址">文本/图像</a>
2.4)、锚点链接(书签链接)
A.创建锚点
<a name="名称"></a>
B.链接到锚点
B1.链接元素(文本/图像)与锚点同一页面
<a href="#锚点名称">文本/图像</a>
B2.链接元素(文本/图像)与锚点不同页面
<a href="目标文档URL#锚点名称">文本/图像</a>
2.5)、链接到JavaScript
<a href="javascript:JS代码">文本/图像</a>
2.6)、空链接(没有目标文档，其行为由JS控制)
返回页面的顶部
<a href="#">文本/图像</a>
保持原始位置
<a href="javascript:void(0)">文本/图像</a>
九、表格
1.表格的作用
A.页面的布局
B.显示规则有序的数据
2.表格
<table>
<tr>
<td|th>...</td|/th>
...
</tr>
...
</table>
表格的属性(P16)
width:宽度
height:高度
bgcolor:背景颜色
background:背景图像
border:边框宽度
bordercolor:边框颜色
align:水平对齐方式(left|center|right)
cellpadding:内边距(内容与框线之间的距离)
cellspacing:外边距(相邻单元格之间的距离)
单元格属性
align:水平对齐方式(left|center|right)
valign:垂直对齐方式(top|middle|bottom)
bgcolor:背景颜色
background:背景图像
rowspan:行合并的数目
colspan:列合并的数目
十、有序列表和无序列表
1.无序列表(P15)
<ul type="disc(实心圆)|circle(空心圆)|square(方形)">
<li>...</li>
...
</ul>
2.有序列表(P14)
<ol type="1|a|A|i|I" start="起始序号">
<li>...</li>
</ol>
扫一扫
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
