zoukankan html css js c++ java

python之路-HTML初识

HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写，他是一种制作万维网页面标准语言（标记）。相当于定义统一的一套规则，大家都来遵守他，这样就可以让浏览器根据标记语言的规则去解释它。

浏览器负责将标签翻译成用户“看得懂”的格式，呈现给用户！(例：djangomoan模版引擎)

HTML文档

文档树

Doctype

Doctype告诉浏览器使用什么样的html或xhtml规范来解析html文档

有和无的区别

BackCompat：标准兼容模式未开启（或叫怪异模式[Quirks mode]、混杂模式）
CSS1Compat：标准兼容模式已开启（或叫严格模式[Standards mode/Strict mode]）

这个属性会被浏览器识别并使用，但是如果你的页面没有DOCTYPE的声明，那么compatMode默认就是BackCompat,这也就是恶魔的开始 -- 浏览器按照自己的方式解析渲染页面，那么，在不同的浏览器就会显示不同的样式。如果你的页面添加了那么，那么就等同于开启了标准模式，那么浏览器就得老老实实的按照W3C的标准解析渲染页面，这样一来，你的页面在所有的浏览器里显示的就都是一个样子了。

有，用什么？

Doctype告诉浏览器使用什么样的html或xhtml规范来解析html文档, dtd文件则包含了标记、attributes 、properties、约束规则。

Meta(metadata information)

提供有关页面的元信息，例：页面编码、刷新、跳转、针对搜索引擎和更新频度的描述和关键词

页面编码（告诉浏览器是什么编码）

< meta http-equiv=“content-type” content=“text/html;charset=utf-8”>

刷新和跳转

< meta http-equiv=“Refresh” Content=“30″>

< meta http-equiv=”Refresh“ Content=”5; Url=http://www.autohome.com.cn“ />

关键词

< meta name="keywords" content="星际2,星际老男孩,专访,F91,小色,JOY" >

描述

例如：cnblogs

X-UA-Compatible

微软的IE6是通过XP、Win2003等操作系统发布出来，作为占统治地位的桌面操作系统，也使得IE占据了通知地位，许多的网站开发的时候，就按照IE6的标准去开发，而IE6自身的标准也是微软公司内部定义的。到了IE7出来的时候，采用了微软公司内部标准以及部分W3C的标准，这个时候许多网站升级到IE7的时候，就比较痛苦，很多代码必须调整后，才能够正常的运行。而到了微软的IE8这个版本，基本上把微软内部自己定义的标准抛弃了，而全面的支持W3C的标准，由于基于对标准彻底的变化了，使得原先在早期IE8版本上能够访问的网站，在IE8中无法正常的访问，会出现一些排版错乱、文字重叠，显示不全等各种兼容性错误。

与任何早期浏览器版本相比，Internet Explorer 8 对行业标准提供了更加紧密的支持。因此，针对旧版本的浏览器设计的站点可能不会按预期显示。为了帮助减轻任何问题，Internet Explorer 8 引入了文档兼容性的概念，从而允许您指定站点所支持的 Internet Explorer 版本。文档兼容性在 Internet Explorer 8 中添加了新的模式；这些模式将告诉浏览器如何解释和呈现网站。如果您的站点在 Internet Explorer 8 中无法正确显示，则可以更新该站点以支持最新的 Web 标准（首选方式），也可以强制 Internet Explorer 8 按照在旧版本的浏览器中查看站点的方式来显示内容。通过使用 meta 元素将 X-UA-Compatible 标头添加到网页中，可以实现这一点。

当 Internet Explorer 8 遇到未包含 X-UA-Compatible 标头的网页时，它将使用指令来确定如何显示该网页。如果该指令丢失或未指定基于标准的文档类型，则 Internet Explorer 8 将以 IE5 模式（Quirks 模式）显示该网页。更多

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

Title

网页头部信息

Link

< link rel="stylesheet" type="text/css" href="css/common.css" >

icon

< link rel="shortcut icon" href="image/favicon.ico">

Style

在页面中写样式

