姓名：海洋
QQ:530414083
课程名：网页设计与制作
教材：web前端开发案例教程
上课时间地点： 7-13周周四9-10节4507
7-13周周五9-10节4507
14-19周一5-8节4513
考核方式：40%平时（出勤，作业）+60期末考试
课程内容：
网页入门+工具介绍
HTML常用标签
CSS的使用
一，网页基本知识
1，HTML概念
HyperText Market Language 超文本标记语言
以标记的形式承载了除了文字以外的内容，如：图片，视频，音频等
也是web前端基础入门课程
2，网站和网页
(1)应用范围
传统的网站，是指PC电脑端的网站应用程序，即打开浏览器，通过网址导航或输入网址来访问
现阶段，包括各种移动APP，微信小程序
一个网站或者APP，包含大量的页面，网站或APP的第一个页面称为首页。
(2)网站简单原理及相关技术
打开浏览器，通过网址导航或输入网址url 来访问（向网站服务器发送请求）
网址格式如：https://www.bilibili.com/，
网址经过DNS(DomainName Server)域名解析服务器，将网址解析成服务器所在的IP地址 10.103.24.68
服务器收到请求，处理（整合程序和数据库），进行响应（将数据发送给用户/客户端，浏览器解析成页面）
浏览过程中多次请求和响应
web技术分类
web前端：用户看得到的界面，相关课程：HTML网页，javascript脚本，JQuery框架，前端框架：bootstrap, vue
后端：程序的开发人员，程序的所有者或者管理人员
数据的存放：数据库
相关的网站开发语言：.jsp , .asp , .php
网页的分类
静态页面：页面源代码不变化的页面（不是看页面效果的变化），常用后缀： .html 或 .htm
动态页面：页面源代码发生变化的页面,常用后缀：.jsp , .asp , .php
(3)web相关概念（课本2-3页）
IP地址
域名
URL
http和https
网站、网页和主页
HTML
web标准：www即W3C国际万维网联盟，主导web相关标准
HTML标准，从HTML1到HTML4.01，HTML5最新
CSS标准，从CSS1,CSS2, 到CSS3
(4)浏览器
是网页运行的平台，负责将超文本解析成页面
有各种厂家的不同浏览器产品，经过市场的潮流，目前主要有如：google, firefox ,edge(ie) , 360, tencent 等
早期最大的问题是浏览器兼容问题，目前主流的浏览器都支持HTML5
二，网页开发工具
网页文件实质上是一个文档，后缀名.html
只要能够编写文档的工具，都可以用来写网页代码，如：.txt
开发工具的使用，能够提升编写效率（可以有相关的代码提示），网站开发工具常用的有：
HBuilder，HBuilderX，DreamWeaver，VSCode等
我们对工具使用何种不做限制，上课以HBuilder为例子
1，HBuilder使用
打开此电脑，地址栏输入 ftp:// 10.104.36.131，将文件复制到本机
将压缩文件HBuilder.9.1.29.windows，点击右键-解压到当前文件夹，打开HBuilder文件夹，运行HBuilder.exe文件，进入HBuilder
2，创建网站站点
菜单栏-文件-新建-web项目，弹出窗口
输入项目名称，以学号姓名周次命名，如：250301129陈鑫龙T7_2
项目所在位置（默认C:\Users\Administrator/HBuilderProjects），也可以自己选择位置（如桌面）
项目文件夹包含如下内容：
css文件夹 用于存放外部样式文件
img文件夹 用于存放网页需要用的图片
js文件夹 用于存放外部脚本文件
index.html 默认为网站的首页
3，在站点内添加网页
鼠标选中当前站点，右键-新建-html网页，输入网页名称
今后的每次课有若干个作业，每个作业都需要新建一个页面，作业完成后将项目文件夹提交给老师
4，写网页内容
标签，属性，文字等
修改网页代码后，网页名称上有个*号，表示当前代码未保存
重要的事情说三遍：随时记得保存（ctrl+s）、随时记得保存（ctrl+s）、随时记得保存（ctrl+s）
按ctrl键不放，配合鼠标滚动可以实现字体的放大和缩小
5，预览页面效果
代码写完保存后，点击上方快捷工具栏，在浏览器内运行（或者菜单-运行-在浏览器内运行）
浏览器url地址格式，如：http://127.0.0.1:8020/250301129陈鑫龙T7_2/1.html?__hbt=1760699185210
通过本机浏览，直接打开网站文件夹，直接打开页面
浏览器的url地址格式，如：file:///C:/Users/Administrator/Desktop/250301129陈鑫龙T7_2/1.html
区别：
第一种是站点配置的模式，使用http超文本传输协议，显示网站的网址或IP及端口，如127.0.0.1表示本机，接站点的相对地址
第二中是本地文件打开的模式，使用 file:///加上文件夹所在的路径
三，标签和属性
1，标签(元素)
是网页的基本结构，一个网页由若干标签组成，每个网页组成标签不尽相同
语法：<标签名 属性="值">
大部分标签都是成对出现的，结束标签的标签名前加上/以示区分；
也有少量单个标签，如：
, HTML5中规定，单个标签可以不写结束标志
一对标签中，可以包含其他标签或者文字，也可以不包含任何内容（空标签）
根据包含和被包含的关系，称为父子标签，被包含的标签为子标签，
如：
开始搬砖之路
head是父标签，title是其子标签
书写建议：先写一对标签，再写其内容（子标签或文字），根据需要设置属性
切忌不要相互嵌套，如
通常来说，子元素的位置相对于父元素有缩进（一个Tab键的距离）
2，属性
作用：修饰标签的表现
语法：<标签名 属性名="值">
说明：属性设置在开始标签中，每个属性可以设置特定的取值
一个标签可以设置多个属性
有些属性是所有标签都能使用的，称为全局属性
有些属性只能用于部分标签
3，基本结构标签
4，文字类的标签
标题
段落
水平线
换行
ftp:// 10.104.36.131
第7周练习
创建web项目，以学号姓名周次命名，如：250301129陈鑫龙T7_2
1，添加页面1，完成课本14页例2-2， 标题
2，添加页面2，完成课本15页例2-3， 段落
3，添加页面3，完成课本16页例2-4， 水平线
4，添加页面4，完成课本17页例2-5， 换行
第8周
一，复习回顾
1，工具安装和项目创建
ftp:// 10.104.36.131，将文件复制到本机
将压缩文件HBuilder.9.1.29.windows，点击右键-解压到当前文件夹，打开HBuilder文件夹，运行HBuilder.exe文件，进入HBuilder
创建web项目，以学号姓名周次命名，如：250301129陈鑫龙T8
注意项目所在目录的选择（默认或者自定义）
2，所学的标签
标题 ......
段落
水平线
换行
二，常用标签
一个页面可以由多个不同的标签组成，同样的页面效果，可以用不同的标签来实现（答案不唯一）
要求：根据页面效果图，自己决定应该用哪些标签
1，基本结构标签
HTML5文档结构说明，必须是文档的第一句话
HTML根标签，包含其他所有的HTML标签
头部标签，记录文档的相关信息，该标签内通常包含如下子标签
元标签，可以设置文档的编码方式，关键字
网页标题
链接外部的文件，如CSS文件
脚本文件
样式标签
浏览器显示内容的区域，前期大部分标签都写在body内
2，文本相关标签
标题 ......
段落
水平线
换行
文字系列标签：先期可以了解，后期文字的相关设置不再使用下列标签，而是使用容器和选择器配合CSS使用
定义文字的字体、尺寸和颜色。
字体加粗 CSS设置字体粗细 font-weight:字体粗细
字体倾斜
删除线
下划线
文字上标
文字下标
三，常用标签属性
1，属性概念
作用：修饰标签的表现
语法：<标签名 属性名="值">
说明：属性设置在开始标签中，每个属性可以设置特定的取值
一个标签可以设置多个属性
有些属性是所有标签都能使用的，称为全局属性
有些属性只能用于部分标签
有些属性，没有明确定义，其实由默认取值
除了全局属性外，其他属性都可以找到对应的CSS属性
2，颜色相关属性
bgcolor 背景颜色
color 字体颜色
颜色的取值由如下几种方式：
1)常用的颜色单词（160多个），如：blue,red,green
2)#加上3位或者6位16进制颜色编码，取值范围#000000黑色到#ffffff白色 ，其余颜色介于范围之间，如：#00ff00绿色
3)RGB三原色，RGB(x,y,z) ,xyz表示三种颜色的比例，取值从0-255之间，如：RGB(4,14,20)
3，align
设置文字的水平方向的对齐方式，常用取值：
left 左对齐，大部分标签的默认属性
center 居中对齐
right 右对齐
4，size
设置字体或者线的尺寸
5，width
设置标签的宽度，通常是对非行内标签设置，取值主要2种
1）绝对宽度，默认单位为像素px ， 即width="500"
2）相对宽度，相对于其所在父元素的宽度百分比， 即width="50%"
第8周练习
创建web项目，以学号姓名周次命名，如：250301129陈鑫龙T8
1，添加页面1，综合运用上述标签和属性，写一篇自我介绍，
内容不限，字数不要太少（150字以上）注意排版整洁美观
第9周
课前准备，工具安装和项目创建
ftp://10.104.36.131，将文件复制到本机
将压缩文件HBuilder.9.1.29.windows，点击右键-解压到当前文件夹，打开HBuilder文件夹，运行HBuilder.exe文件，进入HBuilder
创建web项目，以学号姓名周次命名，如：250301129陈鑫龙T9_1
复习回顾
1，相关标签
h1,...,h6 标题
p 段落
hr 水平线
br 换行
font 字体, strong,b 加粗, u,ins 下划线,del,s 删除线,i,em 倾斜,sup 上标,sub 下标
2，常用属性
align 内容水平对齐
color 颜色
size 尺寸
width 宽度
本周内容
一，标签
1，特殊字符
有些字符本身有特殊的含义，无法直接显示，如<>会被解析成标签
需要对这些字符进行处理，处理方式&符号代码;
空格 浏览器在解析HTML文本时，将多个空格或者换行默认解析成一个空格
< <
> >
& &
了解一些常用的就够了，更多特殊符号，参考w3school手册，HTML符号
2，图像标签
常用的网页支持的图像格式：jpg,jpeg; png; gif ; jfif, webp等
![]()
必备属性
src 图像所在的路径，有如下几种方式
网络路径，图片来源于网络
如：src="https://img2.baidu.com/it/u=3301876967,2626514273&fm=253&app=138&f=JPEG?w=800&h=1067";
本地路径，图片来源于本机（网图保存到本机）
绝对路径，该图片位于本地电脑的文件夹地址，如：E:/1.webp ；缺点：地址不好写，移植性差
相对路径，网页相对于图片的路径。推荐使用，（路径简单，移植性）
通常的做法：将图片保存在站点的img文件夹内，写src="img/图片名.后缀名"
路径错误会导致图片无法显示
可选属性
width 宽度
height 高度，PS：如果图片只设置了宽和高的其中一个，另外一个属性会等比例缩放
alt 图片无法显示，显示该属性设置的内容
title 标签的标题，全局属性，当鼠标移动到该标签时，显示该属性设置的内容
第9周第1次练习ftp://10.104.36.131
1，新建页面1，结合之前和今天所学的图像和特殊字符，重新写自我介绍，注意排版美观
2，新建页面2，结合文字和图像，实现类似于微信朋友圈的9宫格效果，注意排版美观
三，CSS入门
1，简介
Cascading StyleSheets层叠样式表，主要用于修饰标签，规定标签的格式
标签中，除了相关的全局属性和必备属性，其余属性都可以用CSS样式属性去替代
如，设置标签的尺寸，布局，颜色，字体，文本等都可以用CSS
优点：
标签的修饰和标签结构分离
减少重复代码
利用选择器来精确选择标签（可以按照需要批量选择，也可以精准选择某一个标签）
当多种选择器同时选择一个标签时，且属性冲突，通过不同的权重来决定
2，CSS样式表的分类
(1)行内样式
定义在一个标签中，通过style属性进行综合设置，语法：style="属性1:值 ；属性2：值;.......属性n:值";
如：
只能对当前标签有用
(2)内部样式
是在网页的标签内，加上style标签，语法：
注意：多个属性可以写成同一行，也可以一个属性写一行
内部样式，对当前网页(一个页面)中所有的指定标签（选择器指定的）都有效
如果同一个标签同时被不同的样式修饰，且属性取值冲突，通常情况下行内样式（1000）优先级高于内部样式
3，浏览器调试
打开浏览器后，按F12；进入开发者模式
在浏览器右侧，鼠标移动到标签查看标签占据页面的位置，甚至可以修改CSS直接预览效果
四，标签
1，列表系列标签
列表标签也是页面出现的高频标签，如新闻列表，商品列表，页面导航栏，播放列表，题目的答案列表等
分为三类：有序列表，无序列表，自定义列表
(1)无序列表
列表选项
常用属性：
type设置列表的类型,常用取值（CSS中对应list-style-type）
disc 实心小圆点（一级列表的默认值）
circle 空心小圆点
square 方形
(2)有序列表
列表选项
常用属性：
type设置列表的类型,常用取值（CSS中对应list-style-type）
1 数字编号（一级列表的默认值）
a/A 小写/大写英文字母
i/I 小写/大写罗马数字
第9周第2次课作业 ftp://10.104.36.131
必备作业：
1，完成老师演示的列表案例
选做作业
将之前的9宫格作业，加上CSS进行修饰和布局
自己往后预习
第10周
课前准备，工具安装和项目创建
ftp://10.104.36.131，将文件复制到本机
将压缩文件HBuilder.9.1.29.windows，点击右键-解压到当前文件夹，打开HBuilder文件夹，运行HBuilder.exe文件，进入HBuilder
创建web项目，以学号姓名周次命名，如：250301129陈鑫龙T10_1
一，复习回顾
1，CSS入门
概念和作用
分类：行内样式，内部样式
2，标签
特殊字符，表示方式： &符号标记;
图像标签 img ,必备属性 src
列表标签：
无序列表 ul
有序列表 ol
列表选项 li
属性：type
二，本周内容
1，列表标签（续集）
(3)自定义标签系列
，包括：
- 定义项-标题(文字或图像)
- 定义数据-项的具体描述(文字居多)
一个dl中可以多个dt，一个dt可以有多个dd进行描述
(4) 列表的常用CSS
list-style-type 设置列表的项目符号
list-style-position 设置列表选项的位置，取值有outside和inside
list-style-image 设置列表选项的图标（无法定义图标大小）
list-style 列表设置的综合写法，上面三个设置可以合成一个，
顺序：符号 ，位置，图标
(5)列表嵌套
上述的无序，有序和自定义列表都可以互相嵌套
较为常见的是无序，有序列表之间的嵌套
将二级的有序/无序列表嵌套在一级列表选项的li标签内
后期网站的导航栏，就是列表嵌套的典型应用
2，页面交互标签
可以展开和折叠
折叠的文字标题
details内部，summary后方可以加上其他标签（列表等）
第10周第1次练习
1，仿造案例，完成自定义列表
2，仿造案例，完成列表嵌套
3，选做作业，完成页面交互
3，超链接标签
作用：利用该标签访问指定的页面(互联网或本地)，或者访问页面中指定的某个位置
语法：内容
说明：内容可以是文字，或者其他标签，如：图像，视频等
必备属性：href
和图像标签的src作用类似，用于设置要跳转的位置，设置了该属性后才能实现跳转
如果a标签内容为文字，默认样式：未访问的为蓝色字体加下划线，已访问为紫色字体加下划线
取值有如下几种方式：
1)跳转到互联网地址(绝对完整的地址)，如：
淘宝
2)跳转到本网站的其他页面(相对于本页面的地址)
如果目标页面和本页面在同一文件夹内，只用写目标页面的名称.后缀 , 如：跳转到页面1
如果目标页面所属的文件夹，和本页面在同一文件夹内，写目标页面所在文件夹名/目标页面的名称.后缀 ,
如：js文件夹下的x页面
如果目标页面 和本页面的所在的文件夹 在同一文件夹内， 先用 ../表示返回上一级目录（../../返回上两级目录）
如：访问上一级目录中的页面4
3)如果没有明确的跳转目标，可以使用#，表示不跳转
如：没想好，我先不跳转
4)跳转到本页面的指定位置(锚点)
先设置锚点，即在指定标签中，设置id或者name属性值
href设置 ，即 href=#id属性值 或 href=#name属性值
可选属性
title
target 目标页面打开的方式，主要取值：
_self 本页面直接跳转到目标页面（本页面被覆盖）
_blank 新开一个页面标签跳转到目标页面，本页面还存在
第10周第2次练习
1，仿造案例，完成超链接的几种跳转
2，仿造案例，完成超链接锚点小说，题材自拟
第11周
课前准备，工具安装和项目创建
ftp://10.104.36.131，将文件复制到本机
将压缩文件HBuilder.9.1.29.windows，点击右键-解压到当前文件夹，打开HBuilder文件夹，运行HBuilder.exe文件，进入HBuilder
创建web项目，以学号姓名周次命名，如：250301129陈鑫龙T11_1
一，内容回顾
列表标签
超链接标签
二，本周内容
表格系列标签
表格标签，包含若干行
|
行标签，每一行包含若干个单元格
| 单元格标签
| 表头单元格标签（默认字体加粗，居中）
表格标题
表格结构标签，thead 表头 ,tbody 表内容（自动加的，默认包含所有tr） ,tfoot 表的底部 ，根据需要来设置
常用属性和操作
border 边框粗细，默认单位像素（CSS中border为标签边框，也是高频属性之一）
bordercolor 边框颜色
align 表格水平对齐方式
valign 垂直对齐方式 （CSS中 vertical-align ）,常用取值：top顶端对齐，middle 垂直居中, bottom 底部对齐
width 宽，如果没有显示设置该属性，表格宽度为其内容所占的宽；如果显示设置的宽度小于实际内容宽度，则预先设定的高度无效（以实际高度为准）
表格各列的默认宽度，有限按第一行内容占比分配宽度，如果第一行宽度相同，再按第二行内容宽度分配比例
可以再首行的各列设置宽度比例
height 高
bgcolor 背景颜色
cellspacing 单元格外部间距（格子边框和相邻格子边框之间的距离），CSS中对应各标签外边距 margin
cellspacing="0" 可以消除格子之间的缝隙
cellpadding 单元格内部间距（格子边框和内容之间的距离），CSS中对应各标签内边距 padding
注意：设置了该属性，会撑大标签的尺寸
rowspan 合并行（跨行操作），在合并的最前行进行设置，被合并的单元格要删除
colspan 合并列（跨列操作），在合并的最前列进行设置，被合并的单元格要删除
第11周第1次练习
1，新建页面1，仿造141页第1题（也可以更加美化），写出本班课表（本周或者本学期都可以）
第11周第2次练习ftp://10.104.36.131
1，新建页面1，实现课本130页，学生信息表
2，新建页面2，实现HTML分组
3，新建页面3，具体看ftp效果图
第12周
课前准备，工具安装和项目创建
ftp://10.104.36.131，将文件复制到本机
将压缩文件HBuilder.9.1.29.windows，点击右键-解压到当前文件夹，打开HBuilder文件夹，运行HBuilder.exe文件，进入HBuilder
创建web项目，以学号姓名周次命名，如：250301129陈鑫龙T12_1
一，页面布局初探
(1)设置标签
从上倒下，设置标签（占据整行,通常用div，并设置相关属性。。。）
从左到右，设置标签 （行内设置 ， 左右间隔距离从 升级为 margin-left ）
(2)设置CSS
利用选择器来选择指定的页面标签
设置指定的样式：
标签的盒子属性（宽，高，内边距，边框，外边距）
标签的字体和文本
标签的背景 (颜色，图片及相关设置)
布局的属性 ( 标签类型display , 浮动float , 定位position , 弹性flex等 )
二，标签分类
截至目前为止，学习的标签有：
页面结构标签，h1,.....,h6 , p , hr , br , font , strong, em ....., ul ,ol ,li ,dl,dt,dd , a , img , table ,tr,td,th等
后续还有表单系列标签要介绍（任务8）
按照在页面占据的位置，分为如下几类：
块状标签：独自占据整行，可以设置宽和高，如：h1,.....,h6 , p , ul ,ol ,li ,dl,dt,dd ， table ,div
行内标签：不独自占据整行，且设置宽高无效（实际宽高取决于其内容），如：a
行内块标签：不独自占据整行，可以设置宽和高，如：img,span
容器标签：本身没有含义，其作用就是包裹其他标签
div 块状容器 ，span 行内容器（CSS用来替代字体系列标签）
三，CSS入门
1，回顾
简介
分类：行内样式，内部样式，外部样式
2，外部样式表
将CSS代码单独放在网页外部的css文件中，项目文件夹css专门用来存放样式文件css
网页可以引入外部样式css文件，来修饰页面 ；一个网页可以同时引用多个不同的css文件
一个网站中，多个页面的风格统一，将共同部分可以单独拿出来写成css文件
网页中使用外部样式表的方式：
方式一：链接方式 ，在head标签内，添加link标签，设置rel属性为 stylesheet , href属性指向外部文件的地址
如：
方式二：导入方式，网页头部的style标签内，写导入命令 @import url(外部css文件的url)
如：
选择器优先级：行内>内部>=外部 （通常网页是先加载外部样式，再根据需要定义内部样式）
3，CSS选择器
(1)简介
如何选中页面标签的过程，方便进一步的CSS设置
选择页面标签的方式多种多样，答案不唯一；
同一个页面标签被多个不同选择器选中
A选择器设置了x属性，B选择器设置了y属性，该标签兼具了x和y属性，称为层叠性
A选择器设置了x属性，B选择器也设置了x属性，属性取值冲突，取决于优先级权限
某个标签没有设置某属性，但是其父元素设置了该属性，该标签自动拥有其父元素的属性，称为继承性
三大特性：层叠性，继承性，优先级
CSS通过设置不同的选择器来选择标签，分为基本选择器和复合选择器
(2)基本选择器
A，标签/元素 选择器
选择器名称和标签名相同，默认选中页面中所有同类标签（若干个）
如： a{
text-decoration: none; color: black; font-size: 14px;margin-left: 15px;
}
B，类选择器
选择页面中所有设置了相同class值的若干个标签
选择器名称为 .class属性值
如：
块1
块2
.a1{
background-color: blueviolet;
}
C，ID选择器
选择页面中，设置了id属性值的某一个元素 ，通常来说一个页面每个标签的id取值不同（类似于身份证号，学号一样）
选择器名称为 #id属性值
如：
K3
#k3{
background-color: pink;
}
注意：class和id都是全局属性（每个标签都可以设置的属性），给这两个属性取值时要注意：
符合一定的命名规范，如：数字不能开头，命名要有一定意义，不要随意空格
4，CSS优先级权限
每种选择器都有规定的权限取值，取值越高，权重越大
选择器类型 权重值
标签选择器 1
类选择器 10
id选择器 100
行内样式 1000 ，如：
ftp://10.104.36.131
第12周第1次练习
1，新建页面1，完成百度首页，素材见ftp(下载到本机)
第12周第2次练习
2，新建页面2，优化百度首页，使用外部样式文件，结合标签和类选择器，对上方和底部的超链接重新设置CSS
第13周
一，回顾
样式表，分类（行内，内部，外部）
选择器特点：层叠性，继承性，优先级权限
基本选择器（标签，类，id）
后续内容：
表单标签
复合选择器
CSS样式分类介绍
盒子
文本和字体
背景
布局
二，表单标签
1，简介
表单是网页和用户交互的区域，可以让用户通过输入相关内容，选择部分选项的形式将数据发送给网站服务器（后端处理，以后的课介绍）
本课程只是叙述如何在页面设置表单，H5新增了很多表单控件
一个完整的表单包含：表单域，提示信息，表单控件3部分组成
表单域：是将若干个数据作为整体提交
提示信息：表单控件周围提示的文字信息
表单控件：具体的含有用户信息的标签
2，标签
表单域，必备属性：action,method , 可选属性较多，如：name
表单控件标签
输入选择类标签，具体通过不同type属性取值来决定用途
下拉列表标签
下拉列表的某一具体选项
说明： 目前的学习，只能单独完成一个列表
如果想让多个列表的内容进行关联，如省份和城市，可以使用js脚本(较为常用)或者网站后台绑定
多行文本框
数据绑定列表，不能单独使用，必须配合文本框使用，选项也是option标签
用法：datalist设置id属性值，文本框的list属性值和id属性进行匹配
3，属性介绍
name 表单及控件的名字，用于判断是哪个表单提交的数据
action 指定表单数据处理的页面，当前默认本页面处理（不涉及后端）
method 表单数据的提交方式，主要取值get/post两种
get方式提交的数据会在地址栏url显示，格式：文件夹/页面名称.html?参数1=值&参数2=值&。。。&参数n=值；
参数名称为对应表单的name属性值，值为用户输入的内容或选择的内容
如：http://127.0.0.1:8020/Demo13/1.html?username=jack&userpwd=rose520
该方式传递的数据大小存在限制，且存在安全隐患（可通过地址栏数据加密）
post方式提交的数据不在地址栏显示，页面后端获取
value 表单元素的值，为用户输入的内容或选择的内容
placeholder 文本框提示语句，在没有输入内容时显示，输入内容后提示语句消失
type 类型，此处特制input标签的type取值（课本145页上方）
text 文本框
password 密码框
submit 提交按钮，将表单数据提交到action属性指定的页面（文件）中处理
radio 单选按钮，一组单选按钮需要设置相同的name属性值
checkbox 多选按钮，复选框
image 带图像的按钮，配合src使用
reset 重置按钮，回归到表单最初的状态
button 普通按钮，通常结合js的点击事件来实现某些功能
hidden 隐藏域，不在页面显示，通常用作保存页面的关键信息，如保存ID等
file 文件上传，默认包含一个文字显示和按钮，点击按钮后可显示文件路径及名称（上传功能需要后台实现）
email 带邮箱格式验证的文本框
url 带地址格式验证的文本框
number 数字类型文本框
range 带范围的数字拖拽框，默认取值0-100之间
search 带搜索功能的文本框
color 颜色选取框架
tel 带电话验证格式的文本框
时间日期
date , date-time ,date-time-local
maxlengh 最大字符长度
disabled 禁用控件，属性值也是disabled
readonly 只读的（不能修改），属性值也是readonly
checked 定义单选按钮，多选按钮的默认选中项，属性值也是checked ,即 checked="checked" ,H5中如果属性名和取值相同，只用简写属性名
max,min 设置数字的最大最小值
step 数字增量，默认为1
required 必填项，文本框内容不能为空，否则阻止数据提交，属性值也是required
autofocus 自动设置为焦点（光标位于某个文本框），属性值也是 autofocus
autocompelete 自动完成（将曾经输入的内容自动填补），取值：on开启自动，off 关闭自动
selected 下拉列表默认选中项目
size 下拉列表显示的行
multiple 设置下拉列表可以多选，取值也是multiple
parttern 正则表达式（验证字符串是否满足某种正确规则的表达式，很多编程语言和数据库都支持正则表达式）
cols,rows 设置多行文本框的列数和行数
list 文本框和数据列表的绑定
4，补充知识
表单是用户和网站的交互，要确保数据的正确和有效，需要对表单元素的数据进行验证，验证方式有多种：
前端验证（数据提交到指定服务器前验证）
利用表单元素自带的相关验证属性，如required 必填项 ，邮箱格式检查等
表单中通过设置parttern及对应的正则表达式来验证是否满足规则
利用js代码，设置标签和对应的事件
后端验证
获取前端提交的数据，可以在后端设置正则表达式验证，或者设置相关的逻辑功能代码
第13周练习1
1，完成简易盗号的登录页面
2，课本146页调查问卷
第13周练习2
1，课本154页，学生信息注册
2，课本159页，交规考试答卷页面
扩展作业：QQ邮箱页面-密码登录
4513ftp
ftp://10.104.34.48
一，复习回顾
表单，表单元素，表单常用属性
CSS基本选择器：标签选择器，类选择器，id选择器
CSS三特性：层叠性，继承性，优先级权限
二，CSS复合选择器
复合选择器又分为基本复合选择器，属性选择器，伪类选择器
1，基本复合选择器
基本复合选择器是基本选择器的组合应用
(1)交集选择器
两个选择器之间的交集，通常是标签选择器和类选择器之间的交集
语法： 标签.类名{ 属性名:值；}
说明：先写标签名，再写.类名，中间不要空格
如：选择即是li标签,同时class为a1的标签
li.a1{
width: 500px;height: 100px;
background-color: greenyellow;
}
(2)并集选择器
如果多个选择器设置了相同的样式，可以将多个选择器名称之间用逗号隔开，统一设置一个选择器
如：将p标签和div标签设置相同的样式
p,div{
width: 700px;height: 100px; background-color: blueviolet;
}
(3)后代选择器
1)完全后代选择器（包含）
用于精确控制子标签，其他容器相同的子标签不受影响
将父选择器(可以是任意类型的基本选择器)写在前面，子选择器(可以是任意类型的基本选择器)写在后面，父子之间用空格隔开
语法：父选择器 子选择器 { 属性名:值；}
选择的范围：父选择器包含的所有子选择器
/*完全后代选择器：选择id为list1所包含的所有li标签*/
#list1 li{
background-color: pink;border:1px solid green;
}
2)直接后代选择器
与完全后代选择器的区别：只限于对父选择器选中的直接子标签有用，孙标签重孙标签等无效
语法：父选择器>子选择器 { 属性名:值；}
(4)通配符选择器
选择器的名称为* ,默认指代任何一个标签
通常在该选择器设置页面通用设置：如消除元素默认的内外边距（消除不同浏览器兼容的一部分问题），统一设置字体
以后的作业，css第一行必须写
*{
margin: 0;padding: 0;
}
三，CSS优先级权限
每种选择器都有规定的权限取值，取值越高，权重越大
选择器类型 权重值
通配符 0
标签选择器 1
类选择器 10
id选择器 100
行内样式 1000 ，如：
复合选择器的权限，为由其组成的基本选择器权限之和
如： h1.a1{} 权限=1+10=11
p,div{} 权限=
#list1 li{} 权限=100+1=101
小结：学完CSS选择器后，
进行网页设计时，实现页面效果图所示的页面时，需要具备如下几个方面的能力：
一，根据页面效果选择合适的标签（没有唯一的标准答案）
二，能够根据效果/标签进行归纳总结，分好类型，定义对应的class或id，并用选择器选中各个分类标签
三，根据效果需要，设置对应的CSS属性：字体，尺寸，背景，边距等。
四，盒子模型
1，简介
将HTML中每个标签元素看作矩形的盒子，每个盒子都是一个容器，里面可以装内容
盒子从内到外由内容(宽、高)，内边距，边框，外边距组成；
内边距，边框，外边距有4个方向：top , right ,bottom , left , 可以统一设置4个边，也可以单独设置某一个边
如：margin-left ,border-bottom
了解每个标签盒子在页面占据多大空间，是页面布局的基础
默认情况下，每个盒子类型为标准盒子，也可以根据需要设置为奇异盒子
2，内容（宽，高）
宽width ,高height的取值通常两种方式：
绝对单位，如用像素作为单位 width: 500px;
相对单位（相对于父元素的宽/高），如：50%；
注意：前面介绍标签分类时，块状标签和行内块标签可以设置宽高属性，行内标签设置宽高属性无效，其宽高取决于其内容的宽和高
3，边框border
设置边框包括3方面的属性 ：粗细 框线类型 颜色
可以单独设置 border-width , border-type , border-color
如：border-width: 1px; border-style: solid; border-color:gray;
框线类型常用取值：(课本71页上方)
solid 实线
dashed 虚线
dotted 点线
double 双实线
none 无边框
可以统一设置（建议统一），如：border: 1px solid gray;
CSS新增边框属性：
border-radius 边框角弧度，4个角可以统一设置，如：border-radius: 50%; border-radius: 15px;
也可以单独设置某个角，顺时针顺序：左上，右上，右下，左下 ，如：border-radius:0 30px 30px 0;
4，内边距padding
标签的边框到内容的距离，标准盒子模型下，padding会撑大标签的尺寸
标准盒子模型下，一个标签实际尺寸：
宽度=width+左右padding+左右border
高度=height+上下padding+上下border
如：标签CSS代码如下： width: 400px; height: 200px;border: 2px solid red;padding-left: 100px; padding-top: 50px;
真实宽度= 400+100+2*2=504px;
真实高度= 200+ 50+2*2=254px;
可见，标准盒子是在内容的基础上，向外扩展（取决于padding和border），标准盒子模型下，计算标签实际尺寸需要考虑内部填充padding和边框border
补充知识：怪异盒子
设置方式，box-sizing属性取值设置为 border-box; （content-box 为默认值，标准盒子）
怪异盒子模型下，设置的width和height为该标签总体尺寸，如果再设置了padding和border，向内收缩挤占内容的占地面积
如：标签CSS代码如下： width: 400px; height: 200px;border: 2px solid red;padding-left: 100px; padding-top: 50px;
真实宽度= 400 ，真实高度= 200
内容的宽度=400-100-2*2=296px，内容的高度=200-50-2*2=146px
如果不想考虑padding和border给标签尺寸带来的影响，可以将标签设置为怪异盒子模型
5，外边距
预告：
CSS常用文本
CSS背景设置
页面布局
4513ftp
ftp://10.104.34.48
1，新建页面1，实现ftp练习1的效果
第15周
一，回顾
CSS复合选择器
盒子模型属性（内容，padding，border ）
标签分类
块状：独占整行，可以设置宽高
行内：不独占整行，设置宽高无效（真实宽高取决于其内容宽高）
行内块：不独占整行，可以设置宽高
二， 盒子模型（续集）
5，外边距
标签边框到相邻标签的边框的距离
有4个方向：top , right ,bottom , left , 可以统一设置4个边，也可以单独设置某一个边
(1)垂直方向外部边距
如何让垂直方向相邻两个块标签中间产生距离？
方案1：设置上方标签的下外边距margin-bottom，如：50px;
方案2：设置下方标签的上外边距margin-top，如：100px;
可见，上述两个方案都可以实现，如果两个方案同时设置，此时两者的距离是？
垂直方向外部边距,取两者之间的较大值
(2)水平方向外部边距
如何让水平方向相邻两个块标签中间产生距离？
方案1：设置左侧方标签的右外边距margin-right，如：50px;
方案2：设置右侧方标签的左外边距margin-left，如：100px;
可见，上述两个方案都可以实现，如果两个方案同时设置，此时两者的距离是？
水平方向外部边距，取两者之间的和值
(3)让标签整体居中
通常写margin:0 auto;
说明：0表示上下的外部边距，auto表示左右自动取值进行居中，此时不要再单独设置左右方向外边距
通常是页面布局时，让整体框架标签设置一定宽度（非100%），来居中
(4)扩展知识：
在已经将内外边距都设置成0的情况下，我们看到行内（行内块）标签之间仍然产生缝隙，原因何在？
上述现象称为：换行留白现象
原因：在编辑器中代码换行了，浏览器解析时默认将换行解析成一个空格的距离
解决方案：
1，代码不换行，指标不治本
2，将行内标签所在的父元素的字体大小设置为0（font-size:0）, 由于子元素可能继承该属性，需要单独给子元素设置字体
3，将元素设置为浮动
其余大家自己思考。。。
(5)垂直外边距叠加现象
如果在小标签中设置margin的垂直距离，如：margin-top
可能产生的效果是，小标签并未按照理想的情况和父标签产生外部边距，和父标签顶部紧密相连，即小标签外部上边距设置失效
原因：父标签上方没有支撑（上边框或上内边距）
三，常用CSS属性
1，文本和字体
字体font系列，侧重于对字的设置；文本text系列侧重于对文字整体的设置
字体常用属性
color 字体颜色
font-family 字体类型，如宋体，黑体等
font-size 字体大小，通常单位为px，其他单位如：em 一个中文字符的宽度（相对单位）
font-weight 字体粗细，取值：100-900，normal（默认400） bold（700）,bolder等
font-style 字体风格，如斜体
letter-spacing 字符间距
文本常用属性
text-decoration 文本修饰，常用取值：none无修饰，underline下划线，overline上划线，line-through 贯穿线/删除线
line-height 行高
text-indent 首行文字缩进，通常取值为2em
text-align 文字水平对齐方向（左，中，右，两端）
white-space 标签中文字的处理方式，常用取值
normal : 默认值。默认处理方式。文本自动处理换行。假如抵达容器边界内容会转到下一行
nowrap : 强制在同一行内显示所有文本，直到文本结束或者遭遇 br 对象。参阅 noWrap 属性
text-overflow 设置超出的文本的处理方式，常用取值
clip : 默认值。不显示省略标记(...)，而是简单的裁切
ellipsis : 当对象内文本溢出时显示省略标记(...) ，前提：设置overflow:hidden; white-space:nowrap;
扩展：overflow属性，如果标签的内容超过了标签规定的范围，进行的设置，默认是显示超出的部分，如果值设置为hidden，超出部分不显示（隐藏）
2，背景（课本77页）
background，包含若干子属性
background-color 背景颜色，颜色取值：单词常量，#000000-#ffffff , rgb(0,0,255) 等方式
background-image 背景图片，层级高于背景颜色
如果标签的尺寸和背景图片的图片不一致，显示效果如何？
标签的尺寸小于背景图片，默认显示背景图片的左上角（以左上角为原点）
标签的尺寸大于背景图片，默认背景图片平铺/拉伸
background-repeat 背景图片拉伸，常用取值：
repeat 默认值，拉伸
no-repeat, 不拉伸（此时标签尺寸大于背景图，背景图默认在标签左上角）
repeat-x 只在水平方向拉伸
repeat-y 只在垂直方向拉伸
round 标签尺寸小于背景图时，缩放背景图刚好显示一个图片
标签尺寸大于背景图，缩放背景图刚好显示若干个完整图片
background-position 背景图像定位，默认定位是以左上角为原点
取值可以是长度，百分比，或关键字(水平：left,right,center , 垂直 top,bottom ,center)
长度/百分比，通常设置到左侧及上方的两个距离来调整定位，如：background-position: 100px 20px; 左侧100px ，上方20px
也可以设置关键字，如果只写一个方向关键字，另外一个方向默认居中显示
定位的应用：比特精灵（将多个小图标整合成一张大图，然后通过CSS设置不同的背景图片定位来实现效果的切换）
background-size CSS3新增，设置背景图片的尺寸
可以结合伪类选择器:hover，实现背景图尺寸放大缩小，再结合动画实现特效
四，页面布局
1，一个大标签包含一个小标签（大框包小框）
小框尺寸略小于大框，且均匀分布到大框中间（水平居中，垂直居中）
方案一：将大框和小框原始宽高设置为相同的值，再设置大框的padding，适用于上下左右距离相同的情况
示例代码：
#big{
width: 800px;height: 500px;border: 1px solid red; background-color: greenyellow;
margin: 100px auto;
padding: 20px;
}
#small{
width: 800px;height: 500px;border: 1px solid red; background-color: deeppink;
}
方案二：将大小标签的尺寸设置的有差异，通过设置小标签的margin
垂直方向设置的margin,为两者高度差值的一半
水平方向设置的margin为auto
示例代码
#big{
width: 800px;height: 500px;border: 1px solid red; background-color: greenyellow;
margin: 100px auto;
}
#small{
width: 600px;height: 400px;border: 1px solid red; background-color: deeppink;
margin:49px auto ;
}
注意：垂直外边距叠加现象
典型案例：
15周练习1
父标签100%宽度，子标签为某个固定宽度且居中显示
第15周练习
1，完成15周练习1，忆江南
第16周
一，回顾
盒子模型
常用的字体文本属性
背景属性
二，页面布局（课本任务9）
1，概述
网页设计是根据页面效果图（页面原型），变成具体的页面的过程。
通常的实施步骤：
从上到下依次分块，每个块根据需要设置class或id属性 ，设置CSS样式，包括：宽，高，内外边距，居中，背景等
从左到右依次分成若干小块，设置class或id属性 ，设置CSS样式，包括：宽，高，内外边距，居中，背景 （布局相关属性）等
对每个小块，根据效果设置具体的标签，如列表，图像等，再设置CSS样式
页面预览调试，修正代码，再次预览调试直到完成预定效果。。
对于分开所用的标签，可以是DIV (DIV+CSS)，也可以是HTML5中特定的分块标签，如：head,nav等
以导航栏为例子，
导航栏的具体标签
分块的class或者id命名，也是有一定规范的，参考文档常用CSS命名规则
2，标准文档流
网页文档经过浏览器解析加载的默认顺序：
块状标签，从上到下依次排列
行内(块)，从左到右依次排列
可以通过给标签相应的布局属性设置，改变默认加载顺序
3，常用布局类型
纵向分块都很清晰，但是横向（从左到右有）有若干种变化
(1)父元素占据100%宽度，包含一个子元素（非100%宽，居中）
(2)父元素非100%宽度居中，子元素排列在父元素中一排有若干个（>=2）
A，方法一：将块状子元素变成行内块，即设置 display:inline-block
此方法，需要综合考虑父元素的宽度，子元素的宽度(width，border和padding)，及外边距;
还有考虑换行留白问题
子元素排列的外边距，取决于：
垂直间距：一排显示，父子高度差的二分之一
二排显示，（父高-子高×2）/3
横向间距：(父宽-子宽×n)/(n+1)
B，方法二：将块状子元素设置为浮动（通常为左浮动），float:left (常用的布局方式)
比起方法一，无需考虑换行留白问题
只需要综合考虑父元素的宽度，子元素的宽度(width，border和padding)，及外边距;
4，布局CSS属性
(1)display属性
设置元素在页面排列占据空间的类型，常用取值
block 块状元素
inline 行内元素
inline-block 行内块元素
none 不在页面显示（不占据页面空间）
(2)float属性
设置元素为浮动后，会脱离标准文档流（标签原先占据的位置被后方标签占据），常用的取值
none 不浮动
left 左侧浮动
right 右侧浮动
(3)z-index属性
当有些标签脱离标准文档流后，会和其他标签位置重叠；如设置了浮动属性的标签，默认漂浮在标准文档流标签上方
可以通过z-index修改层级，取值通常是0-1000的整数，取值越高，显示的层级越上
对于标准文档流的标签（position:static），仅仅设置z-index是无效的（需要配合position:relative使用）
(4)position属性
ftp://10.104.34.48
16周练习
1-3 创建页面1-3完成老师的案例
4，创建页面test1, 完成ftp中页面1-2-1布局
5，创建页面test2, 完成ftp中页面布局
6，创建页面test3, 完成ftp中页面布局3
拓展题：课本173页的页面布局
第17周
一，页面布局常用类型
(2)父元素非100%宽度居中，子元素排列在父元素中一排有若干个（>=2）
A，方法一：将块状子元素变成行内块，即设置 display:inline-block
此方法，需要综合考虑父元素的宽度，子元素的宽度(width，border和padding)，及外边距;
还有考虑换行留白问题
子元素排列的外边距，取决于：
垂直间距：一排显示，父子高度差的二分之一
二排显示，（父高-子高×2）/3
横向间距：(父宽-子宽×n)/(n+1)
B，方法二：将块状子元素设置为浮动（通常为左浮动），float:left (常用的布局方式)
比起方法一，无需考虑换行留白问题
只需要综合考虑父元素的宽度，子元素的宽度(width，border和padding)，及外边距;
C，方法三：使用display:flex 设置父元素（移动端设置较多）
通过相关设置，无需综合考虑父元素和子元素的宽高配置，也不用计算margin
父元素相关设置
display:flex
flex-direction:row(默认 水平)|column(垂直)，设置主轴的方向（水平 垂直）
注意：在主轴方向上，子元素的宽高会受影响（主轴方向子元素的尺寸和大于父元素尺寸，默认子元素的尺寸平分父元素）
flex-wrap:nowrap(默认 不换行)|wrap(换行)，设置子元素是否换行
注意：不换行时，如果子元素的宽度之和超过了父元素的总宽度，此时，自动调整子元素宽度（按照父元素宽度均分）
换行，按照子元素的实际宽度排列，一行放不下就换行显示
justify-content:center | space-between(两侧靠齐) |space-around(环绕)，设置子元素在主轴的对齐方式
align-items：center flex-start flex-end ，设置子元素在侧轴的对齐方式
子元素的属性
order:设置项目的排列顺序 数字越小 越靠前 ，order相同按照标签顺序排列
flex:占比 默认是0；设置后边距设置及主轴排序方式会失效（一行或一列显示），默认按照比例均分父元素的宽度
align-self:自己在侧轴的对齐方式 center flex-start flex-end
二，页面布局属性
(4)position属性
定位属性，常见的取值：
static 默认值，静态定位，标签按照标准文档流的顺序排列
relative 相对定位，相对于原有的位置发生了偏移
偏移量的设置结合（top, left ,bottom, right）属性设置，通常用top, left 就足够了
absolute 绝对定位，会脱离标准文档流，也需要结合偏移量进行设置
设置了绝对定位的子元素，偏移量的参考物：
如果其父元素未设置position属性（静态定位），子元素相对于body发生偏移
如果其父元素设置为相对定位，子元素相对于父元素发生偏移 （父相子绝）
fixed 固定定位，脱离标准文档流，相对于body发生偏移（无需考虑父元素的变化）
三，动画
1，过渡transition
(1)简介
过渡是CSS3中一个很重要的内容，可以在不适用flash动画或JS的情况下，当元素从一种样式变换成另外一种样式时为元素添加效果。
低版本浏览器不支持，比如：ie9以下，但不影响布局
(2)语法：
/* transition:需要过渡的属性 花费的时间 运动曲线 何时开始 */
transition: width 0.5s ease 1s;
注意：
属性：需要变化的CSS属性，宽高，背景颜色，内外边距……，需要多个属性值变化，可以利用逗号进行分割，
如果需要所有的属性都变化 则可以直接写all
花费时间：单位是秒（必须要写单位）
运动曲线（可以省略）：默认是ease(逐渐变慢)，linear（匀速），ease-in(加速)，ease-out(减速)，ease-inout(先快后慢)
何时开始：单位是秒（必须要写单位），默认是0秒
2，转换
(1)简介
即过渡的时间内，标签发生的变化，有2D和3D效果，以2D为例
转换（transform)是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、缩放等效果。转换可以简单理解为“变形”
(2)2D移动translate
transform:translate（x,y) /*x表示x轴的移动距离，y表示y轴的移动距离 注意，y轴向下数值越来越大*/
/*或者可以分开写 适用于只对一个方向进行移动，但是，如果两个方向都需要移动，就不要分开写，因为下面一个transform会覆盖上面的一个*/
transform:translateX(n);
transform:translateY(n);
注意：
translate在使用过程中，不会影响到其他元素的位置（同时有两个盒子，上下排列，把上面的盒子向下向右移动，下面的盒子依旧放在原来的位置不会发生改变）
translate中的百分比单位，是相对自身元素的。
例盒子宽高100px ， translate：（50%，50%）则向右向下都移动宽高的一半，50px
translate对行内标签没有效果（因为行内标签，一行可以放置多个，并且设置宽高无效）
(3)2D转换之旋转rotate
语法“transform:rotate(度数)
/*度数的单位是deg 度数为正则顺时针旋转 旋转的中心就是元素的中心点*/
(4)2D转换之缩放scale
语法：transform:scale(x,y)
参数x和y是只有数字，不跟单位，是指倍数（放大（大于1）或缩小（小于1）原来宽高的倍数）
scale最大的优点，就是不会影响其他盒子的布局
scale缩放，默认以元素中心作为缩放中心点（一般情况下不会修改）。改变缩放中心点与旋转中心点的做法一致，详情参考“transform-origin调换中心点”,
(5)2D转换之综合写法
transform:translate() rotate() scale()……
注意：
综合写法的顺序不要打乱，会影响转换的结果（先旋转会改变坐标方向）
当同时使用位移和其他属性的时候，一定要讲位移放在最前面
第17周练习 ftp://10.104.34.48
1，完成太极图
2，完成小米商城局部页面