2018-09-18HTML5基础和CSS基础

一、表单标签

1.表单标签:form标签

  • 表单标签是用来收集用户信息的。是一个容器,用来获取这个标签中相应的其他标签(input标签)属性
  • 可以将收集到的数据,通过method对应的方式,去发送请求(发送给action对应的接口)

2.input标签,单标签

  • type属性:决定input标签的样式
    text(默认):文本输入框
    password:密码输入框
    radio:单项选择框
    注意:input标签放在form外边同样可以使用,只是不能直接使用重置和提交功能
a.文本输入框(text)
  • 1.name属性:区分不同的input对应值,对标签的显示没有影响
  • 2.value属性:input标签中的值
    提交input中的数据给服务器的时候,是以name值=value值来提交的
  • 3.placeholder属性:占位符(输入框的提升信息)
  • 4.maxlength属性:约束输入框能输入的字符的最大个数
b.密码输入框(password)

注意:value值是输入框中输入的内容

c.单选按钮(radio)
  • 1.value值:设置为这个按钮选中提交对应的值
  • 2.name值:如果多个按钮只能选中一个,那么这些按钮对应的name值必须一致
  • 3.一组(name值一样)单选按钮在提交的时候只提交被选中的按钮的name和value值
  • 4.checked属性:设置默认选中
d.复选按钮(checkbox)
  • 可以多项选择
e.普通按钮(button)
  • value值:按钮上显示的内容
f.提交按钮(submit)
  • 自动将当前form标签中设置了name属性的input标签对应的值通过method方式提交给action对应的借口
g.重置按钮(reset)
  • 将当前form标签中的input标签的值回到出生状态
h.文件域(file)
  • 可以选择打开文件


    
        
        
    
    
        
        
        


已婚 未婚
篮球 乒乓球 排球 足球

二、下拉菜单、多行文本、按钮

下拉和多行文本域可以放在form标签中用于收集信息

1.下拉菜单:select标签

  • 一个select标签对应一个下拉菜单,菜单中的选项要通过option来列举
  • selected属性:设置默认被选中的选项

2.对下拉菜单进行分组

  • 可以通过optgroup标签对下拉菜单进行分组,通过label属性对分组进行命名

3.多行文本域(textarea)标签

  • name:提交的数据对应的名字
  • rows:默认一屏的行数
  • cols:默认的列数
  • placeholder:设置占位符
  • disable:禁用
  • maxlength:约束能输入的最大字符个数

4.按钮(button标签)



    
        
        
    
    
        
        
        
        
        
        
        
            
        
        
        
        
        
    
    

三、div和span

  • div和span标签是空白标签,没有语义。
  • 一般弄来做分组(将网页分块)
  • div:块级标签(一行只能放一个标签)
  • span:行内标签(一行可以放多个标签)

1.块级标签和行内标签

块级标签:一个标签占一行
  • h1 - h6, p , 列表标签(ul\ol\dl), table , hr 等
行内标签:一行可以放多个行内标签
  • img, a , input, select ,textarea等


    
        
        
    
    
        
        
            abc
        
        
            abd
        
        
        
    

四、CSS基础

  • CSS(样式表)是web标准中的表现标准,用来规定网页内容的布局和样式
  • 目前广泛使用的是CSS3

1.怎么写样式表(CSS)

a.内联样式表
  • 将样式写在标签的style属性中(每个可见标签都有style属性)
b.内部样式表
  • 将样式表写在head标签中style标签里面
c.外部样式表
  • 将样式表写在CSS文件中,然后在head标签中通过link标签来倒入

注意:不管在什么情况下,内联样式表的优先级最高;内部和外部的优先级看谁后写,谁的优先级高

2.固定语法

选择器(属性1:属性值1;属性2:属性值2……)
说明:
  • a.选择器:选择器的作用是用来确定后面样式到底是给哪个/哪几个标签写的
  • b.属性:
    属性是CSS中本来就支持和拥有的属性,属性的顺序可以随便写
    属性和属性值之间使用冒号连接
    属性后面必须写分号
  • c.属性值
    1.数值:如果数值是用来表示大小,后面必须跟单位px或者%
    px -- 像素 % --- 百分比(前提是父类标签对应的宽度或者改读确定的)
    2.颜色:颜色对应的英语单词
    加RGB对应的16进制值(一个颜色值对应2位16进制)
    直接使用RGB值:rgb(R,G,B),rgba(R,G,B,Alpha) R,G,B的取值范围是0-255 a-透明度

3.常见的属性

  • color:设置字体颜色
  • background-color:背景颜色
  • width:宽度
  • height:高度
  • font-size:字体大小




    
        
        
        
        
        
        
    
    
        
        

样式表的内容

样式表的语法

我是标题1

我是标题2

百度一下

五、选择器

1.标签选择器(元素):将标签名作为选择器,同时选中网页中所有同类型的标签

  • a{} -- 选中所有的a标签

2.id选择器:通过# + id属性值前加#,就构成了id选择器。选中id等于对应的值得标签

  • id属性:所有的标签都有id属性,并且设置的值必须唯一
  • 井号# p1{} -- 选中id值是p1的标签

3.class选择器:通过在class属性值前. ,就构成了类选择器。选中class等于对应的值的标签

  • .c1{} -- 选中所有class值是c1的标签

4.群组选择器:多个选择器器中间使用逗号隔开。选中所有单独的选择器

  • a,p,#p1,.c1{} -- 选中所有的a标签,p标签和所有id是p1以及所有class值是c1的标签

5.包含选择器:多个选择器之间使用空格隔开。从前往后找,找到最后一个选择器

  • div .c1 p{} -- 选中div中class是c1的标签中的p标签

6.通配符:直接将作为选择器。选中当前页面中所有的标签

7.选择器的优先级

通过不同的选择器选中了同一个标签,并且设置了同一个属性,谁优先级高谁有效,看谁的优先级高就看谁的权重大
权重值是一样的情况下,谁后写,谁的优先级高

  • 伪类选择器:0001
  • 元素:0001
  • class:0010
  • id: 0100
  • 群组:直接看单独每一个权重
  • 包含:多个选择器的权重和
  • 通配符:0001

注意:不管选择器的权重有多高,内联样式的优先级都是最高的!






    
        
        
        
    
    
        百度一下
        
        

腾讯一下

我是标题1

六、伪类选择器

  • 前面的元素选择器、id选择器、class选择器选中的都是标签。
  • 伪类选择器是选中标签的某个状态
  • 伪类选择器:选中某个标签的不同状态(一般使用于超链接和按钮)

1语法:

  • 标签:状态{}
说明:
  • a.状态:
    link:初始状态(a标签对应的初始状态是没有访问成功过对应状态)
    visited:访问后的状态(使用a标签)
    hover:鼠标悬停在标签上对应的状态
    active:被激活对应的状态(一般用于超链接) --- 鼠标按下的时候对应的状态
    focus:成为焦点(在输入框中用的比较多)
  • b.标签:可以是通过不同的选择器去选中

2.爱恨原则:LoVeHAte - 先爱后很

如果想要给你一个标签同时给link\visited\hover\active中的两个或者两个以上的状态设置样式,必须遵守爱恨原则
(如果不按照规则可能会出现问题,如果按照肯定不会出问题)





    
        
        
        
    
    
        腾讯
        
    

你可能感兴趣的:(2018-09-18HTML5基础和CSS基础)