<!DOCTYPE html> 版本声明
所有标签成对出现
h1~h6 标题
<p> 段落
注意：浏览器会自动在段落的前后添加空行（</p>是块级元素）
<br> 换行 空的html元素 通常使用一对标签，虽然现在所有浏览器识别单标签 具有空内容，通常直接写
<br/>
<hr>水平线
注意：无法在html代码中添加额外的空格和换行来改变输出结果，浏览器会溢出源代码中多余的空格和空行。所有联系的空格或空行都会被算作一个空格。HTML代码中的所有连续的空行也被显示为一个空格。
HTML链接
<a> 链接 空链接用href=“###"
默认样式：
一个未访问过的链接显示为蓝色字体并带有下划线
访问过的链接显示为紫色并带有下划线
点击连接时，链接显示为红色并带有下划线
Note:
注释：请始终将正斜杠添加到子文件夹。假如这样书写链接：href="http://www.w3cschool.cc/html"，就会向服务器产生两次 HTTP 请求。这是因为服务器会添加正斜杠到这个地址，然后创建一个新的请求，就像这样：href="http://www.w3cschool.cc/html/"。
图片链接：<a href="http://www.w3cschool.cc/html/html-tutorial.html"><img src="smiley.gif" alt="HTML 教程" width="32" height="32"></a> <a>标签内嵌套<img>
当前页面链接到指定位置： href=“#id名"
创建邮件链接：
情景一：
<a href="mailto:someone@example.com?Subject=Hello%20again" target="_top">
Send Mail</a>如下图：
情景二：
<a href="mailto:someone@example.com?cc=someoneelse@example.com&bcc=andsomeoneelse@example.com&subject=Summer%20Party&body=You%20are%20invited%20to%20a%20big%20summer%20party!" target="_top">Send mail!</a> 如下图：
常用属性设置：
href:URL 规定链接目标URL
target: _blank/_parent/_self/_top/framename 规定在何处打开URL，仅在href存在时起作用
提示:
在某些个别的情况下，比如属性值本身就含有双引号，那么您必须使用单引号，例如：name='John "ShotGun" Nelson'
属性：
accesskey: 设置访问元素的键盘快捷键
class 规定元素的类名
contenteditable (h5)规定是否可编辑元素的内容
contextmenu (h5)指定一个元素的上下文菜单，当用户右击该元素，出现上下文菜单。
dir 指定某个元素中内容的文本方向
draggable (h5)指定某个元素是否可以拖动
dropzone (h5)指定是否将数据赋值，移动，或链接，或删除
hidden (h5) 规定对元素进行隐藏
id 规定元素的唯一id
lang 设置元素中内容的语言代码
spellcheck（h5）检测元素是否拼写错误
style 规定元素的行内样式
tabindex 设置元素的Tab键控制次序
title 规定元素的额外信息（可在工具提示中显示）
translate（h5）指定是否一个元素的值在页面载入时是否需要翻译
<hr>标签在HTML页面中创建水平线 （用于分割内容）
HTML格式化标签
<b>粗体
<i>斜体
通常使用<strong>替换<b> <em>替换<i>
<sub>定义下标 <sup>上标，如下图：
<del>删除字 <ins>插入字(即加入下划线)
<em>斜体； <strong>加粗； <dfn>定义一个定义项目； <code>计算机代码； <samp>定义计算机代码样本； <kbd>定义键盘码； <var>定义变量； 依次如下图：
<abbr>定义缩写
<address>定义地址
<bdo>定义文字方向 eg:<p><bdo dir="rtl">This paragraph will go right-to-left.</bdo></p> 如下图：
![]()
HTML头部<head>
可以添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript>, and <base>.
<title>元素：定义了浏览器工具栏的标题；当王爷添加到收藏夹时，显示在收藏夹中的标题；显示在搜索隐形结果页面的标题
<base>标签描述了基本的链接地址/链接目标，该标签作为HTML所有链接标签的默认链接
<link>标签定义了文档与外部资源之间的关系，通常用于链接到样式表
<link rel="stylesheet" type="text/css" href="mystyle.css">
<meta>标签
<style>标签定义html文档的样式信息
eg：
<style type="text/css">
h1 {color:red;}
p {color:blue;}
</style>
定位：position, float, margin, padding
HTML样式-CSS
background-color背景颜色
字体样式
font-family(字体) e.g.: font-family:“微软雅黑"
color（颜色）
font-size（字体大小）
<style>内部样式表
<link>外部样式表
HTML图像
<img>空标签 src=“资源地址(可以是本地地址，或者是URL)”
alt=“图像未显示出来时候，出现的替换文本"
创建图像映射：
eg:
<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
<area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
<area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
如图：
![]()
设置图像链接：<a><img标签></a>
图像浮动：float
HTML表格
<table>标签 表格
<tr>标签定义行，
<td>若干单元格（table data）,即数据单元格的内容，数据单元格可以包含文本，图片，列表，段落，表单，水平线，表格等。
表格默认不显示边框，border = ‘1’ 边框宽度
表头一般用<th>标签，显示为粗体，居中.
<caption>表格标题
<td
colspan=“2”> 列合并
rowspan行合并
单元格边距cellspadding 单元格间距cellspacing
HTML列表
有序列表，无序列表
无序列表是一个项目列表，此项目使用粗体圆点（典型的小黑圆点）使用<ul>
如图：
注意：每一列使用<li>
有序列表，列表项目使用数字进行标记 使用<ol>
如图：
自定义列表，以<dl>标签开始，每个列表项以<dt>开始
HTML块元素
<div>
块元素：在浏览器显示时，通常会以新行（换行）来开始(和结束)
<span>
内联元素：可用作文本的容器。
例如：
<p>我的母亲有 <span style="color:blue">蓝色</span> 的眼睛。</p>
特别注意：
| 虽然我们可以使用HTML table标签来设计出漂亮的布局，但是table标签是不建议作为布局工具使用的 - 表格不是布局工具。 |
HTML表单
<form>表单允许用户在表单中输入内容，比如：文本域（textarea）、下拉列表，单元框（radio-buttons）、复选框（checkboxes）等等
<input type=“text” name=“firstname”> 标签设定，用户要输入字母，数字等内容
/*
text:文本域 输入字母，数字等
password：密码框 输入密码
radio:单选按钮 name代表后台交互的字段，value为该字段对应的值
checkbox:复选框 同上
submit 提交按钮
button:按钮
*/
<textarea>输入域
<select>定义下拉选项列表 selected默认选中
<option>下拉列表的选项
下拉列表：
<form action="">
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat" selected>Fiat</option>
<option value="audi">Audi</option>
</select>
</form>
HTML框架
Iframe内联框架 可是设置宽高，srch设置内联打开的网页
属性frameborder = “0”取消默认边框
颜色，保护色
HTML字符实体
转译字符：小于号 < / < 大于号：> /62
不间断空格： 如果需要多个空格时，浏览器去自动去除多余的，需要使用 .
实体名称对大小写敏感
html5的上一个版本的标签（全兼容）
<!DOCTYPE html> ->版本声明，这个必须要，如果不写在ie6会进入诡异模式
盒模型（margin + border + padding + content）
1.怪异模式：margin + content
2.在css3里面有个属性可以强制进入怪异模式
4.标签：（1）双标签和单标签 双标签特征：需要嵌套（内容）; 单标签：不需要嵌套
标签的类型：1.块标签：独占一行，默认宽度100%可以设置宽高/margin
（p, div, h1-h6, ul , ol , li, hr, br, form）
2.行标签：在一行显示，内容撑开宽高不可以设置宽高（除了input,img）、不能设置纵向margin (a, img, input, strogn, em, var
…
.)
3.特殊 table， tr , td
组合标签：ul>li ol>li table>tr>td, form>input
标签的嵌套：
1,组合标签必须按照嵌套规则来
2,块标签可以嵌套快标签和行标签（除了p）
3,行标签只能嵌套行标签（除了a）
seo：搜索引型优化， sem:搜索隐形营销 pr值：网页的等级
黑帽（利用
搜索引擎
的漏洞排高排名），灰帽（研究
搜索引擎
的漏洞回避
搜索引擎
的处罚规则），白帽（利用关键字的优化，结构优化....）
关键字的优化，主要是就是对标签的选择：
title(head标签里面)
metal
description(描述)
h1~h2
strong
img(alt(替换文本) title(鼠标移入的提示内容))
a:外链，内链
外链：友情链接，通过别的网站来提高自己的等级，从而达到排名的提升
<a href =
“###”
rel=
“nofollow
">
这里的nofollow知识当前页对目标也的一种态度，我不信任这个网页，这个网页的内容与我本网站无关
表格：
cellspacing:合并单元格边距
colspan:合并列
rowspan:合并行
form表单：
action:提交地址
method:提交的方式（get/post）
input：text：文本框
password：密码框
checkbox:复选框
radio：单选框
submit:提交按钮
file:文件
button:按钮(需要配合value, 不写会出问题)
reset:重置(基本不用了)
textarea:文本域
select:菜单
option
label:跟form控件联系起来（写样式）
css:
引入方式：
1.外部-》整站
2.头部-》访问量（点击）高
3.标签内-》js和后台
4.@import url(); -》在css中引入另外一个css
选择器：
1.标签名 2.类 3.id 4.后代 5.组合 6.群组 7.伪类
范围大小，优先级越高
id->100
类->10
标签名->1
a#div1 .c->111
css基础设置：
font-family:字体设置
font-size:字体大小
font-style:字体样式
font-weight:字体粗细（bold）
color:字体颜色
字间距
word-spacing ->字间距
line-height->行高
background url
color
position
repeat
盒模型：
margin(外边距)， padding(内边距), border（边框）， width/ height (max-width, min-width)
display:none(隐藏) block(块) inline-block：(转换行标签，可以设置宽高) table:转换为table, table-cell主要用于垂直居中（和vertical-align:middle配合使用）
overflow:hidden;scroll
postion:
relative:相对定位（主要作用是作为参考对象）
absolute:在需要层叠的时候，然后需要移动的对象就用它（也可以作为参考对象）
float:
使用场景：左右布局
不占内容宽高，需要注意清浮动
1.clear:both
2.overflow:hidden
(扩展ie6的兼容)
css hack:针对不同的浏览器写不同的代码
haslayout
4万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
