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;">頭</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 4</span> <span style="color: #0000ff;"><span style="color: #800000;">元</span><span style="color: #ff0000;">字符集</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;">元</span><span style="color: #ff0000;">http-equiv</span><span style="color: #0000ff;">="X-UA-相容"</span><span style="color: #ff0000;">內容</span><span style="color: #0000ff;">="IE=edge,com
</span> 6<span style="color: #0000ff;"> </span></span>標題<span style="color: #0000ff;"></span>><span style="color: #800000;">範例</span><span style="color: #0000ff;"></span>標題<span style="color: #0000ff;"></span>><span style="color: #800000;">
</span> 7<span style="color: #0000ff;"> </span></span>元<span style="color: #0000ff;"></span>名稱<span style="color: #800000;"></span>="描述"<span style="color: #ff0000;"></span>內容<span style="color: #0000ff;"></span>=""<span style="color: #ff0000;"></span>><span style="color: #0000ff;">
</span> 8<span style="color: #0000ff;"> </span></span>元<span style="color: #0000ff;"></span>名稱<span style="color: #800000;"></span>="關鍵字"<span style="color: #ff0000;"></span>內容<span style="color: #0000ff;"></span>=""<span style="color: #ff0000;"></span>><span style="color: #0000ff;">
</span> 9<span style="color: #0000ff;"> </span></span>連結 <span style="color: #0000ff;"></span>href<span style="color: #800000;"></span>=""<span style="color: #ff0000;">></span> rel<span style="color: #0000ff;"></span>="樣式表"<span style="color: #ff0000;"></span>><span style="color: #0000ff;"> rel</span><span style="color: #0000ff;">="樣式表"</span><span style="color: #008080;">></span> rel<span style="color: #0000ff;"></span>="樣式表"<span style="color: #800000;"></span>><span style="color: #0000ff;"> rel</span><span style="color: #008080;">="樣式表"</span><span style="color: #0000ff;">></span>
<span style="color: #800000;">10</span><span style="color: #0000ff;"></span><span style="color: #008080;">頭</span><span style="color: #0000ff;">></span>
<span style="color: #800000;">11</span><span style="color: #ff0000;"><span style="color: #0000ff;">身體</span><span style="color: #ff0000;">></span>
<span style="color: #0000ff;">12</span><span style="color: #ff0000;"><span style="color: #0000ff;">表單</span><span style="color: #0000ff;">方法</span><span style="color: #008080;">="POST"</span><span style="color: #0000ff;">操作</span><span style="color: #800000;">="1.php"</span><span style="color: #ff0000;">enctype</span>/T
<span style="color: #0000ff;">13</span><span style="color: #ff0000;"><span style="color: #0000ff;">表格</span><span style="color: #ff0000;">邊框</span><span style="color: #0000ff;">="1"</span><span style="color: #ff0000;">邊框顏色</span><span style="color: #0000ff;">="#F4F4F4"</span>+ <span style="color: #ff0000;"> 細胞填充</span> <span style="color: #0000ff;">="5"</span><span style="color: #ff0000;">規則</span><span style="color: #0000ff;">="全部"</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">14</span><span style="color: #0000ff;"><span style="color: #800000;">標題</span><span style="color: #0000ff;">></span>個人中心<span style="color: #0000ff;"></span><span style="color: #800000;">標題</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;">></span><span style="color: #0000ff;">td</span><span style="color: #800000;">></span><span style="color: #0000ff;">></span><span style="color: #008080;">td</span><span style="color: #0000ff;">></span><span style="color: #800000;">></span><span style="color: #0000ff;">td</span><span style="color: #008080;">></span>
<span style="color: #0000ff;">17</span> <span style="color: #800000;"></span><span style="color: #ff0000;">tr</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;">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: #0000ff;">align</span><span style="color: #800000;">="right"</span><span style="color: #ff0000;">></span>用戶名：<span style="color: #0000ff;"></span><span style="color: #ff0000;">td</span><span style="color: #0000ff;">></span><span style="color: #ff0000;">
</span>20<span style="color: #0000ff;"> </span></span>td<span style="color: #0000ff;"></span>></span>input <span style="color: #0000ff;"></span>type<span style="color: #0000ff;">="username" disabled</span><span style="color: #800000;">="disabled "</span><span style="color: #0000ff;"> value</span><span style="color: #008080;">="Admin"</span><span style="color: #0000ff;">></span><span style="color: #800000;">td</span><span style="color: #0000ff;">></span>
<span style="color: #800000;">21</span> <span style="color: #ff0000;"><span style="color: #0000ff;">td</span><span style="color: #ff0000;">><span style="color: #0000ff;">input </span><span style="color: #0000ff;">type</span><span style="color: #800000;">="submit"</span><span style="color: #ff0000;"> value </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;">22</span> <span style="color: #0000ff;"></span><span style="color: #008080;">tr</span><span style="color: #0000ff;">></span>
<span style="color: #800000;">23</span> <span style="color: #0000ff;"><span style="color: #008080;">tr</span><span style="color: #0000ff;">></span>
<span style="color: #800000;">24</span> <span style="color: #0000ff;"><span style="color: #008080;">td </span><span style="color: #0000ff;">align</span><span style="color: #800000;">="right"</span><span style="color: #ff0000;">></span>密碼：<span style="color: #0000ff;"></span><span style="color: #0000ff;">td</span><span style="color: #0000ff;">></span><span style="color: #800000;">
</span>25<span style="color: #0000ff;"> </span></span>td<span style="color: #0000ff;"></span>></span>input <span style="color: #0000ff;"></span>type<span style="color: #800000;"></span>="password"<span style="color: #ff0000;"></span> nameS ><span style="color: #0000ff;"></span>td <span style="color: #ff0000;"></span>><span style="color: #0000ff;">
</span>26<span style="color: #ff0000;"> </span></span>td<span style="color: #0000ff;"></span>></span>font <span style="color: #0000ff;"></span>color<span style="color: #008080;"></span>="#0E9EFF"<span style="color: #0000ff;"></span> size<span style="color: #800000;"></span>="#0E9EFF"<span style="color: #0000ff;"></span> size<span style="color: #800000;"></span>="#0E9EFF"<span style="color: #ff0000;"></span> size<span style="color: #0000ff;"></span>="#0E9EFF"<span style="color: #ff0000;"></span> size<span style="color: #0000ff;"></span>="#0E9EFF"<span style="color: #0000ff;"></span> size<span style="color: #0000ff;"> </span>font<span style="color: #800000;"> </span>><span style="color: #0000ff;"><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>30<span style="color: #008080;"> </span></span>td<span style="color: #800000;"></span>></span>input <span style="color: #800000;"></span>type<span style="color: #ff0000;"></span>="password"<span style="color: #0000ff;"></span> name<span style="color: #ff0000;"></span>="re="password"<span style="color: #0000ff;"></span> <span style="color: #ff0000;">></span><span style="color: #0000ff;">td </span><span style="color: #0000ff;">></span>
<span style="color: #800000;">31</span> <span style="color: #0000ff;"><span style="color: #008080;">td</span><span style="color: #0000ff;">><span style="color: #800000;">font </span><span style="color: #0000ff;">color</span><span style="color: #800000;">="#0E9EFF"</span><span style="color: #ff0000;"> size</span><span style="color: #0000ff;">="#0E9EFF"</span><span style="color: #ff0000;"> size</span><span style="color: #0000ff;">="#0E9EFF" </span>font<span style="color: #0000ff;"></span> ><span style="color: #0000ff;"></span>td<span style="color: #800000;"></span>><span style="color: #0000ff;">
</span>32<span style="color: #800000;"> </span><span style="color: #0000ff;"></span>tr<span style="color: #008080;"></span>><span style="color: #0000ff;">
</span>33<span style="color: #800000;"> </span></span>tr <span style="color: #008080;"></span>bgcolor<span style="color: #0000ff;"></span>="#F9F9F9"<span style="color: #800000;"></span>><span style="color: #ff0000;">
</span>34<span style="color: #0000ff;"> </span></span>td <span style="color: #008080;"></span>colspan<span style="color: #0000ff;"></span>="3"<span style="color: #800000;"></span>></span>b<span style="color: #0000ff;"></span>> <span style="color: #0000ff;">></span>
<span style="color: #800000;">35</span> <span style="color: #0000ff;"></span><span style="color: #0000ff;">tr</span><span style="color: #800000;">></span>
<span style="color: #0000ff;">36</span> <span style="color: #800000;"><span style="color: #0000ff;">tr</span><span style="color: #008080;">></span>
<span style="color: #0000ff;">37</span> <span style="color: #800000;"><span style="color: #0000ff;">td </span><span style="color: #008080;">align</span><span style="color: #0000ff;">="right"</span><span style="color: #800000;">></span>性別：<span style="color: #0000ff;"></span><span style="color: #008080;">td</span><span style="color: #0000ff;">></span><span style="color: #800000;">
</span>38<span style="color: #ff0000;"> </span></span>td<span style="color: #0000ff;"></span>></span>input <span style="color: #800000;"></span>type<span style="color: #0000ff;"></span>="radio"<span style="color: #008080;"></span> name. <span style="color: #0000ff;"></span>="checked "<span style="color: #800000;"></span>><span style="color: #0000ff;">男</span></span>input <span style="color: #ff0000;"></span>type<span style="color: #0000ff;"></span>="radio"<span style="color: #ff0000;"></span> name<span style="color: #0000ff;"></span>="sex"<span style="color: #ff0000;"> value<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>42<span style="color: #008080;"> </span></span>td<span style="color: #800000;"></span>><span style="color: #0000ff;">
</span>43<span style="color: #008080;"> </span></span>input <span style="color: #800000;"></span>type<span style="color: #ff0000;"></span>="checkbox"<span style="color: #0000ff;"></span> name<span style="color: #ff0000;"></span>="like[]" <span style="color: #0000ff;"> </span>/> <span style="color: #ff0000;"></span>遊戲
<span style="color: #0000ff;"></span>44<span style="color: #ff0000;"> </span></span>input <span style="color: #0000ff;"></span>type<span style="color: #000000;"></span>="checkbox"<span style="color: #008080;"></span> name<span style="color: #0000ff;"></span>="like[]"
<span style="color: #800000;"></span>45<span style="color: #ff0000;"> </span></span>input <span style="color: #ff0000;"></span>type<span style="color: #0000ff;"></span>="checkbox"<span style="color: #ff0000;"></span> name<span style="color: #0000ff;"></span>="like[]"
<span style="color: #0000ff;"></span>46<span style="color: #000000;"> </span></span>input <span style="color: #0000ff;"></span>type<span style="color: #800000;"></span>="checkbox"<span style="color: #ff0000;"></span> name<span style="color: #0000ff;"></span>="like[]" <span style="color: #ff0000;"></span>br<span style="color: #0000ff;"> </span>><span style="color: #ff0000;">
</span>52<span style="color: #0000ff;"> </span><span style="color: #0000ff;"></span>td<span style="color: #000000;"></span>><span style="color: #008080;">
</span>53<span style="color: #0000ff;"> </span></span>td<span style="color: #ff0000;"></span>><span style="color: #0000ff;"></span>td<span style="color: #ff0000;"></span>><span style="color: #0000ff;">
</span>54<span style="color: #ff0000;"> </span><span style="color: #0000ff;"></span>tr<span style="color: #0000ff;"></span>><span style="color: #0000ff;">
</span>55<span style="color: #800000;"> </span></span>tr<span style="color: #008080;"></span>><span style="color: #0000ff;">
</span>56<span style="color: #800000;"> </span></span>td <span style="color: #008080;"></span>align<span style="color: #0000ff;"></span>="right"<span style="color: #800000;"></span>><span style="color: #0000ff;">學歷：</span><span style="color: #800000;"></span>td<span style="color: #0000ff;"></span>學歷：<span style="color: #008080;"></span>td>
<span style="color: #0000ff;">57</span> <span style="color: #800000;"><span style="color: #0000ff;">td</span><span style="color: #008080;">></span>
<span style="color: #0000ff;">58</span> <span style="color: #800000;"><span style="color: #0000ff;">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>60<span style="color: #008080;"> </span></span>option <span style="color: #800000;"></span>value<span style="color: #ff0000;"></span>="初中"<span style="color: #0000ff;"></span>><span style="color: #0000ff;">初中</span><span style="color: #0000ff;">option</span>><span style="color: #800000;">初中</span>><span style="color: #0000ff;"></span>option<span style="color: #008080;">></span>初中<span style="color: #0000ff;">></span><span style="color: #800000;">option</span>><span style="color: #ff0000;">初中</span>>
<span style="color: #0000ff;">61</span> <span style="color: #0000ff;"><span style="color: #0000ff;">option </span><span style="color: #800000;">value</span><span style="color: #0000ff;">="高中"</span><span style="color: #008080;">></span>高中<span style="color: #0000ff;"></span><span style="color: #800000;">option</span><span style="color: #ff0000;">
</span>62<span style="color: #0000ff;"> </span></span>option <span style="color: #0000ff;"></span>value<span style="color: #0000ff;"></span>="大學"<span style="color: #0000ff;"></span> selected<span style="color: #800000;"></span>="selected"<span style="color: #0000ff;">>opp
</span>63<span style="color: #008080;"> </span></span>option <span style="color: #800000;"></span>value<span style="color: #ff0000;"></span>="研究生"<span style="color: #0000ff;"></span>><span style="color: #0000ff;">研究生</span><span style="color: #0000ff;"></span>option<span style="color: #800000;"></span>
<span style="color: #0000ff;">64</span> <span style="color: #008080;"></span><span style="color: #0000ff;">select</span><span style="color: #800000;">></span>
<span style="color: #0000ff;">65</span> <span style="color: #008080;"></span><span style="color: #0000ff;">td</span><span style="color: #800000;">></span>
<span style="color: #0000ff;">66</span> <span style="color: #008080;"><span style="color: #0000ff;">td</span><span style="color: #800000;">></span><span style="color: #0000ff;">td</span><span style="color: #800000;">></span>
<span style="color: #0000ff;">67</span> <span style="color: #008080;"></span><span style="color: #0000ff;">tr</span><span style="color: #800000;">></span>
<span style="color: #0000ff;">68</span> <span style="color: #008080;"><span style="color: #0000ff;">tr </span><span style="color: #800000;">bgcolor</span><span style="color: #ff0000;">="#F9F9F9"</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;">69</span> <span style="color: #008080;"><span style="color: #0000ff;">td </span><span style="color: #800000;">colspan</span><span style="color: #ff0000;">="3"</span><span style="color: #0000ff;">><span style="color: #0000ff;">b</span><span style="color: #800000;">> </span>><span style="color: #0000ff;">
</span>70<span style="color: #0000ff;"> </span><span style="color: #800000;"></span>tr<span style="color: #0000ff;"></span>><span style="color: #800000;">
</span>71<span style="color: #0000ff;"> </span></span>tr<span style="color: #0000ff;"></span>><span style="color: #800000;">
</span>72<span style="color: #0000ff;"> </span></span>td <span style="color: #0000ff;"></span>algi<span style="color: #800000;"></span>="right"<span style="color: #0000ff;"></span>><span style="color: #008080;">個人簽名：</span><span style="color: #0000ff;"></span>td<span style="color: #800000;"></span>>
<span style="color: #ff0000;">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;">row</span>cols<span style="color: #0000ff;"></span>="40"<span style="color: #ff0000;"> </span>> <span style="color: #0000ff;"></span>文字區<span style="color: #0000ff;"></span>><span style="color: #800000;"></span>td<span style="color: #0000ff;"></span>><span style="color: #800000;">
</span>74<span style="color: #0000ff;"></span></span>td<span style="color: #0000ff;"></span>><span style="color: #800000;"></span>td<span style="color: #0000ff;"></span>><span style="color: #800000;">
</span>75<span style="color: #0000ff;"></span><span style="color: #008080;"></span>tr<span style="color: #0000ff;"></span>><span style="color: #800000;">
</span>76<span style="color: #0000ff;"></span></span>tr<span style="color: #0000ff;"></span>><span style="color: #800000;">
</span>77<span style="color: #0000ff;"> </span></span>td <span style="color: #0000ff;"></span>align<span style="color: #800000;"></span>="右"<span style="color: #ff0000;"></span>><span style="color: #0000ff;"> 上傳頭像：</span><span style="color: #0000ff;">td</span>
<span style="color: #0000ff;">78</span><span style="color: #800000;"><span style="color: #0000ff;">td</span><span style="color: #008080;">></span>
<span style="color: #0000ff;">79</span> <span style="color: #800000;"><span style="color: #0000ff;">輸入</span><span style="color: #008080;">類型</span><span style="color: #0000ff;">="檔案"</span><span style="color: #800000;">名稱</span><span style="color: #ff0000;">="投象"</span><span style="color: #0000ff;">></span>名稱<span style="color: #ff0000;"></span>="投象"<span style="color: #0000ff;"></span>><span style="color: #0000ff;">
</span>80<span style="color: #008080;"></span></span>輸入<span style="color: #800000;"></span>型<span style="color: #ff0000;"></span>="隱藏"<span style="color: #0000ff;"></span>名稱<span style="color: #ff0000;">="</span>="uid"<span style="color: #0000ff;"></span>值<span style="color: #ff0000;"></span>="<span style="color: #0000ff;">="uid"</span><span style="color: #0000ff;">值</span><span style="color: #008080;">="
</span>81<span style="color: #0000ff;"></span><span style="color: #800000;"></span>td<span style="color: #0000ff;"></span>><span style="color: #008080;">
</span>82<span style="color: #0000ff;"></span></span>td<span style="color: #0000ff;"></span>><span style="color: #800000;"></span>td<span style="color: #0000ff;"></span>><span style="color: #008080;">
</span>83<span style="color: #0000ff;"></span><span style="color: #800000;"></span>tr<span style="color: #0000ff;"></span>><span style="color: #008080;">
</span>84<span style="color: #0000ff;"></span></span>tr<span style="color: #0000ff;"></span>><span style="color: #008080;">
</span>85<span style="color: #0000ff;"></span></span>td<span style="color: #ff0000;"></span>colspan<span style="color: #0000ff;"></span>="3"<span style="color: #ff0000;"></span>對齊🎜<span style="color: #0000f"></span></span></span>

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

