1.表單標簽

<!--表單標簽
            1.可以提交表單中收集的信息
            action屬性:設置提交信息的位置
            method屬性：提交方式 - post/get
        -->
        
        <form action="" method="get">
            
            <!-- input標簽（單標簽） -- text(文本輸入框)
                1.是表單標簽
                2.type屬性：
                text - 普通的文本輸入框
                3.name屬性: 必須設置（a.用于提交信息）
                4.value屬性: 標簽內容
                5.placeholder屬性:占位符（提示信息）
                6.maxlength: 輸入框最多能輸入的字符個數
                7.readonly:readonly - 輸入框只讀(不能往里面輸入內容)
            -->
            <input type='text' name="username" value="" readonly="readonly" placeholder="請輸入手機號" maxlength="11"/>
            <!--input標簽- 密碼輸入框
                1.type屬性: password --- 輸入的值是密文顯示
            -->
            <input type="password" name="password" value=""  placeholder="密碼" />    
            
            
            <!--input標簽：單選按鈕
                1.type屬性：radio
                2.name: 同一類型對應的name值必須一樣
                3.value：設置選中按鈕提交的值
                4.checked: 設置為checked，讓按鈕默認處于選中狀態
            -->
            <input type="radio" name="sex" id="" value="boy" checked="checked"/><span>男</span>
            <input type="radio" name="sex" id="" value="gril" /><span>女</span> 
            
            
            <!--input標簽:多選按鈕
                1.type：checkbox
                2.name：同一類型對應的name值必須一樣
                3.value：設置選中按鈕提交的值
                4.checked: 設置為checked，讓按鈕默認處于選中狀態
            -->
            <input type="checkbox" name="interest" id="" value="籃球" /><span>籃球</span>
            <input type="checkbox" name="interest" checked="checked" id="" value="乒乓球" /><span>乒乓球</span>
            <input type="checkbox" name="interest" id="" value="看電影" /><span>看電影</span>
            <input type="checkbox" name="interest" id="" value="旅游" /><span>旅游</span>
            <input type="checkbox" name="interest" id="" value="游泳" /><span>旅游</span>
            
            
            <!--input標簽：普通按鈕
                disabled:disabled - 讓按鈕不能點擊
            -->
            <input type="button" name="" id="" value="登錄" disabled="disabled"/>
            
            <!--input標簽：重置按鈕
                讓當前所在的form中的所有表單相關標簽對應的值，回到最初的狀態
            -->
            <input type="reset" name="" id="" value="重置全部" /> 
            
            
            <!--input標簽:文件選擇器-->
            <input type="file" name="icon" id="icon" value="" />
            
            
            
            <input type="submit" name="" id="" value="提交" />
            
            
        </form>
    

2.下拉和多行文本域

<form action="" method="get">
            <!--fieldset：
                一個fieldset標簽對應一個表單分組
                legend標簽：設置分組名
            -->
            <fieldset id="">
                <legend>賬號信息</legend>
                <input type="text" name="username" id="username" value="" placeholder="用戶名" />
                <input type="password" name="username" id="username" value="" placeholder="密碼" />
                <input type="reset" name="" id="" value="重置1" />
                
            </fieldset>
            
            <fieldset id="">
                <legend>反饋信息</legend>
                <!--1.下拉菜單-->
                <select name="city">
                    <option value="成都">成都</option>
                    <option value="重慶">重慶</option>
                    <option value="北京">北京</option>
                    <option value="大連">大連</option>
                    <!--selected:設置默認選中-->
                    <option value="青島" selected="selected">青島</option>
                </select>
            
            <!--2.多行文本域(多行文本輸入框)
            -->
                <textarea name="message" rows="2" cols="100" placeholder="請輸入意見..." maxlength="200">上次沒有發送信息</textarea>
                <input type="reset" name="" id="" value="重置2" />
            </fieldset>
            
            <input type="submit" name="" id="" value="提交" />
            
        </form>

3.空白標簽

<div id="">
            <a href="">百度一下</a>
        </div>
        <div id="">
            <a href="">淘寶</a>
        </div>
        
        
        <!--
            html中標簽分為兩大類：
            1.塊級標簽：一行只能有一個(不管標簽的寬度是多少)
            h1-h6,  p, hr, 列表標簽，table, form, 
            
            2.行內標簽：一行可以有多個
            a, img, input,下拉列表(select), textarea
            
            
            div標簽，是空白標簽，沒有任何特殊的意義(無語義標簽)
        -->
        <div style="background-color: red; width: 100px;">
            我是div1 <br />
            我是div111
        </div>
        <span style="background-color: royalblue;">
            我是span4
        </span>
        <div style="background-color: yellow; width: 90px;">
            我是div2
        </div>
        <div style="background-color: palevioletred; width: 120px;">
            我是div3
        </div>
        
        <span style="background-color: green;">
            我是span
        </span>
        <span style="background-color: gold;">
            我是span2
        </span>
        <span style="background-color: greenyellow;">
            我是span3
        </span>
        <span style="background-color: royalblue;">
            我是span4
        </span>

4.認識CSS

