首页

web前端

html教程

HTML小结

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Oct 15, 2016 am 10:32 AM

一、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 style="color: #ff00ff;">DOCTYPE html</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 3</span> <span style="color: #0000ff;"><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 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 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 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 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 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 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 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 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 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></span></span></span></span></span></span></span></span></span></span></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 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>

超级链接

<span style="color: #0000ff;"><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>

图片超链接

<span style="color: #0000ff;"><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 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></span></span>

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

<span style="color: #0000ff;"><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 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></span>

将的target属性设定为"_blank"就可以在新窗口中打开超链接。
国情：国内的网站很多都是默认在新窗口中打开。target的取值范围：
_blank :在新窗口中打开
_self :在自己的窗口中打开
_parent :父窗口中打开
_top :表示在顶级窗口打开
框架名称：在指定框架中打开。
锚记：用name属性为起名字：这里是最后。这样可以通过转到平台来跳转到超链接的部分。

d、多媒体标签

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

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

<span style="color: #0000ff;"><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></span>

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

<span style="color: #0000ff;"><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></span>

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

<span style="color: #0000ff;"><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></span>

e、序列化标签

ul和li无序列表标签。

<span style="color: #0000ff;"><span style="color: #800000;">ul</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><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 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 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></span></span></span></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 style="color: #800000;">ol</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><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 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 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></span></span></span></span>

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

<span style="color: #0000ff;"><span style="color: #800000;">dl</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><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 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></span></span></span>

f、表格标签

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

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

<span style="color: #008080;"> 1</span> <span style="color: #0000ff;"><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 style="color: #800000;">tr</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 3</span>     <span style="color: #0000ff;"><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 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 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 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;">&</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 style="color: #800000;">tr</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">11</span>     <span style="color: #0000ff;"><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 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 style="color: #800000;">tr</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">16</span>     <span style="color: #0000ff;"><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></span></span></span></span></span></span></span></span></span></span></span>

g、表单标签

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

<span style="color: #0000ff;"><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></span>

input标签用于搜集用户信息

<span style="color: #008080;"> 1</span> <span style="color: #0000ff;"><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 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 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 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 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 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 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 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 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 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 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></span></span></span></span></span></span></span></span></span></span>

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

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

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

<span style="color: #0000ff;"><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></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 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 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></span></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 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 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 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 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 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 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 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></span></span></span></span></span></span></span>

注:selected=”selected”可简写成selected，表示选中

四、其他HTML事项

HTML标签和属性是不区分大小写的，建议HTML标签和属性都小写，属性值必须用双引号包围。
HTML标签都是以开始标签起始，以结束标签终止。大部分HTML标签都是成对出现的，称为双标签，比如：p标签、div标签，也有的HTML标签在开始标签中结束的标签，称为单标签，比如：hr标签、br标签。大多数 HTML 元素可拥有属性，文本内容都是写在开始标签与结束标签之间。
HTML标签之间尽量缩进与换行，每行代码不要过长，方便阅读和维护。
HTML标签使用必须符合标签嵌套规则。禁止a标签嵌套a标签，p标签嵌套div标签。
建议不使用HTML已经废弃的或者不赞成使用的标签，少使用table布局、iframe框架嵌套以及flash播放器。

五、表格、表单实例

