Home >Web Front-end >HTML Tutorial >HTML summary

HTML summary

WBOYOriginal: 2016-10-15 10:32:061452browse

一、HTML

网页编程语言。Html之所以能展现出各种各样的效果，是浏览器的功能。
HTML(HyperText Markup Language)就是描述网页长什么样子、有什么内容的一个文本。查看网页的描述内容（HTML）的方式：使用IE浏览器的话，在网页上点击右键，选择“查看源文件”
B/S(Browser/ Server)：浏览器-服务器，客户端只需要一个浏览器
C/S(Client/Server)：客户端必须安装对应的软件。比如：QQ、MSN、FoxMail

二、最基本的HTML结构

<span style="color: #008080;"> 1</span> <span style="color: #008000;"><!--</span><span style="color: #008000;"> <!DOCTYPE> 是HTML5声明，<!DOCTYPE> 必须是 HTML 文档的第一行，位于 <html> 标签之前。<!DOCTYPE>是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。</span><span style="color: #008000;">--></span>
<span style="color: #008080;"> 2</span> <span style="color: #0000ff;"><!</span><span style="color: #ff00ff;">DOCTYPE html</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 3</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">html</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 4</span> <span style="color: #008000;"><!--</span><span style="color: #008000;"> head标签是所有头部元素的容器。head标签内的元素可包含脚本、样式表和提供页面的元信息等等。以下标签都可以添加到 head 部分：title、base、link、meta、script 以及style。头部的内容不会显示在浏览器的。 </span><span style="color: #008000;">--></span>
<span style="color: #008080;"> 5</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 6</span> <span style="color: #008000;"><!--</span><span style="color: #008000;"> 设置字符集，如果字符集不对，可能导致乱码。一般建议utf-8国际编码 </span><span style="color: #008000;">--></span>
<span style="color: #008080;"> 7</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">http-equiv</span><span style="color: #0000ff;">="Content-Type"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="text/html; charset=gb2312或utf-8或gbk"</span> <span style="color: #0000ff;">/></span>
<span style="color: #008080;"> 8</span> <span style="color: #008000;"><!--</span><span style="color: #008000;"> 定时自动跳转 </span><span style="color: #008000;">--></span>
<span style="color: #008080;"> 9</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">http-equiv</span><span style="color: #0000ff;">="refresh"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="10;URL=http://www.leixuesong.cn"</span> <span style="color: #0000ff;">/></span>
<span style="color: #008080;">10</span> <span style="color: #008000;"><!--</span><span style="color: #008000;"> SEO相关标签，title定义文档的标题,百度建议一般不要超过32位,meta定义页面关键词和页面的描述</span><span style="color: #008000;">--></span>
<span style="color: #008080;">11</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span>网页标题<span style="color: #0000ff;"></</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">12</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="keywords"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="PHP程序员,技术博客,个人博客"</span> <span style="color: #0000ff;">/></span>
<span style="color: #008080;">13</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="description"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="我的博客记录了Linux学习，PHP开发与编程，Web前端开发，MySQL学习和教程，NoSQL数据库教程以及个人的人生经历和观点。"</span> <span style="color: #0000ff;">/></span>
<span style="color: #008080;">14</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">link </span><span style="color: #ff0000;">rel</span><span style="color: #0000ff;">="stylesheet"</span><span style="color: #ff0000;"> type</span><span style="color: #0000ff;">="text/css"</span><span style="color: #ff0000;"> href</span><span style="color: #0000ff;">="main.css"</span> <span style="color: #0000ff;">/></span>
<span style="color: #008080;">15</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">script </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="text/javascript"</span><span style="color: #ff0000;"> src</span><span style="color: #0000ff;">="http://pagead2.googlesyndication.com/pagead/show_ads.js"</span><span style="color: #0000ff;">></</span><span style="color: #800000;">script</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">16</span> <span style="color: #0000ff;"></</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">17</span> <span style="color: #008000;"><!--</span><span style="color: #008000;"> 正文部分，所有在浏览器上可见的内容必须写在body标签内部 </span><span style="color: #008000;">--></span>
<span style="color: #008080;">18</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">19</span> <span style="color: #0000ff;"></</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">20</span> <span style="color: #0000ff;"></</span><span style="color: #800000;">html</span><span style="color: #0000ff;">></span>

三、最常用的HTML标签

a、布局标签

div标签定义文档中的分区或节（division/section），可以把文档分割为独立的、不同的部分，主要用于布局。
aside标签的内容可用作文章的侧栏，html5新增标签。
header标签定义页面的头部（介绍信息），html5新增标签。
section标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分，html5新增标签。
footer 标签定义文档或节的页脚，通常包含文档的作者、版权信息、使用条款链接、联系信息等等，html5新增标签。
article标签规定文章独立的其他内容，比如：标题、内容、评论，html5新增标签。

b、文本标签

h1-h6标签可定义标题（h1最大，h6最小）
p标签定义段落
b/strong标签加粗
em标签来表示强调的文本，斜体
strong标签表示重要文本
u标签下划线
s标签删除线
br标签表示回车换行
hr标签表示水平线
span标签被用来组合文档中的行内元素。
blockquote标签表示块引用
pre标签可定义预格式化的文本，保持原有格式的一种标签。
sub标签下标，
sup>标签上标
表示一个空格
©表示版权符
<表示<
>表示>

c、a标签定义超链接

指定页面间的跳转，链接可以指向外部链接或者页面内部id锚点，可以在当前页面打开，新开窗口。

