【HM】第1课：HTML+CSS-阿里云开发者社区

<pre>

W3C:World Wide Web Consortium,万维网联盟

HTML

html:Hyper Text Markup Language,超文本标记语言。

书写规范：XHTML

标签要正确关闭，包括呼应关闭与自关闭。

常见自关闭标签有：<hr/>、<br/>、<input/>、<img/>、<area/>，它是不需要修饰和装饰其它的

标签或文本的。

标签名和属性名必须小写

属性值要引号括起来，””或’’

标签要正确嵌套

标签的作用：说明内容的功能

属性的作用：描述内容的特征

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>

</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.行内样式，定义在标签内，作用于当前标签。

2.内嵌样式，作用于当前页面。

/*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来做出这个效果，要费不少的功夫，但是伪类就很方便了。

 
        <!-- 伪类选择器 --> 
       
        <
        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)

源码：

 
        <
        fieldset
        > 
       
        <
        legend
        > 
       
        那天风刀霜 
       
        </
        legend
        > 
       
        发的手机费拉风的但是；分啊方法的身份； <
        br
        /> 
       
        <
        input 
        type
        =
        "button" 
        value
        =
        "雨木林风"
        /> 
       
        </
        fieldset
        >