作业:
1. 谈谈你对html标签, 元素与属性的理解, 并举例说明
2. 列表有几种, 如何定义?
3. 列表与表格的区别与联系?什么时候用列表,什么时候用表格, 为什么?
4. 编程实现,用列表制作你的工作计划,要求使用三种类型全部实现一次: <ul><ol><dl>
5. 编程实现一张商品清单, 使用表格实现,要求有行与列的合并,用到colspan, rowspan
6. 编程实一张注册表单, 要求使用到课堂上讲到全部控件,并掌握所有属性的使用场景与意义
7. 写出总结, 对于这些常用标签的应用场景进行分析
1. 谈谈你对html标签, 元素与属性的理解, 并举例说明
HTML 不是一门编程语言，而是一种用于定义内容结构的标记语言。HTML 由一系列的元素（elements）组成，这些元素可以用来包围不同部分的内容，使其以某种方式呈现或者工作。 一对标签（ tags）可以为一段文字或者一张图片添加超链接，将文字设置为斜体，改变字号，等等。
HTML 标签
HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
● HTML 标签是由尖括号包围的关键词，比如 <html>
● HTML 标签通常是成对出现的，比如 <b> 和 </b>
● 标签对中的第一个标签是开始标签，第二个标签是结束标签
● 开始和结束标签也被称为开放标签和闭合标签
提示：HTML 标签对大小写不敏感：<P> 等同于 <p>，许多网站都使用大写的 HTML 标签。
HTML 元素
HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。
HTML 元素语法
● HTML 元素以开始标签起始
● HTML 元素以结束标签终止
● 元素的内容是开始标签与结束标签之间的内容
● 某些 HTML 元素具有空内容（empty content），比如 <br> 元素
● 空元素在开始标签中进行关闭（以开始标签的结束而结束）
● 大多数 HTML 元素可拥有属性
HTML 属性
HTML 标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。
属性总是以名称/值对的形式出现，比如：name="value"。
属性总是在 HTML 元素的开始标签中规定。
提示：属性和属性值对大小写不敏感。不过，万维网联盟在其 HTML 4 推荐标准中推荐小写的属性/属性值。
而新版本的 (X)HTML 要求使用小写属性。
下面通过分析一个标准的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> <h1>PHP中文网</h1> <div><img src="https://img.php.cn/upload/course/000/000/001/5d1c6ddbecdb1707.jpg"/><div> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
这里有：
● <!DOCTYPE html> — 文档类型。DOCTYPE 用来链接一些 HTML 编写守则，有点像自动校正等。然而现在已经没有人关心这些，只是因为历史原因必须将它们保留，但没有实际作用。
● <html></html> — <html> 元素。这个元素包含了整个页面的内容，有时也被称作根元素。
● <head></head> — <head> 元素。这个元素放置的内容不是展现给用户的，而是包含例如面向搜索引擎的搜索关键字（keywords）、页面描述、CSS 样式表和字符编码声明等。
● <meta charset="utf-8"> — 这个元素指定了当前文档使用 UTF-8 字符编码 ，UTF-8 包括绝大多数人类已知语言的字符。基本上 UTF-8 可以处理任何文本内容，还可以避免以后出现某些问题，我们没有任何理由再选用其他编码。
● <title></title> — <title> 元素。这个元素设置页面的标题，显示在浏览器标签页上，同时作为收藏网页的描述文字。
● <body></body> — <body> 元素。这个元素包含期望让用户在访问页面时看到的内容，可以是文本、图像、视频、游戏、可播放的音轨或其他内容。
2. 列表有几种, 如何定义?
列表
Web 上的许多内容都是列表，HTML 有一些特别的列表元素。标记列表通常包括至少两个元素。最常用的列表类型为：
① 无序列表中项目的顺序并不重要，就像购物列表。用一个 <ul> 元素包围。此列项目使用粗体圆点（典型的小黑圆圈）进行标记。始于 <ul> 标签，每个列表项始于 <li>。
② 有序列表中项目的顺序很重要，就像烹调指南。用一个 <ol> 元素包围。列表项目使用数字进行标记。有序列表始于 <ol> 标签，每个列表项始于 <li> 标签。
③ 自定义列表不仅仅是一列项目，而是项目及其注释的组合。自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。
提示：列表的每个项目用一个列表项目（List Item）元素 <li> 包围。
实例
<!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> <!-- 1.无序列表 --> <ul> <li>苹果</li> <li>香蕉</li> <li>梨子</li> </ul> <!-- 2.有序列表 --> <ol> <li>苹果</li> <li>香蕉</li> <li>梨子</li> </ol> <!-- 3.定义列表 --> <dl> <dt>php</dt> <dd>最流行的通用服务器编程语言</dd> <dt>mysql</dt> <dd>最流行的免费数据库</dd> <dt>laravel</dt> <dd>最流行的开发框架</dd> </dl> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
3. 列表与表格的区别与联系?什么时候用列表,什么时候用表格, 为什么?
表格其实就是很多的小单元格，而这些小单元格很有次序的排列着，它们有很多行，很多列。这些很多行列组成的东西，就叫表格，表格是<table>标签来定义的。而<table>标签中的行就是<tr>标签，而列就是<td>标签，必须先定义行才能定义列。
若要简单展示排列信息的话，用列表即可。如果是详细展示数据的话，因为需要多维度多角度去展示数据，所以一列往往不够，用表格会更直观方便。
4. 编程实现,用列表制作你的工作计划,要求使用三种类型全部实现一次: <ul><ol><dl>
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="widdh=device-widdh, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <h1>工作计划</h1> <h2>前端</h2> <ul> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> </ul> <h2>后端</h2> <ol> <li>Apache</li> <li>mysql</li> <li>php</li> </ol> <h2>框架</h2> <dl> <dt> </dt> <dd>Laravel</dd> <dd>ThinkPHP</dd> <dd>Bootstrap</dd> </dl> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
5. 编程实现一张商品清单, 使用表格实现,要求有行与列的合并,用到colspan, rowspan
实例
<!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> <table border="1" width="500" cellspacing="0" cellpadding="5"> <!-- 表头 --> <thead> <caption>购物车</caption> </thead> <!-- 主体 --> <tbody style="text-align: center"> <tr> <td rowspan="5">购物车</td> <th>编号</th> <th>商品名</th> <th>单价</th> <th>数量</th> <th>价格</th> </tr> <tr> <td>1</td> <td>手机</td> <td>3299</td> <td>1</td> <td>3299</td> </tr> <tr> <td>2</td> <td>平板</td> <td>2500</td> <td>1</td> <td>2500</td> </tr> <tr> <td>3</td> <td>鞋子</td> <td>799</td> <td>1</td> <td>799</td> </tr> <tr> <td colspan="4">合计</td> <td>6598</td> </tr> </tbody> </table> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
6. 编程实一张注册表单, 要求使用到课堂上讲到全部控件,并掌握所有属性的使用场景与意义
实例
<!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> <h1>用户注册</h1> <form action="getpost.php" method="POST"> <p> <label for="username">用户名：</label> <input type="text" id="name" value="THE BOYS" name="name"placeholder="请输入用户名"> </p> <p> <label for="password">密 码：</label> <input type="password" id="password" name="password" placeholder="6-20位之间"> </p> <p> <label for="email">邮 箱：</label> <input type="email" id="email" name="email" placeholder="请输入你的邮箱"> </p> <p> <label for="age">年 龄：</label> <input type="number" id="age" name="age" min="16" max="80"> </p> <p> <label for="course">课 程：</label> <select name="course" id="course"> <optgroup label="前端"> <option value="" selected>HTML</option> <option value="" >CSS</option> <option value="" >JavaScript</option> </optgroup> <optgroup label="后端"> <option value="">PHP</option> <option value="">MySQL</option> <option value="">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="programe" id="programe"><label for="programe">撸代码</label> <input type="checkbox" name="hobby[]" value="movies" id="movies" checked><label for="movies">看电影</label> </p> <p> <label for="">性 别：</label> <input type="radio" name="sex" id="male"><label for="male">男</label> <input type="radio" name="sex" id="female"><label for="female">女</label> <input type="radio" name="sex" id="secret" checked><label for="secret">保密</label> </p> <p> <input type="submit" name="submit" value="提交"> <input type="reset" name="" id="" value="重置"> <input type="button" name="" id="" value="按钮"> <button>注册</button> </p> </form> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
7. 写出总结, 对于这些常用标签的应用场景进行分析
本次作业主要介绍HTML的基础组成结构及其内容的理解，完成列表、表格及表单的编程。
基础标签：
<!DOCTYPE> 定义文档类型。
<html> 定义 HTML 文档。
<title> 定义文档的标题。
<body> 定义文档的主体。
<h1> to <h6> 定义 HTML 标题。
<p> 定义段落。
<br> 定义简单的折行。
<hr> 定义水平线。
<!--...--> 定义注释。
表单标签：
<form> 定义供用户输入的 HTML 表单。
<input> 定义输入控件。
<textarea> 定义多行的文本输入控件。
<button> 定义按钮。
<select> 定义选择列表（下拉列表）。
<optgroup> 定义选择列表中相关选项的组合。
<option> 定义选择列表中的选项。
<label> 定义 input 元素的标注。
<fieldset> 定义围绕表单中元素的边框。
<legend> 定义 fieldset 元素的标题。
<datalist> 定义下拉列表。
<keygen> 定义生成密钥。
<output> 定义输出的一些类型。
框架标签：
<frame> 定义框架集的窗口或框架。
<frameset> 定义框架集。
<noframes> 定义针对不支持框架的用户的替代内容。
<iframe> 定义内联框架。
图像标签：
<img> 定义图像。
<map> 定义图像映射。
<area> 定义图像地图内部的区域。
<canvas> 定义图形。
<figcaption> 定义 figure 元素的标题。
<figure> 定义媒介内容的分组，以及它们的标题。
链接标签：
<a> 定义锚。
<link> 定义文档与外部资源的关系。
<nav> 定义导航链接。
列表标签：
<ul> 定义无序列表。
<ol> 定义有序列表。
<li> 定义列表的项目。
<dir> 不赞成使用。定义目录列表。
<dl> 定义定义列表。
<dt> 定义定义列表中的项目。
<dd> 定义定义列表中项目的描述。
<menu> 定义命令的菜单/列表。
<menuitem> 定义用户可以从弹出菜单调用的命令/菜单项目。
<command> 定义命令按钮。
表格标签：
<table> 定义表格
<caption> 定义表格标题。
<th> 定义表格中的表头单元格。
<tr> 定义表格中的行。
<td> 定义表格中的单元。
<thead> 定义表格中的表头内容。
<tbody> 定义表格中的主体内容。
<tfoot> 定义表格中的表注内容（脚注）。
<col> 定义表格中一个或多个列的属性值。
<colgroup> 定义表格中供格式化的列组。
样式/节 标签：
<style> 定义文档的样式信息。
<div> 定义文档中的节。
<span> 定义文档中的节。
<header> 定义 section 或 page 的页眉。
<footer> 定义 section 或 page 的页脚。
<section> 定义 section。
<article> 定义文章。
<aside> 定义页面内容之外的内容。
<details> 定义元素的细节。
<dialog> 定义对话框或窗口。
<summary> 为 <details> 元素定义可见的标题。
元信息 标签：
<head> 定义关于文档的信息。
<meta> 定义关于 HTML 文档的元信息。
<base> 定义页面中所有链接的默认地址或默认目标。
<basefont> 不赞成使用。定义页面中文本的默认字体、颜色或尺寸。