<span style="color: #0000ff;"><</span><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="指向的链接地址或者网址#ID名"</span><span style="color: #ff0000;"> target</span><span style="color: #0000ff;">="_blank|_self|_top|_parent"</span><span style="color: #0000ff;">></span>百度<span style="color: #0000ff;"></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span>

超级链接

<span style="color: #0000ff;"><</span><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="http://www.yahoo.com"</span><span style="color: #ff0000;"> target</span><span style="color: #0000ff;">="_self"</span><span style="color: #ff0000;"> title</span><span style="color: #0000ff;">="去美国雅虎"</span><span style="color: #0000ff;">></span>雅虎<span style="color: #0000ff;"></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span>

图片超链接

<span style="color: #0000ff;"><</span><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="http://www.microsoft.com"</span><span style="color: #0000ff;">><</span><span style="color: #800000;">imgborder</span><span style="color: #0000ff;">="0"</span><span style="color: #ff0000;"> src</span><span style="color: #0000ff;">="1.jpg"</span><span style="color: #0000ff;">/></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span>

相对URL
相对URL表示相对于当前文档的资源;
“/”表示网站根目录，“../”表示父目录;
“../../”表示父目录的父目录，“./”或者不写任何斜线表示相对于当前路径的目录
站内引用最好用相对URL，这样域名改变了、目录改变了都不受影响。

<span style="color: #0000ff;"><</span><span style="color: #800000;">img </span><span style="color: #ff0000;">src</span><span style="color: #0000ff;">="../images/csharp1.jpg"</span> <span style="color: #0000ff;">/></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">img </span><span style="color: #ff0000;">src</span><span style="color: #0000ff;">="/images/csharp1.jpg"</span> <span style="color: #0000ff;">/></span>

将的target属性设定为"_blank"就可以在新窗口中打开超链接。
国情：国内的网站很多都是默认在新窗口中打开。target的取值范围：
_blank :在新窗口中打开
_self :在自己的窗口中打开
_parent :父窗口中打开
_top :表示在顶级窗口打开
框架名称：在指定框架中打开。

锚记：用name属性为起名字：这里是最后。这样可以通过转到平台来跳转到超链接的部分。

d、多媒体标签

img标签主要在网页中插入图像，可以定义图片替换文本、显示宽度和高度、是否带边框，建议等比例设置，否则图像会变形。

　　　注意图片是链接的，不是插入的，所以如果src指向的文件不存在了，就看不了了。alt属性为图片无法显示时的显示文本，鼠标方式去也会有悬浮提示“点击查看大图”；title用来显示当鼠标放到图片上时显示的文字；border属性指定边框，border="0"不显示边框；width、height属性指定图片的显示大小，如果不指定则是图片的原始大小。

<span style="color: #0000ff;"><</span><span style="color: #800000;">img </span><span style="color: #ff0000;">src</span><span style="color: #0000ff;">="图片地址"</span><span style="color: #ff0000;"> alt</span><span style="color: #0000ff;">="替换文本，图片打不开的时候显示"</span><span style="color: #ff0000;"> width</span><span style="color: #0000ff;">="图片宽度"</span><span style="color: #ff0000;"> height</span><span style="color: #0000ff;">="高度"</span><span style="color: #ff0000;"> border</span><span style="color: #0000ff;">="0"</span> <span style="color: #0000ff;">/></span>

audio标签定义声音，比如音乐或其他音频流。html5新增标签。

<span style="color: #0000ff;"><</span><span style="color: #800000;">audio </span><span style="color: #ff0000;">src</span><span style="color: #0000ff;">="someaudio.wav"</span><span style="color: #0000ff;">></span>您的浏览器不支持 audio 标签。<span style="color: #0000ff;"></</span><span style="color: #800000;">audio</span><span style="color: #0000ff;">></span>

video标签定义视频，比如电影片段或其他视频流。html5新增标签。

<span style="color: #0000ff;"><</span><span style="color: #800000;">video </span><span style="color: #ff0000;">src</span><span style="color: #0000ff;">="movie.ogg"</span><span style="color: #ff0000;"> controls</span><span style="color: #0000ff;">="controls"</span><span style="color: #0000ff;">></span>您的浏览器不支持 video 标签。<span style="color: #0000ff;"></</span><span style="color: #800000;">video</span><span style="color: #0000ff;">></span>

e、序列化标签

ul和li无序列表标签。

<span style="color: #0000ff;"><</span><span style="color: #800000;">ul</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>HTML<span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>JS<span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>PHP<span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">ul</span><span style="color: #0000ff;">></span>

ol和li有序列表标签，可以使用type属性规定有序列表符号的类型。1 按数字有序排列，为默认值，（1、2、3、4）；a 按小写字母有序排列，（a、b、c、d）；A 按字母大写有序排列，（A、B、C、D）。i 按小写罗马字母有序，（i, ii, iii, iv）；I 按小写罗马字母有序，（I, II, III, IV）。

<span style="color: #0000ff;"><</span><span style="color: #800000;">ol</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>HTML<span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>JS<span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>PHP<span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">ol</span><span style="color: #0000ff;">></span>

dl标签定义了定义列表（definition list），dl标签用于结合 dt（定义列表中的项目）和 dd（描述列表中的项目）。

<span style="color: #0000ff;"><</span><span style="color: #800000;">dl</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">dt</span><span style="color: #0000ff;">></span>计算机<span style="color: #0000ff;"></</span><span style="color: #800000;">dt</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">dd</span><span style="color: #0000ff;">></span>用来计算的仪器 ... ...<span style="color: #0000ff;"></</span><span style="color: #800000;">dd</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">dl</span><span style="color: #0000ff;">></span>

