web_day2总结

1.表单标签(form)

专门用来进行用户信息收集的一个标签,一般要结合表单相关的标签来使用才有意义
表单相关标签:input, select, textarea
主要提供form中子标签的内容的提交和重置

action属性:提交路径(接口)
method属性:提交方式(post/get)

1.1.input标签

input标签是表单相关标签,可以在form标签中使用,也可以单独使用
input标签会因为type的不同,功能就完全不一样
name -- 用于区分不同的输入框 / 提交(相当于字典的key)

1.文本输入框 -- text (浏览器的搜索框,不能换行)
2)name -- 用于区分不同的输入框 / 提交(相当于字典的key) --
要不要给name属性赋值: 主要看:1)需不需要区分不同的内容 2)需不需要提交这个input标签的内容
3)value -- value的一样会跟type值的不同不一样;但是表单提交的时候提交的都是value的值
value属性 - 给这个属性赋值是在设置输入框的默认值,修改输入框中的内容,会改变value的值
通过name=value来提交数据给接口

  1. placeholder -- 输入框为空的时候的默认显示信息
    5)maxlength -- 输入框最多能输入的内容的长度

2.密码输入框 -- type='password'
a.value -- 给这个属性赋值是在设置输入框的默认值,修改输入框中的内容,会改变value的值
b.placeholder -- 输入框为空的时候显示默认信息
c.maxlength -- 输入框最多能输入的内容的长度

3.单选 -- radio
a.name属性:如果多个选项是一组数据必须保证她们的name属性值一样才能做到对个选项button
b.value属性:不能显示,只能用于提交
c.checked属性 - 给这个属性赋值为checked让按钮处于默认选中状态

补充:
可以通过将label的for属性和按钮的id属性保持一致,让lable和input进行关联

4.复选按钮 -- checkbox

5.普通按钮 - button
value属性 -- 按钮上显示的内容
补充:button标签 -- 可以添加图片

6.重置 -- reset
重置当前reset按钮所在的form标签中的所有的相关标签的值

7.提交按钮 - submit
以name=value值的方式提交当前form标签的内容

1.2. select标签 - 整个下拉列表

option标签 - 列表中的选项
optgroup - 一个列表选项分组,通过label属性来设置分组名
只是在显示上分区,不影响提交结果

2.多行文本域 -- textarea
提供一个可以换行输入的输入框
rows属性: 行数,影响输入框德默认高度
cols属性 - 列数,影响输入框的高度
maxlength属性 - 输入的内容长度

div标签和span标签都是无语义标签,做标签分组
使用div一般用于对网页中的内容分块和分组

2.css

1.css又叫样式表(层叠样式表),是web标准中的表现标准,专门用来针对网页中内容的布局和样式
现在使用的是CSS3

2.怎么写css
a.语法
选择器{属性1:值1;属性2:值2}

b.说明
选择器 {}- 选中需要设置样式的标签;在内联样式表中选择需要省略
{} -- 固定写法
属性 --属性是以‘冒号:属性值’的形式成对出现。多个属性之间用;隔开
值 -- 如果是数字表示大小,数字后面必须加单位(px 像素 / em空格数)
颜色值:颜色的英文单词;#十六进制的颜色值;RGB(R,G,B); rgba(r,g,b,a透明度)
rgb颜色:r-red(0-255) g-green(0-255) b-blue(0-255)
rgb(255,0,0) == #ff00000 == red
rgb(0,255,0) == #000000 == green
rgb(0,0,0) == #000000 ==black
rgb(255,255,255) == #fffffff = white
透明度 - 0(透明度) ~ 1(不透明)

3.写在哪
1)内联样式表:将样式写在标签的style属性中
只作用于一个固定的标签

2)内部样式表:将样式写入style标签中
作用于当前html文件中的标签

3)外部样式表:将样式写在css文件中,然后在html中通过link标签导入
作用于所有的html中的标签

复用性:外部>内部>内联
优先级:内联样式表的优先级不管什么情况都是最高;内部和外部的优先级看顺序,后写的优先级高

4.常见属性
color -- 设置标签中的字体颜色
background-color:设置标签的背景颜色
font-size:字体大小
width:标签宽度
height:标签高度

1.什么是选择器
通过选择器选中标签

2.选择器的写法
1)元素选择器(标签选择器)
直接将标签名作为选择器,选择当前html中对应的所有标签。
例如:a{} - 选中html中所有的a标签

2)id选择器
(所有标签都有一个id属性。值自己设置,但是要保证一个html中id的值唯一)
将标签的id属性的值前面加#作为选择器,选中id属性值是指定值的标签

  1. 类选择器(class选择器)
    将标签的class属性的值前面加.作为选择器,选中class的属性值时指定值的标签
    例如:.a -- 选中当前html中class值是a的所有标签

4)通配符
将*作为选择器,选中当前html中所有的标签

5) 群组选择器
将多个选择器用逗号隔开来作为一个选择器,选中每个独立的选择器对应的标签
p,a{} -- 选中所有的p标签和a标签
div, #a -- 选中所有的div标签和id值是a的标签
#p1, .c1, .c2 -- 选中id值是p1,class值是c1和c2的标签

6) 后代选择器
将多个选择器用空格隔开来作为一个选择器
div p{} -- 选中所有div标签中的p标签

3.伪类选择器

1.普通选择器选中的是html中不同的标签;伪类选择器选中的是标签的不同状态

2.语法
普通的选择器:状态{属性:属性值;属性:属性值}

1)link - 初始状态,对于a标签来说,link对应的状态是a标签中的未打开状态(一般只在a标签中进行初始)
2)visited -- 超链接成功访问过的状态
3)hover -- 鼠标悬停在标签上对应的状态(不止针对超链接,其他标签也一样)
4)acctive -- 激活状态,鼠标按住标签不放对应的状态(主要作用在超链接和按钮)

3.选择器的权重
权重越大优先级越高, 内联样式的优先级最高
元素选择器的权重:0001 == 1
class选择器的权重:0010 == 2
id选择器的权重:0010 ==4
伪类选择器的权重:0001 == 1
群组选择器的权重:看单独每个选择器的权重
后代选择器的权重:所有选择器的权重之和

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1. 表单标签(form) 专门用来进行用户信息收集的一个标签,一般要结合表单相关的标签来使用才有意义 表单相关标...
    墨2019418阅读 233评论 0 0
  • 浏览器与服务器的基本概念 浏览器(安装在电脑里面的一个软件) 作用: ①将网页内容渲染呈现给用户查看。 ②让用户通...
    云还灬阅读 1,179评论 0 0
  • 概述 在网易云课堂学习李南江老师的《从零玩转HTML5前端+跨平台开发》时,所整理的笔记。笔记内容为根据个人需求所...
    墨荀阅读 2,406评论 0 7
  • HTML标签解释大全 一、HTML标记 标签:!DOCTYPE 说明:指定了 HTML 文档遵循的文档类型定义(D...
    米塔塔阅读 3,408评论 1 41
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 27,917评论 1 45