例如： < style type="text/css" > .bb{ background-color: red; } < /style>

Script

引进文件

< script type="text/javascript" src="http://www.googletagservices.com/tag/js/gpt.js"> </script >

写js代码

< script type="text/javascript" > ... </script >

常用标签

标签一般分为两种：块级标签（有多少占多少）和行内标签(占一行)

a、span、select 等
div、h1、p 等

注意：特殊符号有时没法显示，比如>、<,如果想表达的话只能>、<,空格的表示方法： 

各种符号

http://www.cnblogs.com/web-d/archive/2010/04/16/1713298.html

div和span是最纯洁的标签，以后常用

p 和 br

p表示段落，默认段落之间是有间隔的！

br 是换行

a标签

< a href="http://www.autohome.com.cn"> </a>

1、target属性，_black表示在新的页面打开

2、锚

　　 <a href="#i1">第一章</a>          #是必须有的，#后的名字随便起，对应是名字要相符合。
        <a href="#i2">第二章</a>
        <a href="#i3">第三章</a>
        <div id="i1" style="height: 900px;"></div>
        <div id="i2" style="height: 900px;"></div>
        <div id="i3" style="height: 900px;"></div>

H 标签

H1

H2

H3

H4

H5

H6

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>李文强</title>
    </head>
    <body>
        <div><label for="user">用户名：</label><input id="user" type="text"/></div>    <!--label标签就是为了获取焦点，如果在input中定义了id，并且label中有指明，就会聚焦。-->
        <div>密码：<input type="password"/></div>
        <div>邮箱：<input type="email"/></div>
        <div>性别：
        <div>男 <input type="radio" name="ge"/></div>     <!--单选的话，就要通过name做互斥-->
        <div>女 <input type="radio" name="ge"/></div>
        </div>
        <div>爱好：男<input type="checkbox"/> 女<input type="checkbox"/> 篮球<input type="checkbox"/></div>  <!--多选-->
        <div>
            上传：<input type="file" />
        </div>
        <div>
            城市：
            <select>                                    <!--单选-->
                <option>上海</option>
                <option>北京</option>
                <option>内蒙古</option>
                <option>包头</option>
            </select>
            <select multiple size="10">  <!--多选--,size表示显示的个数-->
                <optgroup label="河北">   <!--分组-->
                    <option>石家庄</option>
                     <option>沙河</option>
                </optgroup>
                <option>上海</option>
                <option>北京</option>
                <option>内蒙古</option>
                <option>包头</option>
            </select>
        </div>
        <div>
            简介：
            <textarea></textarea>
        </div>
    </body>
</html>

input标签中，text属性如果写成disabled时，表示不可编辑<input / type='text' disabled>

将鼠标标志变为小手：

cursor：pointer

select 标签

Checkbox

password

button

file

提交文件时： enctype='multipart/form-data' method='POST'

textarea

label

姓名：婚否：姓名：婚否：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>李文强</title>
    </head>
    <body style="margin: 0">    <!--无边框-->
        <div style="height: 48px;background-color: #5e4b7c;"></div>
        <div>
            <form action="http://www.baidu.com" method="POST" enctype="multipart/form-data">      <!--包裹，将要提交的东西包裹起来，action代表动作，将内容提交到某个地方,method制定提交方式,enctype是专门用来提交文件时用的-->
            <h2>用户登录</h2>
             <input type="file" name="upload"/>
            <p>用户名：<input type="text" name="username"/></p>    <!--必须以特定的格式提交，此处是以字典的形式提交的，所以此处必须加name-->
            <p>密码：<input type="password" name="pwd"/></p>
            <input type="button" value="提交"/>     <!--按钮，显示，无特殊功能-->
            <input type="submit" value="提交"/>
            <input type="reset" value="重置"/>
            </form>
        </div>
        <div>性别：
        <div>男 <input type="radio" name="ge" value="0"/></div>     <!--单选的话，就要通过name做互斥，通过name和value做字典对应-->
        <div>女 <input type="radio" name="ge" value="1"/></div>
        </div>
        <div>爱好：男<input type="checkbox" name="hobby" value="11"/>
                   女<input type="checkbox" name="hobby" value="22"/>
                   篮球<input type="checkbox" name="hobby" value="33"/></div>  <!--多选,此时提交时hobby就是对应的列表-->
        <div>
            城市：
            <select name="city1">                                    <!--单选-->
                <option value="88">上海</option>
                <option value="99">北京</option>
                <option value="77">内蒙古</option>
                <option value="66">包头</option>
            </select>
        </div>
        <div>
            城市：
            <select name="city2">                                    <!--单选-->
                <option value="88">上海</option>
                <option value="99">北京</option>
                <option value="77">内蒙古</option>
                <option value="66">包头</option>
            </select>
        </div>
        <textarea name="qqqq"></textarea>
    </body>
