本文详细介绍了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
-
- css
< 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
redio
男 女 保密男 女 保密
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
- ul.li
- ul.li
- ul.li
ol
- ol.li
- ol.li
- ol.li
dl
-
河北省
- 邯郸
- 石家庄 山西省
- 太原
- 平遥
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">李 （空格符）>（大于符）<（小于符）a>杰</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>2.
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">李 （空格符）>（大于符）<（小于符）a>杰</a>--> 28 </body> 29 </html>
3.
| HTML特殊字符编码大全：往网页中输入特殊字符，需在html代码中加入以&开头的字母组合或以&#开头的数字。下面就是以字母或数字表示的特殊符号大全。 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| HTML常用特殊字符：只要你认识了 HTML 标记，你便会知道特殊字符的用处。 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
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标签
- 图标， 空格 > > < <
- 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"
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
