![ThinkPHP5实战之[教学管理系统]](https://img.php.cn/upload/course/000/000/068/6253d87459486427.png)
批改状态：合格
老师批语：写得相当不错也
收藏
收藏
收藏
1.谈谈你对html标签,元素与属性的理解,并举例说明.
2.列表有几种,如何定义?
3.列表与表格的区别与联系?什么时候用列表,什么时候用表格,为什么?
4.编程实现,用列表制作你的工作计划,要求使用三种类型全部实现一次:<ul><ol><dl>
5.编程实现一张商品清单,使用表格实现,要求有行与列的合并,用到colspan,rowspan
6.编程实现一张注册表单,要求使用到课堂上讲到全部控件,并掌握所有属性的使用场景与意义
7.写出总结,对于这些常用标签的应用场景进行分析
感悟: 学而不思则茫,思而不练则忘.
第一题.
答: HTML文档是由各种HTML元素组成的,如html元素(文档根元素), head(头部)元素, body(主体)元素, title(标题)元素和 p(段落)元素等,这些元素都是通过尖括号"<>"组成的标签形式来表现的. 事实上,HTML文档内容就是标签,元素和属性.例如下面的HTML文档.
<!DOCTYPE html><html> <head><meta charset="UTF-8"> <title>一个很响亮的标题</title> </head> <body> <h1>为什么很响亮</h1> <hr> <p>Duang!!!!......</p> </body> </html>
点击 "运行实例" 按钮查看在线实例
HTML标签 是由一对尖括号<>及标签名组成的.标签分为"起始标签"和"结束标签"两种,两者的标签名称是相同的,只是结束标签多了一个斜杠"/".如图所示,<p> 为起始标签,</p>为结束标签,"p"为标签名称,它是英文"paragraph(段落)"的缩写.标签名称对大小写不敏感,如<P>......<p>和<P>.....</P>的效果是一样的.不过,HTML 规范推荐使用小写字母表示标签.
HTML元素 是组成HTML文档最基本的部分,它是用标签来表现的,一般来说,"起始标签"表示元素的开始,"结束标签"表示元素的结束.HTML元素分为"有内容的元素"和"空元素"两种.
“有内容的元素”是由起始标签、结束标签以及两者之间的元素内容组成的，其中元素内容既可以是需要显示在网页中的文字内容，也可以是其它元素。
例如上面的示例中，起始标签<p>与结束标签</p>组成的元素，它的元素内容是“Duang!!!!......”；起始标签<head>和结束标签</head>之间的元素内容是另外一个元素“title”。“空元素”只有起始标签而没有结束标签，也没有元素内容，如上面示例中的<hr>（横线）元素就是空元素。
HTML元素可以按另一种方式分为“块元素”和“行元素”。“块元素”在网页中的效果是该元素的内容对于其前后元素的内容都另起一行。如图2所示，<p>是块元素，浏览器会单独用一行来显示块元素。“行元素”在网页中的效果是该元素的内容对于其前后元素的内容都在一行显示。如图3所示，<b>元素和<input>元素是行元素，浏览器会将它们的内容都放置在一行显示。
图2 块状元素
图3 行元素
HTML元素属性
HTML的元素属性提供了对HTML元素的描述和控制信息，借助于元素属性，HTML网页才会展现丰富多彩且格式美观的内容。例如要设置<p>元素中文字内容的颜色为红色，字号为30像素，这时就需要用到HTML元素属性了。如图4所示，在<p>元素名称的尖括号内添加了“style="color:#ff0000;font-size:30px"”内容，浏览器就会按照设定的效果来显示内容。
图 4 HTML元素属性
类似“style="color:#ff0000;font-size:30px"”这样的内容就是HTML元素的属性，HTML元素的属性放置在元素的起始标签内，属性分为属性名称和属性值，上面案例中style为属性名称（style为样式CSS属性名称，在CSS课程会有介绍），属性值为“color:#ff0000;font-size:30px”。HTML元素设置属性的语法为：
<element [{name=”value”}] >
其中element为元素的名称，属性内容放置在“[{}]”表示属性可选且允许有多个属性，name是属性的名称，value是属性的值。例如，要给网页设置背景色，可以在<body>元素中添加属性“bgcolor="yellow"”。如图5所示
图 5 设置网页背景颜色
HTML元素的嵌套
除了HTML文档元素<html>外，其它的HTML元素都是被嵌套在另一个元素之内的。在下图的HTML文档中，<html>是最外层元素，也称为根元素。<head>元素、<body>元素是嵌套在<html>元素内的。<body>元素内又嵌套了<h1>元素、<hr>元素和<p>元素。HTML中的元素可以多级嵌套，但是不能互相交叉。下面不正确的写法中，<p>元素的起始标签在<b>元素的外层，但它的结束标签却放在了<b>元素结束标签内。
为了防止出现错误的HTML元素嵌套，在编写HTML文档时，建议先写外层的一对标签，然后逐渐往里写，这样既不容易忘记写HTML元素的结束标签，也可以减少HTML元素的嵌套错误。例如在图1-5的HTML文档中，大体可以这样写：
第二题
答:列表有3种,无序列表,有序列表,自定义列表
ul 无序列表
ol 有序列表
dl 自定义列表
ul、ol子元素为li
dl子元素为dt和dd
第三题:
答: 表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
如：<table><tr><td></td></tr><table>
列表有3种,无序列表,有序列表,自定义列表
ul 无序列表
ol 有序列表
dl 自定义列表
ul、ol子元素为li
dl子元素为dt和dd
如：<ul><li></li><ul>同样<ol><li></li><ol>
列表只有一列，而表格有多行多列。用来排列信息内容的时候，是用列表，比如说做新闻列表，或者是导航栏的时候，就会用列表。如果是展示数据的话，因为需要多维度多角度去展示数据，所以一列往往不够，用表格会更直观方便。
第四题:
答: 1.用ul 无序列表实现工作计划
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <h3>工作计划</h3> <ul> <li>1.学会全栈开发</li> <li>2.找个好工作</li> <li>3.月薪过万</li> <li>4.到达人生巅峰</li> </ul> </body> </html>
点击 "运行实例" 按钮查看在线实例
2.用有序列表实现
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <h3>工作计划</h3> <ol> <li>学会全栈开发</li> <li>找个好工作</li> <li>月薪过万</li> <li>到达人生巅峰</li> </ol> </body> </html>
点击 "运行实例" 按钮查看在线实例
3.用自定义列表实现
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <dl> <dt><h3>工作计划</h3></dt> <dd>1.学会全栈开发</dd> <dd>2.找个好工作</dd> <dd>3.月薪过万</dd> <dd>4.到达人生巅峰</dd> </dl> </body> </html>
点击 "运行实例" 按钮查看在线实例
第五题:
答:实现一张商品清单代码跟效果如下
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <table border="1" width="500" cellspacing="0" align="center"> <caption>商品清单</caption> <tr> <th>采购人</th> <th>商品编号</th> <th>商品名称</th> <th>单价</th> <th>数量</th> <th>金额</th> </tr> <tr> <!-- rowspan是垂直方向合并 --> <!-- align="center"是居中对齐 --> <td rowspan="4" align="center">马云</td> <td align="center">01</td> <td align="center">苹果</td> <td>5</td> <td>10</td> <td>50</td> </tr> <tr> <td align="center">02</td> <td align="center">梨</td> <td>4</td> <td>10</td> <td>40</td> </tr> <tr> <td align="center">03</td> <td align="center">香蕉</td> <td>6</td> <td>10</td> <td>60</td> </tr> <tr> <td align="center">04</td> <td align="center">榴莲</td> <td>50</td> <td>10</td> <td>500</td> </tr> <tr> <!-- colspan水平方向合并 --> <!-- align="center"是居中对齐 --> <td colspan="4" align="center">合计:</td> <td>40</td> <td>650</td> </tr> </table> </html>
点击 "运行实例" 按钮查看在线实例
第六题:
答: 编程实一张注册表单, 代码跟效果如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>用户注册</title> </head> <body> <form action="login.php" method="POST"> <!-- GET和POST小结： 1，GET会将用户输入的内容放到地址栏里面，使用GET请求不安全 2，POST不会将用户输入的内容放到地址栏里面，相对安全 --> <p><label for="usernme">账号:</label> <input type="text" id="username" name="username" placeholder="请输入您的大名"> </p> <p><label for="password">密码:</label> <input type="password" id="password" name="password" placeholder="必须在6-12位之间"> </p> <p> <label for="email">邮箱:</label> <input type="email" id="email" name="email" placeholder="10086@qq.com"> </p> <p><label for="age">年龄:</label> <input type="number" id="age" name="age" min="16" max="60"></p> <p><label for="">所学课程:</label> <!-- 下拉列表 --> <select name="" id=""> <optgroup label="前端课程"> <option value="html ">HTML</option> <option value="css">CSS</option> <option value="javaScript">javaScript</option> </optgroup> <optgroup label="后端课程"> <option value="php">php</option> <option value="mysql">mysql</option> <option value="laravel">laravel</option> </optgroup> </select> </p> <p><label for="">爱好:</label> <input type="checkbox" name="hobby[]" value="game" id="game"><label for="game">玩游戏</label> <input type="checkbox" name="hobby[]" value="pursueGirl" id="pursueGirl"><label for="pursueGirl">泡妞</label> <input type="checkbox" name="hobby[]" value="sing" id="sing"><label for="sing">唱歌</label> </p> <p><label for="male">性别:</label> <input type="radio" name="gender" id="male"><label for="male">男神</label> <input type="radio" name="gender" id="female"><label for="female">女神</label> <input type="radio" name="gender" id="MARS"><label for="MARS">火星人</label> </p> <P> <input type="submit" name="submit" value="提交"> <input type="reset" name="reset" value="重填"> <input type="button" name="reset" value="按钮"> <button type="button">注册</button> </P> <p><textarea name="" id="" cols="30" rows="10" placeholder="请发表竞选米国总统的宣言"></textarea> <input type="submit" name="submit" value="发表"> 上传靓照:<input type="file"></p> </form> </body> </html>
点击 "运行实例" 按钮查看在线实例
第七题:
答:
标题标签常用在文章开头
段落标签常用在文章段落
图片标签常用在商品展示,广告宣传,
列表标签常用在 导航栏, 单列多行的数据,
表格标签常用在多行多列有关联数据的展示.
表单标签常用在用户登录, 民意调查,商品登记,
input属性的取值:
Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
