标签：
HTML
超级文本标记语言是标准通用标记语言下的一个应用，也是一种规范，一种标准，它通过标记符号来标记要显示的网页中的各个部分。网页文件本身 是一种文本文件，通过在文本文件中添加标记符，
可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）。浏览器按顺序阅读 网页文件，然后根据标记符解释和显示其标记的内容，对书写出错的标记将不指出其错误，
且不停止其解释执行过程，编制者只能通过显示效果来分析出错原因和出 错部位。但需要注意的是，对于不同的浏览器，对同一标记符可能会有不完全相同的解释，因而可能会有不同的显示效果.
基本组成：
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
<head>和</head>之间的内容，是元信息和网站的标题 元信息一般是不显示出来的,但是记录了你这个HTML文件的很多有用的信息
<body>和</body>之间的内容，是浏览器呈现出来的，用户看到的页面效果。也就是说这里是网页的主体。也就是body的身体之意
<html></html>是说明这个是一个网页。告诉浏览器这个网页的开始和结束。他包含了之后的两个元素。<head>和</head>|<body>和</body>
HTML文档
Doctype告诉浏览器使用什么样的html或xhtml规范来解析html文档
这个属性会被浏览器识别并使用，但是如果你的页面没有DOCTYPE的声明，那么compatMode默认就是BackCompat,这也就是恶魔的开始 -- 浏览器按照自己的方式解析渲染页面，那么，在不同的浏览器就会显示不同的样式。
如果你的页面添加了那么，那么就等同于开启了标准模式，那么浏览器就得老老 实实的按照W3C的标准解析渲染页面，这样一来，你的页面在所有的浏览器里显示的就都是一个样子了。看起来很牛逼的样子就加上吧。
HTML-HEAD
常用功能设置
页面编码，刷新，跳转，关键词，兼容性，title，icon，调用css
<!DOCTYPE html> <html lang="en"> <head> <!--页面编码--> <meta http-equiv="content-type" content="text/html;charset=UTF-8"> <!--刷新--> <meta http-equiv="Refresh" content="30" /> <!--刷新和跳转--> <meta http-equiv="Refresh" content="2; Url=http://www.baidu.com" /> <!--关键词--> <meta name="keywords" content="星际2，星际老男孩，星际老女孩"> <!--描述--> <meta name="description" content="博客园是一个面向开发者的知识分享社区。"> <!--兼容IE8之前版本--> <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> <!--页面title--> <title>测试页面</title> <!--图标--> <link rel="icon" href="favicon.ico"> <!--调用外部css--> <link rel="stylesheet" type="text/css" href="common.css"> <!--在页面中嵌入 class选择器--> <style type="text/css"> .cc{ color: red; font-size: 19px; } .dd{ color: purple; } </head> <body> </body> </html>
HTML-BODY
标签一般分为两种：块级标签 和 行内标签
1.标题(h标签)
<!--h1标签 块级标签 标题1 h2 .. h3..--> <h1>标题1</h1> <h2>标题2</h2> <h3>标题3</h3> <h4>标题4</h4> <h5>标题5</h5> <h6>标题6</h6>
2.段落（p标签）
<!--p标签显示段落,行间有间距 行内标签br换行--> <p>wolegeca<br/>what are you<br/>nongshaneganhaneganhaneganhane</p> <p>wolegeca what are you nong sha ne <br/>how much fuck you once </p>
3.div（div+css）
<div style="width: 200px;border: 2px solid red;word-break: break-all;"> <!--p标签显示段落,行间有间距 行内标签br换行--> <p>wolegeca<br/>what are you<br/>nongshaneganhaneganhaneganhane</p> <p>wolegeca what are you nong sha ne <br/>how much fuck you once </p> </div>
4.超链接（a标签）
target 属性
<a href="http://www.baidu.com" target="_blank">百度</a>
使用 Target 属性，你可以定义被链接的文档在何处显示。_black表示在新的页面打开。锚属性
<!--锚 id=tt href=#tt--> <a href="#tt">看这里</a> <div style="height: 1000px;background-color: red">第一章</div> <div id="tt" style="height: 1000px;background-color: green">第二章</div>
当使用命名锚（named anchors）时，我们可以创建直接跳至该命名锚（比如页面中某个小节）的链接，这样使用者就无需不停地滚动页面来寻找他们需要的信息了。
5.图片标签（img）title属性 即光标放在图片上显示的信息
可以设置图片大小height，width等
<img title="re" src="2.png" style="height: 78px;" />
6.下拉框标签（select）
<select> <option>北京</option> <option>上海</option> <option>广州</option> </select>
selected属性
<select> <option value="1">北京</option> <option value="2">上海</option> <!--默认选择第一个，selected选择指定项--> <option value="3" selected="selected">广州</option> </select>
size 和 multiple属性
<!--下拉框只显示两个 实现滚轮效果 可以多选 默认单选--> <select size="2" multiple="multiple"> <option>北京</option> <option>上海</option> <option>广州</option> </select>
添加分组且组名不可被选
<!--下拉框添加分组标签,标签不可选--> <select> <optgroup label=‘河北省‘> <option>石家庄</option> <option>邯郸</option> </optgroup> <optgroup label=‘山西省‘> <option>太原</option> <option>平遥</option> </optgroup> </select>
7.input系列
checkbox多选项
<h4>checkbox多选框 checked 默认选项</h4> <h5>爱好</h5> <p>篮球：<input type="checkbox" checked="checked" /></p> <p>足球：<input type="checkbox" /></p> <p>排球：<input type="checkbox" /></p>
radio互斥项
<h4> radio 互斥框 </h4> <h5> 性别 </h5> <p>男:<input name="gender" type="radio" /></p> <p>女:<input name="gender" type="radio" /></p>
text 和 password
<h4> text输入框 password输入框 value属性:输入默认值</h4> <p>用户:<input type="text" value="username"></p> <p>密码:<input type="password"></p>
button 和 submit
<input type="button" value="按钮"> <!--submit在表单中存在的时候表示把数据提交到后台 botton只是按钮--> <input type="submit" value="提交">
textarea区域文本框
<!--textarea文本框输入多行内容--> <p><textarea>默认值</textarea></p>
file 导入文件
<h4>导入文件</h4> <input type="file"/>
8.表单（form）
表单是一个包含表单元素的区域。
表单元素是允许用户在表单中（比如：文本域、下拉列表、单选框、复选框等等）输入信息的元素。
<form> <p>用户名:<input type="text"/></p> <p>密码:<input type="password"/></p> <input type="submit" value="提交"/> <!--这里按提交才有反映，submit是用来提交当前的表单的，当然可以有多个表单--> <!--但是，这个submit需要写入表单内，那么提交的时候是提交的当前表单--> </form>
案例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!--form action 指定上传位置 传输方式--> <form action="http://10.0.4.42:8000/django_form/" enctype="multipart/form-data" method="post"> <p> <!--form提交数据后端接收为字典 指定name为字典key输入内容为value--> <input type="text" name="host" /> <input type="password" name="pwd" /> </p> <!--div中指定样式--> <div style="background-color: rosybrown;color: white;"> <h6>爱好</h6> <!-- checkbox默认为on 指定name 和 value --> 篮球：<input name="favor" type="checkbox" value="1" /> 足球：<input name="favor" type="checkbox" value="2" /> 排球：<input name="favor" type="checkbox" value="3" /> </div> <div> <h6>性别</h6> <!--同上--> 男：<input name="gender" type="radio" value="1"/> 女：<input name="gender" type="radio" value="0"/> </div> <div> <h6>城市</h6> <!--提交下拉列表框 name在select中指定，value在option指定--> <select name="city"> <option value="888">上海</option> <option value="999">北京</option> </select> </div> <div> <!--文本框 name为key输入内容为value--> <textarea name=",moo"></textarea> </div> <div> <h4>文件</h4> <input type="file" name="file_name"> </div> <input type="submit" value="提交" /> </form> </body> </html>
9.列表系列
无序列表
无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。
<u1>
<li>111</li> <li>222</li> </u1>
有序列表
同样，有序列表也是一列项目，列表项目使用数字进行标记。
有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。
<ol> <li>www</li> <li>wwwooo</li> </ol>
自定义列表
自定义列表不仅仅是一列项目，而是项目及其注释的组合。
自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。
<dl> <dt>标题</dt> <dd>内容1</dd> <dd>内容2</dd> <dd>内容3</dd> </dl>
10.table系列
border边宽, thead表头, tbody表身,colspan行合并,rowspan列合并
<table border="1"> <thead> <tr> <th>第一列</th> <th>第二列</th> <th>第三列</th> </tr> </thead> <tbody> <tr> <td colspan="2">h1,h2</td> <!--<td>h1</td>--> <!--<td>h2</td>--> <td>h3</td> </tr> <tr> <!--<td rowspan="2">hh1,hhh3</td>--> <td>hh1</td> <td>hh2</td> <td>hh3</td> </tr> <tr> <td>hhh1</td> <td>hhh2</td> <td>hhh3</td> </tr> </tbody> </table>
11.fieldset
将表单内的相关元素分组。
<fieldset> <legend>用户登录</legend> <p>用户名：</p> <p>密码：</p> </fieldset>
标签：
原文地址：http://www.cnblogs.com/koka24/p/5364739.html
