HTML和CSS

作者: 葡萄柚子茶 | 来源:发表于2018-09-18 19:22 被阅读0次

一.表单标签

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

2.input标签单标签
根据type属性值的不同,决定input标签的样式
a.type属性默认是text:文本输入框
1)name属性:区分不同的input对应的值
2)value属性:input标签中的值,相当于输入框的内容(文本输入框输入的内容就是value的值)
提交input中的数据给服务器的时候,是以name值=value值来提交的
3)placeholder属性:占位符(输入框的提示信息)
4)maxlength属性:约束输入框能输入的字符最大个数

b.密码输入框
type属性设置为password
注意:value值是输入框中输入的内容

c.单选按钮
type属性设置为radio
注意:
1.value值:设置为这个按钮选中后提交对应的值
2.name值:如果多个单选按钮只选一个,那么这些按钮对应的name值必须一致
3.一组(name值一样)单选按钮在提交的时候只提交被选中的按钮的name和value值
4.checked属性:设置默认选中

d.复选按钮
type属性设置为checkbox
注意:name值同一组的数据对应的name值一样

e.普通按钮
type属性设置为button
value值:按钮上显示的内容

f.提交按钮
type属性设置为submit
自动将当前form标签中设置了name属性的input标签对应的值通过method方式提交给action对应的接口

g.重置按钮
type属性设置为reset
将当前form标签中的input标签的值回到初始状态

h.文件域
type="file"

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
              <form action="" method="get">
#文本输入框
      <span>账号:</span>
<input placeholder="账号"  type="text" name="username" id="" value="" />
    <span>手机号:</span>
<input placeholder="手机号"  type="text" name="tel" id="" value="" />
 
#密码输入框          
 <input placeholder="密码"  type="password" name="password"  value="" />

#单选按钮
<input checked="" type="radio" name="sex" id="" value="man" /><span>男</span>
<input type="radio" name="sex" id="" value="woman" /><span>女</span>

#复选按钮
<input type="checkbox" name="hobby" id="" value="睡觉" /><span>睡觉</span>
<input type="checkbox" name="hobby" id="" value="吃吃吃" /><span>吃吃吃</span>
<input type="checkbox" name="hobby" id="" value="买买买" /><span>买买买</span>
<input type="checkbox" name="hobby" id="" value="看电影" /><span>看电影</span>

#普通按钮   
<input type="button" name="" id="" value="登录" />

#提交按钮
<input type="submit" name="" id="" value="提交" />

#重置按钮
<input type="reset" name="" id="" value="重置" />

#文件域
<input type="file" name="icon" id="" value="" />

</form>
    </body>
</html>

image.png

二.下拉,多行文本,按钮

1.下拉菜单:select标签
下拉和多行文本域可以放在form标签中用于收集信息
一个select标签对应一个下拉菜单,菜单中的选项要通过option来列举
selected属性:设置默认被选中的选项

#下拉菜单
<select name="city">        
    <option value="成都">成都</option>
    <option value="北京" selected="selected">北京</option>
    <option value="重庆">重庆</option>
    <option value="大连">大连</option>
</select>
#对下拉菜单进行分组
#可以通过optgroup标签对下拉菜单进行分组,通过label属性对分组进行命名
<select name='city'>
        <optgroup label="四川省">
            <option value="成都">成都</option>
            <option value="德阳">德阳</option>
            <option value="乐山">乐山</option>
            <option value="眉山">眉山</option>
            <option value="自贡">自贡</option>
        </optgroup>
        
        <optgroup label="广东省">
            <option value="广州">广州</option>
            <option value="深圳">深圳</option>
            <option value="中山">中山</option>
            <option value="佛山">佛山</option>
            
        </optgroup>
</select>

2.多行文本域:textarea标签
name:提交的数据对应的名字
rows:默认一屏的行数
cols:默认的列数
placeholder:设置占位符
disabled:禁用
maxlength:约束能输入的最大的字符个数

<textarea maxlength="200" placeholder="200字以内" name="message" rows="10" cols="20"></textarea>

3.按钮:button标签

<!--文字按钮-->
<button>注册</button>
<!--图片按钮-->
<button><img src="img/1.jpg"/></button>

image.png

三.div和span

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

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

