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

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

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

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



关键字：keywords



注释：<!--注释的文字-->
标题：h1~h6，<h1></h1>，字号越来越小（自动换行）
段落：<p>我是<span style="color:red;">一个段落</span></p>

//span标签不会自动换行
自动换行：<br>
水平线：<hr>
图片：<img src="图片地址" title="图片的描述" alt="图片不能正常加载显示的文字">

//网页图片可以直接写图片的网址
空格：  ；
超链接：<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> // tr：每一行 td：每一格

</table>

表单：

<form>

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

密码：<input type="password"><br>

单选框：<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>

//设置一个相同的name属性，就能选择多个

选中：<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>
练习1：



练习2：



<h3>邮箱注册</h3>
<br />
<form>
<table align="center" width="800pxpx" height="500px" background="img/2.jpg">
<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 type="radio" checked="checked" />我已阅读并接受</td>
</tr>
<tr>
<td> </td>
<td><input type="submit" value="立即注册" style="background: yellowgreen;color: white;width: 100px;" /></td>
</tr>
</table>
</form>