</html>

标签默认值得书写

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>李文强</title>
    </head>
    <body style="margin: 0">    <!--无边框-->
        <div style="height: 48px;background-color: #5e4b7c;"></div>
        <div>
            <form action="http://www.baidu.com" method="POST" enctype="multipart/form-data">      <!--包裹，将要提交的东西包裹起来，action代表动作，将内容提交到某个地方,method制定提交方式,enctype是专门用来提交文件时用的-->
            <h2>用户登录</h2>
             <input type="file" name="upload"/>
            <p>用户名：<input type="text" name="username" placeholder="请输入用户名"/></p>    <!--必须以特定的格式提交，此处是以字典的形式提交的，所以此处必须加name-->
            <p>密码：<input type="password" name="pwd"/></p>
            <input type="button" value="提交"/>     <!--按钮，显示，无特殊功能-->
            <input type="submit" value="提交"/>
            <input type="reset" value="重置"/>
            </form>
        </div>
        <div>性别：
        <div>男 <input type="radio" name="ge" value="0"  checked="checked"/></div>     <!--单选的话，就要通过name做互斥，通过name和value做字典对应-->
        <div>女 <input type="radio" name="ge" value="1"/></div>
        </div>
        <div>爱好：男<input type="checkbox" name="hobby" value="11"/>
                   女<input type="checkbox" name="hobby" value="22"/>
                   篮球<input type="checkbox" name="hobby" value="33"/></div>  <!--多选,此时提交时hobby就是对应的列表-->
        <div>
            城市：
            <select name="city1">                                    <!--单选-->
                <option value="88" selected="selected">上海</option>
                <option value="99">北京</option>
                <option value="77">内蒙古</option>
                <option value="66">包头</option>
            </select>
        </div>
        <div>
            城市：
            <select name="city2" multiple>                                    <!--单选-->
                <option value="88" selected="selected">上海</option>
                <option value="99" selected="selected">北京</option>
                <option value="77">内蒙古</option>
                <option value="66">包头</option>
            </select>
        </div>
        <textarea name="qqqq"></textarea>
    </body>
</html>

input中也可以写入value=“”

ul ol dl

ul.li
ul.li
ul.li

ol.li
ol.li
ol.li

河北省: 邯郸; 石家庄
山西省: 太原; 平遥

table

1	2	3
1	2	3
1	2	3

1
1	2	3
1	2	3
1	2	3
1	2	3
1	3	3
	3	3
	3	3
3	3	3

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>李文强</title>
    </head>
    <body>
        <img src="image/1.png" alt="我是图片" title="把鼠标给我拿走">     <!--alt表示当图片不存在是显示的内容，title表示把鼠标放在图片上显示的内容-->
        <ul>            <!--ul表示出现点儿,ol表示序号-->
            <li>李文强</li>
            <li>何少川</li>
            <li>王腾</li>
        </ul>
        <ol>
            <li>李文强</li>
            <li>何少川</li>
            <li>王腾</li>
        </ol>
        <dl>
            <dt>liwenqiang</dt>    <!--dt表示标题，dd表示内容-->
            <dd>heshaochuan</dd>
        </dl>
        <table border="1">        <!--border为1表示加边框，thead表头，表头中可以用th代替td，这样字体可以加粗tr表示行，td表示列-->
            <thead>
                <tr>
                    <th>序号</th>
                    <th>用户名</th>
                    <th>密码</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td colspan="2">wangteng</td>    <!--colspan列合并，rowspan行合并-->

                </tr>
                <tr>
                    <td>2</td>
                    <td rowspan="2">liwenqiang</td>
                    <td>222222</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>333333</td>
                </tr>

            </tbody>
        </table>
    </body>
