Appearance
HTML
https://www.w3.org/TR/2011/WD-html5-20110405/
HTML简介
概念介绍
HTML概述
Hyper Text Markup Languge
超文本标记语言
超文本
tex比普通文本强大，可以完成普通文本不能完成的功能和效果标记！！！
tex标签 <!DOCYTYPE HTML> <HTML> </HTML> 标签以<开头 标签以>结束语言
tex交流、沟通工具
HTML stands for Hyper Text Markup Language
HTML is the standard markup language for Web pages
HTML elements are the building blocks of HTML pages
HTML elements are represented by <> tags
HTML作用
用于页面展示
HTML运行环境
html 运行在浏览器中：跨平台--借助浏览器中的内核
因为浏览器的种类很多，浏览器中的内核中 html 解析器不一定相同，
导致解析的效果可能不同 - 兼容性
HTML版本历史
tex
2014年10月29日，经过几乎8年的艰辛努力，HTML5标准规范终于最终制定完成了，并已公开发布，这是一次重大的革新。HTML5将会取代1999年制定的HTML 4.01、XHTML 1.0标准，以期能在互联网应用迅速发展的时候，使网络标准达到符合当代的网络需求，为桌面和移动平台带来无缝衔接的丰富内容。
目前支持Html5的浏览器包括Firefox（火狐浏览器），IE9及其更高版本，Chrome（谷歌浏览器），Safari，Opera等。不同的浏览器之间是有差异的，同一个网页在不同的浏览器上运行结果可能不同。小结
什么是 HTML？
HTML 运行在哪里？
常见的HTML编辑器
记事本
NotePad++
Adobe Dreamweaver CS
HBuilder
SublimeText
IntelliJ IDEA
HTML基本结构
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
Hello World!
</body>
</html>| 标签名 | 作用 |
|---|---|
| DOCTYPE | 文档类型，用于描述此html文件，使用的HTML版本是多少，此处为HTML5 |
| html | 根元素(根标签) |
| head | 网页头部 |
| meta | 用于描述页面的元信息，此处描述编码集为UTF-8 |
| title | 用于描述页面标题 |
| body | 网页主体，网页的内容写在body中 bgcolor属性: 设置背景色 |
| 注释 | 格式：<!-- 内容 -->嵌套：不能嵌套 |
IDEA创建静态Web工程
静态Web工程创建步骤
创建静态 Web 工程
指定工程名和保存位置
创建 HTML 文件，选择 html5 的版本
创建 HTML 文件
html<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> </body> </html>点右上角一排浏览器按钮运行，idea 会使用内置的服务器在指定的浏览器上运行。
在浏览器上运行的结果
访问地址：运行在自己的服务器上。
通常不需要修改浏览器文件的地址，如果要修改可以在这里操作
静态Web项目目录结构
css
texCSS样式img
tex图片文件js
texJavaScript脚本
标签和标签属性
标签
html 的标签是由尖括号+标签名+标签体组成的，如：<body> Hello World</body> ;
标签从哪来
我们使用的html标签都是由W3C组织预先定义好的。
我们可以通过查询 API 来查找要使用的标签；
标签分类
按照标签书写时需要书写标签的个数，可以将标签分为：单标签和双标签；
| 标签类型 | 示例 | 说明 |
|---|---|---|
| 单标签 | <br/> 或<br > | 由1个标签组成 |
| 双标签 | <body> Hello World! </body> | 由开始标签和结束标签 组成 |
【注意】结束标签前面需要加/;
html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
标签来源：
xml:可扩展的标签语言
<book> <price>1</price> </book>
html:的标签是由w3c组织预先定义
标签分类：
单标签： <br> <br/> 功能单一
双标签： 开始标签 + 标签体 + 结束标签 <body> aasdseew </body>
注意事项：
双标签的结束标签前需要加： /
-->
<!--
需求：在页面上分别书写单标签和双标签，并运行！
-->
asdsadsa <br>
asdsaaadsa
<a>asdsaewtsdfsdfdfd</a>
</body>
</html>标签属性
HTML标签只是给我们提供了在页面上固定一块区域(或者body标签)或者是某个单一功能，而现实生活中我们需要在页面上展示出的效果往往是比较复杂的。这样，单纯地使用HTML的标签是不能够满足我们的需求的。这时候，我们就需要给标签添加一些属性来完成这些标签之外的功能。
【需求】将浏览器窗体区域的背景颜色设置成红色
需求分析：
- 浏览器窗体部分可以使用 body 标签来定义；
- 将窗体的背景颜色设置成红色可以在 body 标签上添加属性：bgcolor="red"来实现；
【参考代码】
html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body bgcolor="red">
<!--
标签属性：
作用：给标签增加额外功能，修饰标签
写法： 属性名 = "属性值"
学习标签：
1、明确标签的基本作用；
2、明确标签的常用属性；
-->
<!--
【需求】将浏览器窗体的背景变成红色
-->
</body>
</html>标签属性的作用
标签属性的作用定义了标签额外的功能。
标签属性的书写规则
书写格式：属性名 = "属性值";
| 标签类型 | 书写示例 | 说明 |
|---|---|---|
| 单标签 | <hr size = "3"> | 直接在标签中添加属性="属性值" |
| 双标签 | <body bgcolor="red"></body> | 在开始标签中添加属性="属性值" |
【注意事项】：属性值必须添加双引号" " ；
HTML标签的学习方法
- 学习标签的基本作用
- 学习标签的常用属性
基本标签
文本标签
语法
| 标签名 | 标签描述 | 常用属性 |
|---|---|---|
| h1 - h6 | 用于文章标题，一共6级 1级最大；6级最小 块级标签，自带换行功能 | align:对齐方式 - center: 居中 - right: 右对齐 - left: 左对齐 |
| br | 换行 | |
| p | paragraph，代表一个段落 前后有一定间隙，首行没有缩进 | title:鼠标悬停时，显示提示信息 |
练习
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>一级标签</h1>
<h2 align="center">二级标签</h2>
<h3 align="right">三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>
<!--p分段，每个分段之间有一定的间隔，首行没有缩进-->
<p>
超文本： 不同于普通文本，比普通文本功能更强文本。设置文本大小，颜色，样式。可以有音乐，视频。还可以点击，跳转到其它页面去。
</p>
<p>
标记语言： 整个网页由各种标记组成。
</p>
<p>
不同于编程语言，它通过标记符号来标记要显示网页中的各个部分。
</p>
</body>
</html>小结
说说下面文本标签的作用
- h1~h6
- br
- p
列表标签
语法
| 标签名 | 标签描述 | 常用属性 |
|---|---|---|
| oi-li | 有序列表ol 列表容器，包含多个li标签每个 li就是一项列表ol上有一个type属性，用来指定列表的样式 | type属性1 数字列表，默认值a, A 字母列表，包含大小写i, I 罗马数字编号 |
| ul-li | 无序列表ul 列表容器，包含多个li标签每个 li就是一项列表ul上有一个type属性，用来指定列表的样式 | type属性disc 实心圆，默认样式circle 空心圆square 实心方块 |
练习
制作如下所示的菜单列表
type = "1"
- 红烧肉
- 番茄炒牛肉
- 口水鸡
type = "A"
- 红烧肉
- 番茄炒牛肉
- 口水鸡
type = "I"
- 红烧肉
- 番茄炒牛肉
- 口水鸡
type = "disc"
- 红烧肉
- 番茄炒牛肉
- 口水鸡
type = "circle"
- 红烧肉
- 番茄炒牛肉
- 口水鸡
type = "square"
- 红烧肉
- 番茄炒牛肉
- 口水鸡
实现
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ol>
<li>红烧肉</li>
<li>番茄炒牛肉</li>
<li>口水鸡</li>
</ol>
<ol type="A">
<li>红烧肉</li>
<li>番茄炒牛肉</li>
<li>口水鸡</li>
</ol>
<ol type="I">
<li>红烧肉</li>
<li>番茄炒牛肉</li>
<li>口水鸡</li>
</ol>
<ul>
<li>红烧肉</li>
<li>番茄炒牛肉</li>
<li>口水鸡</li>
</ul>
<ul type="circle">
<li>红烧肉</li>
<li>番茄炒牛肉</li>
<li>口水鸡</li>
</ul>
<ul type="square">
<li>红烧肉</li>
<li>番茄炒牛肉</li>
<li>口水鸡</li>
</ul>
</body>
</html>小结
有序列表使用什么标签？
无序列表使用什么标签？
图像标签
语法
| 标签名 | 属性名 | 属性描述 |
|---|---|---|
| img | src | 指定图片的地址 |
| width | 指定图片宽度 | |
| height | 指定图片高度 | |
| alt | 如果图片丢失，出现的替换文字 | |
| title | 如果鼠标移动到图片上显示的文本信息 |
示例
html
<img src="img/5B877C2B-FB21-403F-8262-27102B7D7317.jpg" width="300" alt="alt" title="title">小结
- 图像标签的名字是什么，哪个属性是必须的？
路径访问符
路径中的第一个符号，包含以下4种
斜线
根路径访问符
当前浏览器的地址栏:
http://localhost:1234/a/b/c/page1.html路径
<a href="/page2.html">...</a>目标浏览器的地址栏
http://localhost:1234/page2.html当前浏览器的地址栏:
https://www.taobao.com路径
<a href="/item?id=1234">...</a>目标浏览器的地址栏
https://www.taobao.com/item?id=1234两个点
上一级路径访问符
当前浏览器的地址栏:
http://localhost:1234/a/b/c/page1.html路径
<a href=../page2.html>...</a>目标浏览器的地址栏
http://localhost:1234/a/b/page2.html一个点
当前路径访问符(不建议使用)
啥也没有
当前路径访问符
目前浏览器的地址栏:
http://localhost:1234/a/b/c/page1.html路径
<a href="page2.html">...</a>目标浏览器的地址栏
http://localhost:1234/a/b/c/page2.html
超链接标签
语法
| 标签名 | 属性名 | 属性描述 |
|---|---|---|
| a | href | 要跳转的地址 |
| title | 如果鼠标移动到链接文字上显示的文本信息 | |
| target | _self 在当前窗口中打开链接 _blank 在新的窗口中打开链接地址 |
练习
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>链接标签</title>
</head>
<body>
<!--跳本地服务器-->
<!--
title 如果鼠标移动到链接文字上显示的文本信息
target
_self 在当前窗口中打开链接，默认值
_blank 在新的窗口中打开链接地址
-->
<a href="demo06.html" title="充值会员才可以哦" target="_blank">点我有惊喜哦</a><br/>
<!--跳其它服务器-->
<a href="http://www.baidu.com">百度</a><br/>
<a href="mailto:leaf_8742@163.com">给我发邮件</a>
</body>
</html>小结
- 链接标签的作用是什么？哪个属性用于跳转到其它页面？
超链接标签——锚点
语法
定义锚点
<a name="锚点名字">文字\</a>跳转到锚点
<a href="#锚点名字"> 文字 \</a>
练习
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>定义锚点</title>
</head>
<body>
<!--使用锚点-->
<a href="#girl">我是女生</a>
<a href="#boy">我是男生</a>
<a href="#eye">大眼睛</a>
<hr color="red"/>
<!--定义锚点-->
<h2>
<a name="girl">我是女生</a>
</h2>
<img src="img/football.jpg" height="700">
<h2>
<a name="boy">我是男生</a>
</h2>
<img src="img/boy.jpg" height="400">
<h2>
<a name="eye">大眼睛</a>
</h2>
<img src="img/girl2.jpg" height="700">
</body>
</html>小结
- 如何定义锚点？
- 如何跳转到锚点？
表格标签
表格的作用
- 用来显示多条数据
- 用于一些网页的布局，后期会使用 div 布局。
语法
| 标签名 | 标签描述 |
|---|---|
| table | 表格容器，包含其它的表格元素 |
| tr | 表示一行，table row |
| th | 列标题，加粗，居中 table head |
| td | 普通单元格 |
属性
| 属性名 | 属性描述 |
|---|---|
| align | 对齐方式 用在table：整个表格居中 用在tr：表格这一行内容居中 用在td：单元格内容居中 |
| rowspan | 跨几行 |
| colspan | 跨几列 |
| cellspacing | 单元格之间的间距 |
| cellpadding | 单元格边框与内容之间的间距 |
| padding | 内边距 |
练习1
| 姓名 | 电话 | 地址 |
|---|---|---|
| Bill Gates | 12873612873 | 西雅图 |
| Steven Jobs | 230984230 | 库比蒂诺 |
代码1
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>显示数据</title>
</head>
<body>
<!--
表格的容器：table
border: 外边框的粗细
width: 表格的宽度
align: 用在table，tr, td上面
table: 表示整个表格对齐
tr: 表示一行对齐
td: 表示一格对齐
thead: 表格头部
tbody: 表格的主体, tr的父元素是：tbody，无论代码中有没有
tfoot: 表格的脚部
在逻辑上将表格分成不同的部分，都是不可见的
-->
<table border="3" width="500" align="center">
<!--创建一行: tr table row -->
<tr>
<!--
td表示一个单元格：表格的内容
th表示表格的列标题：加粗，居中
-->
<th>
姓名
</th>
<th>
电话
</th>
<th>
地址
</th>
</tr>
<tr align="center">
<td align="center">
Bill Gates
</td>
<td>
12873612873
</td>
<td>
西雅图
</td>
</tr>
<tr align="center">
<td align="center">
Steven Jobs
</td>
<td>
230984230
</td>
<td>
库比蒂诺
</td>
</tr>
</table>
</body>
</html>练习2
| 编号 | 姓名 | 性别 | 成绩 |
|---|---|---|---|
| 100 | 张三 | 女 | 80 |
| 200 | 李四 | 男 | 90 |
| 300 | 王五 | 女 | |
| 总成绩 | 900 | ||
代码2
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>学生成绩表</title>
</head>
<body>
<!-- cellspacing 单元格之间的间隔 -->
<!-- cellpadding 单元格边框与内容之间的间隔 -->
<!-- padding 内边距-->
<table width="500" border="2" align="center" cellspacing="0" cellpadding="4">
<thead>
<tr>
<th>编号</th>
<th>姓名</th>
<th>性别</th>
<th>成绩</th>
</tr>
</thead>
<tbody>
<tr align="center">
<td>100</td>
<td>张三</td>
<td>女</td>
<td>80</td>
</tr>
<tr align="center">
<td>200</td>
<td>李四</td>
<td>男</td>
<td rowspan="2">90</td>
</tr>
<tr align="center">
<td>300</td>
<td>王五</td>
<td>女</td>
</tr>
</tbody>
<tfoot>
<tr align="center">
<td>总成绩</td>
<td colspan="3">900</td>
</tr>
</tfoot>
</table>
</body>
</html>小结
描述案例中用到的标签
- rowspan
- colspan
- cellspacing
- cellpadding
块标签与内联标签
语法
| 标签 | 作用 | 特点 |
|---|---|---|
| span | 用于将网页的内容分割成不同小部分，单独进行操作 | 内联标签，本身没有换行功能 |
| div | 用于将网页进行布局，分割成大的部分 | 块标签，有换行的功能 |
块标签作用
tex
<div> 元素是块级元素，浏览器会在其前后显示折行。它是可用于组合其他 HTML 元素的容器。 <div> 元素是英文division，起到分割的意思。如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。<div> 元素的一个常见的用途是文档布局。内联标签作用
tex
<span>元素是内联元素，可用作文本的容器。当与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性。练习
代码
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>span和div</title>
</head>
<body>
<span style="background-color: yellow; color: red;">万维网联盟，又称W3C理事会。</span>1994年10月在麻省理工学院计算机科学实验室成立。
<hr/>
<div style="background-color: yellow; color: red;">万维网联盟，又称W3C理事会。</div>1994年10月在麻省理工学院计算机科学实验室成立。
</body>
</html>小结
- div 标签和 span 标签的主要区别是什么？
实体字符
问题
当页面上需要使用一些特殊符号的时候，怎么办？
格式
以&开头，以分号结尾，如：空格
html
练习
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>实体字符</title>
</head>
<body>
<!--less than-->
小于： < <br/>
<!--greater than-->
大于： > <br/>
<!--人民币，日元货币-->
日元：¥ <br/>
<!--红心-->
红心： ♥
</body>
</html>常用的实体字符表
小结
所有的实体字符都以什么符号开头，以什么符号结尾？
表单标签
快速入门
表单标签form
作用
把表单中的数据提交给远端服务器；
【注意】：<form> 表单标签，在 html 页面创建一个表单，表单标签在浏览器上没有任何显示。如果数据需要提交到服务器，负责搜集数据的标签必须存放在表单标签体内。
属性
| 属性 | 使用示例 | 说明 |
|---|---|---|
| action | action="http://www.future-weaver.com" | action设置表单提交的服务器地址 |
| method | method="get" 或 method="post" | method设置表单提交数据的方式 |
| enctype | enctype="multipart/form-data" | enctype设置表单的内容类型 |
表单提交方式
- get：默认值
- 提交数据的方式：提交的数据追加在请求路径上。数据格式k = v，追加是使用 ? 连接，之后每一对数据使用&连接；如：
https://www.baidu.com/register.html?username=zhangsan&password=123&email=xxx- 因请求路径长度有限制，所以提交的数据有限；
- 不安全；
- post：
- 提交数据的方式：数据不追加在请求路径上；
- 请求数据的大小无限制；
- 相对安全；
输入域标签input
作用
标签用于获得用户输入信息，type 属性值不同，搜集数据的方式不同。
通用属性
通用属性指的是一般的标签都可以使用的属性。
type
- 作用：设置表单项收集数据的方式，如：1、
<input type="text">决定了这个 input 标签是一个文本框，可以输入文本数据；2、<input type="radio">决定了这个 input 是通过以单选按钮的方式供用户选择数据； - 取值：
| type属性 | 使用示例 | 效果 | 说明 |
|---|---|---|---|
| text | 姓名：<input type = "text" name="name"> |  | 文本框，单行的输入字段，用户可在其中输入文本。默认宽度为 20 个字符； |
| password | <input type = "password" name="pwd"> |  | 密码框，密码字段。该字段中的字符以黑圆点显示 |
| radio | <input type = "radio" name="sex" value="男"> |  | 单选框，表示一组互斥选项按钮中的一个。当一个按钮被选中，之前选中的按钮就变为非选中的 ； |
| checkbox | <input type = "checkbox" name="hobby" value="音乐"> |  | 复选框，表示一组按钮，可供多选； |
| file | <input type = "file" name="uploadFile"> |  | 文件上传组件,提供"浏览"按下可以选择需要上传文件.； |
| hidden | <input type = "hidden" name="id" > | 隐藏字段. 数据会发送给服务器，但浏览器不进行显示； | |
| image | <input type="image" src="../img/reg.png" height="30px"/> |  | 图形提交按钮，通过src给按钮设置图片； |
| submit | <input type="submit" value="提交"> |  | 提交按钮。提交按钮会把表单数据发送到服务器。一般不写name属性，否则将“提交”两个字提交到服务器。 |
| reset | <input type="reset" value="重置"> |  | 重置按钮。将表单恢复到默认值； |
| button | <input type="button" value="按钮"> |  | 普通按钮，常用于与JavaScript结合使用； |
name
name 属性的作用是告诉浏览器我要提交的这个数据的名称，如果需要将表单数据提交到服务器则必须添加 name 属性。
| 属性 | 使用示例 | 说明 |
|---|---|---|
| name | <input type = "text" name="name"> | 元素（数据）名称，如果需要表单数据提交到服务器，必须提供name属性值，服务器通过属性值获得提交的数据； |
value
value 属性的作用：
- 给
input标签，select标签，textarea标签设置默认值； - 给 submit，reset，button 按钮设置显示在按钮上的文字信息；
【注意】：radio 和 select 标签不能直接输入数据，所以必须通过给 value 属性设置默认值；
| 属性 | 使用示例 | 说明 |
|---|---|---|
| value | <input type = "text" name="name" value="张三"><input type="submit" value="提交"> | 设置input标签的默认值。注意：submit和reset为按钮显示数据； |
readonly
作用：将可以输入文本的 input 标签或者 textarea 设置成只读状态；
特点：
1.只读状态的标签中书写的内容不能被修改；
2.只读状态的标签中如果有默认值，这个值会随着表单提交到服务器；
| 属性 | 使用示例 | 说明 |
|---|---|---|
| readonly | <input type="text" value="汉语" readonly="" /> | 设置input是否只读 数据会被提交 ； |
disabled
作用：禁用表单
特点：
1.禁用状态的表单中不能输入数据；
2.禁用状态的表单如果有默认值，这个值不会随着表单提交到服务器；
| 属性 | 使用示例 | 说明 |
|---|---|---|
| disabled | <input type="text" value="汉语" disabled="" /> | 是否可用 数据不会被提交 ； |
accept
特殊属性
特殊属性指的是，用在特殊的标签上的属性。
checked
作用：设置 radio 和 checkbox 默认选中状态的属性。
| 属性 | 使用示例 | 说明 |
|---|---|---|
| checked | <input type = "radio" name="sex" value="男" checked="checked"><input type="checkbox" name="hobby" value="看书" checked="" /> | 默认选中radio或者checkbox（标签中只要出现checked属性即可） |
下拉列表select
1 作用
提供一组可选的数据供用户选择（单选或多选）；
属性
| 属性 | 使用示例 | 说明 |
|---|---|---|
| name | name="city" | 设置下拉框的name属性 |
| multiple | multiple="multiple" | 设置下拉框为多选下拉框 |
| size | size="3" | 设置多选时，可见选项的个数 |
子标签option
- 作用：设置
select下拉框的选择项； - 属性：
| 属性 | 使用示例 | 说明 |
|---|---|---|
| value | value="sh" | 设置option的value值，当这个option被选中时，这个value值会随着表单提交 |
| selected | selected="selected" | 将option设置成默认被选中的项 |
语法结构
html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<select name="city" >
<option value="">请选择</option>
<option value="sh">上海</option>
<option value="bj">北京</option>
<option value="gz">广州</option>
<option value="sz">深圳</option>
</select>
</body>
</html>【注意】: 一般 option 需要给 value 这个属性，如果不给，默认会把 option 标签之间的文本内容发送到服务器。
文本域：textarea
作用
多行的文本输入控件
属性
| 属性 | 使用示例 | 说明 |
|---|---|---|
| cols | cols="10" | 设置文本域的列数(宽) |
| rows | rows="5" | 设置文本域的行数(高) |
| name | name="desc" | 设置文本域的name属性 |
语法结构
html
<textarea name="desc" rows="10" cols="50"></textarea>小结
- form：三个属性
- name:表单名称
- action:表单的提交地址、路径
- method:表单提交方式
- get
- post
- input
- type 值的不同导致表单项的样式和功能不相同
- 2 个输入框 text password
- 2 个选择框 radio checkbox
- 4 个按钮 button submit reset image
- 2 个特殊 file hidden
- type 值的不同导致表单项的样式和功能不相同
- select
- option
- textarea
学习目标总结
- 能够使用 idea 创建 html 文档
- 能够使用 h1~h6、hr、p、br 等与文本有关的标签
- 能够使用有序列表 ol-li 和无序列表 ul-li 显示列表内容
- 能够使用块标签 div 与内联标签 span
- 能够使用图片 img 标签把图片显示在页面中
- 能够使用超链接 a 标签跳转到一个新页面
- 能够使用 table、tr、td 标签定义表格
- 能够使用 form 制作表单
- 能够使用 form 标签创建表单容器
- 能够使用 form 表单中常用的 input 标签创建输入项
- 能够使用表单 select 标签定义下拉框输入项
- 能够使用表单 textarea 标签定义文本域