day23-html與css

一、表單標(biāo)簽和input標(biāo)簽

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <!--1.表單標(biāo)簽: form

這個(gè)標(biāo)簽是作為一個(gè)容器，來收集和提交這個(gè)標(biāo)簽中的其他相關(guān)標(biāo)簽的數(shù)據(jù)。一般不會(huì)單獨(dú)使用。
?
action屬性：設(shè)置提交路徑(接口)
method屬性：設(shè)置請(qǐng)求方式(post/get)

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

2 input標(biāo)簽

input標(biāo)簽是單標(biāo)簽
input標(biāo)簽可以單獨(dú)使用，也可以和form配合使用
type屬性：這個(gè)值不一樣，input的功能就不一樣

        
        
        <form action="" method="get">
  • 2.1 文本輸入框(type:text) 和密碼輸入框(type: password)
    type - text(明文輸入框)
    type - password (密文輸入框)
    ?
    name - 隨便命名，用來對(duì)輸入的內(nèi)容進(jìn)行說明。
    提交數(shù)據(jù)的時(shí)候以name:value形式進(jìn)行提交,name值會(huì)作為發(fā)送請(qǐng)求的參數(shù)名，value就參數(shù)值
    value - 指向的就是文本輸入框中的內(nèi)容
    placeholder - 占位符(提示信息)
    maxlength - 限制輸入框能輸入的最大的字符個(gè)數(shù)
        <input disabled="disabled" type="text" name="username" value="張三"  placeholder="用戶名" maxlength="8"/>
        <input type="text" name="tel" value="15300022703" placeholder="電話號(hào)碼"/>
        <input type="password" name="password"  value="" placeholder="密碼" maxlength="8"/>

  • 2.2 單選按鈕
    type - radio
    name - 注意：同一類信息的name需要設(shè)置成一樣的值，才能做到，選擇其中一個(gè)讓別的取消選中
    value - 需要設(shè)置值，來告訴別人選中按鈕對(duì)應(yīng)值或者意義
    checked - 設(shè)置默認(rèn)選中狀態(tài)

          <input type="radio" name="sex"  value="boy" checked="checked"/>男
      <input type="radio" name="sex"  value="girl" />女
      <input type="radio" name="sex"  value="other" />其他
      <br />
      
      <input type="radio" name="marry" id="" value="yes" checked="checked"/>已婚
      <input type="radio" name="marry" id="" value="no" />未婚
      <br />

  • 2.3 復(fù)選按鈕
    type - checkbox

name - 如果是同一類數(shù)據(jù)，name值應(yīng)該設(shè)置成一樣的
value - 需要設(shè)置值，來告訴別人選中按鈕對(duì)應(yīng)值或者意義
checked - 設(shè)置默認(rèn)選中狀態(tài)

        <input type="checkbox" name="hobby" id="" value="籃球" />籃球
        <input type="checkbox" name="hobby" id="" value="足球" />足球
        <input type="checkbox" name="hobby" id="" value="乒乓球" checked="checked"/>乒乓球
        <input type="checkbox" name="hobby" id="" value="羽毛球" />羽毛球
        <input type="checkbox" name="hobby" id="" value="排球" />排球
        <input type="checkbox" name="hobby" id="" value="網(wǎng)球" />網(wǎng)球
        <br />

  • 2.4 普通按鈕
    type - button
    value - 設(shè)置按鈕上顯示的文字
    disabled - 禁用

          <input type="button"  value="點(diǎn)我啊~"  disabled="disabled"/>
      <button>點(diǎn)我啊~</button>
      <button><img src="img/luffy2.png"/></button>
      <br />

  • 2.5 提交按鈕
    type - submit
    可以自動(dòng)提交當(dāng)前form標(biāo)簽中的所有設(shè)置了name屬性的標(biāo)簽的值

          <input type="submit" />

  • 2.6 重置按鈕
    type - reset
    ?
    可以將當(dāng)前form標(biāo)簽中所有的標(biāo)簽的設(shè)置為初始狀態(tài)的值

<input type="reset" name="" id="" value="重置" />
            
            
            
            
        </form>
        
        <form action="" method="get">
            <!--其他的input標(biāo)簽-->
            <input type="color" name="color" id="" value="" />
            <!--<input type="date" name="date" id="" value="" />-->
            <input type="datetime-local" name="time" id="" value="" />
            <input type="email" name="" id="" value="" />
            <!--<input type="file" name="" id="" value="" />-->
            <!--<input type="hidden" name="" id="" value="" />-->
            <!--<input type="image" name="img" id="" value="img/luffy1.png"/>-->
            
            <input type="submit" value=""/>
        </form>
    
    </body>
