前端htm cssl总结
第1章 HTML基础
(一) HTML文件的基本结构和W3C标准
l HTML用来描述网页的一种语言，他是一种超文本标记语言（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 图像标签的基本语法
“图片地址”alt=“图像的替代文字”title=“鼠标悬停提示文字”
width=“图片宽度”height=“图片高度”/>
l 插入图片时使用标签，要求src和alt属性必选。
（四）链接标签
l 超链接包含两部分内容：一是链接地址，即链接目标，对应为标签的
href属性；二是链接文本或图像。
超链接的基本语法：
“链接地址” target=“目标窗口位置”>链接文本或图像
Ø 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:注册或交易协议、商品价格。
text" value="[email protected]"readonly="readonly" />
Ø 禁用场景：只有满足某个条件后，再能选用某项功能。eg:注册协议注册
<input type="submit" value="修改" disabled="disabled"/>
n W3C XHTML标准中，规定属性值不能省略，要求写为属性=“属性值”的形式。
(三) 语义化的表单③
n 语义化的目的：达到结构合理，代码简洁的要求。
n 表单元素可能有特殊的边界、效果。
n 。
<form style="width:400px;">
说明
姓名：“text”/>
n 表单元素的标注【语法】
目的：为了增强鼠标的可用性。
id="male" name="1"/>
id="female" name="1"/>
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