Day20 html & css

1 html

1.1 表单标签(form)

专门用来进行用户信息收集的一个标签，一般要结合表单相关的标签来使用才有意义。
表单相关标签：input、select、textarea等。主要提供form中子标签的内容的提交和重置功能

action属性：提交路径(接口)
method属性：提交方式(post/get)

<form action="" method="post">
        </form>

1.2 input标签

1.2.1 input标签介绍

input标签是表单相关标签，可以在form标签中使用，也可以单独使用

type: input标签会因为type的不同，功能完全不一样
name: 区分；提交（相当于的字典的key）要不要给这个属性赋值，主要看:
- 需不要区分不同的内容
- 需不需要提交这个input标签的值
value: value的意义会根据type值的不同而不一样；但是表单提交的时候提交的都是value的值

1.2.2 input type属性

文本输入框 - text
- value属性 - 给这个属性赋值是在设置输入框的默认值; 修改输入框中的内容，会改变这个属性的值
- placeholder - 输入框为空的时候的默认显示信息
- maxlength - 输入框最多能输入的内容的长度
密码输入框 - password
- value属性 - 给这个属性赋值是在设置输入框的默认值; 修改输入框中的内容，会改变这个属性的值
- placeholder - 输入框为空的时候的默认显示信息
- maxlength - 输入框最多能输入的内容的长度
单选按钮 - radio
- name属性 - 如果多个选项是一组数据必须保证它们的name属性值一样才能做到多个选项单选
- value属性 - 不能显示，只能用来提交的
- checked属性 - 给这个属性赋值为checked让按钮处于默认选中状态
- 补充: 可以通过将label的for属性和input的id属性保持一致，让label和input进行关联
复选按钮 - checkbox
- name属性 - 如果多个选项是一组数据必须保证它们的name属性值一样
- value属性 - 不能显示，只能用来提交的
- checked属性 - 给这个属性赋值为checked让按钮处于默认选中状态
普通按钮 - button
- value属性 - 按钮上显示的内容
- 补充：button标签可以通过button标签实现图片按钮功能
重置按钮 - reset
- 重置当前重置按钮所在的form标签中的所有的相关标签的值
提交按钮 - submit
- 以‘name=value’的方式提交当前form标签的内容

<form action="" method="get">
            <font>账号:</font>
            <!--1)text -->
            <input type="text" name="tel"  value="" placeholder="请输入手机号码" maxlength="6"/><br />
            <!--2)password -->
            <font>密码:</font>
            <input type="password" name="pw" id="" value="123456" maxlength="10"/><br />
            
            <!--3)单选按钮 - radio -->
            <font>性别:</font>
            <input type="radio" name="sex" id="sex1" value="男" checked="checked" /><label for="sex1">男</label>
            <input type="radio" name="sex" id="sex2" value="女" /><label for="sex2">女</label>
            <br />
            
            <!--4)复选按钮 - checkbox -->
            <input type="checkbox" name="interest" id="in1" value="餐饮" /><label for="in1">餐饮</label>
            <input type="checkbox" name="interest" id="in2" value="游戏" /><label for="in2">游戏</label>
            <input type="checkbox" name="interest" id="in3" value="旅游" /><label for="in3">旅游</label>
            <br /><br />
            
            
            <!--5)普通按钮 - button-->
            <input type="button"  id="" value="登录" />
            <button>登录</button>
            <button><img src="img/aaa.ico"/></button>
            <br /><br />
            
            <!--6)重置按钮 - reset-->
            <input type="reset" name="" id="" value="重置" />
            
            <!--7)提交按钮 - submit-->
            <input type="submit" value="提交"/>
            
            <!--8.其他类型-->
            <input type="color" name="color" id="" value="" />
            <input type="date" name="date" id="" value="" />
            <input type="datetime-local" name="date-time" id="date-time" value="" />
            <input type="file" name="file" id="" value="" />
        </form>

1.3 下拉菜单

select标签 - 整个下拉列表
option标签 - 列表中的选项
optgroup标签 - 一个列表选项分组，通过label属性值来设置分组名(只是在显示上对选项进行分区，不影响提交结果)

<form action="" method="get">
            <select name="province">
                <option value="四川">四川省</option>
                <option value="湖南">湖南省</option>
                <option value="湖北">湖北省</option>
                <option value="福建">福建省</option>
            </select>
            <select name="city">
                <option value="成都">成都</option>
                <option value="南充">南充</option>
                <option value="绵阳">绵阳</option>
                <option value="宜宾">宜宾</option>
            </select>
            <br />
            <br />
            
            <select name="city2">
                <optgroup label="四川省"></optgroup>
                <option value="成都">成都</option>
                <option value="南充">南充</option>
                <option value="绵阳">绵阳</option>
                <option value="宜宾">宜宾</option>
                
                <optgroup label="广东省"></optgroup>
                <option value="广州">广州</option>
                <option value="中山">中山</option>
                <option value="珠海">珠海</option>
                <option value="佛山">佛山</option>
                <option value="惠州">惠州</option>
            </select>
            <input type="submit" value="提交"/>
        </form>