f、表格标签

为表格，在内部通过创建行，内部通过创建单元格。可以将table的border属性设为0来隐藏表格线。
cellpadding内容和表格边线之间的距离
cellspacing单元格之间的间距。

rowspan(跨行)、colspan（跨列）进行单元格的合并,是td的属性。

<span style="color: #008080;"> 1</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">table </span><span style="color: #ff0000;">width</span><span style="color: #0000ff;">="100%"</span><span style="color: #ff0000;"> height</span><span style="color: #0000ff;">="193"</span><span style="color: #ff0000;"> border</span><span style="color: #0000ff;">="1"</span><span style="color: #ff0000;"> cellpadding</span><span style="color: #0000ff;">="0"</span><span style="color: #ff0000;"> cellspacing</span><span style="color: #0000ff;">="0"</span><span style="color: #ff0000;"> bordercolor</span><span style="color: #0000ff;">="#FF0000"</span><span style="color: #ff0000;"> bgcolor</span><span style="color: #0000ff;">="#000000"</span><span style="color: #ff0000;"> background</span><span style="color: #0000ff;">=""</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 2</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">tr</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 3</span>     <span style="color: #0000ff;"><</span><span style="color: #800000;">th</span><span style="color: #0000ff;">></span>标题<span style="color: #0000ff;"></</span><span style="color: #800000;">th</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 4</span>     <span style="color: #0000ff;"><</span><span style="color: #800000;">th</span><span style="color: #0000ff;">></span>标题<span style="color: #0000ff;"></</span><span style="color: #800000;">th</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 5</span> <span style="color: #0000ff;"></</span><span style="color: #800000;">tr</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 6</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">tr</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 7</span>     <span style="color: #008000;"><!--</span><span style="color: #008000;"> 合并横向单元格 </span><span style="color: #008000;">--></span>
<span style="color: #008080;"> 8</span>     <span style="color: #0000ff;"><</span><span style="color: #800000;">td </span><span style="color: #ff0000;">colspan</span><span style="color: #0000ff;">="2"</span><span style="color: #ff0000;"> nowrap</span><span style="color: #0000ff;">="nowrap"</span><span style="color: #0000ff;">></span><span style="color: #ff0000;">&amp;</span>nbsp;<span style="color: #0000ff;"></</span><span style="color: #800000;">td</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 9</span> <span style="color: #0000ff;"></</span><span style="color: #800000;">tr</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">10</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">tr</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">11</span>     <span style="color: #0000ff;"><</span><span style="color: #800000;">td</span><span style="color: #0000ff;">></</span><span style="color: #800000;">td</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">12</span>     <span style="color: #008000;"><!--</span><span style="color: #008000;"> 合并纵向单元格 </span><span style="color: #008000;">--></span>
<span style="color: #008080;">13</span>     <span style="color: #0000ff;"><</span><span style="color: #800000;">td </span><span style="color: #ff0000;">rowspan</span><span style="color: #0000ff;">="2"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></</span><span style="color: #800000;">td</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">14</span> <span style="color: #0000ff;"></</span><span style="color: #800000;">tr</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">15</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">tr</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">16</span>     <span style="color: #0000ff;"><</span><span style="color: #800000;">td </span><span style="color: #ff0000;">height</span><span style="color: #0000ff;">="16"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></</span><span style="color: #800000;">td</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">17</span> <span style="color: #0000ff;"></</span><span style="color: #800000;">tr</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">18</span> <span style="color: #0000ff;"></</span><span style="color: #800000;">table</span><span style="color: #0000ff;">></span>

g、表单标签

form标签定义提交方式、提交地址、表单字符集以及如何对其进行编码，需要提交的表单一定要放在form标签内。

<span style="color: #0000ff;"><</span><span style="color: #800000;">form </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="form1"</span><span style="color: #ff0000;"> name</span><span style="color: #0000ff;">="form1"</span><span style="color: #ff0000;"> method</span><span style="color: #0000ff;">="post|get"</span><span style="color: #ff0000;"> enctype</span><span style="color: #0000ff;">="multipart/form-data"</span><span style="color: #ff0000;"> action</span><span style="color: #0000ff;">="提交到的地址"</span><span style="color: #0000ff;">></</span><span style="color: #800000;">form</span><span style="color: #0000ff;">></span>

input标签用于搜集用户信息