</html>

二、下拉菜單和多行文本

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        
        <form action="" method="get">

1.下拉菜單: select - option -

name - 提交的時(shí)候用來區(qū)分不同的數(shù)據(jù)
value - 提交的時(shí)候提交的具體數(shù)據(jù)
內(nèi)容 - 顯示的部分(只能是文字)
selected - 設(shè)置默認(rèn)選中

        <select name="city">
            <option value="成都">成都</option>
            <option value="重慶">重慶</option>
            <option value="北京" selected="selected">北京</option>
            <option value="上海">上海</option>
            <option value="廣州">廣州</option>
        </select>
        
        <select name="">
            <!--對(duì)下拉列表進(jìn)行分組： optgroup
                label屬性 - 設(shè)置分組名
            -->
            <optgroup label="四川省"></optgroup>
                <option value="">成都</option>
                <option>雅安</option>
                <option>德陽</option>
                <option>綿陽</option>
                <option>自貢</option>
            <optgroup label="河南省"></optgroup>
                <option value="">鄭州</option>
                <option>安陽</option>
        </select>

2.多行文本域: textarea

輸入的內(nèi)容可以多行顯示
?
rows - 設(shè)置一屏最多能顯示的行數(shù)
cols - 設(shè)置一行的最大的列數(shù)
內(nèi)容 - 相當(dāng)于value

        -->
        <textarea name="message" rows="4" cols="30" placeholder="意見...." maxlength="200">你好。。</textarea>

?
<input type="submit" value=""/>
</form>

</body>

</html>

三、div和span

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>

div和span標(biāo)簽都是無語義標(biāo)簽，一般用來對(duì)網(wǎng)頁中的標(biāo)簽進(jìn)行分組和分塊用的
一個(gè)div占一行；多個(gè)span可以在一行顯示

    <div id="">
        aaa
    </div>
    <div id="">
        bbb
    </div>
    
    <span id="">
        aaaaaaa
    </span>
    <span id="">
        bbbbbbb
    </span>
    
</body>

</html>

四、css基礎(chǔ)

1.什么是CSS

CSS就是web標(biāo)準(zhǔn)中的表現(xiàn)標(biāo)準(zhǔn)，專門用來對(duì)網(wǎng)頁標(biāo)簽進(jìn)行布局和設(shè)置樣式的一門語言。
目前一般使用CSS3,CSS又叫樣式表
常用CSS屬性
color -> 設(shè)置字體顏色
background-color -> 設(shè)置背景顏色
width -> 寬度
height -> 高度

2.CSS基本語法

結(jié)構(gòu)：
選擇器{屬性: 屬性值; 屬性2: 屬性值2; 屬性3:屬性名3....}
說明：
選擇器 - 用來選中/確定需要設(shè)置樣式的標(biāo)簽
{} - 固定寫法
屬性 - 必須是CSS提供的屬性，總共200多個(gè)
屬性值 - 根據(jù)屬性賦不同的值。如果屬性的值是用來表示大小數(shù)字，后面必須加單位。例如：px(像素)、em(空格)
CSS中的顏色值：a.顏色的英文單詞 b.#顏色值對(duì)應(yīng)的6位16進(jìn)制值（#ff00, #00ff00）
* c.rgb(r,g,b) rgba(r,g,b,a);r,g,b的取值范圍是0-255，a表示透明度，取值范圍是0-1
屬性和屬性值之間用冒號(hào)隔開，多個(gè)屬性之間用分號(hào)隔開；屬性的順序出特殊情況外是任意的

33. 在哪兒寫CSS代碼

  • 內(nèi)聯(lián)樣式：將樣式表寫在標(biāo)簽的style屬性中 --- 樣式只對(duì)一個(gè)標(biāo)簽有效
    內(nèi)部樣式：將樣式表寫在head中的style標(biāo)簽 --- 樣式只對(duì)當(dāng)前html文件中標(biāo)簽有效
    外部樣式：將樣式表寫在外部的css文件中，然后在head中通過link標(biāo)簽導(dǎo)入 --- 樣式可以作用于所有的html
    內(nèi)聯(lián)樣式的優(yōu)先級(jí)最高, 內(nèi)部樣式和外部樣式誰后寫，誰的優(yōu)先級(jí)高 -- 后寫會(huì)的屬性值會(huì)覆蓋先寫的