1.4 多行文本域 - textarea

多行文本域提供一个可以换行输入的输入框

rows属性 - 行数，影响输入框的默认高度
cols属性 - 列数, 影响输入框的宽度
maxlength属性 - 输入的内容的最大长度
autofocus属性 - 值设置为autofocus,页面刷新和加载的时候自动成为焦点

<form action="" method="get">
            <textarea autofocus="autofocus" name="comment" rows="10" cols="200" maxlength="200" placeholder="输入你的意见"></textarea>
            
            <input type="submit" value="提交"/>
        </form>

1.5 无语义标签

div标签和span标签都是无语义标签, 用于对网页中的内容分块和分组

<div id="">
            <a href="https://www.baidu.com">百度一下</a>
            
        </div>
        <div id="">
            <a href="https://www.baidu.com">百度一下</a>
            
        </div>
        <span id="">
            <a href="https://www.baidu.com">百度一下</a>
            
        </span>
        
        <span id="">
            <a href="https://www.baidu.com">百度一下</a>
            
        </span>

2 css基础

2.1 css介绍

2.1.1 什么是CSS

CSS又叫样式表(层叠样式表),是web标准中的表现标准，专门用来针对网页中内容的布局和样式，现在绝大部分使用的是CSS3

2.1.2 怎么写CSS

语法：选择器{属性1:属性值1;属性2:属性值2}
说明
- 选择器 - 选中需要设置样式的标签; 在内联样式表中选择需要省略
- {} - 固定写法
- 属性 - 属性是以'属性:属性值'的形式成对儿出现，多个属性要用分号隔开
- 值 - 如果是数字表示大小，数字后边必须加单位: px(像素), em(空格数)
补充：颜色值
- 颜色的英文单词
- 用（# + 十六进制颜色值）表示
- rgb(r,g,b) rgb颜色: r-red(0-255), g-green(0-255), b-blue(0-255)
- rgba(r,g,b,透明度) 透明度 - 0(完全透明)~1(完全不透明)
  - rgb(255,0,0) == #ff0000 == red
  - rgb(0,255,0) == #00ff00 == green
  - rgb(0,0,0) == #000000 == black
  - rgb(255,255,255) == #ffffff = white

2.1.3 写的位置

内联样式表: 将样式写在标签的style属性中，只作用于一个固定的标签
内部样式表: 将样式写在style标签中，作用于当前html中所有标签
外部样式表: 将样式写css文件中，然后在html中通过link标签导入，可以作用于所有的html中的所有标签
复用性: 外部>内部>内联
优先级: 内联样式表的优先级不管什么情况都是最高、内部和外部的优先级看顺序，谁后写谁优先级高

2.1.4 常见属性

color : 设置标签中的字体颜色
background-color : 设置标签的背景颜色
width : 标签宽度
height : 标签高度

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        
        <!--3.外部样式-->
        <link rel="stylesheet" type="text/css" href="css/01-test1.css"/>
        
        <!--2.内部样式-->
        <style type="text/css">
            /*这个里面写css代码*/
            div{
                color: orange;
                background-color: darkolivegreen;
            }
            h1{
                color: purple;
                background-color: yellow;
            }
        </style>
        
        
        
    </head>
    <body>
        <!--1.内联样式-->
        <p style="color: red; font-size: 30px;">hello CSS1</p>
        <p>hello CSS2</p>
        <div id="">
            我是div1
        </div>
        
        <h1>我是标题</h1>
        
        <div id="">
            我是div2
        </div>
    </body>
</html>

2.2 选择器

2.2.1 什么是选择器

通过选择器选中标签

2.2.2 选择器的写法

