黑马程序员——Html常用标签速查以及CSS按知识点速查手册

------Java培训、Android培训、iOS培训、.Net培训、期待与您交流！ ------

一、HTML与CSS

因为java语言的特点与应用范围，HTML与CSS成为了java程序员必须的知识储备。在当下，我们可以不精通这两门语言，但是我们不能不认识这两门语言。这篇博客，旨在归纳总结这两种语言最常见的语法点（标签），并最终作为一个速查手册提供查阅功能（因为有目录）。

二、HTML与CSS通用知识点杂述

（一）HTML

1.HTML是网页语言，但其本质是用来描述数据显示的语言

2.HTML代码不区分大小写
3.由<html></html>开始,分成<head></head>和<body></body>两个大部分
4.<head></head>中通常包含了一个网页辅助信息和预加载的内容
5.标签具有属性,用来丰富标签功能属性与属性值之间用 "=" 连接,属性值用（也有不用的时候） "" '' 包围。一般用 ""
6.属性名与属性值相同的被称为标记属性,相当于对被此属性修饰的地方打上一个标签，完整写上即生效
6.标签不能用数字定义

7.HTML转义字符不同于JAVA，用 &..;的形式表示，(..)是各个字符的值

8.注释的格式

9.标签的分类
1)块级标签,结束后自带换行的标签
div/p/dl/table
2)行内标签,结束后不带换行的标签
font/span/img/input/select/a

（二）CSS

用来解决网页显示效果问题的工具，极大的丰富了HTML的显示样式
CSS是Cascading Style Sheets简称，层叠样式表
CSS实现了网页显示内容和显示样式的分离，优化了HTML的样式定义

三、HTML的常用标签

0.开始结束

1.头

2.基础

<base></base>
<head></head>标签的一个组件
属性:
href:定义了默认的超链接,若后面的超链接没有定义连接目的,则默认使用这里定义的
target:定义了默认的超链接打开方式,若后面的超链接定义连接打开方式,则默认使用这里定义的

3.消息模拟

4.链接

5.体

6.字体

<font></font>
属性:
颜色:coler = ""
大小:

7.换行

<br />

实现单独的功能,一行足矣,为了规范书写,内部闭合

8.插入水平线

<hr />

9.标题

数字可改,内置到6

10.列表

<dl></dl>
<dt></dt>上层项目
<dd></dd>下层项目,带有自动缩进效果

11.条目

12.有序项目列表

<ol>
<li>这是条目，被项目列表标签封装</li>
</ol>
属性:
样式:type

13.无序项目列表

<ul>
<li></li>
</ul>
属性:
样式:type

14.图片

<img />
属性:
来源:src
高:height
宽:width
边框:border
图片说明文字:alt
图像地图:usemap

15.区域

<area />
属性:
形状:shape
坐标:coords
连接:href

16.图像地图

用来将图片的一部分作为超链接
在图片中添加 usemap 属性
并使用<area / >标签进行描述，描述时用坐标确定了图像地图的区域
<img usemap = "" />
<map>
<area shape = "" coords = ",,," href = "" />
</map>

17.表格

1)定义
<table></table>
表格存在即使不自定义也会默认有的下级标签<tbody></tbody>
2)属性:
边界大小:border
边界颜色:bordercolor
单元格内边距:cellpadding
单元格间间距:cellspacing
宽:weith
3)内容
标题:<caption>
表头:<th>具有加粗并居中的效果
行:<tr></tr>
单元格:<td></td>
4)内容属性
<tr></tr>
属性:
占用多行:colspan
占用多列:rawspan

18.超链接

1)<a></a>
2)必须属性:
连接:href
定义 href 时应指定协议,否则使用默认协议(被当做本地资源)
连接可以连接到一个网址/图片..
连接可以连接到一个之前命名过的连接位置(对命名的引用需要添加标记"#")
3)可选属性:
新窗口打开:target
取消超链接默认效果:href = "javascript:void(0)"
单击效果:onclick = alert("")
命名(锚):name
4)定位标记
<a name=top>顶部位置</a>
<a href="#top">回到顶部位置</a>

19.框架集

