2018-09-18HTML和CSS

作者: Smilebest | 来源:发表于2018-09-18 21:17 被阅读6次

01-表单标签

1.表单标签：form标签
表单标签用来收集用户信息的，是一个容器，用来获取这个标签中相应的其他标签（input标签）的数据
可以将收集到的数据通过method对应的方式，发送请求（发送给action对应的接口）
2.input标签
单标签
a.type属性：决定input标签的样式
text（默认）：文本输入框
password:密码输入框
radio:单选按钮
注意：input标签放在form外边同样可以使用，知识不能直接使用重置和提交功能
_a.文本输入框：（text）
1.name属性：区分不同的input对应值，对标签的显示没有影响
2.value属性：input标签中的值，相当于内容（文本输入框输入的信息就是value的值）提交input中的数据的数据给服务器的时候，是以name值=value值来提交的
3.placeholder属性：占位符（输入框的提示信息）
4.maxlength:约束输入数据的最大长度

<input type="text" name="username" value="" placeholder="账号" maxlength="8"/>
<input type="text" name="tel" value="" placeholder="手机号" maxlength="11"/>

_b.密码输入框：(password)
注意：value值是输入框中输入的内容

<input type="password" name="password" id="" value="" placeholder="密码" maxlength="8" />

_c.单选按钮：(radio)
注意：
1.value值：按钮选中时提交的值
2.name值：如果多个按钮只能选中一个，那么这些按钮对应name值必须一致
3.checked属性：默认选中
4.一组（name值一样）单选按钮在提交的时候只提交被选中的按钮的name值和value值

<input type="radio" name="sex" value="boy" checked="checked" /><span>男</span>
<input type="radio" name="sex" value="girl" /><span>女</span>
<br />
<input type="radio" name="marry" value="已婚"  checked="checked" /><span>已婚</span>
<input type="radio" name="marry" value="未婚" /><span>未婚</span>

_d.复选按钮：（）

<input type="checkbox" name="hobby" id="" value="basketball" /><span>basketball</span>
<input type="checkbox" name="hobby" id="" value="ping pong" /><span>ping pong</span>
<input type="checkbox" name="hobby" id="" value="badminton<" /><span>badminton</span>
<input type="checkbox" name="hobby" id="" value="football" /><span>football</span>

_e.普通按钮：（button）
value值：按钮上显示的内容

<input type="button" name="" id="" value="登录" />

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

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

_g.重置（reset）
让当前form标签中的input标签的值回到初始状态

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

_h.文件域：（file）

<input type="file" name="icon" id="" value="" />

02-下拉、多行文本和按钮

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

1.下拉菜单：select标签
一个select标签对应一个下拉菜单，菜单中的选项要通过option来列举
_a.selected属性：设置默认被选中的选项

<select name="">
    <option value="成都">成都</option>
    <option value="北京">北京</option>
    <option value="哈尔滨">哈尔滨</option>
    <option value="沈阳">沈阳</option>
    <option value="上海">上海</option>
</select>

_b.对下拉菜单进行分组
可以通过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>
        <option value="韶关">韶关</option>
    </optgroup>     
</select>

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

<textarea name="message" rows="10" cols="20" placeholder="消息"></textarea>

3.按钮：button标签
文字按钮
<button>注册</button>
图片按钮
<button><img src="img/照片.png" alt="" /></button>

03-div和span

1.div和span
div标签和span标签是空白标签，没有语义
一般用来做分组（将网页分块）
div：块级标签（一行只能放一个标签）
span：行内标签（一行可以方多个标签）
2.块级标签和行内标签
块级标签：一个标签占一行
h1-h6，p,列表标签（ul,ol，dl），table标签,hr
行内标签：一行可以放多个标签
img，a,input,select,textarea,ect.

<span>
    aaa
</span>
<div>
    <a href="">百度</a>
</div>
<div>
    <a href="">谷歌</a>
</div>

04-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）颜色：颜色对应的英语单词

