一、HTML

一、HTML

1. HTML

0.vscode快捷键

• ctrl+b 关闭/打开左侧文件夹栏
• ctrl+x 删除当前行
• .father{生成类名为father的div标签}

 <div class="father">生成类名为father的div标签</div>

• #son 注：有时不生效，可以重新再输入一次

 <div id="son"></div>

• .father>#son{子标签文本内容}

 <div class="father">
    <div id="son">子标签文本内容</div>
</div>

• .father*3

 <div class="father"></div>
<div class="father"></div>
<div class="father"></div>

• ul>li{第 $ 章}*3

 <ul>
    <li>第 1 章</li>
    <li>第 2 章</li>
    <li>第 3 章</li>
</ul>

1-1.表格

    <!-- 
       1.<table>中的align属性使得整个table表格居中,而不是使表格中的字体居中
       2.<table>中的border属性给表格中所有的单元格添加边框，
         而css样式中的border仅给整个表格最外层添加边框
       3.cellspacing设置单元格之间的间隙
       4.<th>相比于<td>自带字体加粗和居中
    -->
    <table align="center" style="text-align: center;" width="300" border="1" cellspacing="0">
        <caption>标题</caption>
        <tr>
            <th>序号</th>
            <th>姓名</th>
            <th>性别</th>
        </tr>

        <tr>
            <td>1</td>
            <td>张三</td>
            <td>男</td>
        </tr>
        <tr>
            <td>2</td>
            <td>李四</td>
            <td>女</td>
        </tr>
    </table>

1-2.单元格合并

<table width="500" height="250" border="1" cellspacing="0">
        <caption>表头</caption>
        <tr>
            <td></td>
            <td colspan="3"></td>
        </tr>
        <tr>
            <td rowspan="2"></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>

表头

2-1.表单域

2-2.input标签

<form action="xxx.php" method="get">
            <!-- text 文本框 用户可以里面输入任何文字 -->
            用户名:
            <input type="text" name="username" value="请输入用户名" maxlength="6" />
            <br />

            <!-- password 密码框 用户看不见输入的密码 -->
            密码:
            <input type="password" name="pwd" />
            <br />

            <!-- radio 单选按钮  可以实现多选一 -->
            <!-- name 是表单元素名字 这里性别单选按钮必须有相同的名字name 才可以实现多选1 -->
            <!-- 单选按钮和复选框可以设置checked 属性, 当页面打开的时候就可以默认选中这个按钮 -->
            性别: 男
            <input type="radio" name="sex" value="男" />
            女
            <input type="radio" name="sex" value="女" checked="checked" />
            人妖
            <input type="radio" name="sex" value="人妖" />
            <br />

            <!-- checkbox 复选框  可以实现多选 -->
            爱好: 吃饭
            <input type="checkbox" name="hobby" value="吃饭" />
            睡觉
            <input type="checkbox" name="hobby" />
            打豆豆
            <input type="checkbox" name="hobby" checked="checked" />
            <br />

            <!-- 点击了提交按钮,可以把 表单域 form 里面的表单元素 里面的值 提交给后台服务器 -->
            <input type="submit" value="免费注册" />

            <!-- 重置按钮可以还原表单元素初始的默认状态 -->
            <input type="reset" value="重新填写" />

            <!-- 普通按钮 button  后期结合js 搭配使用-->
            <input type="button" value="获取短信验证码" />
            <br />
            
            <!-- 文件域 使用场景 上传文件使用的 -->
            上传头像:
            <input type="file" />
        </form>

2-3.label标签

<!-- 需求：点击<label>标签中包裹的文本，即可实现光标移到表单元素，无需直接点击input -->

    <!-- 方法一：label标签直接包含表单元素和文本 -->
    <label>
        <!-- label使得点击 用户名: 这几个字也能实现将光标定位到input表单中，无需直接点击表单 -->
        用户名:
        <input type="text" id="text" />
    </label>

    <!-- 方法二：label标签仅包含文本，但是必须设置label标签的for属性与相应表单的id属性相同 -->
    <label for="mima">
        密码:
        <input type="password" id="mima">
    </label>

    <br>
    <label>
        <input type="radio" name="sex" />
        女
    </label>

    <input type="radio" id="nan" name="sex" />
    <label for="nan">男</label> <!-- label使得点击 男 这个字也能实现选中单选框效果，无需直接点击单选框 -->

3.select下拉表单

<form>
    籍贯:
    <select>
        <option>山东</option>
        <option>北京</option>
        <option>天津</option>
        <option selected="selected">火星</option>
    </select>
</form>

4.textarea文本域

<form>
    文本域:
    <textarea cols="50" rows="5">1111111111111111</textarea>
</form>