<span style="color: #008080;"> 1</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">input </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="userName"</span><span style="color: #ff0000;"> type</span><span style="color: #0000ff;">="text"</span><span style="color: #ff0000;"> maxlength</span><span style="color: #0000ff;">="5"</span><span style="color: #ff0000;"> size</span><span style="color: #0000ff;">="100"</span><span style="color: #ff0000;"> value</span><span style="color: #0000ff;">="asdfasdfasfd"</span> <span style="color: #0000ff;">/></span>
<span style="color: #008080;"> 2</span> <span style="color: #008000;"><!--</span><span style="color: #008000;"> 密码，输入的字符会被掩码（显示为星号或原点） </span><span style="color: #008000;">--></span>
<span style="color: #008080;"> 3</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">input </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="pwd"</span><span style="color: #ff0000;"> type</span><span style="color: #0000ff;">="password"</span><span style="color: #ff0000;"> maxlength</span><span style="color: #0000ff;">="5"</span><span style="color: #ff0000;"> size</span><span style="color: #0000ff;">="100"</span><span style="color: #ff0000;"> value</span><span style="color: #0000ff;">=""</span> <span style="color: #0000ff;">/></span>
<span style="color: #008080;"> 4</span> <span style="color: #008000;"><!--</span><span style="color: #008000;"> 文件类型的表单，上传文件时，form表单一定要设置为enctype="multipart/form-data" </span><span style="color: #008000;">--></span>
<span style="color: #008080;"> 5</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">input </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="file"</span><span style="color: #ff0000;"> name</span><span style="color: #0000ff;">="file"</span> <span style="color: #0000ff;">/></span>
<span style="color: #008080;"> 6</span> <span style="color: #008000;"><!--</span><span style="color: #008000;"> 隐藏表单 </span><span style="color: #008000;">--></span>
<span style="color: #008080;"> 7</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">input </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="hidden"</span><span style="color: #ff0000;"> name</span><span style="color: #0000ff;">="country"</span><span style="color: #ff0000;"> value</span><span style="color: #0000ff;">="China"</span> <span style="color: #0000ff;">/></span>
<span style="color: #008080;"> 8</span> <span style="color: #008000;"><!--</span><span style="color: #008000;"> 提交 </span><span style="color: #008000;">--></span>
<span style="color: #008080;"> 9</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">input </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="submit"</span><span style="color: #ff0000;"> name</span><span style="color: #0000ff;">="Submit"</span><span style="color: #ff0000;"> value</span><span style="color: #0000ff;">="提交"</span><span style="color: #ff0000;"> disabled</span><span style="color: #0000ff;">="disabled"</span> <span style="color: #0000ff;">/></span>
<span style="color: #008080;">10</span> <span style="color: #008000;"><!--</span><span style="color: #008000;"> 重置 </span><span style="color: #008000;">--></span>
<span style="color: #008080;">11</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">input </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="reset"</span><span style="color: #ff0000;"> name</span><span style="color: #0000ff;">="Submit2"</span><span style="color: #ff0000;"> value</span><span style="color: #0000ff;">="重置"</span> <span style="color: #0000ff;">/></span>
<span style="color: #008080;">12</span> <span style="color: #008000;"><!--</span><span style="color: #008000;"> radio单选 </span><span style="color: #008000;">--></span>
<span style="color: #008080;">13</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">input </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="sex"</span><span style="color: #ff0000;"> type</span><span style="color: #0000ff;">="radio"</span><span style="color: #ff0000;"> value</span><span style="color: #0000ff;">="1"</span> <span style="color: #0000ff;">/></span><span style="color: #000000;">男
</span><span style="color: #008080;">14</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">input </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="sex"</span><span style="color: #ff0000;"> type</span><span style="color: #0000ff;">="radio"</span><span style="color: #ff0000;"> value</span><span style="color: #0000ff;">="2"</span><span style="color: #ff0000;"> checked</span><span style="color: #0000ff;">="checked"</span> <span style="color: #0000ff;">/></span><span style="color: #000000;">女
</span><span style="color: #008080;">15</span> <span style="color: #008000;"><!--</span><span style="color: #008000;"> checkbox多选 </span><span style="color: #008000;">--></span>
<span style="color: #008080;">16</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">input </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="skill"</span><span style="color: #ff0000;"> type</span><span style="color: #0000ff;">="checkbox"</span><span style="color: #ff0000;"> value</span><span style="color: #0000ff;">="1"</span><span style="color: #ff0000;"> checked</span><span style="color: #0000ff;">="checked"</span> <span style="color: #0000ff;">/></span><span style="color: #000000;">PHP
</span><span style="color: #008080;">17</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">input </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="skill"</span><span style="color: #ff0000;"> type</span><span style="color: #0000ff;">="checkbox"</span><span style="color: #ff0000;"> value</span><span style="color: #0000ff;">="2"</span> <span style="color: #0000ff;">/></span><span style="color: #000000;">前端
</span><span style="color: #008080;">18</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">input </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="skill"</span><span style="color: #ff0000;"> type</span><span style="color: #0000ff;">="checkbox"</span><span style="color: #ff0000;"> value</span><span style="color: #0000ff;">="2"</span> <span style="color: #0000ff;">/></span>数据库

注：checked=”checked”可以简写成checked

label标签为input元素定义标注，如果您点击label元素文本，就会触发此input控件。
textarea标签，设置文本区内的可见行数和宽度

　　禁止拉伸属性：style="resize:none"

<span style="color: #0000ff;"><</span><span style="color: #800000;">textarea </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="content"</span><span style="color: #ff0000;"> cols</span><span style="color: #0000ff;">="30"</span><span style="color: #ff0000;"> rows</span><span style="color: #0000ff;">="10"</span><span style="color: #0000ff;">></span>大段文本输入框<span style="color: #0000ff;"></</span><span style="color: #800000;">textarea</span><span style="color: #0000ff;">></span>

button标签定义一个按钮

<span style="color: #008080;">1</span> <span style="color: #008000;"><!--</span><span style="color: #008000;"> 提交按钮 </span><span style="color: #008000;">--></span>
<span style="color: #008080;">2</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">button </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="submit"</span><span style="color: #ff0000;"> value</span><span style="color: #0000ff;">="提交"</span><span style="color: #0000ff;">></span>提交<span style="color: #0000ff;"></</span><span style="color: #800000;">button</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">3</span> <span style="color: #008000;"><!--</span><span style="color: #008000;"> 重置按钮 </span><span style="color: #008000;">--></span>
<span style="color: #008080;">4</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">button </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="reset"</span><span style="color: #ff0000;"> value</span><span style="color: #0000ff;">="重置"</span><span style="color: #0000ff;">></span>重置<span style="color: #0000ff;"></</span><span style="color: #800000;">button</span><span style="color: #0000ff;">></span>

