二阶段Day2html

一、表单标签和input标签



    
        
        
    
    
        
            
            
            
            
            
            
            
            
            
        
    
    

二、下拉菜单和多行文本



    
        
        
    
    
        
        

1.下拉菜单: select - option -

name - 提交的时候用来区分不同的数据
value - 提交的时候提交的具体数据
内容 - 显示的部分(只能是文字)
selected - 设置默认选中

        
        
        

2.多行文本域: textarea

输入的内容可以多行显示

rows - 设置一屏最多能显示的行数
cols - 设置一行的最大的列数
内容 - 相当于value

        -->
        
        
        
        
        
    
    

三、div和span



    
        
        
    
    

div和span标签都是无语义标签,一般用来对网页中的标签进行分组和分块用的
一个div占一行;多个span可以在一行显示

    
aaa
bbb
aaaaaaa bbbbbbb

四、css基础

1.什么是CSS

CSS就是web标准中的表现标准,专门用来对网页标签进行布局和设置样式的一门语言。
目前一般使用CSS3,CSS又叫样式表
常用CSS属性
color -> 设置字体颜色
background-color -> 设置背景颜色
width -> 宽度
height -> 高度

2.CSS基本语法

结构:
选择器{属性: 属性值; 属性2: 属性值2; 属性3:属性名3....}
说明:
选择器 - 用来选中/确定需要设置样式的标签
{} - 固定写法
属性 - 必须是CSS提供的属性,总共200多个
属性值 - 根据属性赋不同的值。如果属性的值是用来表示大小数字,后面必须加单位。例如:px(像素)、em(空格)
CSS中的颜色值:a.颜色的英文单词 b.#颜色值对应的6位16进制值(#ff00, #00ff00)
* c.rgb(r,g,b) rgba(r,g,b,a);r,g,b的取值范围是0-255,a表示透明度,取值范围是0-1
属性和属性值之间用冒号隔开,多个属性之间用分号隔开;属性的顺序出特殊情况外是任意的

33. 在哪儿写CSS代码

  • 内联样式:将样式表写在标签的style属性中 --- 样式只对一个标签有效
    内部样式:将样式表写在head中的style标签 --- 样式只对当前html文件中标签有效
    外部样式:将样式表写在外部的css文件中,然后在head中通过link标签导入 --- 样式可以作用于所有的html
    内联样式的优先级最高, 内部样式和外部样式谁后写,谁的优先级高 -- 后写会的属性值会覆盖先写的

-->



    
        
        

link标签
link标签 - 导入外部文件
rel属性 - 说明导入的文件的功能,stylesheet(添加样式表), icon(设置网页图标)
type属性 - 对导入的文件类型进行说明: 文件类型/文件后缀
href属性 - 导入的文件地址

        
        
        
        
        
        
        
        
        
        
    
    
        百度一下
        

我是一个段落

我是一个标题

我是一个段落2

五、CSS选择器

选择器{属性1: 属性值1;....}
选择器 - 选中需要添加样式的标签
常用的选择器:元素选择器、id选择器、class选择器、群组选择器、父子选择器、统配符

  • 1.元素选择器: 将标签名作为选择器,选中指定的标签。
    用法:标签名{}

  • 2.id选择器: 将标签中的id属性的值作为选择器,选择id值对应的标签
    用法:#id值{}

  • 3.class选择器:将标签中的class属性的值作为选择器,选中class值对应的标签
    用法:.class值{}

  • 4.群组选择器: 多个选择器用逗号隔开作为一个选择器,同时选中所有选择器对应的标签
    a,p{} -- 选中所有的a标签和p标签
    .p1, img{} -- 选中所有的img和class值是p1的标签
    #p2,#p3,p{} -- 选中所有id值是p2和p3的标签,以及所有的p标签

  • 5.父子选择器:多个选择器用空格隔开作为一个选择器,按顺序依次往后找,找到最后一层选择器对应的标签
    div div p{} -- 选中div里面的div里面的p标签
    #d1 a -- 选中id值是d1的标签中的a标签

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



    
        
        
        
        
        
    
    
        

我是段落1

我是段落11

百度一下2

我是段落2

我是段落3

我是段落4

百度一下1

六·、伪类选择器

1.伪类选择器

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

  • a.link
    标签:link{} - 选中初始状态 (a标签的初始状态指的是a对应的网址一次都没有访问成功的时候对应的状态)
    例如:a:link{}; p:link{}; #a1:link{} .a2:link, #a1:link{}

  • b.visited: 访问后的状态

  • c.hover: 鼠标悬停在标签上对应的状态

  • d.active: 鼠标按住不放对应的状态

    注意:使用伪类选择器的时候要遵守爱恨原则(LoVeHAte),如果不遵守可能会导致某些状态的样式无效

    2.选择器的优先级: 权重值越大,优先级越高。如果权重值相同,后写的优先级高

    元素选择器权重: 0001 - 1
    class选择器权重: 0010 - 2
    id选择器权重:0100 - 4
    伪类选择器权重:0001 - 1
    群组选择器权重:单独看每个选择器的权重
    父子选择器权重:所有选择器权重之和

    内联样式的优先级是最高的
    -->



    
        
        
        
        
        
    
    
        

我是段落1

第一章 第二章 第三章

你可能感兴趣的:(二阶段Day2html)