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;		一个空白位
		不断行的空白

4.创建一个简单的前后台交互

前端：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8     <form action="http://192.168.1.31:8888/index" method="POST">  <!--form表单标签，提交方式有GET和POST两种。GET：将输入的内容放到url上给后台，在url上能看到，POST：将输入的内容放到body里给后台。
                                                                      action指定后台程序的位置，'index'是后台程序定义的-->
 9         <input type="text" name="user" />   <!--输入框-->
10         <input type="text" name="email"/>    <!--输入框-->
11         <input type="password" name="pwd"/>   <!--密码专用输入框-->
12         <!--{'user': '用户输入的用户','email': '用户输入的'email, 'pwd': '用户输入的密码' }给后台提交的数据是字典形式-->
13         <input type="button"  value="登录1"/>
14         <input type="submit"  value="登录2"/>  <!--submit按钮 提交表单数据-->
15     </form>
16     <br/>
17     <form>
18         <input type="text" />
19         <input type="password" />
20         <input type="button"  value="登录1"/>
21         <input type="submit"  value="登录2"/>
22     </form>
23 </body>
24 </html>

后台程序：

 1 import tornado.ioloop
 2 import tornado.web
 3 
 4 
 5 # pip3 install tornado
 6 
 7 class MainHandler(tornado.web.RequestHandler):
 8     def get(self):   #前台以get方式提交数据，执行get函数
 9         print(111)
10         u = self.get_argument('user')  #获取user，跟前台form里定义的名字要一样
11         e = self.get_argument('email') #获取email，跟前台form里定义的名字要一样
12         p = self.get_argument('pwd')  #获取pwd，跟前台form里定义的名字要一样
13 
14         if u == 'wt' and p == '1' and e == 'alex@126.com':
15             self.write("OK")  # self.write会将ok直接打印在网页上
16         else:
17             self.write("滚")
18 
19     def post(self, *args, **kwargs):  #前台以POST方式提交数据，执行post函数
20         u = self.get_argument('user', None)
21         e = self.get_argument('email', None)
22         p = self.get_argument('pwd', None)
23         print(u, e, p)
24         self.write('正在重启，请稍后')
25 
26 
27 application = tornado.web.Application([
28     (r"/index", MainHandler),  #这里定义了访问路径为index，所以前端访问后台时也要指定为index
29 ])
30 if __name__ == "__main__":
31     application.listen(8888)
32     tornado.ioloop.IOLoop.instance().start()

5.input属性

相关用法介绍：

body标签
         - 图标，  &nbsp; 空格         &gt; >        &lt;  <
         - p标签，段落
         - br，换行
         ======== 小总结  =====
            所有标签分为：
                块级标签： div（白板），H系列（加大加粗），p标签（段落和段落之间有间距）
                行内标签： span（白板）
            标签之间可以嵌套
            标签存在的意义，css操作，js操作
            ps:chorme审查元素的使用
                - 定位
                - 查看样式
        - h系列
        - div
        - span
        - input系列 + form标签  input系列都可以给后台送数据，只有一下三种可以跟后台送数据
            input type='text'     - name属性，value="赵凡" （type为字典的key，value=为在按钮上显示的字）  送给后台的数据形式：name:value
            input type='password' - name属性，value="赵凡" （value=为在按钮上显示的字）
            input type='submit'   - value='提交'（value=为在按钮上显示的字） 提交按钮，表单
            input type='button'   - value='登录' （value=为在按钮上显示的字）按钮
            
            <input type='radio' name='gender' value='1'(不同的框可以弄不同的值，作为字典的value)/>    - 单选框 value，checked="checked"（checked表示默认选中），name属性（name相同则互斥）
            input type='checkbox' - 复选框 value, checked="checked"，name属性（批量获取数据）
            input type='file'     - 依赖form表单的一个属性 enctype="multipart/form-data"，有了转让个人属性，文件才会一点一点上传
            用法：<input type='file' enctype="multipart/form-data">
            input type='rest'     - 重置，将输入框中的内容清空，并且不会将数据发送给后台，也就是网页刚打开时的状态
    
            <textarea name='task'>默认值value</textarea>  - name属性  textarea可以跟后台送数据  送给后台的数据形式：name:value
            select标签 下拉框  select可以跟后台送数据  送给后台的数据形式：name:value  - name,内部option value, 提交到后台，size，multiple 2.设置两个div的上下边距 <div style="margin-bottom:10px;">设下边距为10像素</div>;