<span style="color: #008080;"> 1</span> <span style="color: #0000ff;"><span style="color: #ff00ff;">DOCTYPE html</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 2</span> <span style="color: #0000ff;"><span style="color: #800000;">html</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 3</span> <span style="color: #0000ff;"><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 4</span> <span style="color: #0000ff;"><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 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 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 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 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 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 style="color: #800000;">body</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">12</span>     <span style="color: #0000ff;"><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 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 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 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 style="color: #800000;">td </span><span style="color: #ff0000;">colspan</span><span style="color: #0000ff;">="3"</span><span style="color: #0000ff;">><span style="color: #800000;">b</span><span style="color: #0000ff;">></span>1.会员登录名和密码<span style="color: #0000ff;"></span><span style="color: #800000;">b</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 style="color: #800000;">tr</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">19</span>                 <span style="color: #0000ff;"><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;">20</span>                 <span style="color: #0000ff;"><span style="color: #800000;">td</span><span style="color: #0000ff;">><span style="color: #800000;">input </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="text"</span><span style="color: #ff0000;"> name</span><span style="color: #0000ff;">="username"</span><span style="color: #ff0000;"> maxlength</span><span style="color: #0000ff;">="15"</span><span style="color: #ff0000;"> disabled</span><span style="color: #0000ff;">="disabled"</span><span style="color: #ff0000;"> value</span><span style="color: #0000ff;">="Admin"</span><span style="color: #0000ff;">></span><span style="color: #800000;">td</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">21</span>                 <span style="color: #0000ff;"><span style="color: #800000;">td</span><span style="color: #0000ff;">><span style="color: #800000;">input </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 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> 5-15位<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;">22</span>             <span style="color: #0000ff;"></span><span style="color: #800000;">tr</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">23</span>             <span style="color: #0000ff;"><span style="color: #800000;">tr</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">24</span>                 <span style="color: #0000ff;"><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;">25</span>                 <span style="color: #0000ff;"><span style="color: #800000;">td</span><span style="color: #0000ff;">><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;">="password"</span><span style="color: #ff0000;"> maxlength</span><span style="color: #0000ff;">="15"</span><span style="color: #0000ff;">></span><span style="color: #800000;">td</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">26</span>                 <span style="color: #0000ff;"><span style="color: #800000;">td</span><span style="color: #0000ff;">><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> 密码5-15位<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;">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 style="color: #800000;">tr</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">29</span>                 <span style="color: #0000ff;"><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;">30</span>                 <span style="color: #0000ff;"><span style="color: #800000;">td</span><span style="color: #0000ff;">><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;">></span><span style="color: #800000;">td</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">31</span>                 <span style="color: #0000ff;"><span style="color: #800000;">td</span><span style="color: #0000ff;">><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> 必须与密码一致<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 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 style="color: #800000;">td </span><span style="color: #ff0000;">colspan</span><span style="color: #0000ff;">="3"</span><span style="color: #0000ff;">><span style="color: #800000;">b</span><span style="color: #0000ff;">></span>2.基本信息<span style="color: #0000ff;"></span><span style="color: #800000;">b</span><span style="color: #0000ff;">></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 style="color: #800000;">tr</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">37</span>                 <span style="color: #0000ff;"><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;">38</span>                 <span style="color: #0000ff;"><span style="color: #800000;">td</span><span style="color: #0000ff;">><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>男<span style="color: #0000ff;"><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 style="color: #800000;">tr</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">41</span>                 <span style="color: #0000ff;"><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;">42</span>                 <span style="color: #0000ff;"><span style="color: #800000;">td</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">43</span>                     <span style="color: #0000ff;"><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;">="游戏"</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;">44</span>                     <span style="color: #0000ff;"><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;">="杀人"</span> <span style="color: #0000ff;">/></span><span style="color: #000000;">杀人
</span><span style="color: #008080;">45</span>                     <span style="color: #0000ff;"><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;">="放火"</span> <span style="color: #0000ff;">/></span><span style="color: #000000;">放火
</span><span style="color: #008080;">46</span>                     <span style="color: #0000ff;"><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;">="看书"</span> <span style="color: #0000ff;">/></span>看书<span style="color: #0000ff;"><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 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 style="color: #800000;">tr</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">56</span>                 <span style="color: #0000ff;"><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;">57</span>                 <span style="color: #0000ff;"><span style="color: #800000;">td</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">58</span>                     <span style="color: #0000ff;"><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 style="color: #800000;">option </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;">option</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">60</span>                         <span style="color: #0000ff;"><span style="color: #800000;">option </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;">option</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">61</span>                         <span style="color: #0000ff;"><span style="color: #800000;">option </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;">option</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">62</span>                         <span style="color: #0000ff;"><span style="color: #800000;">option </span><span style="color: #ff0000;">value</span><span style="color: #0000ff;">="大学"</span><span style="color: #ff0000;"> selected</span><span style="color: #0000ff;">="selected"</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;">63</span>                         <span style="color: #0000ff;"><span style="color: #800000;">option </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;">option</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">64</span>                     <span style="color: #0000ff;"></span><span style="color: #800000;">select</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">65</span>                 <span style="color: #0000ff;"></span><span style="color: #800000;">td</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">66</span>                 <span style="color: #0000ff;"><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;">67</span>             <span style="color: #0000ff;"></span><span style="color: #800000;">tr</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">68</span>             <span style="color: #0000ff;"><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;">69</span>                 <span style="color: #0000ff;"><span style="color: #800000;">td </span><span style="color: #ff0000;">colspan</span><span style="color: #0000ff;">="3"</span><span style="color: #0000ff;">><span style="color: #800000;">b</span><span style="color: #0000ff;">></span>3.自我介绍<span style="color: #0000ff;"></span><span style="color: #800000;">b</span><span style="color: #0000ff;">></span><span style="color: #800000;">td</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">70</span>             <span style="color: #0000ff;"></span><span style="color: #800000;">tr</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">71</span>             <span style="color: #0000ff;"><span style="color: #800000;">tr</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">72</span>                 <span style="color: #0000ff;"><span style="color: #800000;">td </span><span style="color: #ff0000;">algi</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;">73</span>                 <span style="color: #0000ff;"><span style="color: #800000;">td</span><span style="color: #0000ff;">><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>
<span style="color: #008080;">74</span>                 <span style="color: #0000ff;"><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 style="color: #800000;">tr</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">77</span>                 <span style="color: #0000ff;"><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 style="color: #800000;">td</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">79</span>                     <span style="color: #0000ff;"><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 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 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 style="color: #800000;">tr</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">85</span>                 <span style="color: #0000ff;"><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></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