-->

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>

link標(biāo)簽
link標(biāo)簽 - 導(dǎo)入外部文件
rel屬性 - 說明導(dǎo)入的文件的功能，stylesheet(添加樣式表), icon(設(shè)置網(wǎng)頁圖標(biāo))
type屬性 - 對(duì)導(dǎo)入的文件類型進(jìn)行說明: 文件類型/文件后綴
href屬性 - 導(dǎo)入的文件地址

        
        <!--設(shè)置網(wǎng)頁圖標(biāo)-->
        <link rel="icon" type="image/ico" href="img/aaa.ico"/>
        
        <!--內(nèi)部樣式-->
        <style type="text/css">
            /*這兒寫的代碼是CSS代碼*/
            p{
                /*設(shè)置文字顏色*/
                color: green;
            }
            
            h1{
                /*設(shè)置背景顏色*/
                background-color: sandybrown;
                /*設(shè)置字體大小*/
                font-size: 20px;   
            }
            
        </style>
        
        <!--導(dǎo)入一個(gè)外部樣式-->
        <link rel="stylesheet" type="text/css" href="css/04-CSS基礎(chǔ).css"/>
        
    </head>
    <body>
        <a >百度一下</a>
        <p>我是一個(gè)段落</p>
        <h1>我是一個(gè)標(biāo)題</h1>
        <p>我是一個(gè)段落2</p>
        
        <!--內(nèi)聯(lián)樣式-->
        <div id="" style="height: 100px; background-color: red;">
        </div>
        
    </body>
</html>

五、CSS選擇器

選擇器{屬性1: 屬性值1;....}
選擇器 - 選中需要添加樣式的標(biāo)簽
常用的選擇器：元素選擇器、id選擇器、class選擇器、群組選擇器、父子選擇器、統(tǒng)配符

  • 1.元素選擇器: 將標(biāo)簽名作為選擇器，選中指定的標(biāo)簽。
    用法：標(biāo)簽名{}

  • 2.id選擇器: 將標(biāo)簽中的id屬性的值作為選擇器，選擇id值對(duì)應(yīng)的標(biāo)簽
    用法：#id值{}

  • 3.class選擇器:將標(biāo)簽中的class屬性的值作為選擇器，選中class值對(duì)應(yīng)的標(biāo)簽
    用法：.class值{}

  • 4.群組選擇器: 多個(gè)選擇器用逗號(hào)隔開作為一個(gè)選擇器，同時(shí)選中所有選擇器對(duì)應(yīng)的標(biāo)簽
    a,p{} -- 選中所有的a標(biāo)簽和p標(biāo)簽
    .p1, img{} -- 選中所有的img和class值是p1的標(biāo)簽
    #p2,#p3,p{} -- 選中所有id值是p2和p3的標(biāo)簽，以及所有的p標(biāo)簽

  • 5.父子選擇器：多個(gè)選擇器用空格隔開作為一個(gè)選擇器，按順序依次往后找，找到最后一層選擇器對(duì)應(yīng)的標(biāo)簽
    div div p{} -- 選中div里面的div里面的p標(biāo)簽
    #d1 a -- 選中id值是d1的標(biāo)簽中的a標(biāo)簽

  • 6.通配符: 將*作為選擇器，選中當(dāng)前網(wǎng)頁中所有的標(biāo)簽
    *{}
    ?

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <!--內(nèi)部樣式-->
        <style type="text/css">
            /*元素選擇器*/
            p{
                color: darkcyan;
            }
            /*id選擇器
             * 選中id值是p3的所有的標(biāo)簽
             */
            #p3{
                background-color: silver;
            }
            
            /*class選擇器
             * 選中class值是p2的所有標(biāo)簽
             */
            .p2{
                background-color: yellow;
            }
            
            /*群組選擇器*/
            .p2, #p3{
                color: red;
            }
            
            /*父子選擇器*/
            div div a{
                font-size: 50px;
            }
            
            *{
                color: black;
            }
            
        </style>
        
    </head>
    <body>
        <div id="">
            <div id="">
                <a id="p3" >百度一下3</a>
            </div>
            <p>我是段落1</p>
            <p>我是段落11</p>
            <a id="p3" >百度一下2</a>
        </div>
        
        <div id="">
            <p class="p2">我是段落2</p>
            <p id="p3">我是段落3</p>
            <p>我是段落4</p>
        </div>
        
        <a id="p3" >百度一下1</a>
        
    </body>