<div style="margin-top:10px;">设上边距为10像素</div>;

此外，还可以用padding(内边距)来定义，padding-top:10px;　padding-bottom:10px;　定义上（下）边距为10px； 此法的好处是，当有浮动存在的时候，可以解决ie6的双边距问题。 3.设置两个div的左右边距  <div style="margin-left:10px;">设左边距为10像素</div>;

<div style="margin-right:10px;">设右边距为10像素</div>;

例子：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8     <form enctype="multipart/form-data">  <!--设置可以上传文件，不加enctype属性，则不能上传文件-->
 9         <div>
10 
11             <textarea name="meno" >asdfasdf</textarea>  #提交给后台的数据是：meno=asdfasdf
12 
13             <select name="city" size="10" multiple="multiple">  #size框的高度，默认为1,；multiple可以多选，按住crtl
14                 <option value="1">北京</option> #提交给后台的数据是city=1
15                 <option value="2">上海</option>
16                 <option value="3" selected="selected">南京</option>  #默认选中南京
17                 <option value="4">成都</option>
18             </select>
19 
20 
21             <input type="text" name="user" />
22             <p>请选择性别： 单选框</p>
23             男：<input type="radio" name="gender" value="1"  /> <!--有3个性别，（name相同则互斥），name是返回给后台字典的key，value是返回给后台字典的值-->
24             女：<input type="radio" name="gender" value="2" checked="checked"/>  #提交给后台的数据是：name=2
25             Alex：<input type="radio" name="gender" value="3"/>
26             <p>爱好  复选框</p>
27             篮球：<input type="checkbox" name="favor"  value="1" />
28             足球：<input type="checkbox" name="favor"  value="2" checked="checked" />
29             皮球：<input type="checkbox" name="favor"  value="3" />
30             台球：<input type="checkbox" name="favor"  value="4" checked="checked"/>
31             网球：<input type="checkbox" name="favor"  value="5" />
32             <p>技能   复选框</p>
33             撩妹：<input type="checkbox" name="skill" checked="checked" />
34             写代码：<input type="checkbox" name="skill"/>
35             <p>上传文件</p>
36             <input type="file" name="fname"/>
37         </div>
38 
39 
40 
41 
42 
43         <input type="submit" value="提交" />
44         <input type="reset" value="重置" />
45     </form>
46 </body>
47 </html>

6.- a标签,做跳转之用，只有a标签可以做跳转

- 跳转 href='http://www.baidu.com'

- 锚 href='#某个标签的ID' 标签的ID在同一个网页中不允许重复

例子：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8     <a href="http://www.baidu.com" target="_blank">百度一下</a>  <!--做跳转，超链接-->
 9     <a href="#i1">第一章</a> <!--做锚点，必须以#开头，点一下锚点，就会跳转到相应id的div-->
10     <a href="#i2">第二章</a>
11     <a href="#i3">第三章</a>
12     <a href="#i4">第四章</a>
13 
14     <div id="i1" style="height:600px;">第一章的内容</div>   <!--给div指定id，id在同一个网页里不能重复-->
15     <div id="i2" style="height:600px;">第二章的内容</div>
16     <div id="i3" style="height:600px;">第三章的内容</div>
17     <div id="i4" style="height:600px;">第四章的内容</div>
18 </body>
19 </html>