HTML：结构，CSS：样式，JavaScript：行为Apr 18, 2025 am 12:09 AM

HTML、CSS和JavaScript在Web开发中的作用分别是：1.HTML定义网页结构，2.CSS控制网页样式，3.JavaScript添加动态行为。它们共同构建了现代网站的框架、美观和交互性。

HTML的未来：网络设计的发展和趋势Apr 17, 2025 am 12:12 AM

HTML的未来充满了无限可能。1)新功能和标准将包括更多的语义化标签和WebComponents的普及。2)网页设计趋势将继续向响应式和无障碍设计发展。3)性能优化将通过响应式图片加载和延迟加载技术提升用户体验。

HTML与CSS vs. JavaScript：比较概述Apr 16, 2025 am 12:04 AM

HTML、CSS和JavaScript在网页开发中的角色分别是：HTML负责内容结构，CSS负责样式，JavaScript负责动态行为。1.HTML通过标签定义网页结构和内容，确保语义化。2.CSS通过选择器和属性控制网页样式，使其美观易读。3.JavaScript通过脚本控制网页行为，实现动态和交互功能。

HTML：是编程语言还是其他？Apr 15, 2025 am 12:13 AM

HTMLISNOTAPROGRAMMENGUAGE; ITISAMARKUMARKUPLAGUAGE.1）htmlStructures andFormatSwebContentusingtags.2）itworkswithcsssforstylingandjavascript for Interactivity，增强WebevebDevelopment。

HTML：建立网页的结构Apr 14, 2025 am 12:14 AM

HTML是构建网页结构的基石。1.HTML定义内容结构和语义，使用、、等标签。2.提供语义化标记，如、、等，提升SEO效果。3.通过标签实现用户交互，需注意表单验证。4.使用、等高级元素结合JavaScript实现动态效果。5.常见错误包括标签未闭合和属性值未加引号，需使用验证工具。6.优化策略包括减少HTTP请求、压缩HTML、使用语义化标签等。

从文本到网站：HTML的力量Apr 13, 2025 am 12:07 AM

HTML是一种用于构建网页的语言，通过标签和属性定义网页结构和内容。1）HTML通过标签组织文档结构，如、。2）浏览器解析HTML构建DOM并渲染网页。3）HTML5的新特性如、、增强了多媒体功能。4）常见错误包括标签未闭合和属性值未加引号。5）优化建议包括使用语义化标签和减少文件大小。

了解HTML，CSS和JavaScript：初学者指南Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。