WEBBASE篇： 第二篇， HTML知识2
HTML知识2
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <h1 align='center'>HTML5<Day01></h1> <hr> <h2>1 HTML 文档片段</h2> <h3>1.1 问题</h3> <p>创建如图-1所示的html页面</p> <h3>1.2 方案</h3> <p>使用html完成效果</p> <h3>1.3 实现</h3> <p>创建index.html,完成效果</p> <h3>1.4 扩展</h3> <p>创建如图所示的表格</p> </head> <body> </body> </html>
一，列表：
1，列表的组成：
a , 列表的类型：
（1）有序列表： <ol></ol> Order LIst
（2）无序列表： <ul></ul> Unorder List
b，列表项：<li></li> : List Item
eg: 创建一个有序列表
<ol>
<li>《水浒传》</li>
<li>《西游记》</li>
<li>《红楼梦》</li>
<li>《三国演义》</li>
</ol>
eg: 创建一个无序列表
<ul>
<li>《水浒传》</li>
<li>《西游记》</li>
<li>《红楼梦》</li>
<li>《三国演义》</li>
</ul>
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <ol> <li>《水浒传》</li> <li>《西游记》</li> <li>《红楼梦》</li> <li>《三国演义》</li> </ol> <ul> <li>白眉鹰王</li> <li>青翼蝠王</li> <li>紫衫龙王</li> <li>金毛狮王</li> </ul> </body> </html>
2，列表的属性
（1）<ol>
属性：type ; 取值： 1: 按数字方式显示标识，默认值；
A：按大写英文字符方式显示标识；
a ：按小写英文字符方式显示标识；
I ： 按大写罗马数字方式显示标识；
i ：按小写罗马数字方式显示标识；
（2）<ul>
属性：type ； 取值： disc： 默认值，实心圆点
circle: 空心圆点
square： 实心方块
none ： 不显示任何标识； 如：<ul type='none'>
3，列表的嵌套：
被嵌套的内容必须放在 <li> </li> 中;
<ul>
<li>
<ol>
<li></li>
</ol>
</li>
</ul>
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <ol> <li> 《水浒传》 <ol type='a'> <li>武大郎</li> <li>西门庆</li> <li>潘金莲</li> </ol> </li> <li> 《三国演义》 <ol type='i'> <li>吕布</li> <li>董卓</li> <li>貂蝉</li> </ol> </li> </ol> <ol> <li>《水浒传》</li> <li>《西游记》</li> <li>《红楼梦》</li> <li>《三国演义》</li> </ol> <ul type='none'> <li>白眉鹰王</li> <li>青翼蝠王</li> <li>紫衫龙王</li> <li>金毛狮王</li> </ul> </body> </html>
二，图像和链接：
1，URL ： Uniform Resource Locator 统一资源定位器， 主要用于标识网络中资源的位置，俗称，路径；
URL分类：
绝对路径：从一个固定的位置处去查找资源文件的地址，
网络资源：（1）协议名称，https （2）主机名/域名/IP地址，www.xxxx.com（3）目录路径，文件夹所在的文件夹，（4）文件名称，
相对路径：从当前文件位置处开始查找资源文件所经过的路径就是相对路径，
根相对路径：以‘/’作为开始来标识大陆架；
2，图像：
（1）标记： <img>
（2）属性：src ： 要稀疏的图片的url（相对/j绝对/根相对）
width： 设置图片的宽度，以px为单位的数值（允许省略px）
height : 设置图片的高度，同上；
注：如果width和height ，如果只设置其中一个属性值的话，那么另一个属性值也会跟着等比缩放；
3，链接
超链接： 允许通过鼠标的点击完成页面跳转的行为，就是超链接；
语法：标记： <a>内容</a>
属性： href： 标识要链接到的文件的地址
target： 指定打开新网页的方式； 取值： _self , 默认值，在自身标签中打开网页；
_blank, 在新标签页中打开新网页；
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <ol> <li> 《水浒传》 <ol type='a'> <li>武大郎</li> <li>西门庆</li> <li>潘金莲</li> </ol> </li> <li> 《三国演义》 <ol type='i'> <li>吕布</li> <li>董卓</li> <li>貂蝉</li> </ol> </li> </ol> <ol> <li>《水浒传》</li> <li>《西游记》</li> <li>《红楼梦》</li> <li>《三国演义》</li> </ol> <ul type='none'> <li>白眉鹰王</li> <li>青翼蝠王</li> <li>紫衫龙王</li> <li>金毛狮王</li> </ul> <hr> <a href="https://www.baidu.com" target='_blank'>百度</a> <br> <img src="https://www.baidu.com/img/bd_logo1.png" title="百度" width="200"> <br> </body> </html>
三，表格
1，表格是按照一定的结果来展示数据的；表格是按照从上到下，从左到右的方式来展示数据的；数据全部都保存在单元格中；
2，语法： 标记： 表格 ：<table></table>
表行： <tr></tr> -----Table Row
单元格（列）： <td></td> --- Table Data
属性：（1）表格：border ：指定表格的边框宽度，以px为单位（px可以省略）；
width ： 指定表格的宽度， 以px为宽度；
height ： 指定表格的高度，
align ： 指定表格在父元素中的水平对齐方式（center ，left， right）；
cellpadding： 单元格内边距；
cellspacing : 单元格外边框；
（2） tr 属性： align 取值：（center ，left， right） 控制当前行的文本的水平对齐方式；
valign 取值： top 上 /middle 中 /bottom 下
bgcolor 作用：控制当前行的背景颜色； 取值：表示颜色的英文单词；
（3） td 属性： 1，width；2 ， height； 3，align ； 4，valign； 5，bgcolor；
6，colspan ：跨列 ； 7，rowspan， 跨行；
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <table border='1' width='500' height='300' align='center' cellpadding='5' cellspacing='0'> <tr align='center' valign='top' bgcolor='blue'> <td>姓名</td> <td>身高</td> <td>体重</td> <td>年龄</td> </tr> <tr> <td>小明</td> <td>170</td> <td>170</td> <td>18</td> </tr> <tr> <td>莉莉</td> <td>168</td> <td>100</td> <td>17</td> </tr> <tr> <td>MM</td> <td>178</td> <td>99</td> <td>18</td> </tr> </table> </body> </html>
3， 不规则表格的创建：
（1）单元格的跨行
从指定单元格位置处开始，横向向右合并几个单元格（包含自己），被合并掉的单元格要删除出去；
语法： colspan=‘n’
（2） 单元格的跨列
从指定单元格位置处开始，纵向向下合并几个单元格（包含自己），被合并掉的单元格要删除出去；
语法：rowspan=‘n’
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <table border='1' width='500' height='300' align='center' cellpadding='5' cellspacing='0'> <tr align='center' valign='top' bgcolor='blue'> <td>姓名</td> <td>身高</td> <td>体重</td> <td>年龄</td> </tr> <tr> <td>小明</td> <td colspan='2' align='center' valign='middle'>170</td> <td>18</td> </tr> <tr> <td>莉莉</td> <td>168</td> <td rowspan='2' align='center'>100</td> <td>17</td> </tr> <tr> <td>MM</td> <td>178</td> <td>18</td> </tr> </table> </body> </html>
4，分组：
语法：
（1）表头行分组：
<thead></thead>
（2）表尾行分组：
表格的最后一行如果要分组的话，放在表尾行分组；
<tfoot></tfoot>
（3）表主体行分组：
除了表头和表尾行分组之外，剩余放在表主体中
<tbody></tbody>
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <table border='1' width='500' height='300' align='center' cellpadding='5' cellspacing='0'> <thead> <tr> <td>姓名</td> <td>身高</td> <td>体重</td> <td>年龄</td> </tr> </thead> <tbody bgcolor='yellow'> <tr> <td>小明</td> <td>170</td> <td>170</td> <td>18</td> </tr> <tr> <td>莉莉</td> <td>168</td> <td>100</td> <td>17</td> </tr> <tr> <td>MM</td> <td>178</td> <td>100</td> <td>18</td> </tr> <tr> <td>小明</td> <td>170</td> <td>170</td> <td>18</td> </tr> <tr> <td>莉莉</td> <td>168</td> <td>100</td> <td>17</td> </tr> </tbody> <tr> <td>MM</td> <td>178</td> <td>100</td> <td>18</td> </tr> <tr> <td>小明</td> <td>170</td> <td>170</td> <td>18</td> </tr> <tr> <td>莉莉</td> <td>168</td> <td>100</td> <td>17</td> </tr> <tr> <td>MM</td> <td>178</td> <td>100</td> <td>18</td> </tr> <tr> <td>小明</td> <td>170</td> <td>170</td> <td>18</td> </tr> <tr> <td>莉莉</td> <td>168</td> <td>100</td> <td>17</td> </tr> <tr> <td>MM</td> <td>178</td> <td>100</td> <td>18</td> </tr> <tr> <td>小明</td> <td>170</td> <td>170</td> <td>18</td> </tr> <tr> <td>莉莉</td> <td>168</td> <td>100</td> <td>17</td> </tr> <tr> <td>MM</td> <td>178</td> <td>100</td> <td>18</td> </tr> <tr> <td>小明</td> <td>170</td> <td>170</td> <td>18</td> </tr> <tr> <td>莉莉</td> <td>168</td> <td>100</td> <td>17</td> </tr> <tr> <td>MM</td> <td>178</td> <td>100</td> <td>18</td> </tr> <tr> <td>小明</td> <td>170</td> <td>170</td> <td>18</td> </tr> <tr> <td>莉莉</td> <td>168</td> <td>100</td> <td>17</td> </tr> <tr> <td>MM</td> <td>178</td> <td>100</td> <td>18</td> </tr> <tr> <td>小明</td> <td>170</td> <td>170</td> <td>18</td> </tr> <tr> <td>莉莉</td> <td>168</td> <td>100</td> <td>17</td> </tr> <tr> <td>MM</td> <td>178</td> <td>100</td> <td>18</td> </tr> </table> <br><br><br> <table border='1' width='500' height='300' align='center' cellpadding='5' cellspacing='0'> <tr align='center' valign='top' bgcolor='blue'> <td>姓名</td> <td>身高</td> <td>体重</td> <td>年龄</td> </tr> <tr> <td>小明</td> <td colspan='2' align='center' valign='middle'>170</td> <td>18</td> </tr> <tr> <td>莉莉</td> <td>168</td> <td rowspan='2' align='center'>100</td> <td>17</td> </tr> <tr> <td>MM</td> <td>178</td> <td>18</td> </tr> </table> </body> </html>
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <table border='1' cellspacing='0' width='300' height='300'> <tr> <td rowspan='2'>a</td> <td colspan='2'>b</td> </tr> <tr> <td>f</td> <td rowspan='2'>g</td> </tr> <tr> <td colspan='2'>x</td> </tr> </table> </body> </html>
四， 表单
作用： 收集用户的信息并提交给服务器； 表单在网页中是不可见的，但是功能是不能忽略的
1，表单中的两个元素：
（1） form元素： 收集用户的信息；
（2）表单控件： 能够与用户进行数据交互的可视化组件；
2，form元素
作用：就是表单，收集信息并提交给服务器，
语法： <form></form>
注： 只有放在form 中的表单控件，才能被提交；
属性：（1）action ： 指定提交给服务器上处理程序的地址 ； 默认提交给本页；
（2）method： 提交方法/方式；
取值：get ：默认值；向服务器要数据时使用get
特点：1，提交数据会显示在地址栏上；2，安全性较低；3，有提交数据的大小限制--2KB ;
post ： 要提交数据给服务器处理时，使用post；如：登录，注册，帖子等
特点： 1，隐式提交，看不到提交的数据； 2， 安全性较高；3，无提交数据的大小限制；
（3）enctype ： 指定表单数据进行编码的方式；即允许将什么药的数据提交给服务器；
取值：application/x-www-form-urlencoded 默认值， 允许将所有的文本数据提交给服务器；
multipart/form-data 允许将文件提交给服务器；
text/plain 允许将普通字符提交给服务器，特殊字符不行；
3，表单控件；
作用： 可视化的组件，用于与用户进行数据交互；表单控件只有放在<from> 才允许被提交；
表单控件详解：
（1）文本框 与 密码框
文本框： <input type='text'>
密码框： <input type='password'>
属性： 1，name ： 为控件起名， 在服务器上使用；
2， value ： 值，控件上所显示的值；
3， maxlength ： 限制输入的最大字符数；
4， placeholder ： 提示占位符；
按钮：
（1）提交按钮：<input type='submit'>
（2）重置按钮： <input type='reset'>
（3）普通按钮： <input type='button'> 用户自定义
属性： value： 控制按钮上的文字；
<button>按钮上的文字</button>
type:submit/reset/button
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <form action="login" method='post'> <!-- 1,创建文本框 --> <p> 用户名： <input type='text' name='uname' maxlength='12' placeholder='请输入用户名'> </p> <!-- 2,创建密码框 --> <p> 密码： <input type="password" name='upwd' maxlength='12' placeholder='请输入6-12位密码'> </p> <!--按钮--> <p> <input type='submit' value='提交'> <input type="reset" value='重置'> <input type="button" value='已有账号，开始登录？'> <input type="button" value='忘记密码？'> </p> </form> </body> </html>
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <form action="https://www.baidu.com/s"> <input type="text" name='wd' placeholder='请输入查询关键字'> <input type='submit' value='百度一下'> </form> </body> </html>
表单控件分为：单选按钮和复选框
1， 单选按钮： <input type='radio'>
复选框：<input type='checkbox'>
属性： （1）name ： 为控件定义名称。 除了定义名称之外，name属性也起到了分组的作用；一组的单选按钮和复选框，名称必须一致；
（2） value ： 定义控件的值； 当用户选中控件的时候，则将该控件的value提交给服务器；
（3） checked： 设置预选中， 该属性无值；
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <form action="login"> <p> 性别： <input checked type="radio" name='gender' value='0'> 男 <input type="radio" name='gender' value='1' > 女 </p> <p> 爱好： <input type="checkbox" name='hobby' value='0'>吃 <input type="checkbox" name='hobby' value='1'>喝 <input type="checkbox" name='hobby' value='2'>玩 <input type="checkbox" name='hobby' value='3'>乐 </p> </form> </body> </html>
,2，隐藏域 和 文件选择框
隐藏域： 作用： 想提交给服务器但不想给用户看的数据要放在隐藏域中；
语法：<input type='hidden'>
属性：name 定义控件的名称；
value ： 定义控件的值；
文件选择框：（上传用户头像）
语法： <input type='file'>
属性： name : 定义控件名称；
注： 1, 表单的method必须为post；2，表单的enctype必须为multipart/form-data ; 两点必须满足；
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <form action="login" method='post' enctype='multipart/form-data' > <p> 性别： <input checked type="radio" name='gender' value='0'> 男 <input type="radio" name='gender' value='1' > 女 </p> <p> 爱好： <input type="checkbox" name='hobby' value='0'>吃 <input type="checkbox" name='hobby' value='1'>喝 <input type="checkbox" name='hobby' value='2'>玩 <input type="checkbox" name='hobby' value='3'>乐 </p> <p> <input type="file" name='上传头像'> </p> <p> <input type="hidden" name='uid' value='12232352342'> <button type="submit">提交数据</button> </p> </form> </body> </html>
3，多行文本域
标记： <textarea></textarea>
属性： name 定义控件的名称；
cols： 指定文本的列数（一行中最多能显示多少个英文字符，中文减半）；
rows： 指定文本域的默认行数；
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <form action="login" method='post' enctype='multipart/form-data' > <p> 性别： <input checked type="radio" name='gender' value='0'> 男 <input type="radio" name='gender' value='1' > 女 </p> <p> 爱好： <input type="checkbox" name='hobby' value='0'>吃 <input type="checkbox" name='hobby' value='1'>喝 <input type="checkbox" name='hobby' value='2'>玩 <input type="checkbox" name='hobby' value='3'>乐 </p> <p> <input type="file" name='上传头像'> </p> <p> <input type="hidden" name='uid' value='12232352342'> <button type="submit">提交数据</button> </p> <p> 用户名称： <input type="text" name='uname'> <br><br><br><br> 自我介绍： <textarea name="hello" id="" cols="30" rows="10"></textarea> </p> </form> </body> </html>
4， 下拉选项框：
<select name=''>
<option value=‘值1’>显示内容1</option>
<option value=‘值2’>显示内容2</option>
<option value=‘值3’>显示内容3</option>
</select>
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <form action="login" method='post' enctype='multipart/form-data' > <p> 性别： <input checked type="radio" name='gender' value='0'> 男 <input type="radio" name='gender' value='1' > 女 </p> <p> 爱好： <input type="checkbox" name='hobby' value='0'>吃 <input type="checkbox" name='hobby' value='1'>喝 <input type="checkbox" name='hobby' value='2'>玩 <input type="checkbox" name='hobby' value='3'>乐 </p> <p> <input type="file" name='上传头像'> </p> <p> <input type="hidden" name='uid' value='12232352342'> <button type="submit">提交数据</button> </p> <p> 用户名称： <input type="text" name='uname'> <br><br><br><br> 自我介绍： <textarea name="hello" id="" cols="30" rows="10"></textarea> </p> <p> 所在地址： <select name="addr" id=""> <option value="1">北京市</option> <option value="2">天津市</option> <option value="3">上海市</option> <option value="4">重庆市</option> </select> </p> </form> </body> </html>
练习1
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <h1>修改个人信息</h1> <form action="update" method='post'> <table border='1' cellspacing='0'> <tr> <td>姓名：</td> <td> <input type="text" name='uname' value='mary'> </td> </tr> <tr> <td>性别：</td> <td> <input type="radio" name='gender' value='1'>女士 <input type="radio" name='gender' value='0' checked>男士 </td> </tr> <tr> <td>学历：</td> <td> <select name="edu" id=""> <option value="0">其他</option> <option value="1">专科</option> <option value="2">本科</option> <option value="3">硕士及以上</option> </select> </td> </tr> <tr> <td valign='top'>个人描述:</td> <td> <textarea name="desc" cols="30" rows="5"></textarea> </td> </tr> <tr> <td></td> <td> <input type="checkbox" name='isPublic'>不要公开我的信息 </td> </tr> <tr> <td></td> <td> <input type="submit" value='保存'> <input type="reset" value='重填'> </td> </tr> </table> </form> </body> </html>