7.图片列表

- img        src        alt        title - 列表        ul  点           li             ol  数字           li
       dl  列下边是详细内容           dt列明           dd详细内容

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8     <a href="http://www.oldboyedu.com">
 9         <img src="1.jpg" title="大美女" style="height: 200px;width: 200px;" alt="美女">
10     </a>
11          <!--用a标签将图片链接包裹起来，点一下图片就可以跳转到相应网站。图片链接格式：img src ='图片路径'，title=文字，style，alt=‘美女’（当图片加载不出来，就会显示alt的字）-->
12     <ul>     <!--列表，前边是点-->
13         <li>asdf</li>
14         <li>asdf</li>
15         <li>asdf</li>
16         <li>asdf</li>
17     </ul>
18 
19     <ol>    <!--列表，前边是有序数字-->
20         <li>asdf</li>
21         <li>asdf</li>
22         <li>asdf</li>
23         <li>asdf</li>
24     </ol>
25 
26     <dl>  <!--列表，dt：是列明，dt：详细内容-->
27         <dt>ttt</dt>
28         <dd>ddd</dd>
29         <dd>ddd</dd>
30         <dd>ddd</dd>
31     </dl>
32 </body>
33 </html>

8.表格：

- 表格      table 建表      thead  建表头           <tr> 一行           　　<th> sds</th>  一个表头格子 　　　　　　</tr>一行      tbody  建表身体           <tr> 一行           　　<td> sdsA</td>  一个格子A 　　　　　　　　<td> sdsB</td>  一个格子B，格子A和格子B横着排列 　　　　　　</tr>一行      colspan = '2'  合并2行      rowspan = '2'  和并2列

例子：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8 
 9 
10 <table border="1"> <!--创建表 border指定边框宽度，0为无边框 -->
11     <thead>  <!--创建表头  thead 包的是表头-->
12         <tr>   <!--tr表示一行 -->
13             <th>表头1列</th>  <!--th表示一列 -->
14             <th>表头2列</th>
15             <th>表头3列</th>
16             <th>
17             <a href="s2.html">查看详细</a> <!-- 加个a标签，使表格内的内容可以跳转 -->
18             <a href="#">修改</a>    <!-- #表示不可以跳转 -->
19             </th>
20         </tr>
21     </thead>
22     <tbody> <!--创建表身体 -->
23         <tr> <!-- 创建一行-->
24             <td>1</td> <!--创建一列 -->
25             <td colspan="3">2</td>  <!-- colspan="3":合并3个行单元格-->
26         </tr>
27         <tr>
28             <td rowspan="2">1</td>   <!--rowspan="2"：合并2个列单元格 -->
29             <td>1</td>
30             <td>2</td>
31         </tr>
32         <tr>
33             <td>1</td>
34             <td>1</td>
35             <td>1</td>
36         </tr>
37         <tr>
38             <td>1</td>
39             <td>1</td>
40             <td>1</td>
41             <td>1</td>
42         </tr>
43     </tbody>
44 </table>
45 
46 </body>
47 </html>

9.用一个边框将用户名、密码包裹起来

- label      用于点击文件，使得关联的标签获取光标      <label for="username">用户名：</label>      <input id="username" type="text" name="user" />  - fieldset      legend

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8 
 9 
10     <fieldset>  #设置一个边框
11         <legend>登录</legend>  <!-- 在边框上写字-->
12         <label for="username">用户名：</label>  <!-- 将框与文字关联起来，点击文字，框里就有光标  这里for与id的值得一样才能关联-->
13         <input id="username" type="text" name="user" />
14         <br />
15         <label for="pwd">密码：</label>
16         <input id="pwd" type="text" name="user" />
17     </fieldset>
18 </body>
19 </html>

10.css标签属性