四.CSS基础

CSS是web标准中的表现标准,用来规定网页上内容的布局和样式(css又叫样式表)目前广泛使用的是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)颜色:
a.颜色对应的英语单词,
b.#加RGB对应的16进制值(一个颜色值对应2位16进制),
c.直接使用RGB值:rgb(R,G,B),rgba(R,G,B,Alpha透明度) R,G,B的取值范围是0-255,Alpha:0-1

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

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>     
        <!--外部样式--> 
        <link rel="stylesheet" type="text/css" href="css/04-CSS基础.css"/>                
        <!--内部样式表-->
        <style type="text/css">
            h1{
                background-color: rgba(0,255,0,0.2);
                color: lightgreen;
            }
            a{
                font-size: 35px;
            }
            
        </style>        
    </head>
    <body>
        <!--内联样式表-->
        <p style="background-color: cornflowerblue;color: yellow;">样式表的内容</p>
        <p style="font-size: 30px;">样式表的语法</p>      
        <h1>我是标题1</h1>
        <h1>我是标题2</h1>      
        <a href="">百度一下</a>     
        <img src="img/1.jpg"/>      
    </body>
</html>

image.png

五.选择器

一:选择器
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.通配符:直接将作为选择器,选中当前页面中所有的标签

二:选择器的优先级
通过不同的选择器选中了同一个标签,并且设置了同一个属性,谁的优先级高,谁有效,看谁的优先级高,就看谁的权重值大,权重值是一样的情况下,谁后写,谁的优先级高
1.伪类选择器:0001
2.元素选择器的权重:0001
3.class选择器:0010
4.id选择器:0100
5.群组选择器:直接看单独每一个的权重
6.包含选择器:多个选择器的权重和
7.通配符:0001

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

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            /*注意:在这个标签中写的代码是CSS代码*/
            /*元素选择器*/
            a{
                color: deepskyblue;
            }
            /*id选择器*/
            #a1{
                background-color: crimson;
            }
            /*class选择器*/
            .c1{
                color: silver;
            }
            
            /*群组选择器*/
            a,p{
                font-size: 20px;
            }
            
            /*包含选择器*/
            div .c1 p{
                background-color: pink;
            }
</style>
</head>
    <body>
        <p id="p" class="p1">选择器的权重</p>
        <a class="c1" href="">超链接1</a>
        <div id="">
            <a href="">超链接2</a>
        </div>
        <div id="">
            <div id="">
                <a id="a1"  href="">超链接3</a>
            </div>          
        </div>  
        <p id="a1">我是段落一</p>
        <h1 class="c1">我是标题1</h1>       
    </body>
</html>

六.伪类选择器

前面的元素选择器,id选择器,class选择器选中的都是标签,伪类选择器是选中标签的某个状态

伪类选择器:选中某个标签的不同状态(一般适用于超链接和按钮)
1.语法----标签:状态
标签:状态{}
说明:
a.状态:
link:初始状态(a标签对应的初始状态是没有访问成功过对应的状态)
visited:访问后的状态(适用于a标签)
hover:鼠标悬停在标签上对应的状态
active:超链接被激活---鼠标(按下)按住不放对应的状态
focus:成为焦点(在输入框中用的比较多)
b.标签:可以是通过不同的选择器去选中
2.爱恨原则:LoVeHAte-先爱后恨
如果想要给一个标签同时link,visited,hover,active中的两个或者两个以上的状态设置样式,必须遵守爱恨原则
(如果不按爱恨原则可能会出问题,如果按照爱恨原则肯定不会出问题)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        
        <style type="text/css">
            a:link{
                color: grey;
            }
            a:visited{
                color: #00BFFF;
            }
            #a1:hover{
                color: red;
                font-size: 20px;
            }
            a:active{
                color: yellow;
            }
        input:focus{
            outline: none;
        }
        </style>        
    </head>
    <body>
        <a href="http://www.baidu.com">百度一下</a>
        <a id=a1 href="http://www.baidu.com">新浪</a>
        <p>大家好</p>
        <input type="text" name="" id="" value="" />
    </body>
</html>

HTML和CSS

一.表单标签

二.下拉,多行文本,按钮

三.div和span

四.CSS基础

五.选择器

六.伪类选择器

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读