day-20课程总结

细线表格:

1.不设置border,设置cellspacing的值为表格线的宽度
2.设置整个表格的背景颜色为表格线的颜色,然后在设置每个单元格的背景颜色和整个表格的背景颜色不一样

1.表单标签(form)

表单标签的作用:收集用户信息-实质是将表单标签作为容器,来收集表单标签中其他标签的信息,本身没有任何显示效果

action属性:设置提交地址
method属性:提交方式(get/post)
点提交按钮提交的时候,将这个表单中所有所有相关标签以name=value的形式按照method属性提供的提交方式,提交给action属性对应的接口

form标签提供了两大功能:a.统一提交 b.重置

2.input标签

既可以放在form标签中,也可以不放在form标签中单独使用
type属性 - type对应的值不一样,inp标签体现的功能不一样
a.text - 文本输入框
name属性 - 专门用来区分不同的信息,相当于字典中的key
value属性 - 标签内容,指向输入框中的内容
placeholder属性 - 当输入框汇总没有内容的时候,显示的提示消息
maxlength属性 - 设置输入框最大能输入的文字个数
b.password - 密码输入框
name属性 - 专门用来区分不同的信息,相当于字典中key
value属性 - 标签内容,指向输入框中的内容
placeholder属性 - 当输入框中没有内容的时候,显示的提示信息
maxlength属性 - 设置输入框中能够输入的最大文字个数
c.radio - 单选按钮
name属性 - 要求同一组的数据的name属性值必须一样,才能单选
value属性 - 不可见的,专门用于数据的提交;或者区分选中的值
checked属性 - 让单选框按钮处于选中状态
d.CheckBox - 复选框
name属性 - 要求同一组数据的name属性值必须一样,才能单选
value属性 - 不可见的,专门用于数据的提交,或者区分被选中的值
checked属性 - 让复选框按钮处于选中状态
e.button - 普通按钮
value属性 - 决定按钮上显示的文字
f.sumbit - 提交按钮
点击提交按钮后会自动提交当前form中所有设置了name属性的相关标签的值,以name=value的形式进行提交
g.reset - 重置按钮
将当前form标签中所有的标签状态设置为初始状态

下拉菜单(select-option)

a.select标签 - 代表整个下拉菜单
name属性 - 区分和提交
b.option标签 - 下拉菜单中的选项
内容 - 显示部分
value属性 - 提交的内容
c.optgroup标签
显示效果上对下拉菜单进行分组
label属性 - 给分组设置名字

d.selected属性 - 设置默认选中

多行文本输入框(textarea)

可以输入多行内容,内容超出范围可以上下滚动
name属性 - 提交和区分
rows - 一次性可以显示的行数(觉得高度)
cols - 列数(一行最多可以显示多少个文字,决定宽度)
placeholder - 提示语句
value - 提交、默认显示
内容 - 相当于value
maxlength属性 - 最多能够输入的文字个数

div和span

div和span两个标签是无语义标签,一般用来将网页中的标签进行分组和分模块使用

css

1.什么是css
css是web标准中的表现标准,专门负责网页中内容的布局和样式
css又叫样式表
2.css语法
a.基本结构
选择器{属性名1:属性值1;属性名2:属性值2;...........}
b.说明
选择器{} - 通过选择器决定样式是针对哪个标签写的(在内联样式表中没有这个结构)
属性 - 属性不是随便写的,必须是css提供的两百多个属性中的一个,属性名和属性值之间用冒号连接,多个属性之间用分号隔开(如果没有分号会导致后面所有的属性无效)
3.css代码写在哪里?
1.内联样式表
将样式表作为html中标签的style属性值
内联样式表只针对一个标签有效
2.内部样式表
将样式表作为head标签中style标签的内容
内部样式表对当前html中的所有标签都有效
3.外部样式表
将样式表写在一个css文件中,通过link导入
外部样式表针对所有html文件中的所有标签
优先级 内联样式表的优先级最高,内联样式表和外部样式表,谁后写谁的优先级就高

