HTML_04_表单_框架

最新推荐文章于 2024-07-23 21:29:19 发布

pre_eminent

最新推荐文章于 2024-07-23 21:29:19 发布

阅读量613

点赞数 1

分类专栏： # HTML/H5 文章标签： HTML 表单框架

本文链接：https://blog.youkuaiyun.com/pre_eminent/article/details/79461987

版权

HTML/H5 专栏收录该内容

14 篇文章

订阅专栏

本文介绍了HTML网页布局的不同方式，包括使用<div>元素和<table>元素进行布局的方法，并展示了实际应用的示例代码。此外，还讲解了HTML表单的各种元素及其使用方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML 布局

网页布局对改善网站的外观非常重要。

请慎重设计您的网页布局。

在线实例

使用 <div> 元素的网页布局
如何使用 <div> 元素添加布局。

代码如下:

<!DOCTPYE html>
<html>
<head>
	<link rel="icon" href="beyond.jpg" type="image/x-icon"/>
	<meta charset="UTF-8">
	<meta name="author" content="beyond">
	<meta http-equiv="refresh" content="10">
	<meta name="description" content="免费零基础教程">
	<meta name="keywords" content="HTML,CSS,JAVASCRIPT">
	<title>beyondの心中の动漫神作列表</title>
	<link rel="stylesheet" type="text/css" href="beyondbasestylewhite.css">

	<style type="text/css">
		#leftMenu{
			color: rgb(77,97,98);
		}
		#content{
			color: rgb(35,56,59);
			font-size: 17px;
			text-align: left;
		}
	</style>
</head>
<body>
	<div id="container" style="width:460px">
		<div id="header" style="background-color:rgb(17,62,69);">
			<h1 style="margin-bottom:0;">动漫神作</h1>
		</div>

		<div id="leftMenu" style="background-color:rgb(164,195,176);height:220px;width:110px;float:left;">
			<a href="a" style="color:rgb(59,133,124)">未闻花名</a><br/>
			龙与虎<br/>
			石头门<br/>
			食梦者<br/>
			来自深渊<br/>
			来自新世界<br/>
			寒蝉鸣泣之时<br/>
			钢之炼金术师<br/>
			叛逆的鲁鲁修<br/>
			魔法少女小圆<br/>
		</div>

		<div id="content" style="background-color:rgb(187,217,198);height:220px;width:350px;float:left">
  <pre>  在我们走过的季节里，
  路旁盛开的花朵也在不断变化，
  那个季节盛开的花是叫什么来着？
  轻轻摇曳着，一碰会微微刺痛，
  靠近一闻，隐约有股青涩的阳光的气息。
  那气息渐渐地淡去，我们也在慢慢长大。
  可是，那朵花一定还在某个地方盛开着……
  对，我们永远都会继续实现那朵花的愿望。
			</pre>
		</div>

		<div id="footer" style="background-color:rgba(17,52,54,0.8);clear:both;text-align:center;">
			<p style="font-size:15px;color:rgba(255,255,255,0.25);text-align:center;">Copyright © <a style="color:rgba(255,255,255,0.55)">2018</a> Powered by <a  style="color:rgba(255,255,255,0.55)">beyond</a></p>
		</div>

	</div>
</body>
</html>

效果如下:

使用 <table> 元素的网页布局
如何使用 <table> 元素添加布局。

代码如下:

<!DOCTPYE html>
<html>
<head>
	<link rel="icon" href="beyond.jpg" type="image/x-icon"/>
	<meta charset="UTF-8">
	<meta name="author" content="beyond">
	<meta http-equiv="refresh" content="10">
	<meta name="description" content="免费零基础教程">
	<meta name="keywords" content="HTML,CSS,JAVASCRIPT">
	<title>beyondの心中の动漫神作列表</title>
	<link rel="stylesheet" type="text/css" href="beyondbasestylewhite.css">

	
