<pre>
W3C:World Wide Web Consortium,万维网联盟
HTML
html:Hyper Text Markup Language,超文本标记语言。
书写规范：XHTML
标签要正确关闭，包括呼应关闭与自关闭。
常见自关闭标签有：<hr/>、<br/>、<input/>、<img/>、<area/>，它是不需要修饰和装饰其它的
标签或文本的。
标签名和属性名必须小写
属性值要引号括起来，””或’’
标签要正确嵌套
<marquee behavior=”alternate”></marquee>
标签的作用：说明内容的功能
属性的作用：描述内容的特征
html注释：<!--注释内容 仅此一种-->
下面总结下常见标签，只总结它们的特有属性。
颜色表示方法：单词，6个十六进制字符、rgb(m,n,k)。
排版标签
p:段落标签：如果p标签中包裹了内容，那么p标签内容的上下会各空出1行。
如果P标签没有内容，那p标签就相当于一个空行。
如果是两个p标签连续出现，它们之间也只会空一个空格，而不是两个。
注意与br标签的区别：br只是换行，并不会空出1行。而p标签不但换行而且还空出1行。
hr:水平线标签：
属性
size:粗细
width:宽度
div:块级标签，会自动换行。如p、hr、h1-h6也是块级标签。
span:行级标签，不会自动换行。如br是行级标签，它换行之后不会再换行。
字体标签
h1-h6:从大到小的6个级别的标题文字，没有size属性。注意字体是块级标签。
font:
属性
face:字体类型
size:字体大小（从1-7的数字，默认是3），绝对值表示是1-7，相对值表示是相对
于3（-2到+4之间）。
图像标签
img:
属性
src:图片路径
title:鼠标悬停在图片上时的提示文字，其实几乎每个标签都有这个功能。
alt:当图片不存在时的提示文字
map:必须要定义name属性，因为它要被图片img引用，在img中定义属性usemap=”#mapname”来引
用。
子标签area:
属性
shape:形状
coords:参数，相对于图片（如果shape是circle的话，是x,y,r；如果是矩形的话，
是两个点的坐标。
href:点击了area之后跳转的链接，可以是网页，也可以是图片。
title:当鼠标移动到坐标限定的范围时提示的文字。
清单标签（ol、ul、极其子标签li）
共有属性
type:对于ol，取值可以是Aa和及罗马数字I、i以及阿拉伯数字，共有5种。默认是阿拉伯数
字。如果不想从第一字母或数字开始，可以再加个start属性，指定偏移量。
对于ul，取值可以是disc（实心点）、square（实心矩形）、circle（空心点），但实
际发现ul也可以使用ol的type属性值。默认的是实心点
超链接标签a
属性
href:跳转目标路径，一定要这个路径，如果不想跳转用#。否则文本不会有这个标签的特有
显示效果。
target:跳转方式，取值_self(默认) :在本窗口打开。 _blank ：在新窗口打开
_parent
_top
表单标签
form标签：收集用户信息，将信息传递到指定的服务器
属性：
action:表单数据提交的目标位置。
method:提交方式
get:（默认）明文提交，不安全。数据量有限制，不超过1k。
post:暗访提交，安全。可以提交大的数据，数据量没有限制。
input子标签：真正地采集用户信息
语法：<inputtype=”” name=”” value=”” />
type:input标签的类型（一共有10种）
text:文本框
password:密码框
radio:单选按钮
checkbox:复选框
checked=”checked”默认被选中
submit:提交按钮
button:普通按钮
reset:重置按钮
image:图片按钮 作用同submit
file:文件上传
hidden:隐藏域:既不想让用户看到，又要将数据提交到服务去。
value:标签中的内容，供服务器接收数据的。
name:
》供服务器接收数据的。
》给相同类型的标签分组，如radio。
下拉列表标签select
option:下拉列表项
selected=”selected”默认被选中
语法：<select>
<option>一般第1个option写标题</option>
<optionvalue=””>一般与value值一样</option>
<optionvalue=””>一般与value值一样</option>
</select>
文本域标签textarea
属性
cols:显示的列数
rows:显示的行数
readonly:标记文本只读，取值readonly。防止用户修改内容。
表格标签table
属性
cellspacing:单元格之间的距离
cellpadding:单元格与内容的距离
caption标签：表格标题，写在table标签的首行。
thead:页眉
tbody:主体
tfoot:页脚
可以用这些标签在操作多个tr。
子标签tr:行
子标签td:列
属性
colspan:跨列，从左往右合并。
rowsapn:跨行，从上往下合并。
th:列头，与td同级别。
CSS
CSS:Cascade Style Sheet,层叠样式表。
CSS的好处：
1.网页内容和样式分离，有利于团队开发。
2.提高代码的复用性，有利于后期维护。
3.功能强大，实现更美观的效果。
CSS基本语法：
1.行内样式，定义在标签内，作用于当前标签。
<p style=”color:red”><p>
2.内嵌样式，作用于当前页面。
<style type=”text/css”> 表示标签内容为样式代码
/*CSS注释，仅此一中*/
选择器{
属性名：属性值；
属性名：属性值；
...
}
</style>
注意格式：
》属性名与属性值用：分隔，属性名与html标签属性名并不完全相同。
》属性值没有引号
》每个规则以；结束。
3.外部样式，作用于多个页面。
<link rel="stylesheet" type="text/css" href="theme.css" />
CSS选择器：
标签选择器：标签名，同类标签具有相同风格时使用。
类选择器：.类名，同类标签中部分标签有其它的风格时。
ID选择器：#ID名，通常与div结合使用。
选择器优先级：ID>类>标签
值得注意的一点：CSS选择器的样式只适用于选择器代表的标签本身，并不适用于它的子标签。
如table标签如果在标签中设置了border为实线红色，所有的单元格的border都是实线红色
。但是如果只在选择器中设置了table，那么只有table的border会变成实线红色，table中
单元格border不会发生任何改变。同理tr也一样，如果在css中设置了tr的样式，td的样式
不会随之改变。
CSS常见属性：
字体：font属性
font-xxx:子类属性
文本：
text-xxx系列
text-decoration:可以设置下中下划线或无线。
列表属性：list-style属性
list-style-xxx:子类属性
list-style-image:url(“图片路径”); //自定义列表符号
背景属性：background属性
background-xxx:子类属性
background-attachment:设置背景是否随着页面的其余部分滚动。
background-color:
background-image:url(“图片路径”);
background-repeat:属性设置是否及如何重复背景图像。
background-position:设置背景图片的起始位置，相对于父容器的x和y
距离。
定位属性：
浮动定位
float:流式布局（浮动），取值left right 2种
clear:清除浮动，取值 left rightboth none 4种
position
absolute:绝对定位，一般和top、left属性配合使用。
relative:相对定位
z-index:取值是整数，默认0。越大越靠近上面。
CSS盒子模型：
任何一个标签都是一个盒子模型，所以每个标签都有下面这些属性。
内边距padding
padding-left
padding-right
padding-top
padding-bottom
padding:10px 30px 50px 30px 表示上 右 下 左（从上开始顺时针旋转）
padding:30px 80px // 30表示上下 80表示左右
外边距margin
margin-left
margin-right
margin-top
margin-bottom
margin:0 auto //水平居中
margin:auto 0 //垂直居中
外边距合并：取较大者。
边框border
border-style
border-width
border-color
border-left
border-left-color
border-left-style
border-left-width
border-right
...
CSS：通过属性即使给标签设置了什么东西，如图片，它是属于这个标签的，并没有创建一个新的
对象。
假如想给div设置一张图片，图片距离div的上边距是10px，那么应该设置div的padding-top
为10px，且应在div中嵌套一个<img/>标签。不能投机取巧，使用CSS中的
background:url()no-repeat来设置，这个属性只是给div设置了背景图片，但是这个图片并不
是它的子元素，仅仅只是一个属性，所以padding对它无效。
伪类：
a:link {color: #FF0000} /* 未访问的链*/
a:visited {color: #00FF00} /*已访问的链接 */
a:hover {color: #FF00FF} /*鼠标移动到链接上 */
a:active {color: #0000FF} /*选定的链接 */
当然，在选择器还可以定义其它的属性，而且属性是会反弹的。比如在
hover中设置了一个字体大小属性，当鼠标移到链接上时字体会改变，
但当鼠标挪走之后又会恢复原来的大小。
注意：定义是有顺序的，某些伪类也适用于非a标签。比如hover在css2.0中可以用于几乎所有其它的标签上。
拓展：利用伪类来实现表格行高亮显示，也正体现伪类的属性会反弹的特性。如果用js来做出这个效果，要费不少的功夫，但是伪类就很方便了。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
|
<!-- 伪类选择器 -->
<
style
type
=
"text/css"
>
.c1 {
background-color:blue;
}
.c2 {
background-color:gray;
}
tr:hover{
background-color:yellow;
}
</
style
>
</
head
>
<
body
>
<
table
width
=
"50%"
border
=
"1"
>
<
tr
>
<
th
>姓名</
th
>
<
th
>年龄</
th
>
<
th
>住址</
th
>
</
tr
>
<
tr
class
=
"c1"
>
<
td
>王泽</
td
>
<
td
>30</
td
>
<
td
>北京</
td
>
</
tr
>
<
tr
class
=
"c2"
>
<
td
>王泽</
td
>
<
td
>30</
td
>
<
td
>北京</
td
>
</
tr
>
<
tr
class
=
"c1"
>
<
td
>王泽</
td
>
<
td
>30</
td
>
<
td
>北京</
td
>
</
tr
>
<
tr
class
=
"c2"
>
<
td
>王泽</
td
>
<
td
>30</
td
>
<
td
>北京</
td
>
</
tr
>
</
table
>
</
body
>
|
效果：
-----------------------------------------------------------------------------------------
最后，作一下总结，HTML就是用来显示内容的，而CSS用来定义样式，就是美化内容的显示。
HTML标签和CSS样式非常多，怎么学？
抓住重点，特性，记忆重点，其它的就去查API文档。
</pre>
javaEE补充：
其它html标签：
框架集（iframe)
用于页面布局，现在已经被抛弃，只能在IE上运行良好。
2.域(fieldset)、域标题(lengend)
源码：
|
1
2
3
4
5
6
7
|
<
fieldset
>
<
legend
>
那天风刀霜
</
legend
>
发的手机费拉风的但是；分啊方法的身份； <
br
/>
<
input
type
=
"button"
value
=
"雨木林风"
/>
</
fieldset
>
|
效果图：
编解码问题：
html用浏览器打开乱码，原因：html保存时的编码与浏览器解码html采用的字符集不一样。浏览器采用的是系统默认的字符集GBK，而html在保存的时候可能是其它的编码。
解决1：在html保存的时候，指定文件保存的编码方式（不同的文本编辑器可能采用的方式不一致，一般在软件里设置），也可以利用记事本另存为指定保存的编码方式。
解决2：在html中加上一个头标签，当浏览器读取到这个头标签的时候，浏览器会这个标签指定的字符集来解码。这个标签的内容是：
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
meta标签是没有结束标签，它是模拟响应头信息的，给浏览器一些附加信息。
meta是一个头标签，头标签还有title、base、link等，都放在<head></head>之间。
解决3：打开html乱码，手动改变浏览器解码采用的字符集。（不提倡）
HTML实际问题
1）CSS：<ul>的左边为什么有40px的距离呢？
https://zhidao.baidu.com/question/199133186.html
2）最简单的折叠菜单
http://www.51xuediannao.com/js/texiao/zhedie.html
本文转自屠夫章哥 51CTO博客，原文链接：http://blog.51cto.com/4259297/1665222，如需转载请自行联系原作者