select标签和option标签下拉列表

<span style="color: #008080;"> 1</span> <span style="color: #008000;"><!--</span><span style="color: #008000;"> 单选菜单列表框 </span><span style="color: #008000;">--></span>
<span style="color: #008080;"> 2</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">select </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="user"</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 3</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">option </span><span style="color: #ff0000;">value</span><span style="color: #0000ff;">="1"</span><span style="color: #0000ff;">></span>ray<span style="color: #0000ff;"></</span><span style="color: #800000;">option</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 4</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">option </span><span style="color: #ff0000;">value</span><span style="color: #0000ff;">="2"</span><span style="color: #ff0000;"> selected</span><span style="color: #0000ff;">="selected"</span><span style="color: #0000ff;">></span>raykaeso<span style="color: #0000ff;"></</span><span style="color: #800000;">option</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 5</span> <span style="color: #0000ff;"></</span><span style="color: #800000;">select</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 6</span> <span style="color: #008000;"><!--</span><span style="color: #008000;"> 多选列表下拉框，shift加鼠标单击，可以连续选择多个选择，CTRL+鼠标点击，可以点击多个。</span><span style="color: #008000;">--></span>
<span style="color: #008080;"> 7</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">select </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="user"</span><span style="color: #ff0000;"> size</span><span style="color: #0000ff;">="10"</span><span style="color: #ff0000;"> multiple</span><span style="color: #0000ff;">="multiple"</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 8</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">option </span><span style="color: #ff0000;">value</span><span style="color: #0000ff;">="1"</span><span style="color: #0000ff;">></span>雷雪松<span style="color: #0000ff;"></</span><span style="color: #800000;">option</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 9</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">option </span><span style="color: #ff0000;">value</span><span style="color: #0000ff;">="2"</span><span style="color: #ff0000;"> selected</span><span style="color: #0000ff;">="selected"</span><span style="color: #0000ff;">></span>ray<span style="color: #0000ff;"></</span><span style="color: #800000;">option</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">10</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">option </span><span style="color: #ff0000;">value</span><span style="color: #0000ff;">="3"</span><span style="color: #0000ff;">></span>raykaeso<span style="color: #0000ff;"></</span><span style="color: #800000;">option</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">11</span> <span style="color: #0000ff;"></</span><span style="color: #800000;">select</span><span style="color: #0000ff;">></span>

Note: selected=”selected” can be abbreviated as selected, which means selected

4. Other HTML matters

HTML tags and attributes are not case-sensitive. It is recommended that HTML tags and attributes be lowercase, and attribute values must be surrounded by double quotes.
HTML tags all start with a start tag and end with an end tag. Most HTML tags appear in pairs, called double tags, such as p tags and div tags. Some HTML tags that end in the start tag are called single tags, such as hr tags and br tags. Most HTML elements can have attributes, and text content is written between the opening and closing tags.
Try to indent and line-break HTML tags, and do not make each line of code too long to facilitate reading and maintenance.
HTML tag usage must comply with tag nesting rules. It is forbidden for a tag to nest a tag and p tag to nest div tag.
It is recommended not to use obsolete or deprecated HTML tags, and use less table layout, iframe frame nesting and flash player.

五、表格、表单实例