</head>
<body>
	<table width="460" border="0">
		<tr>
			<td colspan="2" style="background-color:rgb(17,62,69);">
				<h1 margin-bottom:0;>动漫神作</h1>
			</td>
		</tr>

		<tr>
			<td style="background-color:rgb(164,195,176);width=110px;height:220px;">
				<a href="a" style="color:rgb(59,133,124)">未闻花名</a><br/>
			龙与虎<br/>
			石头门<br/>
			食梦者<br/>
			来自深渊<br/>
			来自新世界<br/>
			寒蝉鸣泣之时<br/>
			钢之炼金术师<br/>
			叛逆的鲁鲁修<br/>
			魔法少女小圆<br/>
			</td>

			<td style="background-color:rgb(187,217,198);height:220px;width:350px;color: rgb(35,56,59);font-size: 17px;"><pre>  在我们走过的季节里，
  路旁盛开的花朵也在不断变化，
  那个季节盛开的花是叫什么来着？
  轻轻摇曳着，一碰会微微刺痛，
  靠近一闻，隐约有股青涩的阳光的气息。
  那气息渐渐地淡去，我们也在慢慢长大。
  可是，那朵花一定还在某个地方盛开着……
  对，我们永远都会继续实现那朵花的愿望。
			</pre>
			</td>
		</tr>

		<tr>
			<td colspan="2" style="background-color:Teal;">
				<p style="font-size:15px;color:rgba(255,255,255,0.25);">Copyright © <a style="color:rgba(255,255,255,0.55)">2018</a>
				 Powered by <a  style="color:rgba(255,255,255,0.55)">beyond</a></p>
			</td>
		</tr>
	</table>
	
 
 

</body>
</html>

效果如下:

网站布局

大多数网站会把内容安排到多个列中（就像杂志或报纸那样）。

大多数网站可以使用 <div> 或者 <table> 元素来创建多列。

CSS 用于对元素进行定位，或者为页面创建背景以及色彩丰富的外观。

	虽然我们可以使用HTML table标签来设计出漂亮的布局，但是table标签是不建议作为布局工具使用的 - 表格Table不是布局工具。

HTML 布局 - 使用<div> 元素

div 元素是用于分组 HTML 元素的块级元素。

下面的例子使用五个 div 元素来创建多列布局：

实例

      <!DOCTYPE html> 
     
<html> 
     
<body> 
     
<div id="container" style="width:500px"> 
     
<div id="header" style="background-color:#FFA500;"> 
     
<h1 style="margin-bottom:0;">标题</h1></div> 
     
<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;"> 
     
<b>菜单</b><br> 
     
HTML<br> 
     
CSS<br> 
     
JavaScript</div> 
     
<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;"> 
     
正文</div> 
     
<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;"> 
     
Copyright © Powered by beyond</div> 
     
</div> 
     
</body> 
     
</html>

上面的 HTML 代码会产生如下结果：

标题

菜单
HTML
CSS
JavaScript

正文

HTML 布局 - 使用表格

使用 HTML <table> 标签是创建布局的一种简单的方式。

大多数站点可以使用 <div> 或者 <table> 元素来创建多列。

CSS 用于对元素进行定位，或者为页面创建背景以及色彩丰富的外观。

	即使可以使用 HTML 表格来创建漂亮的布局，但设计表格Table的目的是呈现表格化数据 - 表格Table不是布局工具！

下面的例子使用三行两列的表格 -

第一和最后一行使用 colspan 属性来横跨两列：

实例

      <!DOCTYPE html> 
     
<html> 
     
<body> 
     
<table width="500" border="0"> 
     
<tr> 
     
<td colspan="2" style="background-color:#FFA500;"> 
     
<h1>标题</h1> 
     
</td> 
     
</tr> 
     
<tr> 
     
<td style="background-color:#FFD700;width:100px;"> 
     
<b>菜单</b><br> 
     
HTML<br> 
     
CSS<br> 
     
JavaScript 
     
</td> 
     
<td style="background-color:#EEEEEE;height:200px;width:400px;"> 
     
正文</td> 
     
</tr> 
     
<tr> 
     
<td colspan="2" style="background-color:#FFA500;text-align:center;"> 
     
Copyright © Powered by beyond</td> 
     
</tr> 
     
</table> 
     
</body> 
     
</html>

上面的 HTML 代码会产生以下结果：

标题
菜单 HTML CSS JavaScript	正文
Copyright © Powered by beyond

HTML 布局 - 有用的提示

Tip: 使用 CSS 最大的好处是，如果把 CSS 代码存放到外部样式表中，那么站点会更易于维护。

通过编辑单一的文件，就可以改变所有页面的布局。

Tip: 由于创建高级的布局非常耗时，使用模板是一个快速的选项。

通过搜索引擎可以找到很多免费的网站模板（您可以使用这些预先构建好的网站布局，并优化它们）。

HTML 布局标签

