web前端实训day02——html、css部分知识回顾

web前端实训day02——html、css部分知识回顾

HTML

表单

<!--
    表单：<form></form>
    属性：
        action:表单提交的地址
        method:用于描述表单提交数据的方式，get,post
            get形式传参：将参数拼接到url里面进行传参，存在大小限制，最大能够传递200多K
            post形式传参：将参数封装并隐藏进行传参，不存在大小限制，上传文件的时候一般使用post
    
    输入框：<input>
    属性：
        placeholder：提示使用
        name：用于提交后台时的key，key：value，name属性为空时，对应表单项value不能提交
        value： 输入框的值
    type：
        text：文本框
        password：密码框
        radio：单选框
            checked：默认选中
            形成单选框，通过name属性来使得多个input形成单选框组，达到选择互斥的效果
        checkbox：复选框
            checked：默认选中
        file：提交文件    
        submit:提交表单，提交只针对当前所处的表单域有效，除了表单域就不能提交表单了
        reset：重置表单，将表单还原成初始样子
    button：默认情况下点击提交所处的form表单
        type：
            submit：默认值
            button：按钮(点击不会触发所在form表单的提交)
            reset：重置表单
    label：用于文字和输入框进行绑定的
         for：指向绑定的输入框(绑定的是id)
    下拉选：<select></select>、<option></option>
    注意点：1.默认选中的是第一个option
           2.select传递的值是option里面的value值，并不是标签里面的内容
           3.selected属性，值为selected，为默认选中
    textarea：文本域

-->

<form action="" method="post">
        <label for="username">用户名：</label>
        <input type="text" placeholder="请输入用户名" name="username" id="username" value="我是默认值">
        <br>
        <label for="password">密码：</label>
        <input type="password" placeholder="请输入密码" name="password" id="password" value="我是默认值">
        <br>
        <input type="radio" name="sex" value="男" checked="checked"><span>男</span>
        <input type="radio" name="sex" value="女" ><span>女</span>
        <br>
        <input type="checkbox" checked="checked" id="agree">
        <label for="agree">统一xxxxxx使用协议xxxxxxxxxxxxxxxxxxxxxx</label>
        <br>
        <input type="file"><br>
        <select name="address" id="">
            <option value="河南省">河南省</option>
            <option value="山东省" selected="selected">山东省</option>
            <option value="河北省">河北省</option>
        </select><br>
        <textarea name="suggestion" id="" cols="30" rows="10"></textarea><br>
        <input type="submit" value="登录">
        <button type="submit">按钮登录</button>
        <br>
        <input type="reset" value="重置">
        <button type="reset">按钮重置</button>
    </form>

案例四

<h2>用户注册</h2>
    <form action="" method="post">
        <table>
            <tr>
                <td><label for="mobile">手机号：</label></td>
                <td><input type="text" name="mobile" id="mobile" placeholder="请输入手机号"></td>
            </tr>
            <tr>
                <td><label for="password">密码：</label></td>
                <td><input type="password" name="password" id="password" placeholder="请输入密码"></td>
            </tr>
            <tr>
                <td><label for="name">姓名：</label></td>
                <td><input type="text" name="xingming" id="name" placeholder="请输入姓名"></td>
            </tr>
            <tr>
                <td>性别：</td>
                <td>
                    <input type="radio" name="sex" id="man" value="男" checked="checked">
                    <span><label for="man">男</label></span>
                    <input type="radio" name="sex" id="woman" value="女">
                    <span><label for="woman">女</label></span>
                </td>
            </tr>
            <tr>
                <td>地址：</td>
                <td>
                    <select name="address" id="">
                        <option value="河南省">河南省</option>
                        <option value="山东省">山东省</option>
                        <option value="河北省">河北省</option>
                        <option value=""  selected="selected">请选择</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>爱好：</td>
                <td>
                    <input type="checkbox" name="hobby" id="hobby1" value="eat">
                    <label for="hobby1">吃饭</label>
                    <input type="checkbox" name="hobby" id="hobby2" value="sleep">
                    <label for="hobby2">睡觉</label>
                    <input type="checkbox" name="hobby" id="hobby3" value="play">
                    <label for="hobby3">打豆豆</label>
                </td>
            </tr>
            <tr>
                <td><label for="introduction">自我介绍：</label></td>
                <td><textarea name="intro" id="introduction" cols="30" rows="10"></textarea></td>
            </tr>
            <tr>
                <td colspan="2">
                    <input type="submit" value="注册">
                    <input type="reset" value="重置">
                </td>

            </tr>
        </table>
    </form>

CSS

样式引入：

样式引入：内联样式、嵌入样式、外部样式