重用属性补充
color - 字体颜色
font-size - 字体大小
background-color - 背景颜色
width - 宽度
height - 高度
css中颜色值:a.颜色的英语单词 b.rgb的十六进制值,例如#ff0000
c.直接使用rgb值,rgb(r,g,b),rgba(r,g,b,Alpha) alpha 0(完全透明) 1(完全不透明)
css中的数字:如果数字表示大小,必须加单位:px(像素) em(空格)
style标签中的内容,必须也只能写css代码 - style标签也可以写在body中,只是习惯写在head中
3.外部样式表
a.link标签:导入外部文件
rel属性:确定导入的文件功能; stylesheet - 样式表 icon - 设置网页图标
type属性:确定文件类型;文件类型/文件后缀 text/css - 文本/文件后缀是css img/ico - 图片/文件后缀是ico
href属性 : 需要导入文件的文件路径
4.内联样式表
body中每个有显示效果的标签都有style属性,用来设置当前标签的样式
style属性值的引号中, 写的是css代码

选择器

选择器{属性名1:属性值1;属性名2:属性值2..........}
css提供的选择器大概有十几种,常见的:

1.标签选择器:直接将标签名作为选择器,选中当前html中所有指定的标签 例如 a{} - 选中当前html中所有的a标签

2.id选择器:将标签的id属性值前面加#作为选择器,选择所有id是指定值的标签 例如:#text{} - 选中当前网页中所有id属性值是text的标签

3.class选择器(类型选择器):将标签中class属性值前面叫.作为选择器,选中所有class是指定值的标签 例如 - .text{} - 选中当前所有class属性值是text的标签

4.群组选择器:将多个选择器用逗号隔开作为一个选择器,同时选中每个单独的选择器,选中的所有的标签 例如 p,a,.text,#test{} 选中所有的p标签,a标签和class值是text以及id值是test的标签

5.后代选择器:将多个选择器用空格隔开作为一个选择器,从前往后一层一层的找,找到最后一个选择去对应的标签 例如 div .test #text{} - 选中div标签中class值是test的标签中id值是text的标签

6.通配符:将*作为选择器,选中当前网页中所有的标签

text-decoration:underling 给文字添加下划线
overline - 上划线
line-through - 删除线
none - 去掉下划线

伪类选择器

伪类选择器是用来选中标签的不同状态(为了标签的不同状态设置不同的样式)

1.基本格式

普通选择器:伪类选择器

2.伪类选择器

1)link - 标签的初始状态(一般作用于a标签,表示a标签中的连接没有成功访问过对应的状态)
标签:link{} - 标签是通过各种选择器来选中的标签
2)visited - 超链接被访问过后的状态,一般作用于a标签
3)hover - 鼠标停留在标签上的时候的状态
4)active - 激活状态,鼠标按下没有弹起的时候的状态

3爱恨原则:当同一个标签需要同时给多个状态添加样式的时候,要遵守爱恨原则

link-visited-hover-active
LoVeHAte

web标准

结构标准 - html - 觉得网页中的内容
表现标准 - css - 决定网页中的内容的样式和布局
行为标准 - JavaScript - 决定网页中的内容的变化

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 218,451评论 6 506
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 93,172评论 3 394
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 164,782评论 0 354
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,709评论 1 294
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,733评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,578评论 1 305
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,320评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,241评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,686评论 1 314
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,878评论 3 336
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,992评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,715评论 5 346
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,336评论 3 330
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,912评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,040评论 1 270
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,173评论 3 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,947评论 2 355

推荐阅读更多精彩内容

  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 27,486评论 1 45
  • HTML 5 HTML5概述 因特网上的信息是以网页的形式展示给用户的,因此网页是网络信息传递的载体。网页文件是用...
    阿啊阿吖丁阅读 3,898评论 0 0
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,754评论 1 92
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,657评论 18 139
  • 日常执业过程中有一类常见咨询问题,就是随着离婚率升高,对于未成年孩子的姓名变更问题日渐凸显,因为一般情况下孩...
    2b89364d4208阅读 2,027评论 0 1