</html>

六·、偽類選擇器

1.偽類選擇器

偽類選擇器是選中某個(gè)標(biāo)簽的不同的狀態(tài)。可以給不同狀態(tài)設(shè)置不同的樣式
?

  • a.link
    標(biāo)簽:link{} - 選中初始狀態(tài) (a標(biāo)簽的初始狀態(tài)指的是a對(duì)應(yīng)的網(wǎng)址一次都沒有訪問成功的時(shí)候?qū)?yīng)的狀態(tài))
    例如：a:link{}; p:link{}; #a1:link{} .a2:link, #a1:link{}

  • b.visited: 訪問后的狀態(tài)

  • c.hover: 鼠標(biāo)懸停在標(biāo)簽上對(duì)應(yīng)的狀態(tài)

  • d.active: 鼠標(biāo)按住不放對(duì)應(yīng)的狀態(tài)

注意：使用偽類選擇器的時(shí)候要遵守愛恨原則（LoVeHAte）,如果不遵守可能會(huì)導(dǎo)致某些狀態(tài)的樣式無效

2.選擇器的優(yōu)先級(jí): 權(quán)重值越大，優(yōu)先級(jí)越高。如果權(quán)重值相同，后寫的優(yōu)先級(jí)高

元素選擇器權(quán)重: 0001 - 1
class選擇器權(quán)重: 0010 - 2
id選擇器權(quán)重：0100 - 4
偽類選擇器權(quán)重：0001 - 1
群組選擇器權(quán)重：?jiǎn)为?dú)看每個(gè)選擇器的權(quán)重
父子選擇器權(quán)重：所有選擇器權(quán)重之和

內(nèi)聯(lián)樣式的優(yōu)先級(jí)是最高的
-->

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        
        <style type="text/css">
            /*初始狀態(tài)*/
            a:link{
                color: darkgoldenrod;
            }
            /*訪問后的狀態(tài)*/
            a:visited{
                color: seagreen;
            }
            
            /*鼠標(biāo)懸停狀態(tài)*/
            a:hover{
                color: red;
                /*font-size: 30px;*/
            }
            /*鼠標(biāo)按住不放時(shí)對(duì)應(yīng)的狀態(tài)*/
            a:active{
                color: yellowgreen;
            }
            
            /*2*/
            .p11{
                color: blue;
            }
            
            /*1+4=5*/
            /*div #p1{
                color: deeppink;
            }*/
            
            
            /*4*/
            #p1{
                color: salmon;
            }
            /*4*/
            #p1{
                color: green;
            }
            
            /*1*/
            p{
                color: red;
            }
            
            /*1*/
            a,p{
                color: yellow;
            }
            
            /*1+1=2*/
            div p{
                color: purple;
            }
            
            /*1+4+4=9*/
            body #d1 #p1{
                color: red;
            }
            
            
        </style>
        
    </head>
    <body>
        <div id="d1">
            <p id="p1" class="p11" style="color: black;">我是段落1</p>
        </div>
        <a >第一章</a>
        <a >第二章</a>
        <a >第三章</a>
        
    </body>
</html>
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 走過這樣一條路，風(fēng)花雪月，歲月流年，印入我的生命里。 —— 題記 ...
    羅茵琪閱讀 450評(píng)論 3贊 2
  • 寫一封信給我吧 我好想知道你過得怎樣 我不敢打擾 連默默窺視也做不到 你還打籃球嗎 你還穿那件藍(lán)色的外套嗎 還是每...
    我可以清兵嗎閱讀 179評(píng)論 0贊 0
  • 九月份，事務(wù)變多，空閑時(shí)間就不太充裕了。而且，右眼有些不舒服，晚上不能長(zhǎng)時(shí)間用眼，畢竟在燈光下，去摳彩鉛畫的細(xì)節(jié)，...
    楓樹林Fany閱讀 492評(píng)論 0贊 9
  • 春光遲到的原因，是它采擷了半幅畫，半幅裾，半副錦緞，繡成這方素白錦衣。我為它守了一整個(gè)春天的桃花樹，等了半世花開，...
    ssjbysjpau閱讀 260評(píng)論 0贊 0
  • 庭院前有我親手栽種的一株玫瑰，略想一下，它花開花落三次有余了，如今的它打著花骨朵，在和煦的春風(fēng)中翩翩搖曳?？蛇@次，...
    楊言辰閱讀 337評(píng)論 0贊 0

友情鏈接更多精彩內(nèi)容