</html>

fieldset

用户名：

密码：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <fieldset>
            <legend>登录</legend>
            <p>用户名：</p>
            <p>密码</p>
        </fieldset>

    </body>
</html>

form 表单

文件:enctype='multipart/form-data' method='POST'

1.网页基本知识（标红的需牢记）

标签：html、head、body

属性写在标签括号内部,形式：<a 属性1 属性2> </a>。如：<a href="http://www.baidu.com" target="_blank"></a>

 1 <!DOCTYPE html>
 2 <!-- 类似html这种格式,就称为标签，html标签 ：<html>fasdfasdf</html>
 3 # 标签内部的属性-->
 4 <html lang="en">  <!--# html标签开始，lang="en"叫做标签的属性-->
 5 <head>  <!-- 头部--head标签包括一下主要标签：meta、title、link、style、script-->
 6     <meta charset="UTF-8">  <!--设置网页编码，meta是自闭合标签，就是不需要/meta -->
 7     <!--<meta http-equiv="Refresh" Content="3">，设置页面每3秒自动刷新-->
 8     <!--<meta http-equiv="Refresh" Content="3;Url=http://www.autohome.com.cn">设置页面每3秒自动跳转-->
 9     <meta name="keywords" content="汽车,汽车之家,汽车网,汽车报价,俱乐部"/> <!-- 关键字，让搜索引擎搜索用的-->
10     <meta name="description" content="汽车之家是提供信息最快最全的中国汽车网站。"/><!-- 网站描述-->
11 
12     <link rel="shortcut icon" href="image/favicon.ico">  <!-- rel="shortcut icon"表示要设置图标，href是图标所在路径-->
13     <title>老男孩</title>
14 
15 </head>
16 <body>
17     <!--<a href="http://www.oldboyedu.com">李&nbsp;&nbsp;&nbsp;&nbsp;（空格符）&gt;（大于符）&lt;（小于符）a&gt;杰</a>-->
18 
19     <div></div>
20 
21     <a href="http://www.oldboyedu.com">老男孩</a>
22 </body>
23 </html>  #结束

[强制] 元素 `id` 必须保证页面唯一。

解释：

同一个页面中，不同的元素包含相同的 id，不符合 id 的属性含义。并且使用 document.getElementById 时可能导致难以追查的问题。

[建议] `id` 建议单词全字母小写，单词间以 `-` 分隔。同项目必须保持风格一致。

[建议] `id`、`class` 命名，在避免冲突并描述清楚的前提下尽可能短。

示例：

<!-- good -->
<div id="nav"></div>
<!-- bad -->
<div id="navigation"></div>

<!-- good -->
<p class="comment"></p>
<!-- bad -->
<p class="com"></p>

<!-- good -->
<span class="author"></span>
<!-- bad -->
<span class="red"></span>

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8" />
 5     <title>Title</title>
 6 </head>
 7 <body>
 8     <p>12asdfasdfasdfasdfa<br />sdfasdfasdfasdf3</p>  <!--p:段落  br：换行符-->
 9     <p>123</p>