<frameset></frameset>
用来存放多个框架
属性:
分行:rows
用百分数和*(剩下)定义框架框架集的纵向分块(将框架竖着分为几块,每一块占整体的X%/Y%/.../*。)
分列:cols
用百分数和*(剩下)定义框架框架集的横向分块(将框架横着分为几块,每一块占整体的X%/Y%/.../*。)

20.框架

<frame></frame>
框架的一部分
属性:
1)来源:src
用来定义当前的框架中显示的内容的来源
2)命名:name
可以定义超链接的内容在哪个框架中打开

21.画中画

<ifram></ifram>
在页面中开启一个窗体,显示连接的资源
属性:
来源:src
高:height
宽:width

22.表单

<form><form>
用来完成于服务端的交互
属性:
请求:action
方式:method,默认为get

23.输入

<input></input>
是表单最常用的/最基本的作用
属性:
样式:type = ""
文本(明文):text
密码:password
单选框:redio,单选框必须用组进行包装,即用<>包围
复选框:checkbox
选择文件:file
插入图片:image
重置:reset
提交:submit
隐藏:hiding,用来定义不需要客户端知道但是要求服务端知道的内容
按钮:botton,按钮可直接注册动作
命名:name,命名用来在提交时作为服务端区分数据的依据
还可以为<input></input>划分组(命名相同既是同组)
设置值:value,用来配合 name 在提交时帮助服务端获取提交信息
还可以自定义<input></input>的默认文本
标记:checked = "checked",用来设置默认值

24.选择菜单以及选项

<select></select>
<option></option>
属性
name 定义在<select></select>上
value 定义在<option></option>上

25.文本区

<textarea></textarea>
属性
命名:name

26.加粗

<b></b>

27.斜体

<i></i>

28.下划线

<u></u>

29.下标

30.上标

31.动态内容

<marqee></marqee>
为内容添加动态效果
属性:
方向:direction
行为:behavior,有scroll(循环)/alternative(反复)/side(单次)

32.保留文字格式

33.区域标签

<div></div>(待有换行,封装整行)
<span></span>(不带换行,封装行内)
<p></p>(前后自带空行)
此类标签没有特殊含义,只用来封装区域,对于其封装的内容可以自定义属性解析

四、CSS简明攻略

（一）CSS/HTML 结合方式

1. 每一个 HTML 标签中都可以添加 Style(样式) 属性
Style 属性的值都是 CSS 代码
Style 属性的值为键值对形式,键与值之间用":"分隔
Style 属性键值对可以不唯一,之间用";"隔开
2. 使用 Style 标签
使用此标签,一般是进行整个网页的样式初始化,故常放置在<head></head>标签中
若在网页的标签中单独定义了个性化样式,则放置在<head></head>标签中的<style></style>样式与个性化样式冲突的地方会被覆盖(此为样式的层叠)
<style></style>
属性:
type:用来标记<style></style>中包含了什么文本
type="text/CSS"标记<style></style>中的内容需要用CSS进行解析
目标:必须用 "标签名{}" 的形式规范出<style></style>中内容是对谁的CSS样式定制
3. 用 CSS 文件关联 HTML 文件
关联方法:
<style>
@import url(*.css);
</style>
@import语句可以为一个CSS文件添加其他CSS文件,HTML 只需与一个CSS文件关联,此CSS文件关联其他CSS文件,即可完成样式设置
4. 使用 <link></link> 标签
<link></link>标签可以为当前页面链接一个文件
属性:
rel:设置关联的文件对当前页面执行哪种操作,"stylesheet"
href:设置关联的文件
type:设置关联的文件作为哪种类型的文件解析

（二）CSS代码块结构

选择器{属性键值对;属性键值对...}
选择器即为标签名
属性键值对用":"分隔键与值

（三）选择器

0. 选择器就是指定CSS要作用的标签,标签名就是选择器
1. 选择器的分类
选择器有三种:
1)HTML 标签选择器,使用 HTML 标签名
2)class 选择器,使用标签中的 class 属性
class 选择器的优先级高于 HTML 标签选择器
格式为:
HTML标签选择器.class名{样式键值对},针对指定标签的一部分进行设置
.class名{样式键值对},相当于"*.class",针对全体标签中被class标记的部分进行设置
3)id 选择器,使用标签中的 id 属性
通常用来表示特定区域
id 选择器的优先级高于 class 选择器
格式为:
HTML标签选择器#id名{样式键值对},针对指定id的标签进行设置
#id名{样式键值对},相当于"*#id",针对全体标签中被id标记的部分进行设置
每个标签都有 class 属性和 id 属性, 用来对标签进行区分,方便操作
多标签 class 属性可以相同,用来将同一种标签分为若干组,以便对每一组进行CSS样式设置,类似于 name 属性
每个标签 id 属性必须唯一,id是 HTML 和 js 公用的
2.样式的优先级
0)单个标签上直接定义 > id > class > 标签
1)由上到下;由外到内;由低到高

（四）扩展选择器

0.关联选择器
应用于选择器(标签)嵌套的场景下,用来描述标签中的标签
span b {
......
}
<span><b>这里是被样式的内容</b></span>
1. 组合选择器
对多个选择器套用相同的样式
span , b {
......
}
2. 伪元素选择器
伪元素:不是真正的标签,是标签的某些状态
常用的的伪元素:
1)超链接派生
未点击: a:link
悬停: a:hover
点击: a:active
访问后: a:visited
LVHA
2)段落派生
第一行: p:first-line
第一字母: p:first-letter
具有焦点的字母: p:focue

（五）CSS应用

0.ul{}
清单风格样式:list-style-type,CSS,用来丰富无序列表前端样式
清单风格图片:list-style-image,CSS,用来丰富无序列表前端样式
1.table{}
边框:border-bottom/left/right/top,可以设置颜色/样式/粗细
2.table td{}
边框:border-bottom/left/right/top,可以设置颜色/样式/粗细
内边距:padding

（六）盒子模型

0. 基本属性
1)边框:border-top/left/right/bottom
2)内边距:padding-top/left/right/bottom ;padding ：值(一个值,4个边距;两个值,上下/左右;四个值,上/右/下/左)
3)外边距:margin-top/left/right/bottom

1.float 布局-漂浮
1)当一个区域被设置为 float 后,其后的区域根据 float 的设置流向规定的相对位置
float 参数:left/right/none
2)在当前块设置属性 clear 取消漂浮,即禁止当前块的哪个方向有漂浮
clear 参数:left/right/none/both

2.position 布局-定位
当一个区域被设置成 position 后,可以用不同的模式参数进行定位
模式参数
1)static:遵循 HTML 定位规则
2)absolute:使区域脱离文档流,用 top/left/right/bottom 进行相对于父对象的定位,父对象也由 absolute 属性声明
若没有父对象,相对于<body></body>进行定位
3)fixed:遵从 absolute 方式,添加一定规范

4)relative:不可层叠,不出文档流,相对定位