携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第10天，点击查看活动详情

前端的学习

1. html的学习

1.1 label标签的使用

举例：我们想要点击用户名的时候，光标就自动进入input表单元素中时，我们就采用label标签。

  性别：
    <label for="sex">男</label>
    <input type="radio" name="sex" id="sex">
    <label for="sex1">女</label>
    <input type="radio" name="sex" id="sex1">

    <label for="username">用户名：</label><input type="text" id="username"

1.2 select标签的使用

注意：使用selected表示默认选项

1.3 textarea标签的使用

1.4 一个比较简单的例题用来测试学习成果

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>综合案例-注册页面</title>
</head>
<body>
    <h4>青春不常在，抓紧谈恋爱</h4>
    <table width="600" >
        <!-- 第一行 -->
        <tr>
            <td>性别:</td>
            <td>
                <input type="radio" name="sex" id="nan"> <label for="nan"> <img src="images/man.jpg" > 男 </label>  
                <input type="radio" name="sex" id="nv"> <label for="nv"><img src="images/women.jpg" > 女</label> 
            </td>
        </tr>
        <!-- 第二行 -->
        <tr>
            <td>生日:</td>
            <td>
                <select>
                    <option>--请选择年份--</option>
                    <option>2001</option>
                    <option>2002</option>
                    <option>2003</option>
                </select>
                <select>
                        <option>--请选择月份--</option>
                        <option>1</option>
                        <option>2</option>
                        <option>3</option>
                </select>
                <select>
                        <option>--请选择日--</option>
                        <option>1</option>
                        <option>2</option>
                        <option>3</option>
                </select>
        
            </td>
        </tr>
        <!-- 第三行 -->
        <tr>
            <td>所在地区</td>
            <td><input type="text" value="北京思密达"></td>
        </tr>
        <!-- 第四行 -->
        <tr>
            <td>婚姻状况:</td>
            <td>
                    <input type="radio" name="marry" checked="checked">未婚  <input type="radio" name="marry">  已婚  <input type="radio" name="marry"> 离婚
            </td>
        </tr>
         <!-- 第五行 -->
         <tr>
             <td>学历:</td>
             <td><input type="text" value="博士后"></td>
         </tr>
          <!-- 第六行 -->
        <tr>
            <td>喜欢的类型:</td>
            <td>
                <input type="checkbox" name="love" > 妩媚的 
                <input type="checkbox" name="love" > 可爱的 
                <input type="checkbox" name="love" > 小鲜肉 
                <input type="checkbox" name="love" > 老腊肉 
                <input type="checkbox" name="love"  checked="checked"> 都喜欢 
            </td>
        </tr>
         <!-- 第七行 -->
        <tr>
            <td>个人介绍</td>
            <td>
                <textarea>个人简介</textarea>
            </td>
        </tr>
        <!-- 第八行 -->
        <tr>
            <td></td>
            <td>
                <input type="submit" value="免费注册" >
            </td>
        </tr>
        <tr>
                <td></td>
                <td>
                    <input type="checkbox"  checked="checked">    我同意注册条款和会员加入标准
                </td>
        </tr>
        <tr>
                <td></td>
                <td>
                    <a href="#" > 我是会员，立即登录</a>
                </td>
        </tr>
        <tr>
                <td></td>
                <td>
                    <h5>我承诺</h5>
                    <ul>
                        <li>年满18岁、单身</li>
                        <li>抱着严肃的态度</li>
                        <li>真诚寻找另一半</li>
                    </ul>
                </td>
        </tr>
           
    </table>
</body>

2.CSS字体属性

各种字体之间必须使用英文状态下的逗号隔开
般情况下，如果有空格隔开的多个单词组成的字体加引号.
尽量使用系统默认自带字体,保证在任何用户的浏览器中都能正确显示
最常见的几个字体: body {font-family: 'Microsoft YaHei',tahoma,rial'HiraginoSans GB'; }

如果属性中有多个字体，那么系统会默认第一种，如果第一种不存在，那么使用第二种，如果设置字体均不存在，那么使用系统自带的字体

px( 像素)大小是我们网页的最常用的单位
谷歌浏览器默认的文字大小为 16px
不同浏览器可能默认显示的字号大小不一致,我们尽量给一一个明确值大小,不要默认大小
可以给 body指定整个页面文字的大小

3. chrome调试工具

3.1 打开调试工具

注意：通过f12或者右键点击检查均可

3.2 使用调试工具

Ctrl+滚轮可以放大开发者工具代码大小。
左边是HTML元素结构,右边是CSS样式。
右边CSS样式可以改动数值(左右箭头或者直接输入)和查看颜色。
Ctrl+ 0复原浏览器大小。
如果点击元素,发现右侧没有样式引入,极有可能是类名或者样式引入错误。
如果有样式,但是样式前面有黄色叹号提示,则是样式属性书写错误。

HTML+CSS以及相关的Chrome的使用