CSS           在标签上设置style属性：                      height: 48px;           ...           编写css样式：          1. 标签的style属性           例子：           <div style="">                      </div>          2. 写在head里面 style标签中写样式              - id选择区                                        #i1{                             background-color: #2459a2;                             height: 48px;                        }                - class选择器 ******  最常用*************                     .名称{                         ...                         }                        在body中这样调用属性                      <标签 class='名称'> </标签>              - 标签选择器                      div{                          ...                         }                      所有div设置上此样式              - 层级选择器（空格） ******                     .c1 .c2 div{                              ...                                             }                         - 组合选择器（逗号） ******                      #c1,.c2,div{                              ...                                }              - 属性选择器 ******                     对选择到的标签再通过属性再进行一次筛选                    .c1[n='alex']{ width:100px; height:200px; }     PS:       - 优先级，标签上的style优先，然后按编写顺序，越靠近div的样式越优先，也就是就近原则

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         /*<!--在head-->style标签-->内设置样式属性，下边创建一个样式命名为‘ .c1’，其他div就可调用该样式-->*/
 8         .c1{
 9             background-color: #2459a2;
10             height: 10px;
11         }
12 
13         /*!*  #c2{  *!  类似于c1，但是在div中可以id=‘c2’*/
14             /*background-color: black;*/
15             /*color: white;*/
16         /*}*/
17 
18         span div{   /*将span下的div设置为以下属性 */
19             background-color: black;
20             color: white;
21         }
22 
23         /*  .c1 div{   将c1下的div设置为以下属性 */
24             /*background-color: black;*/
25             /*color: white;*/
26         /*}*/
27         .i1,.i2,.i3{
28              /*将i1，i2，i3全部设置为以下样式，.是对应div中的class；#i1，#i2，#i3对应id*/
29              background-color: black;
30             color: white;
31         }
32         .c3[n='alex']{ width:100px; height:200px; }  /*自定义属性选择器，命名为.c1，[括号内设置相应值，表示有相应值的div设置本属性]*/
33     </style>
34 </head>
35 <body>
36     <div class="c1">ff</div>  <!-- 调用上边的.c1样式-->
37         <div>kkkkk</div>
38     <div class="i1">ff</div>  <!-- 调用上边的.i1样式-->
39     <div class="i2">ff</div>
40     <div class="i3">2</div>
41     <input class="c3" type="text" n="alex"> <!--调用上边的自定义属性-->
42     <input class="c1" type="password">
43 </body>
44 </html>

11.一个div可以有多个属性

<div class="c1 c2 c3">ff</div>

12. 引用其他css文件的样式

例子：

写一个common.css，该css文件用于让其他文件引用

1 .c2{
2     font-size: 58px;
3     color: black;
4 }
5 
6 .c1{
7     background-color: red;
8     color: white;
9 }

再写一个html，来引用这个css

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <link rel="stylesheet" href="css/commons.css" />  <!--commons.css的相对路径-->
 7 </head>
 8 <body>
 9     <div class="c1 c2" style="color: pink">asdf</div>
10     <div class="c1 c2" style="color: pink">asdf</div>
11 </body>
12 </html>

13.字体属性

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8     <div style="border: 1px solid red;">   <!-- 设置边框样式：宽度、样式（虚线还是实线）、颜色-->
 9         asdfasdf
10     </div>
11     <div style="     <!--设置字体属性-->
12     height: 48px;    <!--字体高度-->
13     width:80%;        <!--字体宽度-->
14     border: 1px solid red; <!--边框属性-->
15     font-size: 16px;   <!--字体大小-->
16     text-align: center;<!--字体水平居中-->
17     line-height: 48px; <!--字体上下居中-->
18     font-weight: bold; <!--字体加粗-->
19     ">asdf</div>      <!--文字-->
20 </body>
21 </html>

14.让div等块级标签堆叠在一行，用float

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8     <div style="width: 20%;float: left">1</div>
 9     <div style="width: 20%;float: left">2</div>  <!--如果这个div的宽度大于80%，则不会和上一个堆叠在一起，因为和上一个相加大于100%，就会另起一行-->  