标签	描述
<div>	定义文档区块，块级(block-level)
<span>	定义 span，用来组合文档中的行内元素。

HTML 表单和输入

HTML 表单用于收集不同类型的用户输入。

在线实例

创建文本字段 (Text field)
本例演示如何在 HTML 页面创建文本域。用户可以在文本域中写入文本。

代码如下:

<!DOCTPYE html>
<html>
<head>
	<link rel="icon" href="beyond.jpg" type="image/x-icon"/>
	<meta charset="UTF-8">
	<meta name="author" content="beyond">
	<meta http-equiv="refresh" content="550">
	<meta name="description" content="免费零基础教程">
	<meta name="keywords" content="HTML,CSS,JAVASCRIPT">
	<title>beyondの心中の动漫神作列表</title>
	<link rel="stylesheet" type="text/css" href="beyondbasestylewhite.css">

	
</head>
<body>
	<form action="">
		姓名:<input type="text" name="actressname" /> <br/>
		罩杯:<input type="text" name="cup" />
	</form>
	
 	<p style="text-align:left;font-style:normal;">
 		<b>注意:</b>表单本身是不见的,<br/>一个文本输入框默认宽度貌似是20字符吧
 	</p>
 

<p style="text-align:left">Copyright © <a>2018</a> Powered by <a>beyond</a></p>
</body>
</html>

效果如下:

创建密码字段
本例演示如何创建 HTML 的密码域。

代码如下:

<!DOCTPYE html>
<html>
<head>
	<link rel="icon" href="beyond.jpg" type="image/x-icon"/>
	<meta charset="UTF-8">
	<meta name="author" content="beyond">
	<meta http-equiv="refresh" content="550">
	<meta name="description" content="免费零基础教程">
	<meta name="keywords" content="HTML,CSS,JAVASCRIPT">
	<title>beyondの心中の动漫神作列表</title>
	<link rel="stylesheet" type="text/css" href="beyondbasestylewhite.css">

	
</head>
<body>
	<form action="http://localhost/cgi-bin/cgi_7.py" method="post" target="_blank">
		username:<input type="text" name="username" /> <br/>
		password:<input type="password" name="password" />
	</form>
	
 	<p style="text-align:left;font-style:normal;">
 		<b>注意:</b>表单本身是不见的,<br/>一个文本输入框默认宽度貌似是20字符吧
 	</p>
 

<p style="text-align:left">Copyright © <a>2018</a> Powered by <a>beyond</a></p>
</body>
</html>

效果如下:

HTML 表单

表单是一个包含表单元素的区域。

表单元素是允许用户在表单中输入内容，

比如：

文本域(textarea)、

下拉列表、

单选框(radio-buttons)、

复选框(checkboxes)等等。

表单使用表单标签 <form> 来设置:

   <form method="POST" 
 
   action="http://localhost/cgi-bin/cgi_7.rb" target="_blank"> 
 
   ... 
  
  input elements 
 
   ... 
  
</form>

HTML 表单 - 输入元素

多数情况下被用到的表单标签是输入标签（<input>）。

<input> 元素是最最最重要的表单元素。

输入类型是由类型属性（type）定义的。

大多数经常被用到的输入类型如下：

文本域（Text Fields）

文本域通过<input type="text"> 标签来设定，

当用户要在表单中键入字母、数字等内容时，就会用到文本域。

   <form> 
  
姓名: <input type="text" name="username"><br> 
  
罩杯: <input type="text" name="cup"> 
  
</form>

浏览器显示如下：

姓名:

罩杯:

注意:表单本身并不可见。

同时，在大多数浏览器中，文本域的缺省宽度是20个字符。

密码字段

密码字段通过标签<input type="password"> 来定义:

   <form> 
  
Password: <input type="password" name="pwd"> 
  
</form>

浏览器显示效果如下:

Password: **********

注意:密码字段字符不会明文显示，而是以星号或圆点替代。

单选按钮（Radio Buttons）

<input type="radio"> 标签定义了表单单选框选项。

   <form> 
  
<input type="radio" name="sex" value="girl">girl<br> 
  
<input type="radio" name="sex" value="boya">boya 
  
</form>

浏览器显示效果如下:

复选框（Checkboxes）

<input type="checkbox"> 定义了复选框. 用户需要从若干给定的选择中选取一个或若干选项。

   <form> 
  
<input type="checkbox" name="skill" value="jp">会说日语<br> 
  
