@MRsunhuimin
2019-07-09T13:14:58.000000Z
字数 5932
阅读 177
html
列表就是信息资源的一种展示形式。它可以使信息结构化和条理化，并以列表的样式显示出来，以便浏览者能更快捷地获得相应的信息
无序列表的特性：
1.没有顺序，每个<li>标签独占一行（块元素）
2.默认<li>标签项前面有个实心小圆点
3.一般用于无序类型的列表，如导航、侧边栏新闻、有规律的图文组合模块等
<ul><li>aa</li><li>bb</li><li>cc</li></ul>
无序列表
有序列表的特性：
1.有顺序，每个<li>标签独占一行（块元素）
2.默认<li>标签项前面有顺序标记
3.一般用于排序类型的列表，如试卷、问卷选项等
<ol><li>潇洒走一回</li><li>偏偏喜欢你</li><li>酒干倘卖无</li><li>不说再见</li><li>舍不得你</li><li>请跟我来</li></ol>
音乐排行榜
定义列表的特性：
1.没有顺序，每个<dt>标签、<dd>标签独占一行（块元素）
2.默认没有标记
3.一般用于一个标题下有一个或多个列表项的情况
<a>定义列表</a><dl><dt>这里声明了列表项</dt><dd>列表内容1</dd><dd>列表内容2</dd><dd>列表内容3</dd><dd>列表内容4</dd></dl>
定义列表
为什么使用表格？
1.简单通用
2.结构稳定
<table border="1px"><!--1px的单位（像素）可以省略,--><tr><!-- <table>是表格标签,<tr>是行标签--><td>1</td><!--<td>是单元格标签--><td>2</td></tr><tr><td>3</td></tr><tr><td>4</td></tr></table>
<table border="1"><tr><td colspan="3" align="center">学生成绩</td><!--colspan 跨列--></tr><tr><td rowspan="2">张三</td><!--rowspan 跨行--><td>语文</td><td>100</td></tr><tr><td>数学</td><td>99</td></tr><tr><td rowspan="2">李四</td><td>语文</td><td>60</td></tr><tr><td>数学</td><td>70</td></tr></table>
<video src="视频路径" controls></video><!--controls 提供播放、暂停和音量的控件--><video src="img/vedio1.mp4" controls="controls" autoplay="autoplay"></video><!--autoplay 自动播放属性，后两个属性可以简写-->
<audio controls><score src="音频1路径" type="audio/mepg"/><score src="音频2路径" type="audio/ogg"/>你的浏览器不支持audio元素</audio>
页面布局分析
整个页面包括三个部分：
1.页面头部
<header>...</header>
2.页面主体
<section>...</section>
3.页面底部
<footer>...</footer>
| 元素名 | 描述 |
|---|---|
| heade | 标题头部区域的内容（用于页面或页面中的一块区域） |
| footer | 标记脚部区域的内容（用于整个页面或页面的一块区域 |
| section | Web页面中的一块独立区域 |
| article | 独立的文章内容 |
| aside | 相关内容或应用（常用于侧边栏） |
| nav | 导航类辅助内容 |
<iframe>属性（实现页面间的相互跳转）
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>百度和淘宝内联框架</title></head><body><a href="http://www.baidu.com">百度跳转</a><br /><a href="http://www.taobao.com">淘宝跳转</a><br /><iframe src="http://www.baidu.com" name="baidu"></iframe><br /><iframe src="http://www.taobao.com" name="taobao" ></iframe></body></html>
<form method="post" action="123456.html"><!-- method 属性规定如何发送表单数据,常用值get和post； action 属性表示向何处发送表单数据；post安全性高，实际网页开发中通常用post提交表单数据--><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>
<input type="text" name="fname" value="text"/><!-- type: input元素类型name属性：input元素名称value属性：input元素的值 -->
| 属性 | 说明 |
|---|---|
| type | 指定元素的类型。text、password、checkbox、radio、submit、reset、file、hidden、image 和 button，默认为 text |
| name | 指定表单元素的名称 |
| value | 元素的初始值。type 为 radio时必须指定一个值 |
| size | 指定表单元素的初始宽度。当 type 为 text 或 password时，表单元素的大小以字符为单位。对于其他类型，宽度以像素为单位 |
| maxlength | type为text 或 password 时，输入的最大字符数 |
| checked | type为radio或checkbox时，指定按钮是否是被选中 |
<input type="text" name="userName" value="用户名" size="30" maxlength="20" /><!-- type属性：文本框name属性：文本框名称value属性：文本框初始值size属性：文本框长度maxlength属性：文本框可输入最多字符 -->
<input type="password " name="pass" size="20" /><!-- type属性：密码框name属性：密码框名称size属性：文本框长度 -->
<input name="sex" type="radio" value="男" checked />男<input name="sex" type="radio" value="女" />女<!-- name属性：单选框名称type属性：单选按钮框value属性：提交表单后接收到的值checked属性：单选按钮选中状态 -->
<input type="checkbox" name="interest" value="sports"/>运动<input type="checkbox" name="interest" value="talk" checked />聊天<input type="checkbox" name="interest" value="play"/>玩游戏<!-- type属性：复选框name属性：复选框名称value属性：提交表单后接收到的值checked属性：复选框选中状态 -->
<select name="列表名称" size="行数"><option value="选项的值" selected="selected">…</option ><option value="选项的值">…</option ></select><!-- select标签：列表框selected属性：默认选中项option标签：选项 -->
<input type="reset" name="butReset" value="reset按钮"><input type="image" src="images/login.gif" /><input type="button" name="butButton" value="button按钮"/><!-- type属性 reset：重置按钮image：提交按钮button：普通按钮src属性：图片路径value="reset按钮"：按钮上显示的文字 -->
<textarea name="showText" cols="x" rows="y">文本内容</textarea ><!-- textarea标签：多行文本域cols属性：显示的列数rows属性：显示的行数 -->
<form action="" method="post" enctype="multipart/form-data"><p><input type="file" name="files" /><input type="submit" name="upload" value="上传" /></p></form><!-- enctype属性：表单编码属性type="file"：文件域 -->
<p>邮箱:<input type="email" name="email"/></p><!-- type属性：邮箱，会自动验证Email地址格式是否正确 -->
<p>请输入你的网址:<input type="url" name="userUrl"/></p><!-- type属性：网址，会自动验证URL地址格式是否正确 -->
<p>请输入数字:<input type="number" name="num" min="0" max="100" step="10"/></p><!-- type属性：数字min属性:允许的最小值max属性:允许的最大值step属性：合法的数字间隔-->
<p>请输入数字:<input type="range" name="range1" min="0" max="10" step="2"/></p><!-- type属性：滑块min属性:允许的最小值max属性:允许的最大值step属性：合法的数字间隔-->
<p>请输入搜索的关键词:<input type="search" name="sousuo"/></p><!-- type属性：搜索框-->
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>人人网登录页面</title></head><body><img src="img/人人网.png" width="300" height="100"/><p>人人网，中国<strong>最真实，最有效</strong>的社会平台，找回老朋友，结交新朋友。</p><form action="123456.html" method="post"><p>电子邮箱：<input type="email" name="email" placeholder="请输入电子邮箱"/></p><p>设置密码：<input type="password" name="password" placeholder="请输入密码"/></p><p>真实姓名：<input type="text" name="name"placeholder="请输入真实姓名"/></p><p>性别：<input type="radio" name="sex" checked="checked" value="男"/>男<input type="radio" name="sex" value="女"/>女</p><p>生日：<select name="birthday"><option selected="selected">1991</option>年<option>1992</option><option>1993</option></select><select><option selected="selected">11</option>月<option>12</option><option>1</option></select><select><option selected="selected">30</option>日<option>1</option><option>2</option></select></p><p>为什么要填写我的生日？</p><p>我现在 <select name="work"><option selected="selected">请选择身份</option><option>医生</option><option>教师</option><option>学生</option></select>（非常重要）</p><p><img src="img/活动1.png" height="50" width="150"/><a href="#" >看不清换一张</a></p><p>验证码：<input type="text" name="验证码" placeholder="请输入验证码"/></p><p><textarea name="ShowTest" rows="5" cols="10"></textarea></p><p><input type="button" name="but" value="button按钮"/></p><p><input type="image" src="img/按钮.gif"/></p></form></body></html>