<span style="color: #008080;"> 1</span> <span style="color: #0000ff;"><!</span><span style="color: #ff00ff;">DOCTYPE html</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 2</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">html</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 3</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 4</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">charset</span><span style="color: #0000ff;">="utf-8"</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 5</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">http-equiv</span><span style="color: #0000ff;">="X-UA-Compatible"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="IE=edge,chrome=1"</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 6</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span>Examples<span style="color: #0000ff;"></</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 7</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="description"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">=""</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 8</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="keywords"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">=""</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 9</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">link </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">=""</span><span style="color: #ff0000;"> rel</span><span style="color: #0000ff;">="stylesheet"</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">10</span> <span style="color: #0000ff;"></</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">11</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">12</span>     <span style="color: #0000ff;"><</span><span style="color: #800000;">form </span><span style="color: #ff0000;">method</span><span style="color: #0000ff;">="POST"</span><span style="color: #ff0000;"> action</span><span style="color: #0000ff;">="1.php"</span><span style="color: #ff0000;"> enctype</span><span style="color: #0000ff;">="multipart/form-data"</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">13</span>         <span style="color: #0000ff;"><</span><span style="color: #800000;">table </span><span style="color: #ff0000;">border</span><span style="color: #0000ff;">="1"</span><span style="color: #ff0000;"> bordercolor</span><span style="color: #0000ff;">="#F4F4F4"</span><span style="color: #ff0000;"> width</span><span style="color: #0000ff;">="560"</span><span style="color: #ff0000;"> align</span><span style="color: #0000ff;">="center"</span><span style="color: #ff0000;"> cellpadding</span><span style="color: #0000ff;">="5"</span><span style="color: #ff0000;"> rules</span><span style="color: #0000ff;">="all"</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">14</span>             <span style="color: #0000ff;"><</span><span style="color: #800000;">caption</span><span style="color: #0000ff;">></span>个人中心<span style="color: #0000ff;"></</span><span style="color: #800000;">caption</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">15</span>             <span style="color: #0000ff;"><</span><span style="color: #800000;">tr </span><span style="color: #ff0000;">bgcolor</span><span style="color: #0000ff;">="#F9F9F9"</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">16</span>                 <span style="color: #0000ff;"><</span><span style="color: #800000;">td </span><span style="color: #ff0000;">colspan</span><span style="color: #0000ff;">="3"</span><span style="color: #0000ff;"> >
</span>17<span style="color: #800000;"> </span></<span style="color: #0000ff;"></span>tr<span style="color: #0000ff;"></span>><span style="color: #800000;">
</span>18<span style="color: #0000ff;"> </span><<span style="color: #800000;"></span>tr<span style="color: #0000ff;"></span>><span style="color: #008080;">
</span>19<span style="color: #0000ff;"> </span><<span style="color: #800000;"></span>td <span style="color: #0000ff;"></span>align<span style="color: #008080;"></span>="right"<span style="color: #0000ff;"></span>><span style="color: #800000;">Username: </span></<span style="color: #0000ff;"></span>td<span style="color: #008080;"></span>><span style="color: #0000ff;">
</span>20<span style="color: #800000;"> </span><<span style="color: #ff0000;"></span>td<span style="color: #0000ff;"></span>><<span style="color: #0000ff;"></span>input <span style="color: #0000ff;"></span>type<span style="color: #800000;"></span>="text"<span style="color: #0000ff;"></span> name<span style="color: #008080;"></span>="username"<span style="color: #0000ff;"></span> maxlength<span style="color: #800000;"></span>="15"<span style="color: #0000ff;"> </span> disabled<span style="color: #800000;"></span> ="disabled"<span style="color: #ff0000;"></span> value<span style="color: #0000ff;"></span>="Admin"<span style="color: #ff0000;"></span>></<span style="color: #0000ff;"></span>td<span style="color: #ff0000;"></span>><span style="color: #0000ff;">
</span>21<span style="color: #ff0000;"> </span><<span style="color: #0000ff;"></span>td<span style="color: #ff0000;"></span>><<span style="color: #0000ff;"></span>input <span style="color: #0000ff;"></span>type<span style="color: #800000;"></span>="submit"<span style="color: #0000ff;"></span> value<span style="color: #008080;"></span>="Detect username"<span style="color: #0000ff;"></span>><<span style="color: #800000;"></span>font <span style="color: #0000ff;"></span>color <span style="color: #800000;"></span>="#0E9EFF"<span style="color: #ff0000;"></span> size<span style="color: #0000ff;"></span>="1"<span style="color: #ff0000;"></span>><span style="color: #0000ff;"> 5-15 people </span></<span style="color: #0000ff;"></span>font<span style="color: #800000;"></span>></<span style="color: #ff0000;"></span>td<span style="color: #0000ff;"></span>><span style="color: #ff0000;">
</span>22<span style="color: #0000ff;"> </span></<span style="color: #0000ff;"></span>tr<span style="color: #0000ff;"></span>><span style="color: #800000;">
</span>23<span style="color: #0000ff;"> </span><<span style="color: #800000;"></span>tr<span style="color: #0000ff;"></span>><span style="color: #008080;">
</span>24<span style="color: #0000ff;"> </span><<span style="color: #800000;"></span>td <span style="color: #0000ff;"></span>align<span style="color: #008080;"></span>="right"<span style="color: #0000ff;"></span>><span style="color: #800000;">Password: </span></<span style="color: #0000ff;"></span>td<span style="color: #008080;"></span>><span style="color: #0000ff;">
</span>25<span style="color: #800000;"> </span><<span style="color: #ff0000;"></span>td<span style="color: #0000ff;"></span>><<span style="color: #0000ff;"></span>input <span style="color: #0000ff;"></span>type<span style="color: #800000;"></span>="password"<span style="color: #0000ff;"></span> name<span style="color: #008080;"></span>="password"<span style="color: #0000ff;"></span> maxlength<span style="color: #800000;"></span>="15"<span style="color: #0000ff;"> </span>>&lt ;/<span style="color: #800000;"></span>td<span style="color: #ff0000;"></span>><span style="color: #0000ff;">
</span>26<span style="color: #ff0000;"> </span><<span style="color: #0000ff;"></span>td<span style="color: #ff0000;"></span>><<span style="color: #0000ff;"></span>font <span style="color: #0000ff;"></span>color<span style="color: #800000;"></span>="#0E9EFF"<span style="color: #0000ff;"></span> size<span style="color: #008080;"></span>="1"<span style="color: #0000ff;"></span>><span style="color: #800000;"> Password 5-15 digits </span>< /<span style="color: #0000ff;"></span>font<span style="color: #800000;"></span>></<span style="color: #ff0000;"><span style="color: #800000;">td</span><span style="color: #0000ff;">>
<span style="color: #008080;">27</span> <span style="color: #0000ff;"></</span><span style="color: #800000;">tr</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">28</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">tr</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">29</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">td </span><span style="color: #ff0000;">align</span><span style="color: #0000ff;">="right"</span><span style="color: #0000ff;">></span>Confirm password: <span style="color: #0000ff;"></</span><span style="color: #800000;">td</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">30</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">td</span><span style="color: #0000ff;">><</span><span style="color: #800000;">input </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="password"</span><span style="color: #ff0000;"> name</span><span style="color: #0000ff;">="repassword"</span><span style="color: #ff0000;"> maxlength</span><span style="color: #0000ff;">="15" </span><span style="color: #0000ff;">>&lt ;/</span><span style="color: #800000;">td</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">31</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">td</span><span style="color: #0000ff;">><</span><span style="color: #800000;">font </span><span style="color: #ff0000;">color</span><span style="color: #0000ff;">="#0E9EFF"</span><span style="color: #ff0000;"> size</span><span style="color: #0000ff;">="1"</span><span style="color: #0000ff;">></span> must be consistent with the password <span style="color: #0000ff;"></ </span><span style="color: #800000;">font</span><span style="color: #0000ff;">></</span><span style="color: #800000;">td</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">32</span> <span style="color: #0000ff;"></</span><span style="color: #800000;">tr</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">33</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">tr </span><span style="color: #ff0000;">bgcolor</span><span style="color: #0000ff;">="#F9F9F9"</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">34</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">td </span><span style="color: #ff0000;">colspan</span><span style="color: #0000ff;">="3"</span><span style="color: #0000ff;">><</span><span style="color: #800000;">b</span><span style="color: #0000ff;">></span>2.Basic information<span style="color: #0000ff;"></</span><span style="color: #800000;">b</span><span style="color: #0000ff;">&g t;</ </span><span style="color: #800000;">td</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">35</span> <span style="color: #0000ff;"></</span><span style="color: #800000;">tr</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">36</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">tr</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">37</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">td </span><span style="color: #ff0000;">align</span><span style="color: #0000ff;">="right"</span><span style="color: #0000ff;">></span>Gender: <span style="color: #0000ff;"></</span><span style="color: #800000;">td</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">38</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">td</span><span style="color: #0000ff;">><</span><span style="color: #800000;">input </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="radio"</span><span style="color: #ff0000;"> name</span><span style="color: #0000ff;">="sex"</span><span style="color: #ff0000;"> value</span><span style="color: #0000ff;">="man"</span> <span style="color: #ff0000;"> checked</span><span style="color: #0000ff;"> ="checked"</span><span style="color: #0000ff;">></span>male<span style="color: #0000ff;"><</span><span style="color: #800000;">input </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="radio"</span><span style="color: #ff0000;"> name</span><span style="color: #0000ff;">="sex"</span><span style="color: #ff0000;"> value</span><span style="color: #0000ff;">="woman"</span><span style="color: #0000ff;">></span>女<span style="color: #0000ff;"></</span><span style="color: #800000;">td</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">39</span> <span style="color: #0000ff;"></</span><span style="color: #800000;">tr</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">40</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">tr</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">41</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">td </span><span style="color: #ff0000;">align</span><span style="color: #0000ff;">="right"</span><span style="color: #0000ff;">></span>Hobbies: <span style="color: #0000ff;"></</span><span style="color: #800000;">td</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">42</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">td</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">43</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">input </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="checkbox"</span><span style="color: #ff0000;"> name</span><span style="color: #0000ff;">="like[]"</span><span style="color: #ff0000;"> value</span><span style="color: #0000ff;">="game"</span><span style="color: #ff0000;"> checked</span><span style="color: #0000ff;">="checked"</span> <span style="color: #0000ff;"> / ></span><span style="color: #000000;">Games
</span><span style="color: #008080;">44</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">input </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="checkbox"</span><span style="color: #ff0000;"> name</span><span style="color: #0000ff;">="like[]"</span><span style="color: #ff0000;"> value</span><span style="color: #0000ff;">="kill"</span> <span style="color: #0000ff;">/></span><span style="color: #000000;">kill
</span><span style="color: #008080;">45</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">input </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="checkbox"</span><span style="color: #ff0000;"> name</span><span style="color: #0000ff;">="like[]"</span><span style="color: #ff0000;"> value</span><span style="color: #0000ff;">="set fire"</span> <span style="color: #0000ff;">/></span><span style="color: #000000;">set fire
</span><span style="color: #008080;">46</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">input </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="checkbox"</span><span style="color: #ff0000;"> name</span><span style="color: #0000ff;">="like[]"</span><span style="color: #ff0000;"> value</span><span style="color: #0000ff;">="read a book"</span> <span style="color: #0000ff;">/></span>read a book<span style="color: #0000ff;">& lt;</span> <span style="color: #800000;">br</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">52</span> <span style="color: #0000ff;"></</span><span style="color: #800000;">td</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">53</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">td</span><span style="color: #0000ff;">></</span><span style="color: #800000;">td</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">54</span> <span style="color: #0000ff;"></</span><span style="color: #800000;">tr</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">55</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">tr</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">56</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">td </span><span style="color: #ff0000;">align</span><span style="color: #0000ff;">="right"</span><span style="color: #0000ff;">></span>Education: <span style="color: #0000ff;"></</span><span style="color: #800000;">td</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">57</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">td</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">58</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">select </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="edu"</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">59</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">option </span><span style="color: #ff0000;">value</span><span style="color: #0000ff;">="Primary School"</span><span style="color: #0000ff;">></span>Primary School<span style="color: #0000ff;"></</span><span style="color: #800000;">option</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">60</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">option </span><span style="color: #ff0000;">value</span><span style="color: #0000ff;">="Junior High School"</span><span style="color: #0000ff;">></span>Junior High School<span style="color: #0000ff;"></</span><span style="color: #800000;">option</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">61</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">option </span><span style="color: #ff0000;">value</span><span style="color: #0000ff;">="High School"</span><span style="color: #0000ff;">></span>High School<span style="color: #0000ff;"></</span><span style="color: #800000;">option</span><span style="color: #0000ff;">></span>
&62<span style="color: #008080;"> & lt; </span><span style="color: #0000ff;">Ooption </span><span style="color: #800000;">value</span><span style="color: #ff0000;"> = "University" </span><span style="color: #0000ff;"> Selected</span><span style="color: #ff0000;"> = "select" </span><span style="color: #0000ff;"> & gt;
</span>63<span style="color: #0000ff;"> </span><<span style="color: #0000ff;"></span>option <span style="color: #800000;"></span>value<span style="color: #0000ff;"></span>="Graduate student"<span style="color: #008080;"></span>><span style="color: #0000ff;">Graduate student</span></<span style="color: #800000;"></span>option<span style="color: #ff0000;"></span>><span style="color: #0000ff;">
</span>64<span style="color: #0000ff;"> </span></<span style="color: #0000ff;"></span>select<span style="color: #800000;"></span>><span style="color: #0000ff;">
</span>65<span style="color: #008080;"> </span></<span style="color: #0000ff;"></span>td<span style="color: #800000;"></span>><span style="color: #0000ff;">
</span>66<span style="color: #008080;"> </span><<span style="color: #0000ff;"></span>td<span style="color: #800000;"></span>></<span style="color: #0000ff;"></span>td<span style="color: #008080;"></span>><span style="color: #0000ff;">
</span>67<span style="color: #800000;"> </span></<span style="color: #0000ff;"></span>tr<span style="color: #800000;"></span>><span style="color: #0000ff;">
</span>68<span style="color: #008080;"> </span><<span style="color: #0000ff;"></span>tr <span style="color: #800000;"></span>bgcolor<span style="color: #0000ff;"></span>="#F9F9F9"<span style="color: #008080;"></span>><span style="color: #0000ff;">
</span>69<span style="color: #800000;"> </span><<span style="color: #ff0000;"></span>td <span style="color: #0000ff;"></span>colspan<span style="color: #0000ff;"></span>="3"<span style="color: #008080;"></span>><<span style="color: #0000ff;"></span>b<span style="color: #800000;"></span>><span style="color: #ff0000;">3.Introduce yourself</span></<span style="color: #0000ff;"></span>b<span style="color: #0000ff;"></span>&g t;</ <span style="color: #800000;"></span>td<span style="color: #0000ff;"></span>><span style="color: #0000ff;">
</span>70<span style="color: #800000;"> </span></<span style="color: #0000ff;"></span>tr<span style="color: #800000;"></span>><span style="color: #0000ff;">
</span>71<span style="color: #008080;"> </span><<span style="color: #0000ff;"></span>tr<span style="color: #800000;"></span>><span style="color: #0000ff;">
</span>72<span style="color: #008080;"> </span><<span style="color: #0000ff;"></span>td <span style="color: #800000;"></span>algi<span style="color: #0000ff;"></span>="right"<span style="color: #008080;"></span>><span style="color: #0000ff;">Personalized signature: </span></<span style="color: #800000;"></span>td<span style="color: #ff0000;"></span>><span style="color: #0000ff;">
</span>73<span style="color: #0000ff;"> </span><<span style="color: #0000ff;"><span style="color: #800000;">td</span><span style="color: #0000ff;">><</span><span style="color: #800000;">textarea </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="qianming"</span><span style="color: #ff0000;"> cols</span><span style="color: #0000ff;">="40"</span><span style="color: #ff0000;"> rows</span><span style="color: #0000ff;">="10"</span><span style="color: #ff0000;">  style</span><span style="color: #0000ff;">="resize:none"</span> <span style="color: #0000ff;">></</span><span style="color: #800000;">textarea</span><span style="color: #0000ff;">></</span><span style="color: #800000;">td</span><span style="color: #0000ff;">>
<span style="color: #008080;">74</span>                 <span style="color: #0000ff;"><</span><span style="color: #800000;">td</span><span style="color: #0000ff;">></</span><span style="color: #800000;">td</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">75</span>             <span style="color: #0000ff;"></</span><span style="color: #800000;">tr</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">76</span>             <span style="color: #0000ff;"><</span><span style="color: #800000;">tr</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">77</span>                 <span style="color: #0000ff;"><</span><span style="color: #800000;">td </span><span style="color: #ff0000;">align</span><span style="color: #0000ff;">="right"</span><span style="color: #0000ff;">></span>上传头像：<span style="color: #0000ff;"></</span><span style="color: #800000;">td</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">78</span>                 <span style="color: #0000ff;"><</span><span style="color: #800000;">td</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">79</span>                     <span style="color: #0000ff;"><</span><span style="color: #800000;">input </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="file"</span><span style="color: #ff0000;"> name</span><span style="color: #0000ff;">="touxiang"</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">80</span>                     <span style="color: #0000ff;"><</span><span style="color: #800000;">input </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="hidden"</span><span style="color: #ff0000;"> name</span><span style="color: #0000ff;">="uid"</span><span style="color: #ff0000;"> value</span><span style="color: #0000ff;">="90"</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">81</span>                 <span style="color: #0000ff;"></</span><span style="color: #800000;">td</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">82</span>                 <span style="color: #0000ff;"><</span><span style="color: #800000;">td</span><span style="color: #0000ff;">></</span><span style="color: #800000;">td</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">83</span>             <span style="color: #0000ff;"></</span><span style="color: #800000;">tr</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">84</span>             <span style="color: #0000ff;"><</span><span style="color: #800000;">tr</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">85</span>                 <span style="color: #0000ff;"><</span><span style="color: #800000;">td </span><span style="color: #ff0000;">colspan</span><span style="color: #0000ff;">="3"</span><span style="color: #ff0000;"> align</span><span style="color: #0000f"></span>

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：What happens in the process from entering the URL to the completion of page loading and display of a page?Next article：What happens in the process from entering the URL to the completion of page loading and display of a page?

See more