美文网首页
2018-10-30表单标签,css基础选择器

2018-10-30表单标签,css基础选择器

作者: d_d_z | 来源:发表于2018-10-30 17:31 被阅读0次

一、表单标签

<!--

1,表单标签: <form action="" method="">

这个标签作为一个容器,来收集和提交这个标签和其他标签的数据,一般不会单独使用

action属性: 设置提交路径(接口)

method属性: 设置请求方式(post/get)

-->

<form action="" method="get">

</form>

<!--

  2,input标签 ---- 单标签

可单独使用,也可以和form配合使用

type属性: 这个值不一样,input功能就不一样。text,

  -->

<!--

a,文本输入框,text    或 密码输入框,password

type = text    或 password

name: 随便命名,用来对输入内容进行说明。

  提交数据时以name:value形式,name作为发送请求的参数,value为值

value: 指向文本输入框中的内容

palceholder: 占位符(提示信息)

maxlength: 限制输入框的做大字符个数

-->

<input type="text" name="uername" id="" value="张三" placeholder="输入用户名" />

<p>

<input type="text" name="tel" id="" value="" placeholder="输入用户名电话" />

<p></p>

<input type="password" name="" />

<!--

b,单选按钮

type: radio

name: 同一类信息,name需要设置同一个值,单选

value: 需要设置值,提交时 提交选中按钮的值和意义,传参

checked: 设置 默认选中状态

-->

<p>性别</p>

<input type="radio" name="sex" id="" value="男" checked="checked"/>男

<input type="radio" name="sex" id="" value="女" />女

<input type="radio" name="sex" id="" value="人妖" />人妖

<!--

c,复选按钮

type: checkbox

name: 同一类信息,name需要设置同一个值,多选

value: 需要设置值,提交时 提交选中按钮的值和意义

checked: 设置 默认选中状态

  -->

<p>爱好</p>

<input type="checkbox" name="hobby" id="" value="羽毛球" />羽毛球

<input type="checkbox" name="hobby" id="" value="跑步" />跑步

<input type="checkbox" name="hobby" id="" value="健身" />健身

<input type="checkbox" name="hobby" id="" value="游泳" />游泳

<input type="checkbox" name="hobby" id="" value="徒步" />徒步

<!--

d,普通按钮

  value: 设置按钮上的文字

  禁用属性: disabled = “disabled”

  -->

  <p>点我啊</p>

  <input type="button" name="" id="" value="点我啊"  disabled = “disabled”/>

<!--

e,提交按钮

  type: submit

  可以自动提交当前form中所有设置了name属性的标签的值

  -->

  <input type="submit"  />

  <!--

  f,重置标签

  type: reset

  可以将当前form标签内 所有标签设置的初始值

  -->

  <input type="reset" / />

  <!--

禁用属性: disabled = “disabled”

-->

二、下拉菜单

1,下拉菜单:select

name: 提交时来区分不同的数据

value: 提交时提交的具体数据

内容: 显示部分(只能是文字)

selected: 设置默认选中

-->

2,多行文本域 textarea

输入的内容 可以多显示

rows: 设置一屏能显示几行

cols: 设置显示的列数

内容: 相当于value

-->

3、

<!--

div和span标签都是无语义的标签。一般来对网页的标签进行分组和分块用

一个div占一行,  多个span可以占一行

-->

三、css基础

<!--

1,什么是css

css 标准,是web表现标准。专门用来对网页标签进行布局和设置样式的一门语言。

目前用css3,又叫样式表

常用css属性

color

颜色值:a,颜色英语单词,b,#颜色值对应的6位16进制值(#ff0000),c,rgb(r,g,b);rgba(r,g,b,alpha),alpha透明度0-1,0代表透明

background-color

width

height

2,基本语法

选择器{属性: 属性值; 属性2: 属性值2; ...}

说明: 选择器: 用来选中/确定需要设置样式的标签

  {}: 固定写法

  属性: css支持/提供的属性,大约200多个

  属性值: 根据属性赋值的不同,如属性的只是用来表示大小数字,后必须加单位,例,px(像素),em(空格)

  属性和属性值之间用冒号隔开,多个属性用分号隔开,除特殊情况 属性间无序

3,在哪写css

内联样式: 将样式表写在标签的style内

内部样式: 将样式表写在head中的style标签

外部样式: 将样式表写在外部的css文件中,然后在head中通过link标签(导入外部文件的标签)导入

内联优先级最高,内部外部后写的 覆盖先写的

特点,用哪种:

内联--只对一个标签有效

内部--只作用当前 html 有效

外部--作用于所有导入的 html文件

<!--  link标签

link标签: 导入外部文件

rel属性: 说明导入文件的功能,stylesheet(添加样式表),icon(设置网页图标)

type属性: 对导入文件类型说明:文件后缀、类型

href属性: 导入文件地址

-->

四、选择器

<!--

常用选择器:

元素、id、class选择器、群组、父子选择器、通配符

1,元素选择器: 将标签名作为选择器,选中指定的标签

用法: 标签名{}

2,id选择器: 将标签id属性作为选择器,选中id值对应的标签

  用法: #id值{}

3,class选择器: 将标签class属性作为选择器,选中class值对应的标签

用法: .class值{}

4,群组选择器: 多个选择器用逗号隔开作为一个选择器,同时选中所有选择器对应的标签

  a,p{}        --- 选中所有a标签,p标签

  .p1,img,#p2  --- 选中所有class值是p1,img标签,id值是p2

5,父子选择器: 多个选择器用空格隔开作为一个选择器,按顺序依次往后找,找到最后一层选择器对应的标签

  div div p{} --- 选中div里div中的p标签

  #d1 a      --- 选中id是d1中的a标签

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

五、伪类选择器

<!--

伪类选择器: 是选中某个标签的不同状态,可以给不同状态设置不同样式

1,link

标签:link -- 标签初始状态(a标签的初始状态指a对应的网址一次都没有访问成功的状态)

例:  a:link{}  ;  p:link{}  ; #a1:link{}  ;  .a2:link,#a1:link{}

2,visited  -- 标签访问后的状态

3,hover    -- 鼠标悬停在标签上对应的状态

4,active    -- 标签激活(按住不放)时的状态

注意:使用时,要遵守 爱恨原则(LoVeHAte) 按顺序写,不按时可能有些样式不生效

选择器的优先级:权重值 越大,优先级 越大。 优先级一样,谁在后面 谁有效。 除内联,内联最高

元素选择器权重值 :  0001 -- 1

class权重值:      0010 -- 2

id权重值:          0100 -- 4

伪类权重值          0001 --  1

群组权重值:        单独看每个选择器的权重

父子权重值:        所有选择器权重之和

相关文章

网友评论

      本文标题:2018-10-30表单标签,css基础选择器

      本文链接:https://www.haomeiwen.com/subject/jyzgtqtx.html