HTML-day2

DOCTYPE html>
html lang="en">
head>
    meta charset="UTF-8">
    title>Titletitle>
head>
body>
    h2>Regis Pageh2>
    from action="" method="post">    
        p>label for="username">username:label>    
            input type="text" id="username"> p>  
        p>password:input type="password"> p>   
        p>hobby:input type="checkbox" name="hobby" value="basketball">basketball  
                 input type="checkbox" name="hobby" value="foottball">football
        p>
        p>
            Sex:input type="radio" name="sex">radio_1    
                input type="radio" name="sex">radio_2
        p>
        P>
            input type="button" value="Test Button">    
        P>
        P>
            input type="file">    
        P>
        input type="submit" value="submit">    
    from>
    P>Home:
        select name="Home" multiple size="2">     
            option value="hebei">河北省option>
            option value="henan">河南省option>
            option value="hunan">湖南省option>
            option value="hubei">湖北省option>
    select>
    P>                                   
    p>description:textarea name="personal" cols="30" rows="10" placeholder="个人简介">textarea> p>    
    fieldset>
    legend>登录legend>     
        P>username:input type="text">P>         
        P>password:input type="password">P>
        input type="submit" value="login">
    fieldset>
body>
html>

表单属性

 name:    表单提交项的键.

           注意和id属性的区别：name属性是和服务器通信时使用的名称；
           而id属性是浏览器端使用的名称，该属性主要是为了方便客户端编程，而在css和javascript中使用的

value:    表单提交项的值.对于不同的输入类型，value 属性的用法也不同：

                type="button", "reset", "submit" - 定义按钮上的显示的文本
                 
                type="text", "password", "hidden" - 定义输入字段的初始值
                 
                type="checkbox", "radio", "image" - 定义与输入相关联的值


checked:  radio 和 checkbox 默认被选中

readonly: 只读. text 和 password

disabled: 对所用input都好使.

DOCTYPE html>
html lang="en">
head>
    meta charset="UTF-8">
    title>Titletitle>

    
    style>
        a{
            color: rebeccapurple;
            font-size: 30px;
            font-weight: 900;
        }

        p{
            background-color: gold;
        }
    style>
    
    link rel="stylesheet" href="index.css">
    
    style>
        @import "index.css";   /*这里要注意文件的路径*/
    style>

head>
body>
p>I am P!p>

a href="">clicka>

div>DIVdiv>
div>DIV2div>


div style="color: red;background-color: darkgreen">DIVdiv>
body>
html>

基础选择器:
DOCTYPE html>
html lang="en">
head>
    meta charset="UTF-8">
    title>Titletitle>

    style>
        /*标签选择器*/
        p{
            background-color: rebeccapurple;
        }

        /*id选择器*/
        p2{
            background-color: rebeccapurple;
        }

        /*class选择器*/
        .p_ele{
            color: gold;
        }

        /*通用选择器*/
        *{
            background-color: green;
        }
    style>
head>

body>
    p class="p_ele">PPP1p>
    p id="p2">PPPp>
    p class="p_ele">PPP3p>

    div>DIVdiv>

    span>SPANspan>

body>
html>

组合选择器:
DOCTYPE html>
html lang="en">
head>
    meta charset="UTF-8">
    title>Titletitle>

    style>
        /*后代选择器*/
       .inner p{
           color: red;
       }

        .outer p{
            color: red;
        }

        /*子代选择器*/
       .outer > p{
           color: red;
       }

        /*多元素选择器*/
        .inner p,.p4{
            color: red;
        }

       /*毗邻选择器 */
       .outer + p{
           background-color: red;
       }

        /*兄弟选择器*/
        .outer ~ p{
            color: red;
        }

        /*匹配class和标签名*/
         ul.item li{
             color: red;
         }

         div.c1{
             color: red;
         }
    style>
head>


body>
     div class="c1">c1div>

     div class="outer">
         p>P1p>
         div class="inner">
             p>P3p>
         div>
         p>P2p>
         a href="">clicka>
     div>

     a href="">aaaa>
     p>P5p>

     p class="p4">P4p>


     ul class="item">
         li>11li>
         li>11li>
         li>11li>
         li>11li>
     ul>


    ol class="item">
        li>222li>
        li>222li>
        li>222li>
        li>222li>
    ol>

    ul>
        li>222li>
        li>222li>
        li>222li>
        li>222li>
    ul>

body>

html>