<input type="checkbox" name="skill" value="music">懂得乐理<br> 
  
<input type="checkbox" name="skill" value="rubik">会玩魔方<br> 
  
<input type="checkbox" name="skill" value="music">喜爱动漫 
  
</form>

浏览器显示效果如下:

提交按钮(Submit Button)

<input type="submit"> 定义了提交按钮.

当用户单击确认按钮时，表单的内容会被发射到另一个CGI文件。

表单的动作action属性定义了目的文件的文件名。

表单的方法method属性定义了提交请求的方式。

由动作属性定义的这个CGI文件通常会对接收到的输入数据进行相关的处理。

   <form name="input" action="http://localhost/cgi-bin/ruby_10.rb" method="post"> 
  
username: <input type="text" name="username"> 
  
<input type="submit" value="Submit"> 
  
</form>

相应的CGI处理程序:ruby_10.rb代码如下:

#!/usr/bin/ruby 
# -*- coding: UTF-8 -*-
#coding=utf-8

require 'cgi'

cgi = CGI.new("html4")

username = cgi['username']
cgi.out{  
    cgi.html{  
        cgi.head{ "\n" +'<meta http-equiv=Content-Type content="text/html;charset=utf-8">' + cgi.title{"Ruby CGI"}}+  
        cgi.body{ "hello #{username}\n" 
        }  
    }  
}

浏览器显示的HTML表单如下:

浏览器显示的CGI处理结果如下:

假如您在文本框内键入几个字母，然后点击确认按钮，那么输入数据会传送到 "ruby_10.rb"这个CGI的页面。

该页面将显示出输入的结果。

补充一下: 除了Ruby您还可以使用PHP,Python,Perl,C++,JSP等等CGI程序来处理提交来的表单里的数据.

PHP的代码如下:

<html>
 <body>
 hello <?php 
         echo $_POST[username];
       ?>
 </body>
 </html>

效果如下:

Python的代码如下:

#!/usr/bin/env python
# -*- coding: UTF-8 -*-
#GET请求
# 千万要记得chmod 755 python_10.py
import cgi,cgitb
#创建FieldStorage实例
form = cgi.FieldStorage()

#获取get的字段(这儿是写死的,也可以根据os.environ["QUERY_STRING"]获取)
username = form.getvalue("username")
print "Content-Type:text/html\r\n\r\n"
print "<html>"
print "<head>"
print "<title>Python CGI</title>"
print "</head>"
print "<body>"
print "<h2>hello %s</h2>" % (username)
print "</body>"
print "</html>"

效果如下:

JSP代码如下:(Mac上还没安装JSP环境,先占个坑,以后填上)

效果如下:

表单实例

带边框的表单
本例演示如何在数据周围绘制一个带标题的框。

代码如下:

<form action="http://localhost/cgi-bin/ruby_10.rb" method="post" target="_blank">
		<fieldset>
			<legend>添加记录</legend>
			动漫名称:<input type="text" size="30"><br/>
			动漫女主:<input type="text" size="30"><br/>
			动漫图片:<input type="text" size="60"><br/>
		</fieldset>
</form>

效果如下:

带有输入框和确认按钮的表单
本例演示如何向页面添加表单。此表单包含两个输入框和一个确认按钮。

代码如下:

<form action="http://localhost/cgi-bin/ruby_10.rb" method="post" target="_blank">
		动漫名称:<input type="text" size="30"><br/>
		动漫女主:<input type="text" size="30"><br/>
		动漫图片:<input type="text" size="60"><br/>
		<input type="submit" value="添加">
</form>

效果如下:

从表单发送电子邮件
此例演示如何从表单发送电子邮件。

代码如下:

<form action="MAILTO:beyond@domain.com" method="post" target="_blank" enctype="text/plain">
		您的姓名:<input type="text" name="username" value="your name"><br/>
		您的邮件:<input type="text" name="email" value="your email"><br/>
		您的建议:<input type="text" name="advice" value="your advice" size="29"><br/>
		问题类别:<br/>
		<select name="type">
			<option value="jp">日语</option>
			<option value="code">编程</option>
			<option value="rubic">魔方</option>
			<option value="music">乐理</option>
		</select>
		<br/>
		<input type="submit" value="提交">
		<input type="reset" value="清空">
</form>

效果如下:

HTML 表单标签

New : HTML5新标签