元素选择器(标签选择器)
直接将标签名作为选择器, 选中当前html中对应的所有标签。
例如: a{} - 选中当前html中所有的a标签
id选择器
所有标签都有一个id属性，值自己设置，但是要保证一个html中id值唯一
将标签的id属性的值前面加#作为选择器, 选中id属性值是指定值的标签
例如: #a - 选中当前html中id值是a的标签
类选择器(class选择器)
将标签的class属性的值前面加.作为选择器, 选中class属性值是指定值的标签
例如: .a - 选中当前html中class值是a的所有标签
通配符
将*作为选择器，选中当前html中所有的标签
群组选择器
将多个选择器用逗号隔开来作为一个选择器，选中每个独立选择器对应的标签
- p,a{} - 选中所有的p标签和a标签
- div,#a{} - 选中所有的div标签和id值是a的标签
- .c1,#p1,.c2{} - 选中id值是p1，class值是c1和c2的所有标签
后代选择器
将多个选择器用空格隔开来作为一个选择器
div p{} - 选中所有div标签中的p标签

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                /*width: 200px;*/
            }
            /*1.元素选择器*/
            p{
                color: red;
                background: yellow;
            }
            
            /*2.id选择器*/
            #a{
                font-size: 30px;
            }
            /*3.class选择器*/
            .c1{
                background-color: yellowgreen;
            }
            .c2{
                font-size: 40px;
            }
            
            /*4.群组选择器*/
            a,font{
                color: fuchsia;
            }
            font,.c3{
                background-color: lightblue;
            }
            
            /*5.后代选择器*/
            div label{
                color: darkblue;
            }
            div div label{
                background-color: burlywood;
            }
            
            #div1 label{
                color: red;
            }
            
        </style>
        
    </head>
    <body>
        <!--class属性:
            1.一个html中相同的class值可以有多个
            2.同一个标签的class属性值可以多个(多个之间用空格隔开)
        -->
        <p class="c1">我是段落1</p>
        <div id="">
            <div id="">
                <p id="a">我是段落2</p>
                
                <!--这儿的h1标签有两个class值，分别是c1和c2-->
                <h1 class="c1 c2">我是标题1</h1>
            </div>
        </div>
        <p class="c2">我是段落3</p>
        
        <!--=========================================================-->
        <hr />
        <a class="c3" href="">超链接1</a>
        <h2>我是标题1</h2>
        <div>
            <a href="">超链接2</a>
            <div id="">
                <a href="">超链接3</a>
            </div>
        </div>
        <a href="">超链接4</a>
        <h2 class="c3">我是标题2</h2>
        
        <div id="">
            <font>我是font1</font>
        </div>
        <font>我是font2</font>
        
        <!--==============================================================-->
        <hr />
        <label for="">我是label1</label>
        <div id="">
            <label for="">我是label2</label>
            <div id="">
                <label for="">我是label3</label>
            </div>
        </div>
        <div id="div1">
            <label for="">我是label5</label>
            <div id="">
                <label for="">我是label6</label>
            </div>
        </div>
        
        <label for="">我是label4</label>
    </body>
</html>

2.3 伪类选择器

2.3.1 什么是伪类选择器

普通选择器选中的是html中不同的标签；伪类选择器选中的是标签的不同状态

2.3.2 语法

普通选择器:状态{属性1:属性值1;属性2:属性值2;...}

link - 初始状态,对于a标签来说，link对应的状态是a标签中的连接从来没有成功访问过;(一般只在a标签进行设置)
visited - 超链接成功访问过的状态
hover - 鼠标悬停在标签上对应的状态（不只针对超链接，其他标签也常用）
active - 鼠标按住标签不放对应的状态(主要作用在超链接和按钮)

2.3.3 选择器的权重值

权重越大优先级越高, 但是内联样式表的优先级永远最高

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

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        
        <style type="text/css">
            /*1)link*/
            a:link{
                color: rgb(150,150,150);
            }
            /*#a1:link{}*/
            a:visited{
                color: green;
            }
            
            a:hover{
                color: red;
                font-size: 30px;
            }
            p:hover{
                background-color: lightgoldenrodyellow;
                
            }
            a:active{
                color: blueviolet;
            }
            button:active{
                background-color: lightseagreen;
            }
            
            .h1{
                color: blue;
            }   
            h1{
                color: red;
            }
            
            #h1{
                color: green;
            }
            div #h1{
                color: yellow;
            }
            
            #div2 #div1 #h1{
                background-color: hotpink;
            }
                
        </style>
        
    </head>
    <body>
        <div id="div2">
            <div id="div1">
                <h1 style="background-color: yellowgreen;" id="h1" class="h1">我是标题</h1>
            </div>
        </div>
        
        <a id="a1" href="https://www.baidu.com">百度一下</a>
        <p>段落</p>
        <button>按钮</button>
        <a href="04-CSS基础.html">打开选择器</a>
    </body>
</html>

Day20 html & css

Day20 html & css

1 html

1.1 表单标签(form)

1.2 input标签

1.2.1 input标签介绍

1.2.2 input type属性

1.3 下拉菜单

1.4 多行文本域 - textarea

1.5 无语义标签

2 css基础

2.1 css介绍

2.1.1 什么是CSS

2.1.2 怎么写CSS

2.1.3 写的位置

2.1.4 常见属性

2.2 选择器

2.2.1 什么是选择器

2.2.2 选择器的写法

2.3 伪类选择器

2.3.1 什么是伪类选择器

2.3.2 语法

2.3.3 选择器的权重值

相关阅读更多精彩内容

友情链接更多精彩内容