Title：《HTML基础知识》
Authot：Hugu
Sarted Date：August 11th. 2019.
Finished Date：August 12th. 2019.
HTML是用来描述网页的一种语言。
HTML(Hypertext Markup Language)，即超文本标记语言。HTML不是一种编程语言，而是一种标记语言(markup language)。标记语言是一套标记标签(markup tag)。HTML使用标记标签来描述网页，不需要编译，直接由浏览器执行。HTML标记标签通常被称为HTML标签(HTML tag)。
HTML标签是由尖括号(“<”"">")和关键词组成，如：<html>。HTML标签通常是成对出现的，如：<b>和</b>。HTML标签中也存在一些单标签，如：<br/>。标签对中的第一个标签是开始标签(开放标签)，第二个标签是结束标签(闭合标签)。HTML文件被用来描述网页。
HTML文件包含HTML标签和纯文本，是一个文本文件。HTML文件也被称为网页。HTML文件必须使用html或htm或xml为文件名后缀。HTML文件制作不是很复杂，但功能强大，支持不同数据格式的文件镶入，其主要特点有：
简易性：HTML版本升级采用超集方式，从而更加灵活方便。可扩展性：HTML采取子类元素的方式，为系统扩展带来保证。平台无关性：HTML可以使用在广泛的平台上。通用性：HTML是网络的通用语言，是一种简单、通用的全置标记语言。HTML大小写不敏感。HTML的基本结构如下所示：
<!DOCTYPE html> <!-- 文档类型声明 --> <html> <!-- html开始标签 --> <head> <!-- head开始标签 --> <title>HTML基本结构</title> <!-- title --> <meta http-equiv="Content" contect="text/html;charset=utf-8"/> <script type="text/javascript"> //<!-- js脚本 --> alert("Hello World!"); </script> <script src="xxx.js">....</script> <!-- 链接外部js脚本 --> <style type="text/css"> <!-- CSS样式 --> <!-- body {font: 10pt "Arial"} h1 {font: 15pt/17pt "Arial"; font-weight: bold; color: maroon} h2 {font: 13pt/15pt "Arial"; font-weight: bold; color: blue} p {font: 10pt/12pt "Arial"; color: black} --> </style> <link rel=stylesheet href="http://www.dhtmlet.com/dhtmlet.css" type="text/css"> <!-- 链接外部CSS样式 --> </head> <!-- head结束标签 --> <body> <!-- body开始标签 --> This is my first homepage. <b>This text is bold</b> </body> <!-- body结束标签 --> </html> <!-- html结束标签 --> <!DOCTYPE html>声明文档类型信息，若无则浏览器以默认格式进行编码。<html>块是HTML文件的主体，其他的文件内容都包含在该块中。<head>块一般写上引用的js脚本或css脚本或者直接填写js代码或css代码以及一些文档描述信息。<title>标签设置文件显示的标题。<meta>一般标识文档的描述信息。<script>标识js脚本也可以引用外部js脚本。<style>标识css脚本。<link>一般标识css引用。<body>是浏览器的正文信息。总结：
有始有终，小写规范body分工，内容其中跨行注释，不要嵌套键值双引，空格分列语法：<标签名></标签名> 或者 <标签名/>
eg:
<html>...</html>或 <br/>注：
“<”和">"一起使用标签一般成对出现单标签：没有结束标签有的成对标签有时可以当单标签使用，形式与单标签一致从**<html>开始标签到</html>结束标签的所有代码，称为HTML元素**，同样其他标签内的代码也称为某某标签元素。
eg：
<b>This text is bold</b> 此HTML元素以开始标签起始， 内容是：This text is bold，以结束标签中止。<b>标签的目的是定义一个需要被显示成粗体的HTML元素。语法：<标签名 属性名1=“值1” 属性名2=“值1” ...> ... </标签名> 或
<标签名 style="属性名1:值1;属性名2=值2;...">...</标签名>
语法：
注：
注释内容在网页中不显示可以进行多行注释CSS中的注释：/* … */JavaScript中的注释： 单行注释：//多行注释：/* … */语法：<!DOCTYPE html>
注：
指明文档的类型，否则浏览器会按自己的默认设置来对文档进行解析<!DOCTYPE>声明必须放在HTML文件第一行<!DOCTYPE>声明不是HTML标签举例：
<!DOCTYPE html> <html> </html>语法：
<meta http-equiv="Content" contect="text/html;charset=utf-8"/>
注：
<meta/>标签需要添加在<head></head>标签之间编码格式有：UTF-8、GB2312、GBK等编码举例：
<!DOCTYPE html> <html> <head> <title>网页编码设置</title> <!-- 背景资讯 --> <meta http-equiv="Content" contect="text/html;charset=utf-8"/> </head> <body> </body> </html>语法：<h?>...</h?>（从1到6，有六级选择）
属性：
align：设置水平对齐方式 left：左对齐right：右对齐center：居中对齐举例：
<!DOCTYPE html> <html> <head> <title>标题标签</title> <meta http-equiv="Content" contect="text/html;charset=utf-8"/> </head> <body> <!-- 标题标签 --> <h1 align="center">一级标签</h1> <h2 align="left">二级标签</h2> <h3 align="right">三级标签</h3> <h4>四级标签</h4> <h5>五级标签</h5> <h6>六级标签</h6> </body> </html>展示效果：
语法：<i>...</i>、<em>...</em>
属性：
举例:
eg:
<!DOCTYPE html> <html> <head> <title>文字标签——斜体</title> <meta http-equiv="Content" contect="text/html;charset=utf-8"/> </head> <body> <i>斜体文字1</i> <br/> <em>斜体文字2</em> </body> </html>展示效果：
斜体文字1
斜体文字2
语法：<b>...</b>、<strong>...</strong>
属性：
举例：
<!DOCTYPE html> <html> <head> <title>文字标签——加粗</title> <meta http-equiv="Content" contect="text/html;charset=utf-8"/> </head> <body> <b>加粗文字1</b> <br/> <strong>加粗文字2</strong> </body> </html>展示效果：
加粗文字1
加粗文字2
语法：<del>...</del>、<s>...</s>、<strike>...</strike>
属性：
举例：
<!DOCTYPE html> <html> <head> <title>文字标签——删除线</title> <meta http-equiv="Content" contect="text/html;charset=utf-8"/> </head> <body> <del>文字删除线</del> <br/> <s>文字删除线</s> <br/> <strike>文字横线</strike> </body> </html>展示效果：
文字删除线
文字删除线
文字横线
语法：
上标：<sup>...</sup>下标：<sub>...</sub>属性：
举例：
<!DOCTYPE html> <html> <head> <title>文字标签——上下标</title> <meta http-equiv="Content" contect="text/html;charset=utf-8"/> </head> <body> y = x <sup>2</sup> <br/> H<sub>2</sub>O = 2H + O </body> </html>展示效果：
y = x 2
H2O = 2H + O
语法：<ins>...</ins>、<u>...</u>
属性：
举例：
<!DOCTYPE html> <html> <head> <title>文字标签——下划线</title> <meta http-equiv="Content" contect="text/html;charset=utf-8"/> </head> <body> <ins>文字下划线</ins> <br/> <u>文字下划线</u> </body> </html>展示效果：
文字下划线
文字下划线
语法：<kbd>Keyboard input</kbd>
属性：
举例：
<!DOCTYPE html> <html> <head> <title>文字标签——键盘文字</title> <meta http-equiv="Content" contect="text/html;charset=utf-8"/> </head> <body> <!-- 键盘文字，控制键不可用 --> <kbd>Keyboard input</kbd> </body> </html>展示结果：
Keyboard input
语法：<code>Computer code</code>
属性：
举例：
<!DOCTYPE html> <html> <head> <title>文字标签——计算机代码标签</title> <meta http-equiv="Content" contect="text/html;charset=utf-8"/> </head> <body> <code>Computer code</code> </body> </html>展示结果：
Computer code
语法：<tt>Teletype text</tt>
属性：
举例：
<!DOCTYPE html> <html> <head> <title>文字标签——电码文本标签</title> <meta http-equiv="Content" contect="text/html;charset=utf-8"/> </head> <body> <tt>Teletype text</tt> </body> </html>展示结果：
Teletype text
语法：<samp>Sample text</samp>
属性：
举例：
<!DOCTYPE html> <html> <head> <title>文字标签——简单文本标签</title> <meta http-equiv="Content" contect="text/html;charset=utf-8"/> </head> <body> <samp>Sample text</samp> </body> </html>展示结果：
Sample text
语法：<var>Computer variable</var>
属性：
举例：
<!DOCTYPE html> <html> <head> <title>文字标签——计算机变量标签</title> <meta http-equiv="Content" contect="text/html;charset=utf-8"/> </head> <body> <var>Computer variable</var> </body> </html>展示结果：
Computer variable
语法：<address>...</address>
属性：
举例：
<!DOCTYPE html> <html> <head> <title>文字标签——计算机变量标签</title> <meta http-equiv="Content" contect="text/html;charset=utf-8"/> </head> <body> <address> Donald Duck<br> BOX 555<br> Disneyland<br> USA </address> </body> </html>展示结果：
Donald Duck BOX 555 Disneyland USA语法：<abbr title="United Nations">UN</abbr>、<acronym title="World Wide Web">WWW</acronym>
属性：
举例：
<!DOCTYPE html> <html> <head> <title>文字标签——计算机变量标签</title> <meta http-equiv="Content" contect="text/html;charset=utf-8"/> </head> <body> <abbr title="United Nations">UN</abbr> <br> <acronym title="World Wide Web">WWW</acronym> </body> </html>展示结果：
UN WWW
语法：<bdo dir="rtl">Here is some Hebrew text</bdo>
属性：
举例：
<!DOCTYPE html> <html> <body> <p> If your browser supports bi-directional override (bdo), the next line will be written from the right to the left (rtl): </p> <bdo dir="rtl"> Here is some Hebrew text </bdo> </body> </html>展示结果：
Here is some Hebrew text语法：<p>...</p>
属性：
align： center：居中left：左对齐right：右对齐justify：两端对齐举例：
<!DOCTYPE html> <html> <head> <title>段落标签</title> <meta http-equiv="Content" contect="text/html;charset=utf-8"/> </head> <body> <!-- 段落标签 --> <p align="left">段落左对齐(默认)</p> <p align="center">段落居中对齐</p> <p align="right">段落右对齐</p> <p align="justify">段楼两，端对齐段楼两端对，齐段楼两端对齐段，楼两端对齐段楼两端对齐段，楼两端对，齐，段楼，两端，对齐，段楼两端，对齐段楼，两端对齐段，楼两端对齐段楼两端，对齐段楼两，端对齐段，楼两端对齐</p> </body> </html>展示效果：
段落左对齐(默认)
段落居中对齐
段落右对齐
段楼两，端对齐段楼两端对，齐段楼两端对齐段，楼两端对齐段楼两端对齐段，楼两端对，齐，段楼，两端，对齐，段楼两端，对齐段楼，两端对齐段，楼两端对齐段楼两端，对齐段楼两，端对齐段，楼两端对齐
语法：<pre> ...</pre>
属性：
举例：
<!DOCTYPE html> <html> <head> <title>预格式化标签</title> <meta http-equiv="Content" contect="text/html;charset=utf-8"/> </head> <body> <!-- 预先格式化标签 --> <pre> 前面有两个Tab</pre> </body> </html>展示效果：
前面有两个Tab语法：
<ul> <li>列表项</li> <li>列表项</li> ... </ul>属性：
type属性： disc：圆点square：正方形circle：空心圆举例：
<!DOCTYPE html> <html> <head> <title>无序列表</title> <meta http-equiv="Content" contect="text/html;charset=utf-8"/> </head> <body> <ul> <li>无序列表1</li> <li>无序列表1</li> </ul> <ul type="disc"> <li>无序列表2</li> <li>无序列表2</li> </ul> <ul type="square"> <li>无序列表3</li> <li>无序列表3</li> </ul> <ul type="circle"> <li>无序列表4</li> <li>无序列表4</li> </ul> </body> </html>展示效果：
无序列表1无序列表1 无序列表2无序列表2 无序列表3无序列表3 无序列表4(默认)无序列表4(默认)语法：
<ol> <li>列表项</li> <li>列表项</li> ... </ol>属性：
type： 1：阿拉伯数字a：小写字母A：大写字母i：小写罗马数字I：大写罗马数字举例：
<!DOCTYPE html> <html> <head> <title>有序列表</title> <meta http-equiv="Content" contect="text/html;charset=utf-8"/> </head> <body> <ol> <li>有序列表1</li> <li>有序列表1</li> </ol> <ol type="1"> <li>有序列表2(默认)</li> <li>有序列表2(默认)</li> </ol> <ol type="a"> <li>有序列表3</li> <li>有序列表3</li> </ol> <ol type="A"> <li>有序列表4</li> <li>有序列表4</li> </ol> <ol type="i"> <li>有序列表5</li> <li>有序列表5</li> </ol> <ol type="I"> <li>有序列表6</li> <li>有序列表6</li> </ol> </body> </html>展示效果：
有序列表1有序列表1 有序列表2(默认)有序列表2(默认) 有序列表3有序列表3 有序列表4有序列表4 有序列表5有序列表5 有序列表6有序列表6语法：
<dl> <dt>定义列表项</dt> <dd>列表项描述</dd> <dd>列表描述</dd> <dt>定义列表项</dt> <dd>列表项描述</dd> ... </dl>属性： 举例：
<!DOCTYPE html> <html> <head> <title>自定义列表</title> <meta http-equiv="Content" contect="text/html;charset=utf-8"/> </head> <body> <dl> <dt>定义列表项</dt> <dd>列表项描述</dd> <dd>列表描述</dd> <dt>定义列表项</dt> <dd>列表项描述</dd> </dl> </body> </html>展示效果：
定义列表项 列表项描述 列表描述 定义列表项 列表项描述语法：<img src=""/>
属性：
src：图像的URL地址，（相对 / 绝对）alt：图像替代文本，（在图像未加载时显示）height：图像的高（px / %）width：图像的款（px / %）vertical：竖直对齐方式 top：顶端对齐middle：居中对齐bottom：底端对齐 align：水平对齐方式 left：right：texttop：absmiddle：baseline：absbottom： border：设置图片边框举例：
<!DOCTYPE html> <html> <head> <title>图像标签</title> <meta http-equiv="Content" contect="text/html;charset=utf-8"/> </head> <body> <!-- 图像标签 --> <img src="https://gitee.com/jixiansiwei/ImagesBed/raw/master/website/font-end/html/HTML文档基本结构.png" alt="HTML文档基本结构" height="30px" weight="30%"/> </body> </html>展示效果：
语法：<a href="">...</a> 属性：
href：链接地址
target：链接目标窗口方式
_self：当前窗口打开_blank：打开新窗口_top：在最高一级的窗口打开_parent：当前窗口的父级窗口打开title：链接提示文字
name：链接命名 举例： eg1:
<!DOCTYPE html> <html> <head> <title>超链接标签</title> <meta http-equiv="Content" contect="text/html;charset=utf-8"/> </head> <body> <!-- 打开其他网页 --> <a href="http://www.baidu.com" target="_self" title="百度一下" name="baidu"></a> <br/> <!-- 打开本地磁盘文件夹 --> <a href="F:\Pleione++\Fodder\Blog\MarkdownImgs\HTML" target="blank" title="文档相关文件夹" name="imgs">跳转到图片文件夹中</a> <br/> <!-- 电子邮件链接 --> <a href="mailto:pleione_plus@qq.com">给博主发邮件</a> <br/> <!-- 文件下载 --> <a href="https://gitee.com/jixiansiwei/ImagesBed/raw/master/website/font-end/html/HTML文档基本结构.png">下载文件</a> <br/> <!-- 空连接 --> <a href="#">空连接</a> </body> </html>展示效果：
百度一下
跳转到图片文件夹中
给博主发邮件
下载文件
空连接
eg2:
<!DOCTYPE html> <html> <head> <title>超链接标签——锚定</title> <meta http-equiv="Content" contect="text/html;charset=utf-8"/> </head> <body> <!-- 锚定主要是通过href和name两个属性来实现的 --> <!-- 页内锚定 --> <a href="#" name="top"/> <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> <a href="#top">回到顶部</a> <!-- 不同页面锚定(相同文件夹下) --> <a href="网页名称#锚名">...</a> </body> </html>展示效果：
回到顶部
…
语法：mailto:URL?参数1=内容1&参数2=内容2&参数3=内容3
属性：
subject：代表邮件的标题body：代表邮件的内容cc：代表一个抄送对象bcc：代表一个暗送对象举例：
<!DOCTYPE html> <html> <head> <title>链接邮件mailto</title> <meta http-equiv="Content" contect="text/html;charset=utf-8"/> </head> <body> <!-- 定义邮件的标题为：HTML教程，内容为：一步步教你学会HTML，抄送对象：123456@qq.com，暗送对象：5211314@qq.com --> <a href="mailto:pleione_plus@qq.com?subject=HTML教程&body=一步步教会你HTML&cc=123456@qq.com&bcc=5211314@qq.com">mailto方式发送邮件</a> </body> </html>展示结果：
mailto方式发送邮件
注：
mailto邮件还可以通过<form>标签来实现语法：<div>...</div>
属性：
align：设置水平对齐方式 left：左对齐center：居中对齐right：右对齐justify：两端对齐语法：<blockquote>....</blockquote>（通常会内缩）
属性：
举例：
<!DOCTYPE html> <html> <head> <title>引文区块标签</title> <meta http-equiv="Content" contect="text/html;charset=utf-8"/> </head> <body> <!-- 引文区块 --> <blockquote>这是一个引文区块</blockquote> </body> </html>展示结果：
这是一个引文区块语法：<cite>...</cite>（通常会以斜体显示）
属性：
举例：
<!DOCTYPE html> <html> <head> <title>引文标签</title> <meta http-equiv="Content" contect="text/html;charset=utf-8"/> </head> <body> <!-- 引文 --> <cite>引文</cite> </body> </html>展示结果：
引文
语法：<center>...</center>
属性：
举例：
<!DOCTYPE html> <html> <head> <title>居中标签</title> <meta http-equiv="Content" contect="text/html;charset=utf-8"/> </head> <body> <!-- 居中标签 --> <center>居中标签使用</center> </body> </html>展示结果：
居中标签使用语法：<marquee>....</marquee>
属性：
behavior：设置滚动方式 slide：滑动scroll：预设卷动alternate：来回卷动 direction： down：向下卷动up：向上卷动right：向右卷动left：向左卷动 loop：设置卷动次数width：设置宽度height：设置高度bgcolor：设置背景颜色scrollamount：设置滚动速度scrolldelay：设置卷动时间举例：
<!DOCTYPE html> <html> <head> <title>跑马灯标签</title> <meta http-equiv="Content" contect="text/html;charset=utf-8"/> </head> <body> <!-- 跑马灯标签 --> <marquee behavior="alternate" direction="right" loop="2" scrollmount="1000" scrolldelay="3"> 受到核辐射理发师发顺丰还是考虑发生了会发生费时费力是发生口角绿肥红瘦发生口角绿肥红瘦方式看见了回复是 </marquee> </body> </html>展示效果（不起效果）
受到核辐射理发师发顺丰还是考虑发生了会发生费时费力是发生口角绿肥红瘦发生口角绿肥红瘦方式看见了回复是
语法：<br/>
属性:
语法：<hr/>
属性：
width：设置水平线宽度，(px / %)color：设置水平线颜色align：设置水平线对齐方式noshade：设置水平线无阴影size：设置大小举例：
<!DOCTYPE html> <html> <head> <title>水平线标签</title> <meta http-equiv="Content" contect="text/html;charset=utf-8"/> </head> <body> <!-- 水平线标签 --> <hr width="70%" color="blue" align="center"/> </body> </html>展示效果：(在markdown中，仅width属性有效)
字符实体：
一个and符号（&），一个实体名或者一个实体号，最后是一个分号（;）。大小写敏感。 实体名实体号显示结果描述<<<小于号>>>大于号 Space不断行的空白&&&and符号"""引号'’单引号¢¢¢分£££英镑¥¥¥人民币元§§§章节©©©版权®®®注册™™商标×××乘号÷÷÷除号语法：
<table> <!-- 表格开始 --> <caption></caption> <!-- 表格标题，居中显示 --> <!-- 表格头 --> <thead> <tr> <!-- tr行标签 --> <th>表头</th> <!-- th表格头,内容居中、加粗显示 --> <th>表头</th> ... </tr> </thead> <!-- 表格主体 --> <tbody> <tr> <td>主体</td> <!-- td单元格 --> <td>主体</td> ... </tr> </tbody> <!-- 表格脚注 --> <tfoot> <tr> <td>脚注</td> <td>脚注</td> ... </tr> </tfoot> </table> <!-- 表格结束 -->属性：
table属性： width：规定表格宽度，（px / %）align：表格相对周围元素的对齐方式 left：左对齐center：居中对齐right：右对齐 border：设置表格边框的宽度，(默认为1px)bodercolor：表格的边框颜色，(border≠0时此值有效)bordercolorlight：亮边框颜色（左边框和上边框）bordercolordark：暗边框颜色（右边框和下边框）border-style：边框线样式bgcolor：设置表格的背景颜色 rgb(x,x,x)#xxxxxxcolorname background：表格的背景图cellpading：设置表格单元边沿与其内容之间的空白，（px / %）cellspacing：设置单元格之间的间距，（px / %）frame：外部边框样式 void：不显示外侧边框above：显示上部的外侧边框below：显示下部的外侧边框lhs：显示左边的外侧边框rhs：显示右边的外侧边框hsides：显示上部和下部的外侧边框vsides：显示左边和右边的外侧边框box：在所有四个边上显示外侧边框border：在所有四个边上显示外侧边框 rules：内部边框样式 none：没有线条groups：位于行组和列组之间的线条rows：位于行之间的线条cols：位于列之间的线条all：位于行和列之间的线条 tr属性： align：行内容的水平对齐方式 left：左对齐center：居中对齐right：右对齐justify：两端对齐char：字节对齐 valign：行内容的垂直对齐方式 top：顶端对齐middle：中部对齐bottom：底端对齐baseline：基线对齐 bgcolor：行的背景颜色 rgb(x,x,x)#xxxxxxcolorname td和th标签属性： align：单元格内容的水平对齐方式 left：左对齐center：居中对齐right：右对齐justify：两端对齐char：字节对齐 valign：单元格内容的垂直对齐方式 top：顶端对齐middle：居中对齐bottom：底端对齐baseline：基线对齐 bgcolor：单元格的背景颜色 rgb(x,x,x)#xxxxxxcolorname background：单元格的背景图width：单元格的宽度，(px / %)height：单元格的高度，(px / %)colspan： 跨列属性rowspan：跨行属性 thead、tbody和tfoot标签属性 align：水平对齐方式 left：左对齐center：居中对齐right：右对齐justify：两端对齐char：字节对齐 valign：垂直对齐方式 top：顶端对齐middle：中部对齐bottom：底端对齐baseline：基线对齐举例：
eg1：
<!DOCTYPE html> <html> <head> <title>HTML表格——基础(跨行、跨列)</title> <meta http-equiv="Content" contect="text/html;charset=utf-8"/> </head> <body> <table border="6" align="center" width=“80%” bgcolor="#f2f2f2" cellspacing="auto" cellpadding="5px" frame="box" rules=""> <!-- 表格开始 --> <caption>前端工程师的工资</caption><!-- 表格标题，居中显示 --> <!-- 表格头 --> <thead> <tr bgcolor="#d8e4bc"> <th rowspan="2">城市</th> <!-- 跨列 --> <th colspan="2">2014</th> <!-- 跨列 --> <th rowspan="2">2015</th> <th rowspan="2">2016</th> </tr> <tr bgcolor="#d8e4bc"> <th>上半年</th> <th>下半年</th> </tr> </thead> <!-- 表格主体 --> <tbody align="center" valign="middle"> <tr align="center" valign="middle"> <td bgcolor="#b8cce4">上海</td> <td>8000</td> <td>9000</td> <td>10000</td> <td>12000</td> </tr> <tr> <td bgcolor="#b8cce4">北京</td> <td>8000</td> <td>9000</td> <td>10000</td> <td>12000</td> </tr> </tbody> <!-- 表格脚注 --> <tfoot align="center" valign="middle"> <tr> <td bgcolor="#b8cce4">合计</td> <td>8000</td> <td>9000</td> <td>10000</td> <td>12000</td> </tr> </tfoot> <!-- 使用标签对表格划分，不会改变表格的展示效果，顺序错误也不会影响到表格的展示 --> </table> <!-- 表格结束 --> </body> </html>展示结果：(居中不起效果)
城市201420152016上半年下半年上海800090001000012000北京800090001000012000合计800090001000012000eg2：
<!DOCTYPE html> <html> <head> <title>HTML表格——嵌套</title> <meta http-equiv="Content" contect="text/html;charset=utf-8"/> </head> <body> <!-- 嵌套表格 --> <table border="6" align="center" width=“80%” bgcolor="#f2f2f2" cellspacing="auto" cellpadding="5px" frame="box" rules=""> <!-- 表格标题 --> <caption>前端工程师的工资</caption> <!-- 表格头 --> <thead> <tr bgcolor="#d8e4bc"> <th>城市</th> <!-- 跨列 --> <th>2014</th> <!-- 跨列 --> <th>2015</th> <th>2016</th> </tr> </thead> <!-- 表格主体 --> <tbody align="center" valign="middle"> <tr align="center" valign="middle"> <td bgcolor="#b8cce4">上海</td> <td> <table border="1" cellspacing="0" cellpadding="0"> <tr> <td>上半年</td> <td>下半年</td> </tr> <tr> <td>8000</td> <td>9000</td> </tr> </table> </td> <td>10000</td> <td>12000</td> </tr> <tr> <td bgcolor="#b8cce4">北京</td> <td> <table> <tr> <td>8000</td> <td>9000</td> </tr> </table> </td> <td>10000</td> <td>12000</td> </tr> </tbody> <!-- 表格脚注 --> <tfoot align="center" valign="middle"> <tr> <td bgcolor="#b8cce4">合计</td> <td> <table> <tr> <td>8000</td> <td>9000</td> </tr> </table> </td> <td>10000</td> <td>12000</td> </tr> </tfoot> <!-- 使用标签对表格划分，不会改变表格的展示效果，顺序错误也不会影响到表格的展示 --> </table> </body> </html>展示效果：（居中不起效果）
前端工程师的工资 城市201420152016上海 上半年下半年80009000 1000012000北京 80009000 1000012000合计 80009000 1000012000表单工作原理如下图所示：
语法：
<form action="" method="" name=""> <!-- 表单元素 --> </form>属性：
action：指示提交表单的位置method：指示提交表单的方法 get： 使用URL传递参数对所发送信息的数量也有限制一般用于信息获取 post： 表单数据作为HTTP请求体的一部分对所发送信息的数量无限制一般用于修改服务器上的资源 target：指示打开页面的方式enctype：在发送表单数据之前如何对齐进行编码 applicatin/x-www-form-urlencodedmultipart/form-datatext/plain name：表单的名称举例：
<!DOCTYPE html> <html> <head> <title>表单标签</title> <meta http-equiv="Content" contect="text/html;charset=utf-8"/> </head> <body> <form> <!-- 表单元素 --> </form> </body> </html>展示结果：
语法：<input type="" name="" ..../>
属性：
type属性：
text：文字域 name：文字域的名称maxlength：设置用户输入的最大字符长度size：指定文本框的宽度，以字符个数为单位；文本框的缺省宽度是20个字符value：指定文本框的默认值placeholder：规定用户填写输入字段的提示 password：密码域 name：文字域的名称maxlength：设置用户输入的最大字符长度size：指定文本框的宽度，以字符个数为单位；文本框的缺省宽度是20个字符value：指定文本框的默认值placeholder：规定用户填写输入字段的提示 file：文件域checkbox：复选域 checked：指示是否被选中 radio：单选域 checked：指示是否被选中 button：按钮submit：提交按钮reset：重置按钮hidden：隐藏域image：图像域（图像提交按钮） src：URL地址举例：
<!DOCTYPE html> <html> <head> <title>表单输入标签</title> <meta http-equiv="Content" contect="text/html;charset=utf-8"/> </head> <body> <form action="action.php" method="post" name="form1" target="_blank" enctype="text/plain"> <!-- 输入标签 type: text 文字域 password 密码域 file 文件域 checkbox 复选域 radio 单选域 button 按钮 submit 提交按钮 reset 重置按钮 hidden 隐藏域 image 图像域 --> <table width="600px" bgcolor="#f2f2f2" align="center" border="1"> <!-- 文字域 --> <tr> <td align="right">姓名：</td> <td align="left"><input type="text" name="username" size="25" maxlength="8" placeholder="请输入姓名"/></td> </tr> <!-- 文字域 --> <tr> <td align="right">邮箱：</td> <td align="left"><input type="text" name="usermail" size="25" value="@163.com"></td> </tr> <!-- 密码域 --> <tr> <td align="right">密码：</td> <td align="left"><input type="password" name="userpwd" size="25" maxlength="8" placeholder="请输入密码"></td> </tr> <!-- 密码域 --> <tr> <td align="right">确认密码：</td> <td align="left"><input type="password" name="userpwd" size="25" maxlength="8" placeholder="请再次输入密码"></td> </tr> <!-- 文件域 --> <tr> <td align="right">上传照片：</td> <td align="left"><input type="file" name="file" /></td> </tr> <!-- 单选域 --> <tr> <td align="right">性别：</td> <td align="left"> <input type="radio" name="sex" value="man">男 <input type="radio" name="sex" value="woman">女 <input type="radio" name="sex" value="securet" checked>保密 </td> </tr> <!-- 复选域 --> <tr> <td align="right">爱好：</td> <td align="left"> <input type="checkbox" name="hobby" value="read">读书 <input type="checkbox" name="hobby" value="dance">跳舞 <input type="checkbox" name="hobby" value="sing">唱歌 </td> </tr> <tr> <td colspan="2" align="center"> <input type="button" value="来点我呀" name="btn"> <input type="submit" value="submit" name="submit"> <input type="reset" value="reset" name="reset"> <!-- <input type="image" name="img_btn" src="img.png"> --> </td> </tr> <tr> <td></td> <td align="left"><input type="hidden" value="这是一个用户注册信息表单"></td> </tr> </table> </form> </body> </html>展示结果：
姓名：邮箱：密码：确认密码：上传照片：性别： 男 女 保密 爱好： 读书 跳舞 唱歌语法：
<select name="" multiple="" size=""> <optgroup label="组1"> <option value="">选项1</option> <option value="">选项2</option> ... </optgroup> </select>属性：
select标签属性： name：设置下拉菜单和列表的名称multiple：设置可选择多个选项size：设置列表中可见选项的数目 option标签属性： selected：设置选项初始选中状态value：定义送往服务器的选项值举例：
<!DOCTYPE html> <html> <head> <title>菜单和列表标签</title> <meta http-equiv="Content" contect="text/html;charset=utf-8"/> </head> <body> <form action="action.php" method="post" name="form1" target="_blank" enctype="text/plain"> <table width="600px" bgcolor="#f2f2f2" align="center" border="1"> <!-- 下拉菜单 --> <tr> <td align="right">城市：</td> <td align="left"> <select name="city"> <option value="0">请选择</option> <option value="bj">北京</option> <option value="tj">天津</option> <option value="hb">河北</option> <option value="sh">上海</option> <option value="fj">福建</option> <option value="xm">厦门</option> </select> <select name="city" size="2" multiple> <option value="bj" selected>北京</option> <option value="tj">天津</option> <option value="hb">河北</option> <option value="sh">上海</option> <option value="fj">福建</option> <option value="xm">厦门</option> </select> </td> </tr> <!-- 下拉分组菜单 --> <tr> <td align="right">城市：</td> <td align="left"> <select name="city"> <option value="0">请选择</option> <optgroup label="华北"> <option value="bj">北京</option> <option value="tj">天津</option> <option value="hb">河北</option> </optgroup> <optgroup label="华东"> <option value="sh">上海</option> <option value="fj">福建</option> <option value="xm">厦门</option> </optgroup> </select> </td> </tr> </table> </form> </body> </html>展示结果：
城市： 请选择 北京 天津 河北 上海 福建 厦门 北京 天津 河北 上海 福建 厦门 城市： 请选择 北京 天津 河北 上海 福建 厦门语法：
<textarea name="" rows="" cols=""> 文本内容 </textarea>属性：
name：设置文本区的名称placeholder：设置描述文本区域预期值的简短提示rows：设置文本区内的可见行数cols：设置文本区内的可见列数wrap：文本框的折行方式 off：不保存换行信息physical：强迫浏览器在发送信息到Web 浏览器时，必须将多行文本框的文字一行一行的发送出去virtual：送出连续成串的字除非使用者按回车举例；
<!DOCTYPE html> <html> <head> <title>文字域标签</title> <meta http-equiv="Content" contect="text/html;charset=utf-8"/> </head> <body> <form action="action.php" method="post" name="form1" target="_blank" enctype="text/plain"> <table width="600px" bgcolor="#f2f2f2" align="center" border="1"> <tr> <td align="right">简介：</td> <td align="left"> <textarea name="jj" placeholder="请输入简介信息" row="6" col="9"></textarea> </td> </tr> </table> </form> </body> </html>展示结果：
简介：块级元素：
divpformullioldladdressfieldsethrmenutable行内元素：
spanstrongembrimginputlabelselecttextareacite 使用框架，可以在一个浏览器窗口中显示不止一个HTML文档。这样的HTML文档被称为框架页面，它们是相互独立的。
使用框架的不利因素有：
网站开发者需要关心更多HTML文档的情况。打印整个页面变得困难。代码示例：
eg1：垂直分栏
<html> <frameset cols="25%,50%,25%"> <frame src="https://www.runoob.com/html/html-tutorial.html"> <frame src="https://www.w3school.com.cn/html/index.asp"> <frame src="https://baike.baidu.com/item/HTML/97049?fr=aladdin"> </frameset> </html>eg2：水平分栏
<html> <frameset rows="25%,50%,25%"> <frame src="https://www.runoob.com/html/html-tutorial.html"> <frame src="https://www.w3school.com.cn/html/index.asp"> <frame src="https://baike.baidu.com/item/HTML/97049?fr=aladdin"> </frameset> </html>eg3：<noframes>标签
<html> <frameset cols="25%,50%,25%"> <frame src="https://www.runoob.com/html/html-tutorial.html"> <frame src="https://www.w3school.com.cn/html/index.asp"> <frame src="https://baike.baidu.com/item/HTML/97049?fr=aladdin"> <noframes> <body>Your browser does not handle frames!</body> </noframes> </frameset> </html>eg4：混合框架
<html> <frameset rows="50%,50%"> <frame src="https://baike.baidu.com/item/HTML/97049?fr=aladdin"> <frameset cols="25%,75%"> <frame src="https://www.runoob.com/html/html-tutorial.html"> <frame src="https://www.w3school.com.cn/html/index.asp"> </frameset> </frameset> </html>eg5：使用了noresize="noresize"的框架：
<html> <frameset rows="50%,50%"> <frame noresize="noresize" src="https://baike.baidu.com/item/HTML/97049?fr=aladdin"> <frameset cols="25%,75%"> <frame noresize="noresize" src="https://www.runoob.com/html/html-tutorial.html"> <frame noresize="noresize" src="https://www.w3school.com.cn/html/index.asp"> </frameset> </frameset> </html>eg6：导航框架
<html> <frameset cols="120,*"> <frame src="frame_link.htm"> <frame src="frame_a.htm" name="showframe"> </frameset> </html>eg7：内联框架
<html> <body> <iframe src="https://www.runoob.com/html/html-tutorial.html"></iframe> <p>Some older browsers don't support iframes.</p> <p>If they don't, the iframe will not be visible.</p> </body> </html>eg8：在框架内跳转到指定章节
<html> <frameset cols="30%,70%"> <frame src="frame_a.htm"> <frame src="frame_section.htm#C10"> </frameset> </html>eg6：使用导航框架跳转到指定章节
<html> <frameset cols="200,*"> <frame src="frame_linksection.htm"> <frame src="frame_section.htm" name="showframe"> </frameset> </html>代码示例：
<html> <body bgcolor="#ffffff" text="yellow"> <p> This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. </p> <p> This is another paragraph. This is another paragraph. This is another paragraph. This is another paragraph. </p> </body> </html> 设置背景为白色，文本为黄色。属性： bgcolor属性将背景设置为颜色，它的值可以是一个十六进制数、RGB值或者一种颜色名称。 <body bgcolor="#000000"><body bgcolor="rgb(0,0,0)"><body bgcolor="black"> background属性将背景设置为图像，它的值是你所要使用图像的URL地址。如果这个图像的大小不及浏览器窗口，它将平铺占满窗口。 <body background="clouds.gif"><body background="http://www.w3schools.com/clouds.gif"> <body>标签的bgcolor、background和text属性在最新的HTML标准（HTML4和XHTML）中已被废弃。W3C在他们的推荐中已删除这些属性。在HTML的未来版本中，层叠样式表（CSS）将被用来定义HTML元素的布局和显示属性。