10 </body>
11 </html>

15.改变行内标签与块级标签属性 display

display
            ******
            行内标签：无法设置高度，宽度，边距(padding  margin)
            块级标签：可以设置高度，宽度，边距(padding  margin)
            display: none; -- 让标签消失
            display: inline;  将块标签变成行内标签
            display: block;   将行内标签变成块标签
            display: inline-block;  既具有行内标签属性,默认自己有多少占多少
                                    又具有块标签属性，可以设置高度，宽度，padding  margin

例子：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8     <!--<div style="display: inline;">asdf</div>     display: inline;将块标签变成行内标签-->  
 9     <!--<span style="display: block;">asdf</span>      display: block;将行内标签变成块标签-->
10     <span style="display:inline-block;height: 50px;width: 70px;">Alex</span> <!-- 让行内标签既具有块标签属性又有行内标签属性-->
11     <a style="">Eric</a>
12 </body>
13 </html>

16.综合示例：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>     /*<!-- 定义一个样式--> */
 7         .pg-header{
 8             height: 38px;
 9             background-color: #dddddd;
10             line-height: 38px;
11         }
12     </style>
13 </head>
14 <body style="margin: 0">   <!--将body与屏幕上沿的缝隙去掉-->
15     <div class="pg-header"> <!--应用自定义样式-->
16         <div style="width: 980px;margin: 0 auto;">
17             <div style="float: left;">收藏本站</div>  <!--让子div飘起来，可以堆叠在一行-->
18             <div style="float: right;">
19                 <a>登录</a>
20                 <a>注册</a>
21             </div>
22             <div style="clear: both"></div>
23         </div>
24     </div>
25     <div>
26         <div style="width: 980px;margin: 0 auto;">  <!--将本div设置为980像素，将其设置为外边框为0，左右自动居中-->
27             <div style="float: left">
28                 Logo
29             </div>
30             <div style="float: right">
31                 <div style="height: 50px;width: 100px;">>购物车</div>
32             </div>
33             <div style="clear: both"></div>  <!--这里必须设置一下clear，因为上边俩div设置为float浮动，否则下边的红色div会和上边的这俩重叠-->
34         </div>
35     </div>
36     <div style="">
37          <div style="width: 980px;margin: 0 auto;">
38              asdfsdf
39          </div>
40     </div>
41     <div style="width: 300px;border: 1px solid red;">
42         <div style="width: 96px;height:30px;border: 1px solid green;float: left;"></div>
43         <div style="width: 96px;height:30px;border: 1px solid green;float: left;"></div>
44         <div style="clear: both;"></div>  <!--当子div飘起来后，父div就管不住子div了，用clear来约束子div-->
45     </div>
46 </body>
47 </html>

html常用标签的使用方法

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来修饰。

对于路径：

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

发表于 2017-02-10 15:23 my-soul 阅读(401) 评论(0) 编辑收藏举报

python之路-HTML初识

HTML文档

Doctype

有和无的区别

有，用什么？

Meta(metadata information)

Title

Link

Style

Script

常用标签

各种符号

p 和 br

a标签

H 标签

H1

H2

H3

H4

H5

H6

select 标签

Checkbox

redio

password

button

file

textarea

label

标签默认值得书写

ul ol dl

table

fieldset

form 表单

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

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

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

html常用标签的使用方法

作业

python之路-HTML初识

HTML文档

Doctype

有和无的区别

有，用什么？

Meta(metadata information)

Title

Link

Style

Script

常用标签

各种符号

p 和 br

a标签

H 标签

H1

H2

H3

H4

H5

H6

select 标签

Checkbox

redio

password

button

file

textarea

label

标签默认值得书写

ul ol dl

table

fieldset

form 表单

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

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

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

html常用标签的使用方法

作业

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

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

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