标签	描述
-->√<form>	定义供用户输入的表单
-->√<input>	定义输入域
-->√<textarea>	定义文本域 (一个多行的输入控件)
<label>	定义了 <input> 元素的标签，一般为输入标题
-->√<fieldset>	定义了一组相关的表单元素，并使用外框包含起来
-->√<legend>	定义了 <fieldset> 元素的标题
-->√<select>	定义了下拉选项列表
<optgroup>	定义选项组
-->√<option>	定义下拉列表中的选项
-->√<button>	定义一个点击按钮
<datalist> New	指定一个预先定义的输入控件选项列表
<keygen> New	定义了表单的密钥对生成器字段
<output> New	定义一个计算结果

HTML 框架

一个内联框架被用来在当前 HTML 文档中嵌入另一个文档。

通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。

iframe语法:

   <iframe src=" 
  URL"></iframe> 
 

该URL指向不同的网页。

Iframe - 设置高度与宽度

height 和 width 属性用来定义: iframe标签的高度与宽度。

属性默认以像素为单位, 但是你可以指定其按比例显示 (如："80%").

实例

   <iframe src="html_42.html" width="400" height="380"></iframe> 
 

效果如下:

Iframe - 移除边框

frameborder 属性用于定义iframe表示是否显示边框。

设置属性值为 "0" 移除 iframe 的边框:

代码如下:

<iframe frameborder="0" src="html_42.html" width="400" height="380">
		
		 <p>您的浏览器不支持 iframe 标签。</p>

	</iframe>

效果如下:

使用iframe来显示目录链接页面

iframe可以显示一个目标链接的页面

目标链接的属性必须使用iframe的属性，

如下实例:

代码如下:

<iframe name="iframe_name" frameborder="0" src="html_42.html" width="400" height="380">
		
		 <p>您的浏览器不支持 iframe 标签。</p>

	</iframe>
	
	<br/>
	<a href="http://baidu.com/s?wd=anohana" target="iframe_name">未闻花名</a>

 	<p style="text-align:left;font-style:normal;">
 		<b>注意:</b><br/>点击a标签后,会将网页载入到<br/>名字为iframe_name这个框架target里<br/>
 	</p>

效果如下:

点击链接之后,效果如下:

HTML iframe 标签

标签	说明
<iframe>	定义一个内联的iframe

iframe 标准属性

属性	说明
class	规定元素的类名（classname）
id	规定元素的唯一 id
style	规定元素的行内样式（inline style）
title	规定元素的额外信息（可在工具提示中显示）

附录:

HTML 参考手册- (HTML5 标准)

按字母顺序排列

New : HTML5新标签