10 
11     <h1>Alex</h1> <!--h1 到h6 ：设置标题，h1最大。h系列（字体加大加粗），p系列叫块标签（段落与段落之间有间距），一个块标签占一行-->
12     <h2>Alex</h2>
13     <h3>Alex</h3>
14     <h4>Alex</h4>
15     <h5>Alex</h5>
16     <h6>eric</h6>
17 
18     <span>hello</span>  <!-- span为行内标签或内联标签，span为白板，没有特性，行内标签不会换行-->
19     <span>hello</span>
20     <span>hello</span>
21     <span>hello</span>
22 
23     <div>1</div>   <!--div标签是块标签，没有任何属性，是白板，但是和其他块标签一样会换行。标签之间可以嵌套 -->
24     <div>2</div>
25     <div>3</div>
26 
27     <!--<a href="http://www.oldboyedu.com">李&nbsp;&nbsp;&nbsp;&nbsp;（空格符）&gt;（大于符）&lt;（小于符）a&gt;杰</a>-->
28 </body>
29 </html>

HTML特殊字符编码大全：往网页中输入特殊字符，需在html代码中加入以&开头的字母组合或以&#开头的数字。下面就是以字母或数字表示的特殊符号大全。



´	´	©	©	>	>	µ	µ	®	®
&	&	°	°	¡	¡			»	»
¦	¦	÷	÷	¿	¿	¬	¬	§	§
•	•	½	½	«	«	¶	¶	¨	¨
¸	¸	¼	¼	<	<	±	±	×	×
¢	¢	¾	¾	¯	¯	“	"	™	™

€	€	£	£	¥	¥

„	&bdquo;	…	…	·	·	›	&rsaquo;	ª	ª
ˆ	&circ;	“	“	—	—	’	’	º	º
†	&dagger;	‹	&lsaquo;	–	–	‚	&sbquo;	”	”
‡	&Dagger;	‘	‘	‰	&permil;			˜	&tilde;

≈	≈	⁄	&frasl;	←	←	∂	∂	♠	&spades;
∩	∩	≥	≥	≤	≤	″	″	∑	∑
♣	&clubs;	↔	↔	◊	&loz;	′	′	↑	↑
↓	↓	♥	&hearts;	−	−	∏	∏	‍	&zwj;
♦	&diams;	∞	∞	≠	≠	√	√	‌	&zwnj;
≡	&equiv;	∫	∫	‾	&oline;	→	→

α	α	η	η	μ	μ	π	π	θ	θ
β	β	γ	γ	ν	ν	ψ	ψ	υ	υ
χ	χ	ι	ι	ω	ω	ρ	ρ	ξ	ξ
δ	δ	κ	κ	ο	ο	σ	σ	ζ	ζ
ε	ε	λ	λ	φ	φ	τ	τ

Α	Α	Η	Η	Μ	Μ	Π	Π	Θ	Θ
Β	Β	Γ	Γ	Ν	Ν	Ψ	Ψ	Υ	Υ
Χ	Χ	Ι	Ι	Ω	Ω	Ρ	Ρ	Ξ	Ξ
Δ	Δ	Κ	Κ	Ο	Ο	Σ	Σ	Ζ	Ζ
Ε	Ε	Λ	Λ	Φ	Φ	Τ	Τ	ς	&sigmaf;

HTML常用特殊字符：只要你认识了 HTML 标记，你便会知道特殊字符的用处。

HTML 原代码	显示结果	描述
<	<	小于号或显示标记
>	>	大于号或显示标记
&	&	可用于显示其它特殊字符
"	“	引号
®	®	已注册
©	©	版权
™	™	商标
&ensp;		半个空白位
&emsp;		一个空白位
		不断行的空白

1 html标题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>
<h4>h4</h4>
<h5>h5</h5>
<h6>h6</h6>

</body>
</html>

2 html水平线 <hr/>

按 Ctrl+C 复制代码

3 html注释

注释并不会显示在网页上

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h6>h6</h6><!-- hello world -->
<hr/>
</body>
</html>

注释演示代码

4 html段落<p>以及段落换行<br/>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p>hello world</p>
<p>hello          world</p>
<hr/>
</body>
</html>

段落演示代码

当显示页面时，浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。需要注意的是，HTML 代码中的所有连续的空行（换行）也被显示为一个空格。

段落换行使用<br/>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p>hello world</p>
<p>hello     <br/>     world</p>
<hr/>
</body>
</html>

段落换行演示代码

5 html文本格式化