加RGB对应的16进制值（一个颜色值对应2位16进制）

直接用RGB值：rgb（R,G,B），rgba(R,G,B,Alpha)R,G,B的范围（0,255）,Alpha范围（0，1）

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

<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.5);
                color:red;
            }
            a{
                font-size: 20px;
                background-color: #7FFFD4;
            }
            
            
        </style>
    </head>
    <body>
        <!--内联样式表-->
        <p style="background-color: aquamarine;color:red">样式表的内容</p>
        <p style="font-size: 20px;">样式表的语法</p>
        
        <h1>我是标题一</h1>
        <h1>我是标题二</h1>
        
        <a href="www.baidu.com">百度一下</a>
        
        <img src="img/ksnm.jpg"/>
    </body>

05-选择器

常用的选择器
一、选择器

1.标签选择器/元素选择器：将标签名作为选择器，同时选中网页中所有同类的标签
a{}---选中所有的a 标签
2.id选择器：通过在id属性值前加#，构成id选择器，选中id等于对应的值的标签
id属性：所有的标签都有id属性，（并且设置id的值唯一）

p1{}:选中id值是p1的标签

3.class选择器：通过class属性值前加点，就构成了类选择器。选中class等于对应的值得标签
.c1{}--选中
4.群组选择器：多个选择器之间用逗号隔开，这个整体作为一个选择器，选中所有的单独的选择器
a,p,#p1,.c1{}---选中所有的a标签，p标签和所有id值是p1以及所有class值是c1的标签
5.包含选择器：多个选择器之间使用空格隔开。从前往后找，找到最后一个选择器
div .c1 p{}----选中div中class是c1的标签中的p标签
6.通配符：直接将作为选择器，选中当前页面的所有标签

二、选择器的优先级
通过不同的选择器选中了同一个标签，并且设置了同一个属性，谁的优先级高，谁就有效。看谁的优先级高就看谁的权重值大
权重值一样，谁后写，谁的优先级高
伪类选择器：0001
元素选择器：0001
class选择器：0010
id选择器：0100
群组选择器：直接看单独每一个的权重
包含选择器：包含的所有选择器的权重和
通配符：0001
注意：不管选择器的权重多大，内联样式的优先级都是最高的！

<head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            /*注意：在这个标签中的代码是css代码*/
            /*1.元素选择器*/
            a{
                color: brown;
            }
            /*id选择器*/
            #a1{
                background-color: hotpink;
            }
            /*class选择器*/
            .c1{
                color: inherit;
            }
            
            a,p{
                font-size: 30px;
            }
            
            div .c1 p{
                background-color: white;
            }
            
            *{
                background-color: burlywood;
            }
            
        </style>
    </head>
    <body>
        <a class="c1" href="">超链接1</a>
        <div id="">
            <a href="">超链接2</a>
        </div>
        
        <div id="">
            <a class="c1">
                王大锤
                <p>张三丰</p>
                <div>
                    <p>李二狗</p>
                </div>
                <p>李二狗</p>
            </a>
            <div id="">
                <a href="">超链接3</a>
            </div>
        </div>
        <a id="a1">我是标题一</a>
        <p>选择器</p>
    </body>

06-伪类选择器

前面的元素选择器，id选择器，class选择器选中的都是标签
伪类选择器是选中标签的某个状态
伪类选择器：选中某个标签的不同状态（一般用于超链接和按钮）

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

<head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            a:link{
                color: gray;
            }
            
            a:hover{
                color: blue;
                font-size: 30px;
            }
            
            input:focus{
                color: red;
            }
            
        </style>
    </head>
    <body>
        <a href="http://www.baidu.com">百度一下</a>
        <br />
        <input type="text" name="" id="" value="" />
    </body>

2018-09-18HTML和CSS

01-表单标签

02-下拉、多行文本和按钮

03-div和span

04-CSS基础

加RGB对应的16进制值（一个颜色值对应2位16进制）

05-选择器

p1{}:选中id值是p1的标签

06-伪类选择器

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读