<!--CSS
1.什么是CSS
    CSS是web標準中的表現標準，用設置網頁上的標簽的樣式（長什么樣，在哪兒）
    CSS代碼/CSS文件，我們叫樣式表
    
    目前我們使用的是CSS3。
    
2.寫在哪兒
    內聯樣式表：將css代碼寫在標簽的style屬性中
    內部樣式表：寫在head標簽中的style標簽的內容中
    外部樣式表：寫在一個css文件中，通過head中的link標簽來關聯
    
    優先級: 內聯的優先級最高；內部和外部沒有絕對優先，主要看同一個屬性誰最后賦值，誰就有效
    
    
3.怎么寫(CSS語法)
選擇器{屬性:屬性值; 屬性：屬性值;}

選擇器： 用來選中需要設置樣式的標簽
屬性：css屬性（css2中的屬性有兩百多個）
屬性值：如果屬性值是數字，表示的是大小要在后面加px
注意：每個屬性之間要使用分號隔開，否則屬性無效



補充屬性: color: 設置字體顏色  background-color:設置背景顏色  width：標簽的寬度  height：標簽的高度
-->

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

        <!--style標簽
            專門用來設置樣式的標簽
        -->
        <style type="text/css">
            div{
                background-color: yellowgreen;
                color: red;
            }
        </style>
        
        <!--關聯外部樣式表-->
        <link rel="stylesheet" type="text/css" href="css/css1.css"/>
        
    </head>
    <body>
    <!--style屬性：每個標簽都有-->
        <div style="">
            我是div
        </div>  
        
        
    </body>
</html>

5.css選擇器

<!--選擇器
0. 元素選擇器(標簽選擇器)：標簽名
    選中所有的標簽名對應的標簽
1.id選擇器：#id屬性值
    每個標簽都有一個id屬性，整個html中，id的值必須唯一
    
2.class選擇器：.class屬性值
    每個標簽都有一個class屬性，
    
3.通配符：*
    選中所有的標簽  
    
4.層級選擇器：選擇器1 選擇器2...

5.群組選擇器：選擇器1，選擇器，....


    
    
補充:
    css中的顏色值：
    1.顏色英語單詞
    2.16進制的顏色值 0-255 -- 00-ff (#ff0000-紅色)
    3.rgb值：rgb(紅,綠,藍) rgba(紅,綠,藍,透明度) - 透明度 0~1
-->


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        
        <style type="text/css">
            /*通配符*/
            *{
                font-size: 50px;
            }
            
            /*id選擇器*/
            .c1{
                color: brown;
                background-color: olive;
            }
            
            /*元素選擇器*/
            a{
                background-color: yellow;
            }
            /*class選擇器*/
            #a1{
                /*color:#ff0000;*/
                color:rgba(0,0,255,0.4)
            }
            
            /*層級選擇器*/
            #all_a a{
                color: pink;
            }
            
            div div a{
                text-decoration: none;
            }
            
            /*群組選擇器*/
            /*同時選中所有h1標簽和所有的span標簽*/
            h1,span{
                background-color: #FFC0CB;
            }
            
            
            
        </style>
        
    </head>
    <body>
        
        <h1>我是標題</h1>
        <span id="">
            我是span
        </span>
        
        <div >
            <div id="">
                <a href="">aaa</a>
                <p></p>
            </div>
            <div id="all_a">
                <a href="">a1</a>
                <a href="">a2</a>
                <a href="">a2</a>
                <a href="">a2</a>
                <a href="">a2</a>
            </div>
            
        </div>
        
        <a id="a1" href="">我是a</a>
        <a href="">我是a2</a>
        
        
        <p class="c1">我是p</p>
        
        <div id="" class="c1">
            我是div
            <a href="">我是a3</a>
        </div>
        
        <a href="">我是a4</a>
        
    </body>
</html>

6.偽類選擇器

<!--偽類選擇器:   選擇器:狀態
    link: 超鏈接的初始狀態; -- 一次都沒有訪問成功的時候的狀態
    visited: 超鏈接訪問后的狀態 --- 已經訪問成功后的狀態
    hover: 鼠標懸停在標簽上對應的狀態
    active：鼠標按住的狀態
    
    給同一個標簽通過偽類選擇器給不同狀態設置不同的樣式的時候，要遵守愛恨原則(先要愛才能恨)
    LoVe HAte
-->

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            /*同時設置a標簽的所有狀態*/
            a{
                color: black;
            }
            
            a:link{
                color: green;
            }
            a:visited{
                color: pink;
            }
            
            a:hover{
                color: red;
                font-size: 40px;
            }
            
            
            a:active{
                color: yellow;
            }
            
            
            #d1{
                width: 300px;
                height: 100px;
                background: green;
            }
            
            #d1:hover{
                background-color: greenyellow;
                
            }
            
            
        </style>
        
        
    </head>
    <body>
        <a >百度一下</a>
        <button id="d1">
        </button>
        
    </body>
</html>

題外話：

<!-- 列表
    有序：ol - li
    無序  ul - li
    自定義 dl - dt dd
     -->

     <!-- 表格
     table
     tr
     td
 -->