内联样式

 <h1 style="color: red; font-size: 20px;">我h1标签</h1>

嵌入样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>嵌入样式</title>
    <!--
        嵌入样式：在head里面使用<style></style>进行书写样式
        css样式的注释方式：/*注释的内容*/
    -->
    <style>
        /* 选择器{样式:样式值；样式:样式值} */
        /* 给谁改样式{改什么样式} */
        h1 {
            color: red;
            font-size: 20px;
        }
    </style>
</head>
<body>

    <h1>我是h1标签</h1>
    
</body>
</html>

外部样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>外部样式</title>
    <!--
        外部样式：
            1.样式是定义在css文件中的
            2.使用时，需要使用link标签进行引用css文件    
    -->
    <link rel="stylesheet" href="demo.css">
</head>
<body>
    
    <h1>我是h1标签</h1>
</body>
</html>

demo.css

h1{
    color: red;
}

选择器（以嵌入样式为例）

标签选择器

<style>
        /* 
           标签选择器，选择的内容就是标签 
           好处，批量更改标签的样式
           坏处，只能全部更改，不能部分更改
        */
        h1 {
            color: red;
        }
</style>

<body>

    <h1>h1标签</h1>
    <h1>h1标签</h1>
    <h1>h1标签</h1>
    <h1>h1标签</h1>
    <h1>h1标签</h1>
    
</body>

id选择器

<style>
        /* 
           id选择器：#id
           好处：可以针对某一个id的标签进行修改样式
           坏处：因为id在当前html中是唯一的，所以id选择器不能够实现批量的修改样式 
        */
        #h1 {
            color: red;
        }
</style>

<body>
    
    <h1 id="h1">我是具有id的h1</h1>
    <h1>我是不具有id的h1</h1>

</body>

类选择器

<style>
        /* 
            类选择器：.类名 
            总结：类选择器是最常用、最灵活的选择器
        */
        .red-h1 {
            color: red;
        }
</style>

<body>
    <h1 class="red-h1">h1标签</h1>
    <h1>h1标签</h1>
    <h1 class="red-h1">h1标签</h1>
</body>

通配符选择器

<style>
        /*
           通配符选择器：*{}
           *代表所有
           应用：通配符选择器通常用于初始化样式
        */
        * {
            color: red;
            font-size: 20px;
          }
</style>

<body>
    <h1>我是h1标签</h1>
    <p>我是p标签</p>
</body>

字体相关样式

<style>
        /*
             font-family:字体，浏览器默认是微软雅黑(Microsoft YaHei)
             注意点：当使用的字体样式在电脑上没有的时候，会使用默认的字体

             color:字的颜色
             font-size：字的大小
             font-weight:字体的加粗
             text-decoration:划线，最常用在初始化a标签的时候
             line-height:行高,用于元素(有一定限制)垂直居中

        */
         p{
             font-family: Arial, Helvetica, sans-serif;
             color: red;
             font-size: 26px;
             font-weight: 600;
             text-decoration: line-through;
         }
         a{
             text-decoration: none;
         }
    </style>

<body>
    
    <p>我是p标签</p>
    <a href="">我是超链接</a>

</body>

文本相关样式

<style>
    /*
        lorem:生成占位文本的快捷方式
        text-indent:缩进,常用于文本缩进，单位常使用em(字符)
        text-align:水平方向上文本排列的方式,设置元素(某些)水平居中
        vertical-align:文字在垂直方向上的排列方式

    */
    p {
        text-indent: 2em;/*缩进两个字符 */
        text-align: center;
    }

    #span {
        vertical-align: sub;
    }
</style>

<body>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae nihil sed a assumenda omnis saepe minus incidunt praesentium error consectetur, delectus hic nemo soluta suscipit, placeat nam dicta eveniet pariatur!</p>
    <span>X<span id="span">2</span></span>
</body>

CSS案例一

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS案例一</title>
    <style>
        p {
            text-indent: 2em;
        }
        span {
            color: red;
        }
    </style>
</head>
<body>
    
    <h2>为波波维奇提供教父合同？篮网总经理：假的！</h2>

    http://www.spbo.com 2020-07-06 15:13 <span>来源:新浪网体育</span><br>
    
    <img src="images/image.png" alt="图片">
    
    <p>近日有消息称篮网队将为波波维奇提供“教父合同”，今日篮网总经理接受采访时回应称该消息是谣言。</p>

    <p>“我会说波波已经有工作了。我们都知道他是一名非常棒的教练，他更是一名极好的领导者。所以，他会继续执教马刺队，他和马刺密不可分，我相信他在那里一定很开心。”篮网总经理肖恩马克思说道。</p>

</body>
</html>