标签	描述
<!--...-->	-->√定义注释
<!DOCTYPE>	-->√定义文档类型
<a>	-->√定义超文本链接
<abbr>	-->√定义缩写
<acronym>	定义只取首字母的缩写，不支持HTML5 ???Excuse Me???
<address>	定义文档作者或拥有者的联系信息
<applet>	定义嵌入的 applet。HTML5中不支持使用。
<area>	-->√定义图像映射内部的区域
<article>New	定义一个文章区域
<aside>New	定义页面的侧边栏内容
<audio>New	-->√定义音频内容
<b>	-->√定义文本粗体
<base>	-->√定义页面中所有链接的默认地址或默认目标。
<basefont>	定义页面中文本的默认字体、颜色或尺寸。HTML5不支持使用。
<bdi>New	允许您设置一段文本，使其脱离其父元素的文本方向设置。
<bdo>	-->√定义文字方向, 例如:从右往左,就是 dir="rtl"
<big>	定义大号文本，HTML5不支持使用。
<blockquote>	-->√定义长的引用
<body>	-->√定义文档的主体
<br>	-->√定义换行
<button>	-->√定义一个点击按钮
<canvas>New	定义图形，比如图表和其他图像,标签只是图形容器，您必须使用脚本来绘制图形
<caption>	-->√定义表格标题
<center>	定义居中文本。HTML5不支持使用。
<cite>	-->√定义引用(citation)
<code>	-->√定义计算机代码文本
<col>	-->√定义表格中一个或多个列的属性值
<colgroup>	定义表格中供格式化的列组
<command>New	定义命令按钮，比如单选按钮、复选框或按钮
<datalist>New	定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值。
<dd>	-->√定义定义列表中项目的描述
<del>	-->√定义被删除文本 (删除线效果)
<details>New	用于描述文档或文档某个部分的细节
<dfn>	定义定义项目
<dialog>New	定义对话框，比如提示框
<dir>	定义目录列表。HTML5不支持使用。
<div>	-->√定义文档中的节
<dl>	-->√定义列表详情
<dt>	-->√定义列表中的项目
<em>	-->√定义强调文本
<embed>New	定义嵌入的内容，比如插件。
<fieldset>	-->√定义围绕表单中元素的边框
<figcaption>New	定义<figure> 元素的标题
<figure>New	规定独立的流内容（图像、图表、照片、代码等等）。
<font>	定义文字的字体、尺寸和颜色。HTML5不支持使用。
<footer>New	定义 section 或 document 的页脚。
<form>	-->√定义了HTML文档的表单
<frame>	-->√定义框架集的窗口或框架
<frameset>	-->√定义框架集
<h1> to <h6>	-->√定义 HTML 标题
<head>	-->√定义关于文档的信息
<header>New	定义了文档的头部区域
<hr>	-->√定义水平线
<html>	-->√定义 HTML 文档
<i>	-->√定义斜体字
<iframe>	-->√定义内联框架
<img>	-->√定义图像
<input>	-->√定义输入控件
<ins>	-->√定义被插入文本 (下划线效果)
<kbd>	-->√定义键盘文本
<keygen>New	规定用于表单的密钥对生成器字段。
<label>	定义 input 元素的标注
<legend>	-->√定义 fieldset 元素的标题。
<li>	-->√定义列表的项目
<link>	-->√定义文档与外部资源的关系
<map>	-->√定义图像映射
<mark>New	定义带有记号的文本。请在需要突出显示文本时使用 <m> 标签。
<menu>	定义菜单列表。HTML5不支持使用。
<meta>	-->√定义关于 HTML 文档的元信息。
<meter>New	定义度量衡。仅用于已知最大和最小值的度量。
<nav>New	定义导航链接的部分
<noframes>	定义针对不支持框架的用户的替代内容。HTML5不支持
<noscript>	-->√定义针对不支持客户端脚本的用户的替代内容。
<object>	定义内嵌对象
<ol>	-->√定义有序列表。
<optgroup>	定义选择列表中相关选项的组合。
<option>	-->√定义选择列表中的选项。
<output>New	定义不同类型的输出，比如脚本的输出。
<p>	-->√定义段落。
<param>	定义对象的参数。
<pre>	-->√定义预格式文本。
<progress>New	定义运行中的进度（进程）。
<q>	-->√定义短的引用。
<rp>New	<rp> 标签在 ruby 注释中使用，以定义不支持 ruby 元素的浏览器所显示的内容。
<rt>New	<rt> 标签定义字符（中文注音或字符）的解释或发音。
<ruby>New	<ruby> 标签定义 ruby 注释（中文注音或字符）。
<s>	不赞成使用。定义加删除线的文本。
<samp>	-->√定义计算机代码样本。
<script>	-->√定义客户端脚本。
<section>New	<section> 标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。
<select>	-->√定义选择列表（下拉列表）。
<small>	-->√定义小号文本。
<source>New	<source> 标签为媒介元素（比如 <video> 和 <audio>）定义媒介资源。
<span>	定义文档中的节。
<strike>	HTML5不支持，不赞成使用。定义加删除线文本。
<strong>	-->√定义强调文本。
<style>	-->√定义文档的样式信息。
<sub>	-->√定义下标文本。
<summary>New	<summary> 标签包含 details 元素的标题，"details" 元素用于描述有关文档或文档片段的详细信息。
<sup>	-->√定义上标文本。
<table>	-->√定义表格。
<tbody>	定义表格中的主体内容。
<td>	-->√定义表格中的单元。
<textarea>	-->√定义多行的文本输入控件。
<tfoot>	定义表格中的表注内容（脚注）。
<th>	-->√定义表格中的表头单元格。
<thead>	定义表格中的表头内容。
<time>New	定义日期或时间，或者两者。
<title>	-->√定义文档的标题。
<tr>	-->√定义表格中的行。
<track>New	<track> 标签为诸如 video 元素之类的媒介规定外部文本轨道。
<tt>	定义打字机文本。
<u>	不赞成使用。定义下划线文本。
<ul>	-->√定义无序列表。
<var>	定义文本的变量部分。
<video>New	<video> 标签定义视频，比如电影片段或其他视频流。
<wbr>New	规定在文本中的何处适合添加换行符。