1-1：列表、表格、表单

• HTML结构层：负责从语义的角度搭建页面结构

• CSS样式层 ：负责从审美的角度美化页面

• JavaScript层 ：负责从交互的角度提升用户体验

关键字：keywords

注释

<!--注释的文字-->

标题

h1~h6，<h1></h1>，字号越来越小（自动换行）

段落

<p>我是<span style="color:red;">一个段落</span></p>
// span行内标签不会自动换行

自动换行

<br>

水平线

<hr>

图片

<img src="图片地址" title="图片的描述" alt="图片不能正常加载显示的文字">
// 网页图片可以直接写图片的网址

空格

 &nbsp；

超链接

<a href="https://www.baidu.com/" target="_blank">百度一下</a>
// target="_blank"：在新窗口打开

描点链接

<a name="c1"><h1>标题一</h1></a>
<a href="#c1">描点链接</a>
c1：自己命名的名字，不能数字开头不能用关键字（跳转位置）
// 描点链接可以快速定位到目标内容

<a href="#">描点链接</a>
// 只有一个#号，作用是刷新当前页面，不会进行跳转

列表

• 无序列表

<ul type="circle">
    <li></li>
</ul>

• 有序列表

<ol type="1">
    <li></li>
</ol>

• 自定义列表

<dl>
    <dt>标题</dt>
    <dd>对标题的描述</dd>
</dl>

清除无序列表前面的小圆点：

表格

<table border="表格粗细" width=“..px” height=“..px” bgcolor=“表格背景颜色” background=“表格背景 图片” bordercolor=“边框颜色” align=“center”>
    <tr>
        <td rowspan=“2”>......</td> // rowspan：跨2行
        <td colspan=“2”>......</td> // colspan：跨2列
        <td>......</td>
    <tr>
</table>
// tr：每一行 td：每一格

表单

<form>
    文本框：<input type="text"><br> // input不会自动换行
    密码：<input type="password"><br>

    // 设置一个相同的name属性，就只能选择一个
    单选框：<input type="radio" name="sex">男<input type="radio" name="sex">女<br>
    
    // 设置一个相同的name属性，就能选择多个
    多选框：<input type="checkbox" name="city">成都
           <input type="checkbox" name="city">重庆
           <input type="checkbox" name="city">贵州<br>

    选中：<input type="checkbox">我同意xx注册协议 // 全选
    下拉列表：<select>
                <option>1993</option>
                <option>1994</option>
                <option>1995</option>
                <option>1996</option>
            </select>年<br>
    文本域：<textarea cols="10" rows="4"></textarea><br>
    普通按钮：<input type="button" value="搜索/注册"> // value：按钮显示的文字
    特殊提交按钮：<input type="submit" value="提交">  // 数据提交到数据库的按钮
    取消按钮：<input type="reset" value="取消">
</form>

表格表单结合

<form>
    <table>
        <tr>
            <td>......</td>
        <tr>
    </table>
</form>

练习

<h3>邮箱注册</h3>
<br/>
<form>
    <table align="center" background="img/2.jpg" height="500px" width="800pxpx">
        <tr>
            <td>
                邮箱地址
            </td>
            <td>
                <input type="text"/>
                <select name="">
                    <option value="">
                        @sina.com
                    </option>
                    <option value="">
                        @sina.cn
                    </option>
                </select>
            </td>
        </tr>
        <tr>
            <td>
                密码
            </td>
            <td>
                <input type="text"/>
            </td>
        </tr>
        <tr>
            <td>
                确认密码
            </td>
            <td>
                <input type="text"/>
            </td>
        </tr>
        <tr>
            <td>
                手机号码
            </td>
            <td>
                <input type="text"/>
            </td>
        </tr>
        <tr>
            <td>
                图片验证码
            </td>
            <td>
                <input type="text"/>
                <input type="text"/>
            </td>
        </tr>
        <tr>
            <td>
            </td>
            <td>
                <input type="button" value="免费获取短信验证码"/>
            </td>
        </tr>
        <tr>
            <td>
                短信验证码
            </td>
            <td>
                <input type="text"/>
            </td>
        </tr>
        <tr>
            <td>
            </td>
            <td>
                <a href="">
                    微信注册
                </a>
            </td>
        </tr>
        <tr>
            <td>
            </td>
            <td>
                <input checked="checked" type="radio"/>
                我已阅读并接受
            </td>
        </tr>
        <tr>
            <td>
            </td>
            <td>
                <input style="background: yellowgreen;color: white;width: 100px;" type="submit" value="立即注册"/>
            </td>
        </tr>
    </table>
</form>