HTML標籤和HTML屬性有什麼區別？May 14, 2025 am 12:01 AM

HTMLtagsdefinethestructureofawebpage,whileattributesaddfunctionalityanddetails.1)Tagslike,,andoutlinethecontent'splacement.2)Attributessuchassrc,class,andstyleenhancetagsbyspecifyingimagesources,styling,andmore,improvingfunctionalityandappearance.

HTML的未來：進化和趨勢May 13, 2025 am 12:01 AM

HTML的未來將朝著更加語義化、功能化和模塊化的方向發展。 1)語義化將使標籤更明確地描述內容，提升SEO和無障礙訪問。 2)功能化將引入新元素和屬性，滿足用戶需求。 3)模塊化將支持組件化開發，提高代碼復用性。

為什麼HTML屬性對Web開發很重要？May 12, 2025 am 12:01 AM

htmlattributesarecrucialinwebdevelopment forcontrollingBehavior，外觀和功能

Alt屬性的目的是什麼？為什麼重要？May 11, 2025 am 12:01 AM

alt屬性是HTML中標籤的重要部分，用於提供圖片的替代文本。 1.當圖片無法加載時，alt屬性中的文本會顯示，提升用戶體驗。 2.屏幕閱讀器使用alt屬性幫助視障用戶理解圖片內容。 3.搜索引擎索引alt屬性中的文本，提高網頁的SEO排名。

