第1章 HTML基础
(一) HTML文件的基本结构和W3C标准
lHTML用来描述网页的一种语言，他是一种超文本标记语言(Hyoer Text Markuo Language),HTML不是一种编程语言，仅是一种标记语言。HTML就是由一套标签组成，在制作网页时，HTML使用标记标签来描述网页。
l HTML文件基本结构
头部(head)网页标题等
主题(body)网页的内容信息
l 网页编辑工具
ü 使用(windows)记事本编辑HTML文档的4个步骤：
(一) 在windows中打开记事本程序。
(二) 在记事本中输入HTML代码
(三) 将文档保存为扩展名为 *.html的HTML的文档
(四) 双击保存的HTML文档
ü UltraEdit是功能强大的编辑软件，它支持HTML标签的颜色标识、代码缩进、搜索等功能。(1~4章)
l 网页基本信息
l 一个完整的网页除了基本结构外，还包括网页声明、标签等其它网页的基本信息。
l “DOCTYPE”文档类型的声明，它约束了HTML文档的结构，检验是否符合相关Wed标准，同时告诉浏览器，使用哪种规范来解释这个文档中的代码。【第一行】
1) Strict(严格类型)
2) Transitional(过渡类型)：也称松散(loose)声明
3) Frameset(框架类型)：Strict声明中不允许使用框架
l 标签：使用该标签描述网页具体的摘要信息，它所描述的内容并不显示，目的是：方便浏览器解析或利用搜索引擎搜索，它采用“名称/值”对的方式描述摘要信息。
1)
charset=gb2312”/>
属性“http-equiv”提供“名称”类型中的名称，“content”提供“名称
/值”中的值，HTML代码的含义如下：
Ø 名称：Content-Type(文档内容类型)
Ø 值：text/html;charset=gb2312;(文本类别的html类型，字符编码为
简体中文)，charset表示字符集编码。常用的编码类型：
u gb2312：简体中文，一般用于包含中文和英文的页面。
u ISO-885901：纯英文，一般用于只包含英文的页面。
u big-5：繁体，一般用于带有繁体的界面
u utf-8：国际性通用的字符编码，也使用于中文与英文。和gb2312
编码相比，国际通用性更好，但字符编码的压缩比较低，对网页性
能有一定影响。
实际上，网页打开后出现乱码的原因，就是因为没有设置标签
、字符编码造成的。
2) 搜索关键字和内容描述信息
教育集团，致力于为中国培养优秀的IT技术人才。”/>
keywords表示搜索关键字，description表示网站内容的具体描述。通
过提供搜索关键字和内容描述信息，方便搜索引擎的搜索。
(二)网页的基本标签
l 网页的基本标签：⑦
标题标签 HTML提供了6级标题
~
段落和换行标签
水平线标签
字体样式标签 加粗 倾斜
注释和特殊符号
l HTML中常用的特殊符号及对应的字符实体
特殊符号
空格
大于号(>)
小于号(
引号(“)
版权符号@
字符实体
>
<
"
©
l 要注意标签的嵌套
(三)图像标签
l 常见的图片格式：
1. JPG(JPEG)采用有损压缩，缺点：造成图片画面的失真，优点：压缩
后的体积很小，而且比较清晰，所以比较适合在网页中应用。
2. GIF(动画)支持透明色，使得GIF在网页的背景和一些多层特效的显
示上用的比较多
3. BMP(Bitmap位图)在Windows操作系统中用的多。BMP文件格式与其
它Microsoft Windows程序兼容。缺点：它不支持文件压缩，也不适
用于Web页。
4. PNG(截图)优点：兼有GIF和JPG优势，具有GIF文件格式不具备的
特性。缺点：是一种新兴的Web图像格式，还存在部分旧版本浏览器不
支持的问题。
l图像标签的基本语法
width=“图片宽度”height=“图片高度”/>
l 插入图片时使用标签，要求src和alt属性必选。
(四)链接标签
l 超链接包含两部分内容：一是链接地址，即链接目标，对应为标签的
href属性；二是链接文本或图像。
超链接的基本语法：
Ø href：示链接地址的路径。
Ø target：指定链接在哪个窗口打开，常用的取值有_self(自身窗口)、 _blank
(新建窗口)
l 若两个文件不在同一目录下，如何表示文件路径？
在网页中，当单击某个链接时，将指向万维网上的文档。万维网使用URL(统一资源定位
器)的方式来定义一个链接地址。
l 当超链接href链接路径为“#”时，表示空链接，eg: 首页
l 超链接的应用场合：
Ø 页面间链接：A页到B页，最常用于网站导航。
Ø 锚链接：A页甲的位置到A页乙的位置或 A页甲的位置到B页乙的位置。
乙 “name”为标签的属性，“top”为标记名
甲 然后在甲的位置链接路径href属性值为“#”标记名
l HTML【基本】结构：页面声明、页面基本信息、页面头部和页面主体等。
l 编写HTML文档时遵守W3C标准，W3C是制定和维护统一的国际化Web开发
标准的组织。(确保多个浏览器兼容)
W3C标准是由W3C组织制定的一个Web标准。
l 超链接标签用于建立页面间的导航链接，链接可分为：页面间链接、
锚链接、功能性链接。
第2章列表、表格与框架 2014/9/5
l 列表是数据的一种展示形式
l列表的分类：
类型
说明
项目符号
无序列表
- 列表项
通过type属性设置项目符号
disc(默认)、square和circle
有序列表
- 列表项
通过type属性设置项目列表
1、A、a、I、i
定义列表
-
描述的标题
-
内容
无项目符号或显示序列
技巧：
Ø 无序列表之间【平级】。有序列表会依据列表项的顺序显示。
Ø 无序列表ul-li比有序列表ol-li应用的更加广泛。
Ø 定义列表dl-dt-dd一般适用于带有标题和标题解释性内容或者图片
和文本内容混合排列的场合。
第3章表单 2014/9/10
(一) 表单
l 表单：就是一个将用户信息组装起来的容器。
l 表单的应用：
Ø 登录、注册
Ø 网上订单
Ø 调查问卷
Ø 网上搜索
l 创建表单后，就可以在表单中放置控件(
······)以接受用户的输入。l 表单的创建
标签，用于在网页中创建表单区域，属于一个容器标签，其它的标签需要在他的范围内才有效，eg: 用以设定各种输入资料的方法。l
标签的属性：² action指示服务器上处理表单输出的程序action=“URL”
如果 action的值为空，则默认表单提交到本页。
² method告诉浏览器如何将属性发送给浏览器，它指定向服务器发送数据的方法【用get/post方法将表单提交给另一个页面进行处理
method =＂post＂/＂get＂(方法)
1. get 浏览器将创建一个请求，请求包含URL页面一个问号和表单的值。浏览器会将该请求返回给URL中指定的脚本，以进行处理。
2. post 表单上的数据会作为一个数据块发送到脚本，而不使用请求字符串。
u 将表单数据提交给服务器上指定的程序进行处理，两种提交方式的区别：
(1) post提交方式不会改变地址栏状态，表单数据不会显示。
(2) get提交方式，地址栏状态会发生变化，表单数据会在URL中显示。
post的安全性高于get
l 表单元素：在用户注册时，会填入很多信息，而装载这些数据的控件，~。
l 元素的属性
属性
说明
type
用来指定表单元素的类型，可用的选项有：
text、password、checkbox、radio、submit、reset、file、hidden、image、button
name
此属性指定表单元素的名称。如果表单上有几个文本框，可以按名称来识别它们，text1、text2等。
value
此属性是可选属性，用来指定表单元素的初始值，但如果type为radio，则必须指定一个值。
size
指定表单元素的初始宽度，如果type为text或password，则表单元素的大小以字符为单位。对于其它输入类型，宽度以像素为单位。
maxlength
此属性用于指定可在text或password元素中输入的最大字符数。默认值为无限大。
checked
指定按钮是否被选中，当输入类型为radio或checkbox时，使用此属性。
n size 与 maxlength的区别：
size属性用于指定文本框的长度，maxlength属性用于指定文本框输入的数据长度。
表单元素的类型及常用属性⑧
1. 文本框
姓名：①可删除，也可在后面继续加东西。
2. 密码框
用户希望输入的数据被处理，以免被他人得到。在密码框输入字符全都以黑色的圆点来表示，从而实现了对数据的处理。
² 问题：密码框能保证输入数据的安全吗？
² 解答：不能，密码框仅仅使周围的人看不见输入的符号，它不能保证输入的数据安全。为了使数据安全，应该加强人为管理，采用数据加密技术等。
3. 单选按钮(checked 默认选中)
单选按钮的属性是：radio。用于一组相互排斥的值，组中的每个单选按钮控件应具有相同的名称。
4. 复选框(checked 默认选中)
复选框的类型是checkbox，即将表单元素的type属性设置为checkbox就可以创建一个复选框。
一般情况下，如果选项之间是并列关系，就需要设置为相同的名称，以便能同时获取。例如：兴趣爱好，一个人可以有多个兴趣爱好，这样复选框设置相同名称，以便在提交数据时能够一次性得到所有选择的兴趣爱好选项。否则，每个选项都需要单独进行读取，从而降低了效率。
5. 列表框(selected 默认选中)
通过标签和标签来实现，标签必须包含至少一个标签
6. 按钮
中文
英文
作用
普通按钮
button
响应onclick，将用户点击该按钮时将会显示该按钮的value值。需要与事件关联使用。
提交按钮
submit
提交表单信息，点击它后，表单将会提交到action属性所指定的URL，并传递表单数据。
重置按钮
reset
清除表单中已填信息
浏览按钮
file
要知道，其属性value的值无论是什么，浏览…都不会被改变，其显示的方式，是一个文本框与按钮。
实现图片按钮的方法有很多，eg：
7. 多行文本域(不能使用value属性来赋初始值)
文本内容
8. 文件域
文件域的作用：用于实现文件的选择，在应用时只需要把type属性设为“file”即可。
注意：
包含文件域的表单，由于提交的表单数据包括普通的表单数据、文件数据等多部分内容，所以必须设置表单的“enctype”编码属性为“multipart/form-data”，表示将表单数据分为多部分提交。
(二) 表单的高级应用
n 设置表单的隐藏域：
必须得有name属性，最好name的属性放在value的前面
n 表单的只读(readonly)与禁用(disabled)设置：
Ø 只读场景：网站服务器方不希望用户修改的数据，这些数据在表单数据中显示。eg:注册或交易协议、商品价格。
Ø 禁用场景：只有满足某个条件后，再能选用某项功能。eg:注册协议注册
nW3C XHTML标准中，规定属性值不能省略，要求写为属性=“属性值”的形式。
(三) 语义化的表单③
n 语义化的目的：达到结构合理，代码简洁的要求。
n 表单元素可能有特殊的边界、效果。
n 。
说明
姓名：
n 表单元素的标注【语法】标注的文本
目的：为了增强鼠标的可用性。
男
女
name属性与id属性都是必须的。name属性由表单负责处理，而id属性是给标签和表单元素进行关联使用的。
n 语义化的作用：
(1) 语义化的目标是使页面结构更合理。
(2) 建议在设计和开发过程中，使用语义化标签，从而达到见名知义的效果。
(3) 语义化的结构更加符合Web标准，更利于当今搜索引擎的抓取(SEO的优化)和开发的维护。
第4章初识CSS 2014/9/11
一、 使用CSS的意义
n CSS全称：层叠样式表 / 风格样式表，用来进行网页风格设计的。
n ①可以统一的控制HTML中各标签的显示属性
②可以精确地定位网页元素的位置，美化网页外观。
n 使用css的优势：
(1) 内容与表现分离，eg: 在HTML文件中引入css样式
(2) 可以使网页的表现分离，并且容易修改。
(3) 丰富的样式，使页面布局更加合理
(4) 减少网页的代码量。
(5) 运用独立于页面的css，利于搜索引擎的搜索。
二、 CSS的基本语法
css规则由选择器与声明构成。
选择器属性值
h1{
font – size :12px ;
color :#F00 ;
} 声明
n
n 在css中最基本的3种选择器：标签选择器、类选择器和ID选择器。
1. 标签选择器
css标签选择器用来声明 HTML中那些标签的。
2. 类选择器【可以在页面中使用很多次】
.类名称{ }<标签名class =“类名称”>标签内容标签名>
3. ID选择器【使页面代码具有非常高的可读性】
①它只适用于HTML页面中，因此它的针对性很强。
②同一个ID选择器在同一个页面中只能使用一次。
三、 在HTML中引入CSS样式
1. 行内样式【单行情况下推荐使用】
使用style属性设置css样式仅对当前的HTML标签起作用，并且写在HTML标签中，这种形式不能使内容与表现分离。
2. 内部表样式【单一网页推荐使用】
把css代码写在
的
-
内容
- 列表项
892
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
