首页 > 代码库 > HTML-day2

HTML-day2

2024-11-14 06:56:02   203人阅读

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h2>Regis Page</h2>
    <from action="" method="post">    <!--from标签,模式为post-->
        <p><label for="username">username:</label>    <!--label标签本身不会呈现任何元素,for后面的数值跟id 是一致的,关联前面的字符跟后面的输入框-->
            <input type="text" id="username"> </p>  <!--输入框,类型是文本输入,id是方便上面的label关联-->
        <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">    <!--按钮本身无任何意义,跟submit不同,不会提交from中的数据-->
        </P>
        <P>
            <input type="file">    <!--选择而文件 from中的method 必须设置为post-->
        </P>
        <input type="submit" value="submit">    <!--submit按钮,点击会提交from中的数据给服务端-->
    </from>
    <P>Home:
        <select name="Home" multiple size="2">     <!--select 选择框  multiple为多选(Ctrl多选)  size为默认显示几条-->
            <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都好使.

 

CSS:

　　规则主要由两部分构成:选择器和一条或者多条声明。

引入方式:

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

    <!--内嵌式引入-->
    <style>
        a{
            color: rebeccapurple;
            font-size: 30px;
            font-weight: 900;
        }

        p{
            background-color: gold;
        }
    </style>
    <!--链接式引入:会在网页加载前先装载css文件-->
    <link rel="stylesheet" href="index.css">
    <!--导入式引入:会在网页加载完毕后在加载css,当网页很大时将导致先显示没有css样式的网页,闪一下以后再出现css样式 -->
    <style>
        @import "index.css";   /*这里要注意文件的路径*/
    </style>

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

<a href="">click</a>

<div>DIV</div>
<div>DIV2</div>

<!--行内式:在style标记后直接使用css ,不推荐使用,没有体现css 的优势-->
<div style="color: red;background-color: darkgreen">DIV</div>
</body>
</html>

 

选择器:

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

    <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">PPP1</p>
    <p id="p2">PPP</p>
    <p class="p_ele">PPP3</p>

    <div>DIV</div>

    <span>SPAN</span>

</body>
</html>
组合选择器:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <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">c1</div>

     <div class="outer">
         <p>P1</p>
         <div class="inner">
             <p>P3</p>
         </div>
         <p>P2</p>
         <a href="">click</a>
     </div>

     <a href="">aaa</a>
     <p>P5</p>

     <p class="p4">P4</p>


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


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

    <ul>
        <li>222</li>
        <li>222</li>
        <li>222</li>
        <li>222</li>
    </ul>

</body>

</html>

 

HTML-day2


联系
我们