6 html超链接<a>

<a>比较重要的属性有两个，分别是href、target

href指定超链接地址

target指定打开方式

　　_blank 新页面打开

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p>hello world</p>
<a href="http://www.baidu.com">百度</a>
<hr/>
</body>
</html>

超链接演示代码

另提供了较为全面的<a>标签使用方法链接：http://blog.csdn.net/ao_xiaoqiang/article/details/44345565

7 html的图像<img>

使用格式：<img src="url">

　　alt 定义当图片无法加载时，显示什么信息

　　width 定义宽度，单位可以为像素也可以为百分比

　　height 定义高度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p>hello world</p>
<a href="http://www.baidu.com"><img src="l.jpg"/></a>
<hr/>
</body>
</html>

View Code

8 html的表格<table>

表格由<table>来定义，每行<tr> 有许多单元格<td>。表头可以使用<th>

<table>标签属性：

　　border 定义边框

在<table>中可以嵌入<th> <tr> <td>等标签

　　<tr> 定义行

　　<th> 定义表头

　　　　colspan 定义表头单元格可以横跨的列数。

　　　　rowspan 定义表头单元格横跨的行数

　　　　heardes 定义与表头单元格相关联的一个或者多个单元格。(html5新增)　　　

　　<td> 定义单元格

　　　　colspan 定义单元格可以横跨的列数。

　　　　rowspan 定义单元格横跨的行数

　　　　heardes 定义与单元格相关联的一个或者多个单元格。(html5新增)　　

按 Ctrl+C 复制代码

在浏览器中显示如下：

另外，若某个单元格为空，浏览器可能无法显示出这个单元格的边框。为了防止这种情况，可以在该单元格加一个空格占位符&nbsp。

9 html列表<ul> <ol>

列表分为

　　无序列表<ul>

　　有序列表<ol>

列表项内部可以使用段落、换行符、图片、链接以及其他列表等等

<ul>
    <li>male</li>
    <li>female</li>
</ul>
<hr/>
<ol>
    <li>male</li>
    <li>female</li>
</ol>

浏览器显示为：

10 html表单<form>

表单是一个包含表单元素的区域。

表单元素是允许用户在表单中（比如：文本域、下拉列表、单选框、复选框等等）输入信息的元素

<form>中的属性：

　　action：后面加url 指定当提交表单时向何处发送表单数据

　　method：get/post两个值，get为明文 post为加密

　　name：指定表单的名称

　　target：_blanket _self _parent _top 指定网页打开方式

　　<from>标签中较为常用的标签有<input> <select> <label> <button>

　　<fieldset> 标签可以将表单内的相关元素分组。会在相关表单元素周围绘制边框。

　　　　name 规定fieldset的名称

　　　　form 值：form_id 规定fieldset所属的表单

　　　　<legend> 定义了 <fieldset> 元素的标题。

　　<input>中最为常用的几个属性:

　　　　form 后面跟所属form的id。规定所属的form

　　　　required 值：required 规定必需在提交表单之前填写输入字段。

　　　　disabled 值： disabled disabled 属性规定应该禁用的 <input> 元素。

　　　　type:决定输入类型

　　　　　　text 文本域

　　　　　　radio 单选按钮

　　　　　　checkbox 复选框

　　　　　　submit 提交按钮

　　　　　　password 密码输入

　　　　　　reset 重置

　　　　　　color 设置拾色器 html5

　　　　　　number 定义用于输入数字的字段（您可以设置可接受数字的限制）

　　　　　　range 定义用于精确值不重要的输入数字的控件（比如 slider 控件）。您也可以设置可接受数字的限制

　　　　name:input元素的名称

　　　　value：input元素的值

　　　　size：输入字段的宽度

　　　　pattern 规定用于验证 <input> 元素的值的正则表达式。pattern 属性适用于下面的 input 类型：text、search、url、tel、email 和 password

　　　　list 值为datalist的id 该属性引用 <datalist> 元素，其中包含 <input> 元素的预定义选项。

