客户端技术:运行于客户端,由浏览器解释执行。
相关的技术有:HTML/XHTML、CSS、JavaScript
主流浏览器有:IE、Firefox、Chrome、Safari、Opera
(HTML最大的难点在于浏览器的兼容性)
Web浏览器的功能
(1)代理访问者提交请求
(2)作为HTML解释器和内嵌脚本程序的执行器
(3)用图形化的方式显示HTML文档
服务端技术:运行于服务器端,可与数据库进行交互。
相关的技术:ASP.NET、PHP、JSP
1.XHTML能做什么?
能实现网页的结构。
2.什么是HTML、XHTML
HTML ,超文本标记语言,最终的发展方向:HTML5
XHTML,扩展的超文本标记语言
3.什么是标记?
标记(Tag),也称为元素(Element),它就是完成某些功能的字符串。
4.标记的分类
4.1:根据是否包含子标记或内容
单标记:<标记名称/>
双标记:<标记名称>...</标记名称>
4.2:根据是否自然换行
内联对象:不换行
常见的内联对象:<span>、<a>
块级对象:可自然换行
常见的块级对象:<p>、<div>、<hn>、<ol>、<ul>、<li>
5.标记的属性
单标记:<标记名称 属性名称="值" 属性名称="值".../>
双标记:<标记名称 属性名称="值" 属性名称="值">...</标记名称>
标记的公共属性
id
style (用于声明样式)
class(类,用于CSS中使用样式)
title 注释(所有的浏览器都支持)
6.XHTML文档的规范
A.标记名称必须为英文小写字母
B.标记之间必须顺序嵌套
C.单标记必须以"/>"结尾
D.属性名称必须为英文小写字母
E.属性值必须括在引号之间
7.W3C的合法性验证
平台:http://validator.w3.org
8.XHTML文档的结构
一个HTXL文件重要由5部分组成:
结构标记<html>、头标记<head>、文档标题标记<title>、内容标记<body>、注释
格式为:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhmtl">
<!--上面是命名空间(namespace) 解决标记命名的空间-->
<head>
<title>标题</title>
<meta http-equiv=”Content-Type” content=”text/html” charset=”utf-8”/>
<!--meta属性是为了设置文本内容为HTML格式,字符集为utf-8-->
</head>
<body>
<!--这里是注释信息,将被忽略-->
正文内容
</body>
</html>
9.DTD:文档类型声明、文档类型定义
DTD实现的功能是定义文档结构,如谁是根元素?
根元素有哪些一级子元素?这些元素又有什么样的属性?
这些属性中哪些是必选的,哪些是可选的?等信息
在XHTML中DTD主要有三类:
Strict 严格类型
Transitional 过度类型
Frameset 框架类型
10.头标记可以包含以下子标记
(1)<meta/>用于定义网页的基本信息和页面编码格式或页面刷新频率
<meta http-equiv=”refresh” content=”频率值value”>
每value秒刷新一次页面
<meta http-equiv=”Content-Type” content=”text/html” charset=”utf-8”>
设置文本内容为HTML格式,采用utf-8编码集。
(2)<title>用于定义文档标题,出现在浏览器顶部,无属性,一个文档只能有一个标题
(3)<script>用于定义JavaScript脚本
(4)<style>用于定义内部样式表
(5)<link>用于为当前页面引入其他资源
网站例子:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhmtl">
<head>
<title>成人网</title>
</head>
<body>
啊啊啊,啊啊啊啊,啊啊啊啊!
</body>
</html>
二、常用文本样式
加粗:<b>...</b>
加粗:<strong>...</strong>
倾斜:<i>...</i>
倾斜:<em>...</em>
下划线<u>...</u>
删除线<s>...</s>
删除线<strike>...</strike>
上标<sup>...</sup>
下标<sub>...</sub>
span标记:<span>...</span> (双标记的内联,不换行)
大一点:<big>...</big>
小一点:<small>...</small>
源代码:<code>...</code>
引用:<cite>...</cite>
font标记(W3C不推荐):<font color="颜色" size="字号" face="字体">...</font>
三、段落与换行
段落:<p align="left|center|right">...</p>
换行:<br/>
<p>、<div>、<span>、<address>、<blockquote>、<pre>的区别
(1)<div>和<span>主要是将文档分为几个逻辑部分后,结合样式表分别控制它们的显示。
(2)<div>是块级元素,前后断行,用于组合一大块代码,可以作为独立的、严格的组织工具,且不使用任何格式与其关联。
(3)<span>是内联元素,前后不换行,用于处理一小块内联HTML中的行内分组。
(4)<p>是块级元素,前后断行并空一行,用于段落分段。
(5)<address>是块级元素,前后断行,用于向文件写入地址和联系信息,通常为斜体。
(6)<blockquote>是块级元素,前后断行并空出一行,主要用于引用文本。
(7)<pre>是块级元素,前后断行并空出一行,只要用于显示程序代码或类似信息。
四、标题
<h1 align="left|center|right">...</h1>
...
<h6 align="left|center|right">...</h6>
五、HTML实体(HTML Entity)
大于号:>
小于号:: <
单引号 :'(IE浏览器不支持)或'
双引号: "
&符号: &
不间断空格:
注册商标®: ®
版权©: ©
商标TM:#8482
¥:人民币
¥日元
连接字符-:
六、水平线的使用
<hr width="宽度" align="水平对齐方式" size="线条粗细" noshade/>
说明:noshade属性可以使水平线显示时无阴影效果。