HTML列表、表格和表单
目录
列表
表格
媒体元素
页面布局
表单语法
表单元素
文本框
密码框
单选按钮
复选框
列表框
按钮
多行文本域
邮箱
网址
表单的高级应用
隐藏域
只读和禁用
表单元素的标注
表单初级验证的方法
文本提示 placeholder
必填项required
验证规则 pattern
列表
//无序列表
<ul> //声明无序列表 <li>范冰冰演藏族女孩</li><li>撞死两个人后自拍</li><li>诗隆甜蜜出游</li><li>一线城市楼市退烧</li> //<li> 声明列表项</ul>
//有序列表
<ol> //声明有序列表 <li>范冰冰演藏族女孩</li><li>撞死两个人后自拍</li><li>诗隆甜蜜出游</li><li>一线城市楼市退烧</li>
</ol>
//定义列表
<dl> //声明定义列表 <dt>水果</dt> //定义列表项定义列表项<dd>苹果</dd>//定义内容<dd>桃子</dd><dd>李子</dd>
</dl>
//定义列表的特性：没有顺序，每个<dt>标签、<dd>标签独占一行，默认没有标记没有顺序
表格
// 语法
<table border="1"> //border="1"表示有边框 默认为0<tr><td>11</td><td>12</td></tr><tr><td>21</td><td>22</td></tr>
</table>//表格的跨列
<table border="1"><tr><td colspan="2">学生成绩</td> //colspan表示跨列</tr><tr><td>语文</td><td>98</td></tr><tr><td>数学</td><td>95</td></tr>
</table>//表格的跨行
<table border="1"><tr><td rowspan="2">张三</td> //rowspan表示跨行<td>语文</td><td>98</td></tr><tr><td>数学</td><td>95</td></tr><tr><td rowspan="2">李四</td><td>语文</td><td>88</td></tr><tr><td>数学</td><td>91</td></tr>
</table>
媒体元素
//视频元素
<video src="视频路径" controls></video>
//音乐元素
<audio src="音频路径" controls></audio >src：指定要播放的音频文件的路径
controls：提供播放、暂停和音量的控件页面布局
<header><h2>网页头部</h2> </header><section><h2>网页主体部分</h2></section><footer><h2>网页底部</h2></footer>
表单语法
<form method="post" action="result.html"> <p> 名字：<input name="name" type="text" > </p><p> 密码：<input name="pass" type="password" > </p><p><input type="submit" name="Button" value="提交"/><input type="reset" name="Reset" value="重填“/> </p>
</form>
method:规定如何发送表单数据 常用值：get | post
action:表示向何处发送表单数据//表单元素格式语法
<input type="text" name="fname" value="text"/>type ：元素类型name ：元素名称value：元素的值 
表单元素
文本框
<input type="text" name="userName" value="用户名" size="30" maxlength="20" />
密码框
单选按钮
//name="gen" 表明这两个单选按钮属于同一组
//checked:当 checked 属性被添加到某个单选按钮时，这个按钮在页面加载时就会被选中。复选框
列表框
按钮
多行文本域
邮箱
//会自动验证Email地址格式是否正确
网址
//会自动验证URL地址格式是否正确
表单的高级应用
隐藏域
只读和禁用
表单元素的标注
表单初级验证的方法
文本提示 placeholder
//input类型的文本框提供一种提示（hint）
//可以描述文本框期待用户输入何种内容
//提示语默认显示，当文本框中输入内容时提示语消失
//适合于input标签：text、search、url、email和password等类型<input type="search" name="sousuo" placeholder="请输入要搜索的关键字"/>placeholder:文本框输入内容提示必填项required
//规定文本框填写内容不能为空，否则不允许用户提交表单
//适合于input标签：text、search、url、email、password、number、checkbox、radio、file等类型
<input type="text" name="username" required/>
required:表示此项必填验证规则 pattern
//用户输入的内容必须符合正则表达式所指的规则，否则就不能提交表单
例如：昵称：pattern="[-\w\u4E00-\u9FA5]{4,10}"密码：pattern="^[\dA-Za-z]{6,16}$"手机号码：pattern="1[3578]\d{9}年龄：pattern="\d|[1-9]\d|1[0-2]\d"