HTML，CSS和JavaScript：示例和實際應用May 09, 2025 am 12:01 AM

HTML、CSS和JavaScript在網頁開發中的作用分別是：1.HTML用於構建網頁結構；2.CSS用於美化網頁外觀；3.JavaScript用於實現動態交互。通過標籤、樣式和腳本，這三者共同構築了現代網頁的核心功能。

如何在標籤上設置lang屬性？為什麼這很重要？May 08, 2025 am 12:03 AM

設置標籤的lang屬性是優化網頁可訪問性和SEO的關鍵步驟。 1)在標籤中設置lang屬性，如。 2)在多語言內容中，為不同語言部分設置lang屬性，如。 3)使用符合ISO639-1標準的語言代碼，如"en"、"fr"、"zh"等。正確設置lang屬性可以提高網頁的可訪問性和搜索引擎排名。

HTML屬性的目的是什麼？May 07, 2025 am 12:01 AM

htmlattributeseresene forenhancingwebelements'functionalityandAppearance.TheyAdDinformationTodeFineBehavior，外觀和互動，使網站互動，響應式，visalalyAppealing.AttributesLikutesLikeSlikEslikesrc，href，href，href，類，類型，類型，和dissabledtransfransformformformformformformformformformformformformformformforment

您如何在HTML中創建列表？May 06, 2025 am 12:01 AM

toCreateAlistInHtml，useforforunordedlistsandfororderedlists：1）forunorderedlists，wrapitemsinanduseforeachItem，RenderingeringAsabulletedList.2）fororderedlists，useandfornumberedlists，useandfornumberedlists，casundfornumberedlists，casundfornthetthetthetthetthetthetthetttributefordforderfordforderforderentnumberingsnumberingsnumberingStys。

See all articles