使用HTML和CSS开发Web网站（一）
一、HTML概述与基本标签
- 了解WEB和HTML的关系
- 理解HTML标签在WEB网页中的作用
- 掌握HTML文档的结构
- 掌握常用的HTML标签
1、web概述
Web，又称为www，英文全称为world wide web，翻译为中文一般为万维网，
它是运行在互联网之上的一种服务。
1.1、万维网的三个标准---基础核心
1、统一资源标识符（URL），是一个世界通用的负责给万维网上如网页这样的资源定位的系统。
2、超文本传输协议（HTTP），负责规定浏览器和服务器怎样交流
3、超文本标记语言（HTML），定义超文本文档的结构和格式
2、什么是HTML?
是用来描述网页的一种语言 ! (超文本标记语言)
2.1、html和css、JavaScript的关系
html：名词
css：形容词
JavaScript：动词
2.2、html标签是什么？
由w3c组织定义的一系列的标签名字
2.3、html格式
段落
2.4、html储存的文件格式
文件后缀可以是: .html 或者 .htm
2.5、网页的两部分介绍
1. 头部信息: head
用来描述网页:
- title 设置标题
- meta 用来描述网页的编码, 内容
- style 用来定义样式
- script 脚本
2. 网页主体: body
属于网页的内容部分, 我们一般会在这里添加很多其他的元素, 来丰富我们的网页 .
2.6、页面主体body背景设置
1、设置网页的背景色
段落
2、设置网页的背景图片
段落
3、设置网页的背景音乐
第一种：标签（只适用于IE浏览器）
在< body > 里面加入 loop=-1意思是设置为自动播放；
第二种： 2.7、常用的html标签
1、换行标签
2、字体标签
3、段落标签
4、字体样式标签
倾斜
倾斜
字体加粗
字体加粗
下划线
预格式化
h1——h6
下标
上标
5、图片标签：
src : 一个url , 图片的地址(网络地址,本地绝对地址,本地相对地址)
alt : 当图片出现问题, 无法加载时, 用来替换的错误提示文本
width: 指定图片的宽度
height: 指定图片的高度
（1）普通跳转
点击去百度
（2）使用新窗口打开网页
点击去百度7、层标签：
控制页面布局二、表格与列表
- 理解表格的结构
- 掌握表格相关的标签
- 掌握单元格合并
- 理解列表的分类
- 掌握两种列表及列表项目的标签
1、表格
1.1、表格格式
Header
Header
Header
Header
Data
Data
Data
Data
1.2、表格属性
width: 指定table宽度 , 也可以指定td宽度
height: 指定table或td的高度,
border: 边框的大小, 指定数字
cellspacing：设置表格中相邻单元格之间的距离
cellpadding：设置表格中每个单元格的内容与单元格边界的距离
bordercolor: 指定表格边框的颜色
bgcolor: 指定table的背景颜色或者 td的背景颜色
background: 指定table的背景图片或者 td的背景图片
合并单元格:
在td上 , 指定单个单元格跨越的横向宽度:colspan=数字
在td上 , 指定单个单元格跨越的垂直宽度: rowspan=数字
2、列表
2.1、有序列表
2.2、无序列表
三、表单与表单元素
- 理解表单的作用
- 理解表单与表单元素的关系
- 掌握表单标签及其属性
- 掌握各种表单元素标签及其属性
- 认识表单提交
1、表单
1.1、表单格式
1.2、表单属性
action : 表单提交的地址(URL)
enctype: 表单提交时的编码格式 , 我们一般不指定, 采用网页默认编码(meta)
method : 表单提交的方式(GET /POST) 默认GET
相同的请求key 是允许存在的!
GET请求:
特点: 表单中的键值对通过在网址中拼接传递
拼接的方式:
网址与参数通过?拼接 ,
参数的key与value通过=连接
多个参数之间使用&连接
POST请求:
特点: 请求时, 参数通过请求体传递 !
可以进行文件的提交 !
1.3、表单子节点
1、input标签
| 属性 |
意义 |
| type |
表单元素的类型，可用的值为：text 、password 、radio 、checkbox 、file 、hidden 、submit 、reset 、button 、image。默认值为text |
| id |
标签在整个页面中的唯一标识符。 |
| name |
表单元素的名称，只有设置了name属性的表单元素才能参与表单提交。 对于逻辑上视为一组的多个单选按钮，它们必须设置相同的名称才能确保单选。 |
| value |
表单元素的值，即它表示的数据。 |
| size |
一般用于文本框和密码框，表示它们的宽度，以字符数度量。 |
| maxlength |
一般用于文本框和密码框，表示它们可以接受的最多字符数。 |
| checked |
只用于单选按钮和复选框，用于设置它们在初始状态下被选中。 对于具有相同name属性值的一组单选按钮，最多只能给予其中之一。 |
| src |
只用于图像按钮，设置图像文件的地址。 |
| alt |
只用于图像按钮，设置图像的替代文字。 |
| accept |
只用于文件域，设置文件域可接受的文件类型。 |
| disabled |
禁用表单元素，使它无法被浏览者操作。被禁用的表单元素不参与表单提交。 |
| readonly |
使表单元素的数据无法被浏览者更改。 |
type属性: 表示输入组件(input)的类型:
text: 默认 , 单行文本输入框
password: 单行密码输入框, 内容会被*代替
checkbox: 多选按钮
radio: 单选按钮,在进行单选按钮编写时, 可以通过相同的name ,来完成单选的分组
file：文件上传
hidden: 隐藏的输入框
submit: 提交按钮
button: 普通按钮
reset: 重置按钮
placeholder: 提示的文本（html5）
checked=checked:单选框radio与复选框checkbox设置默认选中项
disabled：不可输入的文本输入框 ,添加属性 disabled , html5 boolean属性
2、textarea标签的属性
| 属性 |
意义 |
| id |
标签在整个页面中的唯一标识符。 |
| name |
多行文本域的名称，只有设置了name属性的多行文本域才能参与表单提交。 |
| disabled |
禁用多行文本域，使它无法被浏览者操作。 被禁用的多行文本域不参与表单提交。 |
| readonly |
使多行文本域的数据无法被浏览者更改。 |
| cols |
设置多行文本域的宽度，以每行中可容纳的字符数度量。 |
| rows |
设置多行文本域的高度，以可见的行数度量。 |
| wrap |
设置多行文本域的自动换行模式。有三个值： off：不自动换行。文本区只有一行文本，除非浏览者回车强制换行。 virtual：虚拟换行。一行文本的宽度即将超出多行文本框宽度时自动换行，但在自动换行处不产生任何标志。 physical：物理换行。一行文本的宽度即将超出多行文本框宽度时自动换行，且在自动换行处产生换行标志。 |
3、select标签与option标签
select是下拉选框的组, option是下拉选框的选项
下拉选框标签 , 在form表单中进行数据的收集!
select常用属性:
| 属性 |
意义 |
| id |
标签在页面内的唯一标签符。 |
| name |
列表框的名称。必须设置此属性才能参与表单提交。 |
| disabled |
禁用此列表框。 |
| size |
设置列表框中的选项显示几项。 未设置此属性时，列表框为下拉形式； 设置此属性后，列表框将展开为列表形式。 |
| multiple |
设置列表框的选项可被浏览者多选。 |
option常用属性:
| 属性 |
意义 |
| value |
选项表示的数据。 如果表单提交时，这个选项是处于被选中的状态，则整个列表框将向服务器发送这个选项的value值。 |
| selected |
设定选项在初始状态下默认被选中。 |
4、按钮标签的属性
| 属性 |
意义 |
| id |
标签在页面内的唯一标识符。 |
| name |
按钮的名称。 |
| value |
表单提交时，此按钮要发送的数据。 注意：此属性对IE浏览器无效，表单提交时，IE浏览器会将标签之间的文本作为此按钮的数据发送给服务器。 |
| disabled |
禁用此按钮。 |
| type |
类型，有三个值：submit , reset , button。 注意：此属性的默认值在不同的浏览器之间有差别，所以应显式地为此属性赋值。 |
5、标签
标签的主要作用是为上述表单元素提供提示性的说明文字 。
它的for属性可用于与某个表单元素进行绑定，这样可以在这个标签在浏览者选择【点击】时，浏览器自动将焦点转移到与它绑定的表单元素中。
一般用于单选按钮和复选框元素。
6、及标签
标签用于将表单内的多个表单元素分成多个组。标签则用于为每个组提供一个标题。
四、框架集与框架
1、框架
- 理解使用框架集和框架实现浏览器窗口中多文档的显示
- 理解框架集与框架的关系
- 掌握框架集的属性
- 掌握框架的属性
- 掌握框架集的嵌套使用
- 掌握浮动框架
- 理解超链接和表单的目标框架或目标窗口
- 理解基准目标
当需要将多个网页组织到同一个窗口中同时显示时，需要使用框架集和框架。 框架集用于描述整个浏览器中多个网页的布局方式，即把浏览器窗口分割成为多个区域。 而框架则用于描述特定的某一个区域，在每个区域中放置一个独立的网页。 使用
标签和标签可以分别创建框架集和框架。框架集的属性
| 属性 |
意义 |
| cols |
框架集垂直分割成多列，描述列数和每列的列宽。单位可使用px像素，%百分比或使用*星号表示剩余部分。 |
| rows |
框架集水平分割成多行，描述行数和每行的行高。单位可使用px像素，%百分比或使用*星号表示剩余部分。 |
框架的属性
| 属性 |
意义 |
| src |
框架中页面的地址 |
| name |
框架的名称，与超链接或表单的target属性关联。 |
| scrolling |
框架中滚动条的显示方式。有三个值： auto：默认值，由浏览器根据框架的面积和框架中页面正文的内容所需占用的面积自动决定是否出现滚动条。 yes：框架中总是显示滚动条。 no：框架中从不显示滚动条。 |
| noresize |
设置框架不允许浏览者拖动框架之间的分割线来改变框架大小。 |
框架集的嵌套
框架集标签的属性rows和cols一般是不应同时使用的，即不能期望在一个框架集中同时使用rows和cols属性将这个框架集指定成为多行多列的结构。 如果要实现复杂的框架集结构，应该使用框架集嵌套的方式来实现，即框架集内部的某个框架用另外一个框架集代替以实现再次拆分。浮动框架
想简单地在一个网页中嵌入另一个网页的内容，使用浮动框架更为容易。 标签用于将一个页面的内容显示在另一个页面中。 可以把这两个页面的前者称为子页面，把后者称为主页面。 标签应位于主页面的
标签内。 浮动框架又称为内嵌框架。浮动框架的属性
| 属性 |
意义 |
| src |
浮动框架中页面的地址 |
| name |
浮动框架的名称，与超链接或表单的target属性关联。 |
| scrolling |
浮动框架中滚动条的显示方式。有三个值： auto:默认值，由浏览器根据浮动框架的面积和浮动框架中页面正文的内容所需占用的面积自动决定是否出现滚动条。 yes: 浮动框架中总是显示滚动条。 no: 浮动框架中从不显示滚动条。 |
| width |
浮动框架的宽度，可使用px像素或%百分比单位。 |
| height |
浮动框架的高度，可使用px像素或%百分比单位。 |
超链接和表单的目标框架或窗口
当框架页面中包含链接时，我们希望设置超链接href属性指向的目标页面在指定的框架中打开显示。 此时，需要为标签设置target属性，将属性值赋为目标框架的名称即框架的name属性值。
超链接标签的target属性的值
| target属性的值 |
意义 |
| frame或iframe标签的name属性的值 |
设置超链接所指向的页面在以此命名的框架或浮动框架中打开显示 |
| _self |
设置超链接所指向的页面在当前框架中打开 |
| _blank |
设置超链接所指向的页面在由浏览器自动新建的窗口中打开显示 |
| _top |
设置超链接所指向的页面在整个浏览器窗口中打开显示，覆盖框架集中的所有框架 |
| _parent |
设置超链接所指向的页面在当前框架所属的上级框架集所占据的区域内打开显示 |
| 自定义的窗口名称 |
设置超链接所指向的页面在这个自定义的窗口中打开显示，如果此窗口不存在，则由浏览器新增此窗口再在此窗口中显示 |
使用
一般情况下，对于同一个页面中的所有链接或相关的一组链接，我们期望它们在相同的目标框架或目标窗口中打开显示。 这种情况下，可以在网页的头部即
标签中添加