　　　　autofocus 该属性是一个 boolean 属性，让页面载入后，input自动获得焦点

　　　　<datalist> html5中的新特性标签规定了 <input> 元素可能的选项列表。<datalist> 标签被用来在为 <input> 元素提供"自动完成"的特性。

　　　　　　用户能看到一个下拉列表，里边的选项是预先定义好的，将作为用户的输入数据。

　　　　　　与<option>标签配合使用

　　<button> 定义一个点击按钮

　　　　form 所属的form表单

　　　　name button名称

　　　　type　　

　　　　　　button 该按钮是可点击的按钮

　　　　　　reset 该按钮是重置按钮

　　　　　　submit 该按钮是提交按钮

　　<label>标签为 input 元素定义标注（标记）

　　　　label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。

　　　　就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上

　　　　for 值为某个元素的id 规定 label 与哪个表单元素绑定。

　　　　form form_id

　　　　name 规定textarea的名称

　　　　form form_id 规定从属的表单

　　　　cols　规定可见列数

　　　　rows 规定可见行数

　　<select>使用<option>标签定义下拉列表的可用选项.常见的属性：

　　　　name：指定select名称

　　　　multiple：规定可选择多个选项

　　　　<optgroup> 用于把相关的选项组合在一起。

　　　　　　label 为选项组规定描述。

　　　　<option> 常见的属性：

　　　　　　value：指定送往服务器的选项值

　　　　　　selected：只有一个值--selected 默认选项

　　<keygen> 定义了表单的密钥对生成器字段

　　　　form 所属的表单名称

　　　　name 名称

　　　　keytype 使用的加密算法

　　　　　　rsa 默认的算法

　　　　　　dsa

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form name="biaoge" action="/return/" method="get">
    请选择语言:
    <br/><br/><input type="radio" name="language" id="jtzw" value="chinese"/><label for="jtzw">简体中文</label><br/><br/>
    <input type="radio" name="language" value="english" id="eng"/><label for="eng">English</label><br/><br/>
    请选择熟悉的编程语言:<br/><br/>
    <fieldset>
        <legend>编程语言</legend>
            <input type="checkbox" name="python" />python
            <input type="checkbox" name="c" />c
            <input type="checkbox" name="swift" />swift<br/><br/>
    </fieldset><br/>

    请选择地区：
    <select name="district">
        <optgroup label="China">
            <option value="shandong">山东</option>
            <option value="zhejiang" selected="selected">浙江</option>
            <option value="guangdong">广东</option>
        </optgroup>
        <optgroup label="USA">
            <option value="ny">纽约</option>
            <option value="lsj">洛杉矶</option>
        </optgroup>
    </select><br/><br/>
    请选择颜色:<input type="color"><br/><br/>
    name:<input type="text" name="name" value="slyoyo"/>
    password:<input type="password" name="passwd" value="hahaha"/>
    <input type="submit"  value="login"/><br/><br/>
    系统：<input list="xuanze" type="text">
    <datalist id="xuanze">
        <option value="windows">Windows</option>
        <option value="linux">Linux</option>
    </datalist>
</form>

</body>
</html>

演示实例

浏览器显示：

作业

要求：第一个页面：协议，选择【我同意】进入注册页面第二个页面：用户名、密码、重复密码、省份（下拉菜单）、性别、爱好（多选），使用label来修饰。

对于路径：

/ 网站根目录
./ 当前目录(相当于什么也不加)
../ 父母路
../../ 父目录的父目录

查看全文

相关阅读:
SQL Server索引进阶：第十二级，创建，修改，删除
SQL Server索引进阶第十一篇：索引碎片分析与解决
Object.create()和new object()和{}的区别
vue 前后端分离nginx部署
实现组件props双向绑定解决方案
prop不同数据类型设置默认值
vue + element ui 阻止表单输入框回车刷新页面
Vue.js中 watch(深度监听)的最易懂的解释
vue-resource和axios区别
JS中 reduce() 的用法

原文地址：https://www.cnblogs.com/l-w-q/p/6291695.html