标签：
HTML 不是一种编程语言，而是一种标记语言
HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写，他是一种制作万维网页面标准语言（标记）。相当于定义统一的一套规则，大家都来遵守他，这样就可以让浏览器根据标记语言的规则去解释它。
浏览器负责将标签翻译成用户“看得懂”的格式，呈现给用户！
基本组成
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ZENGXH</title>
</head>
<body>
</body>
</html>
DOCTYPE:
Doctype告诉浏览器使用什么样的html或xhtml规范来解析html文档
有和无的区别
BackCompat：标准兼容模式未开启（或叫怪异模式[Quirks mode]、混杂模式）
CSS1Compat：标准兼容模式已开启（或叫严格模式[Standards mode/Strict mode]）
这个属性会被浏览器识别并使用，但是如果你的页面没有DOCTYPE的声明，那么compatMode默认就是BackCompat,这也就是恶魔的开始 -- 浏览器按照自己的方式解析渲染页面，那么，在不同的浏览器就会显示不同的样式。如果你的页面添加了那么，那么就等同于开启了标准模式，那么浏览器就得老老实实的按照W3C的标准解析渲染页面，这样一来，你的页面在所有的浏览器里显示的就都是一个样子了。
<head>和</head>之间的内容，是元信息和网站的标题 元信息一般是不显示出来的,但是记录了你这个HTML文件的很多有用的信息
<body>和</body>之间的内容，是浏览器呈现出来的，用户看到的页面效果。也就是说这里是网页的主体。也就是body的身体之意
<html></html>是说明这个是一个网页。告诉浏览器这个网页的开始和结束。他包含了之后的两个元素。<head>和</head>|<body>和</body
<html lang="en"> 网页使用的语言，给对html没有影响
提供有关页面的元信息，例：页面编码、刷新、跳转、针对搜索引擎和更新频度的描述和关键词
1.页面编码
<meta charset="UTF-8">
2、刷新和跳转
< meta http-equiv=“Refresh” Content=“30″>
< meta http-equiv=”Refresh“ Content=”5; Url=http://www.autohome.com.cn“ />
3、关键字
关键字的作用：一般是让爬虫之类的收录程序，当他们在爬你的网站的时候，如果你有关键字，那么他们会优先把关键字收录到他们的记录中，比如百度：如果他们收录之后，他们搜索你的关键字的时候，就能找到咱们的网站。
<meta name="keywords" content="星际2,星际老男孩,专访,F91" >
4、描述
例如cnblog里的就是一个描述：
<meta name="description" content="博客园是一个面向开发者的知识分享社区。自创建以来，博客园一直致力并专注于为开发者打造一个纯净的技术交流社区，推动并帮助开发者通过互联网分享知识，从而让更多开发者从中受益。博客园的使命是帮助开发者用代码改变世界。">
5、X-UA-Compatible
X-UA-Compatible 这个是IE8特有的，知道即可，因为做前端的同学都很害怕IE因为他们问题比较多各个版本问题很诡异，当IE8的时候微软想把各个版本的统一，那么这个参数就出现了，他为了向下兼容，如下的代码如果使用IE8的时候他会以IE7的模式运行。
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
title 网页头部信息
link
<link rel="shorcut icon" href="favicon.ico">
4、Style
1、在当前文件中写Css样式
2、在其他文件中写Css样式类似python的模块导入的方式把Css样式导入到当前文件中使用
5、Script
1、在当前文件中写JS
2、在其他文件中写JS类似python的模块导入的方式把JS导入到当前文件中使用
body部分
1、body里面分为两类标签：块级标签和内联标签，块级标签占用的是整行，内联标签占用的他所使用的实际大小如下图：
块级别标签&内联标签：
代码：
<div style="background-color: red;">aaaaaaaaaaaaaa</div>
<span style="background-color: blue">ddddddddddd</span>
效果：
2.特殊符号处理
效果：
代码：
<p>1 < 2</p>
<p>2 < 3</p>
正常情况下如果直接在html文件里输入<h1>当有浏览器在读取的时候就会讲<h1>解释,页面将无法显示，所以特殊的标签需要特殊处理
p表示段落，默认段落之间是有间隔的！
br 是换行
代码:
<p>*******************段落1</p>
<p>*******************段落2</p>
<p>*******************段落3</p>
<p>*******************段落4</p>
<p>ccccccccccccccccccccccc<br />太多了，换行吧ccccccccccccccccc</p>
效果：
a标签：跳转和锚
代码：
<a>我的博客</a> #仅显示文字，没有任何功能
<a href="http://cnblogs.com/Z-style">我的博客</a> #在原网页打开，
<a target="_blank" href="http://cnblogs.com/Z-style">我的博客</a> #新标签中打
效果
锚的作用类似于读书时候的书签，当你你点击这个“锚”=“书签”，的时候就跳转到指定的位置；
代码：
<a href="#i1">第一章</a>
<a href="#i2">第二章</a>
<a href="#i3">第三章</a>
<!--id没有一个标签的id属性值不允许重复；id属性可以不写-->
<div id="i1" style="height: 900px";>第一章内容</div>
<div id="i2" style="height: 900px";>第二章内容</div>
<div id="i3" style="height: 900px";>第三章内容</div>
效果：
H标签
代码：
<h1>H1</h1>
<h2>H2</h2>
<h3>H3</h3>
<h4>H4</h4>
<h5>H5</h5>
<h6>H6</h6>
效果：
select标签：
代码：
<p>第一种效果</p>
<select>
<option value="1">上海</option>
<option value="2">北京</option>
<option value="3" selected="selected">广州</option>
<!--这里默认是广州因为selected="selected" 这里设置了默认的！-->
</select>
<br />
<br />
<br />
<br />
<br />
<p>第二种效果</p>
<br />
<select size="2">
<option>上海</option>
<option>北京</option>
<option>广州</option>
<option>山东</option>
</select>
<p>第三种效果,可以多选</p>
<select multiple="multiple" size="2">
<option>上海</option>
<option>北京</option>
<option>广州</option>
<option>山东</option>
</select>
<p>第四种效果，可以分组</p>
<select>
<optgroup label="河北省">
<option>石家庄</option>
<option>邯郸</option>
</optgroup>
<optgroup label="山西省">
<option>太原</option>
<option>平遥</option>
</optgroup>
</select>
效果：
input系列标签
代码：
######<!--对于input标签来说只要，radio的name值相同，那么他们就会互斥-->
<p>性别：男<input type="radio" name="cc" value="1"/>
女<input type="radio" name="cc" value="0"/></p>
###checkbox标签-复选框
<p>爱好:足球<input type="checkbox" name="bb" value="1"/>
台球<input type="checkbox" name="bb" value="2"/>
篮球<input type="checkbox" name="bb" value="3"/>
玻璃球<input type="checkbox" name="bb" value="4"/></p>
效果：
代码：
<form>
<p>用户名:<input type="text"/></p>
<!--密码的输入框（输入的内容是保密的）-->
<p>密码: <input type="password"/></p>
<!--提交文件-->
<input type="file"/>
<!--多行文本 -->
<p>备注：<textarea style="height: 100px;width: 100px;"></textarea></p>
<br />
<br />
<br />
<input type="button" value="按钮"/>
<input type="submit" value="提交"/>
<!--这里按提交才有反映，submit是用来提交当前的表单的，当然可以有多个表单-->
<!--但是，这个submit需要写入表单内，那么提交的时候是提交的当前表单-->
</form>
效果：
<form action="www.baidu.com" method="get">
<!--这里action是告诉html提交到那里-->
<!--method是通过什么方法去action指定的地址-->
<p>
用户名:<input type="text" name="username"/>
<!--这里的name="username" 这里当咱们指定的action接收到的数据之后县会找到是否有这个name标签-->
<!--然后把这里的用户的输入复制给name为一个字典key:value模式-->
</p>
<p>
密码:<input type="password" name="password"/>
<!--这里的name="username" 这里当咱们指定的action接收到的数据之后县会找到是否有这个name标签-->
<!--然后把这里的用户的输入复制给name为一个字典key:value模式-->
</p>
<p>
部门:<select name="department">
<option value="1">CTO</option>
<option value="2">DBA</option>
<!--这里在选择之后，会把选择的value值赋予给name，当用户点击提交后就会提交到后台-->
</select>
</p>
<input type="submit" value="提交"/>
</form>
标签：
原文地址：http://www.cnblogs.com/Z-style/p/5763396.html
