HTML小結
一、HTML
- 网页编程语言。Html之所以能展现出各种各样的效果，是浏览器的功能。
- HTML(HyperText Markup Language)就是描述网页长什么样子、有什么内容的一个文本。查看网页的描述内容（HTML）的方式：使用IE浏览器的话，在网页上点击右键，选择“查看源文件”
- B/S(Browser/ Server)：浏览器-服务器，客户端只需要一个浏览器
- C/S(Client/Server)：客户端必须安装对应的软件。比如：QQ、MSN、FoxMail
二、最基本的HTML结构
<span style="color: #008080;"> 1</span> <span style="color: #008000;"><!--</span><span style="color: #008000;"> <!DOCTYPE> 是HTML5声明，<!DOCTYPE> 必须是 HTML 文档的第一行，位于 <html> 标签之前。<!DOCTYPE>是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。</span><span style="color: #008000;">--></span> <span style="color: #008080;"> 2</span> <span style="color: #0000ff;"><!</span><span style="color: #ff00ff;">DOCTYPE html</span><span style="color: #0000ff;">></span> <span style="color: #008080;"> 3</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">html</span><span style="color: #0000ff;">></span> <span style="color: #008080;"> 4</span> <span style="color: #008000;"><!--</span><span style="color: #008000;"> head标签是所有头部元素的容器。head标签内的元素可包含脚本、样式表和提供页面的元信息等等。以下标签都可以添加到 head 部分：title、base、link、meta、script 以及style。头部的内容不会显示在浏览器的。 </span><span style="color: #008000;">--></span> <span style="color: #008080;"> 5</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span> <span style="color: #008080;"> 6</span> <span style="color: #008000;"><!--</span><span style="color: #008000;"> 设置字符集，如果字符集不对，可能导致乱码。一般建议utf-8国际编码 </span><span style="color: #008000;">--></span> <span style="color: #008080;"> 7</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">http-equiv</span><span style="color: #0000ff;">="Content-Type"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="text/html; charset=gb2312或utf-8或gbk"</span> <span style="color: #0000ff;">/></span> <span style="color: #008080;"> 8</span> <span style="color: #008000;"><!--</span><span style="color: #008000;"> 定时自动跳转 </span><span style="color: #008000;">--></span> <span style="color: #008080;"> 9</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">http-equiv</span><span style="color: #0000ff;">="refresh"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="10;URL=http://www.leixuesong.cn"</span> <span style="color: #0000ff;">/></span> <span style="color: #008080;">10</span> <span style="color: #008000;"><!--</span><span style="color: #008000;"> SEO相关标签，title定义文档的标题,百度建议一般不要超过32位,meta定义页面关键词和页面的描述</span><span style="color: #008000;">--></span> <span style="color: #008080;">11</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span>网页标题<span style="color: #0000ff;"></</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span> <span style="color: #008080;">12</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="keywords"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="PHP程序员,技术博客,个人博客"</span> <span style="color: #0000ff;">/></span> <span style="color: #008080;">13</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="description"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="我的博客记录了Linux学习，PHP开发与编程，Web前端开发，MySQL学习和教程，NoSQL数据库教程以及个人的人生经历和观点。"</span> <span style="color: #0000ff;">/></span> <span style="color: #008080;">14</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">link </span><span style="color: #ff0000;">rel</span><span style="color: #0000ff;">="stylesheet"</span><span style="color: #ff0000;"> type</span><span style="color: #0000ff;">="text/css"</span><span style="color: #ff0000;"> href</span><span style="color: #0000ff;">="main.css"</span> <span style="color: #0000ff;">/></span> <span style="color: #008080;">15</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">script </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="text/javascript"</span><span style="color: #ff0000;"> src</span><span style="color: #0000ff;">="http://pagead2.googlesyndication.com/pagead/show_ads.js"</span><span style="color: #0000ff;">></</span><span style="color: #800000;">script</span><span style="color: #0000ff;">></span> <span style="color: #008080;">16</span> <span style="color: #0000ff;"></</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span> <span style="color: #008080;">17</span> <span style="color: #008000;"><!--</span><span style="color: #008000;"> 正文部分，所有在浏览器上可见的内容必须写在body标签内部 </span><span style="color: #008000;">--></span> <span style="color: #008080;">18</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span> <span style="color: #008080;">19</span> <span style="color: #0000ff;"></</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span> <span style="color: #008080;">20</span> <span style="color: #0000ff;"></</span><span style="color: #800000;">html</span><span style="color: #0000ff;">></span>
登入後複製
三、最常用的HTML标签
a、布局标签
- div标签定义文档中的分区或节（division/section），可以把文档分割为独立的、不同的部分，主要用于布局。
- aside标签的内容可用作文章的侧栏，html5新增标签。
- header标签定义页面的头部（介绍信息），html5新增标签。
- section标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分，html5新增标签。
- footer 标签定义文档或节的页脚，通常包含文档的作者、版权信息、使用条款链接、联系信息等等，html5新增标签。
- article标签规定文章独立的其他内容，比如：标题、内容、评论，html5新增标签。
b、文本标签
- h1-h6标签可定义标题（h1最大，h6最小）
- p标签定义段落
- b/strong标签加粗
- em标签来表示强调的文本，斜体
- strong标签表示重要文本
- u标签下划线
- s标签删除线
- br标签表示回车换行
- hr标签表示水平线
- span标签被用来组合文档中的行内元素。
- blockquote标签表示块引用
- pre标签可定义预格式化的文本，保持原有格式的一种标签。
- sub标签下标，
- sup>标签上标
- 表示一个空格
- ©表示版权符
- <表示<
- >表示>
c、a标签定义超链接
- 指定页面间的跳转，链接可以指向外部链接或者页面内部id锚点，可以在当前页面打开，新开窗口。
<span style="color: #0000ff;"><</span><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="指向的链接地址或者网址#ID名"</span><span style="color: #ff0000;"> target</span><span style="color: #0000ff;">="_blank|_self|_top|_parent"</span><span style="color: #0000ff;">></span>百度<span style="color: #0000ff;"></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span>
登入後複製 - 超级链接
<span style="color: #0000ff;"><</span><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="http://www.yahoo.com"</span><span style="color: #ff0000;"> target</span><span style="color: #0000ff;">="_self"</span><span style="color: #ff0000;"> title</span><span style="color: #0000ff;">="去美国雅虎"</span><span style="color: #0000ff;">></span>雅虎<span style="color: #0000ff;"></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span>
登入後複製 - 图片超链接
<span style="color: #0000ff;"><</span><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="http://www.microsoft.com"</span><span style="color: #0000ff;">><</span><span style="color: #800000;">imgborder</span><span style="color: #0000ff;">="0"</span><span style="color: #ff0000;"> src</span><span style="color: #0000ff;">="1.jpg"</span><span style="color: #0000ff;">/></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span>
登入後複製 - 相对URL
相对URL表示相对于当前文档的资源;
“/”表示网站根目录，“../”表示父目录;
“../../”表示父目录的父目录，“./”或者不写任何斜线表示相对于当前路径的目录
站内引用最好用相对URL，这样域名改变了、目录改变了都不受影响。<span style="color: #0000ff;"><</span><span style="color: #800000;">img </span><span style="color: #ff0000;">src</span><span style="color: #0000ff;">="../images/csharp1.jpg"</span> <span style="color: #0000ff;">/></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">img </span><span style="color: #ff0000;">src</span><span style="color: #0000ff;">="/images/csharp1.jpg"</span> <span style="color: #0000ff;">/></span>
登入後複製 - 将的target属性设定为"_blank"就可以在新窗口中打开超链接。
国情：国内的网站很多都是默认在新窗口中打开。target的取值范围：
_blank :在新窗口中打开
_self :在自己的窗口中打开
_parent :父窗口中打开
_top :表示在顶级窗口打开
框架名称：在指定框架中打开。 - 锚记：用name属性为 起名字：
d、多媒体标签
- img标签主要在网页中插入图像，可以定义图片替换文本、显示宽度和高度、是否带边框，建议等比例设置，否则图像会变形。
注意图片是链接的，不是插入的，所以如果src指向的文件不存在了，就看不了了。alt属性为图片无法显示时的显示文本，鼠标方式去也会有悬浮提示“点击查看大图”；title用来显示当鼠标放到图片上时显示的文字；border属性指定边框，border="0"不显示边框；width、height属性指定图片的显示大小，如果不指定则是图片的原始大小。
-
<span style="color: #0000ff;"><</span><span style="color: #800000;">img </span><span style="color: #ff0000;">src</span><span style="color: #0000ff;">="图片地址"</span><span style="color: #ff0000;"> alt</span><span style="color: #0000ff;">="替换文本，图片打不开的时候显示"</span><span style="color: #ff0000;"> width</span><span style="color: #0000ff;">="图片宽度"</span><span style="color: #ff0000;"> height</span><span style="color: #0000ff;">="高度"</span><span style="color: #ff0000;"> border</span><span style="color: #0000ff;">="0"</span> <span style="color: #0000ff;">/></span>
登入後複製
- audio标签定义声音，比如音乐或其他音频流。html5新增标签。
<span style="color: #0000ff;"><</span><span style="color: #800000;">audio </span><span style="color: #ff0000;">src</span><span style="color: #0000ff;">="someaudio.wav"</span><span style="color: #0000ff;">></span>您的浏览器不支持 audio 标签。<span style="color: #0000ff;"></</span><span style="color: #800000;">audio</span><span style="color: #0000ff;">></span>
登入後複製 - video标签定义视频，比如电影片段或其他视频流。html5新增标签。
<span style="color: #0000ff;"><</span><span style="color: #800000;">video </span><span style="color: #ff0000;">src</span><span style="color: #0000ff;">="movie.ogg"</span><span style="color: #ff0000;"> controls</span><span style="color: #0000ff;">="controls"</span><span style="color: #0000ff;">></span>您的浏览器不支持 video 标签。<span style="color: #0000ff;"></</span><span style="color: #800000;">video</span><span style="color: #0000ff;">></span>
登入後複製
e、序列化标签
- ul和li无序列表标签。
<span style="color: #0000ff;"><</span><span style="color: #800000;">ul</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>HTML<span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>JS<span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>PHP<span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></</span><span style="color: #800000;">ul</span><span style="color: #0000ff;">></span>
登入後複製 - ol和li有序列表标签，可以使用type属性规定有序列表符号的类型。1 按数字有序排列，为默认值，（1、2、3、4）；a 按小写字母有序排列，（a、b、c、d）；A 按字母大写有序排列，（A、B、C、D）。i 按小写罗马字母有序，（i, ii, iii, iv）；I 按小写罗马字母有序，（I, II, III, IV）。
<span style="color: #0000ff;"><</span><span style="color: #800000;">ol</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>HTML<span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>JS<span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>PHP<span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></</span><span style="color: #800000;">ol</span><span style="color: #0000ff;">></span>
登入後複製 - dl标签定义了定义列表（definition list），dl标签用于结合 dt（定义列表中的项目）和 dd（描述列表中的项目）。
<span style="color: #0000ff;"><</span><span style="color: #800000;">dl</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">dt</span><span style="color: #0000ff;">></span>计算机<span style="color: #0000ff;"></</span><span style="color: #800000;">dt</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">dd</span><span style="color: #0000ff;">></span>用来计算的仪器 ... ...<span style="color: #0000ff;"></</span><span style="color: #800000;">dd</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></</span><span style="color: #800000;">dl</span><span style="color: #0000ff;">></span>
登入後複製
f、表格标签
为表格，在内部通过
创建行， 内部通过 创建单元格。可以将table的border属性设为0来隐藏表格线。 - cellpadding内容和表格边线之间的距离
- cellspacing单元格之间的间距。
- rowspan(跨行)、colspan（跨列）进行单元格的合并
,是td的属性。 <span style="color: #008080;"> 1</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">table </span><span style="color: #ff0000;">width</span><span style="color: #0000ff;">="100%"</span><span style="color: #ff0000;"> height</span><span style="color: #0000ff;">="193"</span><span style="color: #ff0000;"> border</span><span style="color: #0000ff;">="1"</span><span style="color: #ff0000;"> cellpadding</span><span style="color: #0000ff;">="0"</span><span style="color: #ff0000;"> cellspacing</span><span style="color: #0000ff;">="0"</span><span style="color: #ff0000;"> bordercolor</span><span style="color: #0000ff;">="#FF0000"</span><span style="color: #ff0000;"> bgcolor</span><span style="color: #0000ff;">="#000000"</span><span style="color: #ff0000;"> background</span><span style="color: #0000ff;">=""</span><span style="color: #0000ff;">></span> <span style="color: #008080;"> 2</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">tr</span><span style="color: #0000ff;">></span> <span style="color: #008080;"> 3</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">th</span><span style="color: #0000ff;">></span>标题<span style="color: #0000ff;"></</span><span style="color: #800000;">th</span><span style="color: #0000ff;">></span> <span style="color: #008080;"> 4</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">th</span><span style="color: #0000ff;">></span>标题<span style="color: #0000ff;"></</span><span style="color: #800000;">th</span><span style="color: #0000ff;">></span> <span style="color: #008080;"> 5</span> <span style="color: #0000ff;"></</span><span style="color: #800000;">tr</span><span style="color: #0000ff;">></span> <span style="color: #008080;"> 6</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">tr</span><span style="color: #0000ff;">></span> <span style="color: #008080;"> 7</span> <span style="color: #008000;"><!--</span><span style="color: #008000;"> 合并横向单元格 </span><span style="color: #008000;">--></span> <span style="color: #008080;"> 8</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">td </span><span style="color: #ff0000;">colspan</span><span style="color: #0000ff;">="2"</span><span style="color: #ff0000;"> nowrap</span><span style="color: #0000ff;">="nowrap"</span><span style="color: #0000ff;">></span><span style="color: #ff0000;">&</span>nbsp;<span style="color: #0000ff;"></</span><span style="color: #800000;">td</span><span style="color: #0000ff;">></span> <span style="color: #008080;"> 9</span> <span style="color: #0000ff;"></</span><span style="color: #800000;">tr</span><span style="color: #0000ff;">></span> <span style="color: #008080;">10</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">tr</span><span style="color: #0000ff;">></span> <span style="color: #008080;">11</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">td</span><span style="color: #0000ff;">></</span><span style="color: #800000;">td</span><span style="color: #0000ff;">></span> <span style="color: #008080;">12</span> <span style="color: #008000;"><!--</span><span style="color: #008000;"> 合并纵向单元格 </span><span style="color: #008000;">--></span> <span style="color: #008080;">13</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">td </span><span style="color: #ff0000;">rowspan</span><span style="color: #0000ff;">="2"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></</span><span style="color: #800000;">td</span><span style="color: #0000ff;">></span> <span style="color: #008080;">14</span> <span style="color: #0000ff;"></</span><span style="color: #800000;">tr</span><span style="color: #0000ff;">></span> <span style="color: #008080;">15</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">tr</span><span style="color: #0000ff;">></span> <span style="color: #008080;">16</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">td </span><span style="color: #ff0000;">height</span><span style="color: #0000ff;">="16"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></</span><span style="color: #800000;">td</span><span style="color: #0000ff;">></span> <span style="color: #008080;">17</span> <span style="color: #0000ff;"></</span><span style="color: #800000;">tr</span><span style="color: #0000ff;">></span> <span style="color: #008080;">18</span> <span style="color: #0000ff;"></</span><span style="color: #800000;">table</span><span style="color: #0000ff;">></span>
登入後複製g、表单标签
- form标签定义提交方式、提交地址、表单字符集以及如何对其进行编码，需要提交的表单一定要放在form标签内。
<span style="color: #0000ff;"><</span><span style="color: #800000;">form </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="form1"</span><span style="color: #ff0000;"> name</span><span style="color: #0000ff;">="form1"</span><span style="color: #ff0000;"> method</span><span style="color: #0000ff;">="post|get"</span><span style="color: #ff0000;"> enctype</span><span style="color: #0000ff;">="multipart/form-data"</span><span style="color: #ff0000;"> action</span><span style="color: #0000ff;">="提交到的地址"</span><span style="color: #0000ff;">></</span><span style="color: #800000;">form</span><span style="color: #0000ff;">></span>
登入後複製 - input标签用于搜集用户信息
<span style="color: #008080;"> 1</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">input </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="userName"</span><span style="color: #ff0000;"> type</span><span style="color: #0000ff;">="text"</span><span style="color: #ff0000;"> maxlength</span><span style="color: #0000ff;">="5"</span><span style="color: #ff0000;"> size</span><span style="color: #0000ff;">="100"</span><span style="color: #ff0000;"> value</span><span style="color: #0000ff;">="asdfasdfasfd"</span> <span style="color: #0000ff;">/></span> <span style="color: #008080;"> 2</span> <span style="color: #008000;"><!--</span><span style="color: #008000;"> 密码，输入的字符会被掩码（显示为星号或原点） </span><span style="color: #008000;">--></span> <span style="color: #008080;"> 3</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">input </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="pwd"</span><span style="color: #ff0000;"> type</span><span style="color: #0000ff;">="password"</span><span style="color: #ff0000;"> maxlength</span><span style="color: #0000ff;">="5"</span><span style="color: #ff0000;"> size</span><span style="color: #0000ff;">="100"</span><span style="color: #ff0000;"> value</span><span style="color: #0000ff;">=""</span> <span style="color: #0000ff;">/></span> <span style="color: #008080;"> 4</span> <span style="color: #008000;"><!--</span><span style="color: #008000;"> 文件类型的表单，上传文件时，form表单一定要设置为enctype="multipart/form-data" </span><span style="color: #008000;">--></span> <span style="color: #008080;"> 5</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">input </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="file"</span><span style="color: #ff0000;"> name</span><span style="color: #0000ff;">="file"</span> <span style="color: #0000ff;">/></span> <span style="color: #008080;"> 6</span> <span style="color: #008000;"><!--</span><span style="color: #008000;"> 隐藏表单 </span><span style="color: #008000;">--></span> <span style="color: #008080;"> 7</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">input </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="hidden"</span><span style="color: #ff0000;"> name</span><span style="color: #0000ff;">="country"</span><span style="color: #ff0000;"> value</span><span style="color: #0000ff;">="China"</span> <span style="color: #0000ff;">/></span> <span style="color: #008080;"> 8</span> <span style="color: #008000;"><!--</span><span style="color: #008000;"> 提交 </span><span style="color: #008000;">--></span> <span style="color: #008080;"> 9</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">input </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="submit"</span><span style="color: #ff0000;"> name</span><span style="color: #0000ff;">="Submit"</span><span style="color: #ff0000;"> value</span><span style="color: #0000ff;">="提交"</span><span style="color: #ff0000;"> disabled</span><span style="color: #0000ff;">="disabled"</span> <span style="color: #0000ff;">/></span> <span style="color: #008080;">10</span> <span style="color: #008000;"><!--</span><span style="color: #008000;"> 重置 </span><span style="color: #008000;">--></span> <span style="color: #008080;">11</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">input </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="reset"</span><span style="color: #ff0000;"> name</span><span style="color: #0000ff;">="Submit2"</span><span style="color: #ff0000;"> value</span><span style="color: #0000ff;">="重置"</span> <span style="color: #0000ff;">/></span> <span style="color: #008080;">12</span> <span style="color: #008000;"><!--</span><span style="color: #008000;"> radio单选 </span><span style="color: #008000;">--></span> <span style="color: #008080;">13</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">input </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="sex"</span><span style="color: #ff0000;"> type</span><span style="color: #0000ff;">="radio"</span><span style="color: #ff0000;"> value</span><span style="color: #0000ff;">="1"</span> <span style="color: #0000ff;">/></span><span style="color: #000000;">男 </span><span style="color: #008080;">14</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">input </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="sex"</span><span style="color: #ff0000;"> type</span><span style="color: #0000ff;">="radio"</span><span style="color: #ff0000;"> value</span><span style="color: #0000ff;">="2"</span><span style="color: #ff0000;"> checked</span><span style="color: #0000ff;">="checked"</span> <span style="color: #0000ff;">/></span><span style="color: #000000;">女 </span><span style="color: #008080;">15</span> <span style="color: #008000;"><!--</span><span style="color: #008000;"> checkbox多选 </span><span style="color: #008000;">--></span> <span style="color: #008080;">16</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">input </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="skill"</span><span style="color: #ff0000;"> type</span><span style="color: #0000ff;">="checkbox"</span><span style="color: #ff0000;"> value</span><span style="color: #0000ff;">="1"</span><span style="color: #ff0000;"> checked</span><span style="color: #0000ff;">="checked"</span> <span style="color: #0000ff;">/></span><span style="color: #000000;">PHP </span><span style="color: #008080;">17</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">input </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="skill"</span><span style="color: #ff0000;"> type</span><span style="color: #0000ff;">="checkbox"</span><span style="color: #ff0000;"> value</span><span style="color: #0000ff;">="2"</span> <span style="color: #0000ff;">/></span><span style="color: #000000;">前端 </span><span style="color: #008080;">18</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">input </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="skill"</span><span style="color: #ff0000;"> type</span><span style="color: #0000ff;">="checkbox"</span><span style="color: #ff0000;"> value</span><span style="color: #0000ff;">="2"</span> <span style="color: #0000ff;">/></span>数据库
登入後複製注：checked=”checked”可以简写成checked
-
label标签为input元素定义标注，如果您点击label元素文本，就会触发此input控件。
-
textarea标签，设置文本区内的可见行数和宽度
禁止拉伸属性：style="resize:none"
-
<span style="color: #0000ff;"><</span><span style="color: #800000;">textarea </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="content"</span><span style="color: #ff0000;"> cols</span><span style="color: #0000ff;">="30"</span><span style="color: #ff0000;"> rows</span><span style="color: #0000ff;">="10"</span><span style="color: #0000ff;">></span>大段文本输入框<span style="color: #0000ff;"></</span><span style="color: #800000;">textarea</span><span style="color: #0000ff;">></span>
登入後複製 - button标签定义一个按钮
<span style="color: #008080;">1</span> <span style="color: #008000;"><!--</span><span style="color: #008000;"> 提交按钮 </span><span style="color: #008000;">--></span> <span style="color: #008080;">2</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">button </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="submit"</span><span style="color: #ff0000;"> value</span><span style="color: #0000ff;">="提交"</span><span style="color: #0000ff;">></span>提交<span style="color: #0000ff;"></</span><span style="color: #800000;">button</span><span style="color: #0000ff;">></span> <span style="color: #008080;">3</span> <span style="color: #008000;"><!--</span><span style="color: #008000;"> 重置按钮 </span><span style="color: #008000;">--></span> <span style="color: #008080;">4</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">button </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="reset"</span><span style="color: #ff0000;"> value</span><span style="color: #0000ff;">="重置"</span><span style="color: #0000ff;">></span>重置<span style="color: #0000ff;"></</span><span style="color: #800000;">button</span><span style="color: #0000ff;">></span>
登入後複製 - select标签和option标签下拉列表
<span style="color: #008080;"> 1</span> <span style="color: #008000;"><!--</span><span style="color: #008000;"> 单选菜单列表框 </span><span style="color: #008000;">--></span> <span style="color: #008080;"> 2</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">select </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="user"</span><span style="color: #0000ff;">></span> <span style="color: #008080;"> 3</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">option </span><span style="color: #ff0000;">value</span><span style="color: #0000ff;">="1"</span><span style="color: #0000ff;">></span>ray<span style="color: #0000ff;"></</span><span style="color: #800000;">option</span><span style="color: #0000ff;">></span> <span style="color: #008080;"> 4</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">option </span><span style="color: #ff0000;">value</span><span style="color: #0000ff;">="2"</span><span style="color: #ff0000;"> selected</span><span style="color: #0000ff;">="selected"</span><span style="color: #0000ff;">></span>raykaeso<span style="color: #0000ff;"></</span><span style="color: #800000;">option</span><span style="color: #0000ff;">></span> <span style="color: #008080;"> 5</span> <span style="color: #0000ff;"></</span><span style="color: #800000;">select</span><span style="color: #0000ff;">></span> <span style="color: #008080;"> 6</span> <span style="color: #008000;"><!--</span><span style="color: #008000;"> 多选列表下拉框，shift加鼠标单击，可以连续选择多个选择，CTRL+鼠标点击，可以点击多个。</span><span style="color: #008000;">--></span> <span style="color: #008080;"> 7</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">select </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="user"</span><span style="color: #ff0000;"> size</span><span style="color: #0000ff;">="10"</span><span style="color: #ff0000;"> multiple</span><span style="color: #0000ff;">="multiple"</span><span style="color: #0000ff;">></span> <span style="color: #008080;"> 8</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">option </span><span style="color: #ff0000;">value</span><span style="color: #0000ff;">="1"</span><span style="color: #0000ff;">></span>雷雪松<span style="color: #0000ff;"></</span><span style="color: #800000;">option</span><span style="color: #0000ff;">></span> <span style="color: #008080;"> 9</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">option </span><span style="color: #ff0000;">value</span><span style="color: #0000ff;">="2"</span><span style="color: #ff0000;"> selected</span><span style="color: #0000ff;">="selected"</span><span style="color: #0000ff;">></span>ray<span style="color: #0000ff;"></</span><span style="color: #800000;">option</span><span style="color: #0000ff;">></span> <span style="color: #008080;">10</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">option </span><span style="color: #ff0000;">value</span><span style="color: #0000ff;">="3"</span><span style="color: #0000ff;">></span>raykaeso<span style="color: #0000ff;"></</span><span style="color: #800000;">option</span><span style="color: #0000ff;">></span> <span style="color: #008080;">11</span> <span style="color: #0000ff;"></</span><span style="color: #800000;">select</span><span style="color: #0000ff;">></span>
登入後複製註: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
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
<🎜>：種植花園 - 完整的突變指南3 週前 By DDD<🎜>：泡泡膠模擬器無窮大 - 如何獲取和使用皇家鑰匙3 週前 By 尊渡假赌尊渡假赌尊渡假赌如何修復KB5055612無法在Windows 10中安裝？3 週前 By DDD北端：融合系統，解釋3 週前 By 尊渡假赌尊渡假赌尊渡假赌Mandragora：巫婆樹的耳語 - 如何解鎖抓鉤3 週前 By 尊渡假赌尊渡假赌尊渡假赌
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
See all articles
了解HTML，CSS和JavaScript：初學者指南
Apr 12, 2025 am 12:02 AM
WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。
HTML：結構，CSS：樣式，JavaScript：行為
Apr 18, 2025 am 12:09 AM
HTML、CSS和JavaScript在Web開發中的作用分別是：1.HTML定義網頁結構，2.CSS控製網頁樣式，3.JavaScript添加動態行為。它們共同構建了現代網站的框架、美觀和交互性。
HTML，CSS和JavaScript的未來：網絡開發趨勢
Apr 19, 2025 am 12:02 AM
HTML的未來趨勢是語義化和Web組件，CSS的未來趨勢是CSS-in-JS和CSSHoudini，JavaScript的未來趨勢是WebAssembly和Serverless。 1.HTML的語義化提高可訪問性和SEO效果，Web組件提升開發效率但需注意瀏覽器兼容性。 2.CSS-in-JS增強樣式管理靈活性但可能增大文件體積，CSSHoudini允許直接操作CSS渲染。 3.WebAssembly優化瀏覽器應用性能但學習曲線陡，Serverless簡化開發但需優化冷啟動問題。
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 14, 2025 am 12:14 AM
HTML是構建網頁結構的基石。 1.HTML定義內容結構和語義，使用、、等標籤。 2.提供語義化標記，如、、等，提升SEO效果。 3.通過標籤實現用戶交互，需注意表單驗證。 4.使用、等高級元素結合JavaScript實現動態效果。 5.常見錯誤包括標籤未閉合和屬性值未加引號，需使用驗證工具。 6.優化策略包括減少HTTP請求、壓縮HTML、使用語義化標籤等。
HTML與CSS和JavaScript：比較Web技術
Apr 23, 2025 am 12:05 AM
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。
