1.回顾
1.1.web标准
结构标准 - html - 决定网页中的内容
表现标准 - css - 决定网页中的内容的布局的样式
行为标准 - javascript - 决定网页中的内容的变化
1.2.html的语言基础
h5(狭义) - html5
h5(广义) - html5 +css3 + javascript
1.3.html标签
双标签 - <标签名 属性名=属性值 属性名=属性值>内容
单标签 - <标签名 属性名=属性值 属性名=属性值> 或者 <标签名 属性名=属性值 属性名=属性值 />
h1-h6(双标签),p ,font, b/strong , i/em
单标签
, (空一个像素) (一个大空格)
ul-li(无序) ol-li(有序) dl-dt-dd(可以对内容进行分组)
img - src(图片路径) alt(图片加载失败) title(设置图片标题)
a - href(跳转指定网址,跳转本地html网页,id选择器(跳转到指定id的位置),刷新网页(直接为空))
2.表单标签
2.1.表单标签(form)
表单标签的作用: 收集用户信息. - 实质是将表单标签作为容器,来收集表单标签中其他标签的信息
本身没有任何显示效果
action属性:设置提交地址
method属性:提交方式(post,get)
点提交按钮提交的时候将表单中所有相关标签以name-value的形式,按照method属性提供的提交方式提交给action属性对应的接口
form提供了两大功能:a.统一提交 b.重置
2.2.input标签(单标签)-type属性 - type对应的值不一样,input标签体现的功能就不一样
a.text - 文本输入框
b.password - 密码输入框
既可以放在form标签中,也可以不放在form标签中单独使用
name属性 - 专门用来做提交和区分不同的信息,相当于字典的key
value属性 - 标签内容:指向输入框中的内容.设值其实是设置文本输入框中的默认值
placeholder属性 - 当输入框中没有内容的时候显示的提示信息
maxlength属性 - 设置输入框最大能输入的文字个数
c.redio - 单选按钮
name属性 - 要求同一组的数据的name属性值必须一样,才能单选
value属性 - 不可见的,专门用于数据的提交,或者区分被选中的值
checked属性 - 设置为checked,让单选按钮默认选中一个选项
d.checkbox - 复选按钮
name属性 - 要求同一组的数据的name属性值必须一样,才能多选
value属性 - 不可见的,专门用于数据的提交,或者区分被选中的值
checked属性 - 设置为checked,让单选按钮默认选中一个选项
e.button - 普通按钮(单标签)
value属性 - 网页上按钮显示的文字
f.区别于button双标签,内容可以更多,图片或者其他
g.submit - 提交按钮
点击提交按钮会自动提交当前form中所有设置了name属性的相关标签的值.
以"name-value"的形式进行提交
h.reset - 重置按钮
将当前form标签中所有的标签状态设置为初始状态
3.下拉菜单
3.1.下拉菜单(select-option)
a.select标签 - 代表整个下拉列表
1).name属性 - 区分和提交
b.option标签 - 下拉菜单中的选项
双标签的内容 - 显示部分
1).value属性 - 提交的value值
2).selected属性 - 默认选中选项
c.optgroup标签
显示效果上对下拉菜单进行分组
label属性 - 给分组设置名字
3.2.多行文本输入框(textarea)
可以输入多行内容,内容超出范围可以上下滚动
name属性 - 提交和区分
rows - 一次性可以显示的行数(高度)
cols - 最多一行显示多少个文字(宽度)
placeholder - 提示语句
双标签中间的内容 - 相当于value
maxlength - 最多能输入的文字个数
注意:有两个属性代表默认选中.1.selected代表下拉菜单中的默认选中 2.checked代表单选和复选框的默认选中
4.div和span标签
div与span标签是无语义标签 : 一般用来将网页中的标签进行分组和分模块使用;
5.css基础
5.1.什么事CSS
css是web标准中的表现标准,专门负责网页中内容的布局和样式
目前使用的是CSS3
CSS代码又叫样式表
5.2.CSS的语法
a,基本结构
选择器{属性名1:属性值1;属性名2:属性值2;....}
b.说明
1).选择器{} - 通过选择器决定样式是针对哪个标签写的(在内联样式表中没有这个选择器{}结构)
2).属性 - 属性名不是随便写的,必须是CSS提供的两百多个属性中的一个.属性名和属性值之间用冒号连接,多个属性之间用分号隔开
5.3.CSS代码写在哪里
a.内联样式表
将样式表作为标签的style属性值
内联样式表只能针对一个标签有效
b.内部样式表(也可以放在body内部)
将样式表作为head标签中的style标签的内容
可以针对当前html中所有的标签
c.外部样式表
将样式表写在一个CSS文件中,再通过link导入
a.link标签 - >
1).rel属性:确定导入的文件功能,stylesheet - 设置样式表 icon - 设置网页图标
2).type属性:确定文件类型;文件类型/文件后缀;text/css - 文本/文件后缀是css
3).href属性:需要导入的文件的文件路径
外部样式表,针对所有的html中的所有标签
优先级:内联样式表的优先级最高,内部样式和外部样式,谁后写,谁的优先级就高,谁就会覆盖前面那一个
常用属性补充:
color:文字颜色 font-size:字体大小 background-color:背景颜色 width:宽度 height:高度
CSS中的颜色值:a.颜色单词 b.rgb的十六进制值,例如:#ff0000 c.rgb(r,g,b)或者rgba(r,g,b,Alpha) - Alpha(0-1) 0:完全透明
CSS中的数字:如果数字表示的大小,必须加单位:px(像素),em(空格)
6.选择器
选择器{属性名1:属性值1;...}
css提供的选择器大概有十几种,常见的 --
1.标签选择器 - 直接将标签名作为选择器,选中当前html中所有指定的标签
例如:a{}(选中html中的所有a标签),p{}(选中当前html中的所有p标签)
2.id选择器 - 将标签的id属性值前面加#作为选择器,选择所有id是指定值的标签.
例如:#text - 选中当前html中id属性值是text的所有标签
3.class选择器(类型选择器):将标签的class属性值前面加 点 作为选择器,选中所有class相同的值的标签
例如:.test
4.群组选择器:将多个选择器用逗号隔开然后作为一个选择器,同时选中每个单独的选择器选中的所有的标签
例如:p,a,.test,#text{} - 选中所有的p标签,a标签,class值是test以及id值是text的标签
5.后代选择器:将多个选择器用空格隔开作为一个选择器.从前往后,一层一层的找,找到最后一个选择器对应的标签
例如:div .test #test{} - 选中div标签中class值是test的标签中id值是test的标签
div div p{} - 选中div中的div中的p标签
6.通配符:将*作为选择器,选中当前页面中的所有标签
例如:*{} - 选中当前页面所有的标签
注意:内部的style标签实质可以写在html的任意部位
设置文本的几种直线
/*设置文字的装饰效果*/
text-decoration: underline;/*给文字添加下划线*/
text-decoration: overline;/*给文字添加上划线*/
text-decoration: line-through;/*给文字添加删除线*/
text-decoration: none;/*去掉下划线*/
7.伪类选择器
伪类选择器是用来选中标签的不同的状态(为了标签的不同状态设置不同的样式)
7.1.基本格式
普通选择器:伪类选择器
7.2.伪类选择器
1).link - 初始状态(对超链接有效);表示a标签中的以前没有访问过对应的状态
2).visited - 超链接被访问后的状态(对超链接有效)
3).hover - 鼠标悬停在标签上的时候对应的状态
4).active - 激活状态
7.3.爱恨原则:当同一个标签需要同时给多个状态添加样式的时候,要遵守爱恨原则:
LoVeHAte link - visited - hover - active
作业
入学登记
入学登记
效果:
