【JavaWeb】HTML&CSS 基础

HTML&CSS 基础

HTML 基础

HTML 标签

HTML标题：HTML 标题（Heading）是通过 h1 - h6 等标签进行定义的。
HTML段落： HTML 段落是通过 p 标签进行定义的。
HTML链接：HTML 链接是通过 a 标签进行定义的。
```
<a href="http://www.w3school.com.cn">This is a link</a>
```
HTML图像：HTML 图像是通过 img 标签进行定义的。
```
<img src="w3school.jpg" width="104" height="142" />
```

HTML 元素

< body > 元素：定义了 HTML 文档的主体。
< html > 元素：定义了整个 HTML 文档。
空标签：没有内容的 HTML 元素被称为空元素，常见的空标签有 br

HTML 属性

常用的全局属性

属性名称	含义
class	规定元素的一个或多个类名（引用样式表中的类）
id	规定元素的唯一 id
lang	规定元素内容的语言
style	规定元素的行内 CSS 样式

常用的 window 事件属性

属性名称	含义
onload	页面结束加载之后触发

常用的 Form 事件属性

属性名称	含义
onblur	元素失去焦点时运行的脚本
onfocus	当元素获得焦点时运行的脚本
oninput	当元素获得用户输入时运行的脚本
onreset	表单中的重置按钮被点击时触发 HTML5 中不支持
onselect	在元素中文本被选中后触发
onsubmit	在提交表单时触发

常用的 Keyboard 事件属性

属性名称	含义
onkeydown	在用户按下按键时触发
onkeypress	在用户敲击按钮时触发
onkeyrealse	当用户释放按键时触发

常用的 Mouse 事件属性

属性名称	含义
onclick	元素上发生鼠标点击时触发
ondblclick	元素上发生鼠标双击时触发
ondrag	元素被拖动时运行的脚本
onmousedown	当元素上按下鼠标按钮时触发
onmousemove	当鼠标指针移动到元素上时触发
onmouseout	当鼠标指针移出元素时触发
onmouseover	当鼠标指针移动到元素上时触发
onmouseup	当在元素上释放鼠标按钮时触发
onscroll	当元素滚动条被滚动时运行的脚本

常用的表单属性

属性名称	含义
form	定义供用户输入的 HTML 表单
input	定义输入控件
button	定义按钮
select	定义选择列表（下拉列表）
option	定义选择列表中的选项
label	定义 input 元素的标注
datalist	定义下拉列表

常用的列表属性

属性名称	含义
ul	定义无序列表
ol	定义有序列表
li	定义列表的项目
dl	定义定义列表
dt	定义定义列表中的项目

常用的表格属性

属性名称	含义
table	定义表格
th	定义表格中的表头单元格
tr	定义表格中的行
td	定义表格中的单元
thead	定义表格中的表头内容
tbody	定义表格中的主体内容
col	定义表格中一个或多个列的属性值

其他常见属性

属性名称	含义
audio	定义声音内容
br	定义简单的折行
canvas	定义图形
div	定义文档中的节
diglog	定义对话框或窗口
em	定义强调文本
hr	定义水平线
i	定义斜体字
img	定义图像
map	定义图像映射
meta	定义关于 HTML 文档的元信息
nar	定义导航链接
param	定义对象的参数

HTML 引用

用于短引用的 HTML 标签：q

<q>构建人与自然和谐共存的世界。</q>

用于长引用的 HTML 标签：blockquote

<blockquote cite="http://www.worldwildlife.org/who/index.html">
五十年来，WWF 一直致力于保护自然界的未来。
世界领先的环保组织，WWF 工作于 100 个国家，
并得到美国一百二十万会员及全球近五百万会员的支持。
</blockquote>

HTML 图像

图像标签（img）和源属性（src）：img 是空标签，意思是说，它只包含属性，并且没有闭合标签。要在页面上显示图像，你需要使用源属性（src）。src 指 “source”。源属性的值是图像的 URL 地址。
```
<img src="url" />
```
替换文本属性（alt）:alt 属性用来为图像定义一串预备的可替换的文本。替换文本属性的值是用户定义的。
```
<img src="boat.gif" alt="Big Boat">
```

HTML 头部元素

head 元素是所有头部元素的容器：head 内的元素可包含脚本，指示浏览器在何处可以找到样式表，提供元信息等等。以下标签都可以添加到 head 部分：title、base、link、meta、script 以及 style
title 标签：定义文档的标题，title 在所有 HTML/XHTML 文档中都是必需的
base 元素：base 标签为页面上的所有链接规定默认地址或默认目标（target）
```
<head>
<base href="http://www.w3school.com.cn/images/" />
<base target="_blank" />
</head>
```
link 元素：link 标签定义文档与外部资源之间的关系，最常用于连接样式表
```
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head
```
style 元素：style 标签用于为 HTML 文档定义样式信息
meta 元素：元数据（metadata）是关于数据的信息。meta标签提供关于 HTML 文档的元数据。元数据不会显示在页面上，但是对于机器是可读的。典型的情况是，meta 元素被用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据。meta标签始终位于 head 元素中。元数据可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务

HTML URL

URL 也被称为网址，用于定位万维网上的资源
语法规则：scheme://host.domain:port/path/filename
- scheme - 定义因特网服务的类型。常见的类型有 http https ftp file
- host - 定义域主机，http 的默认主机是 www
- domain - 定义因特网域名，比如 w3school.com.cn
- port - 定义主机上的端口号，http 的默认端口号是 80
- path - 定义服务器上的路径，如果省略，则资源必须位于网站的根目录中
- filename - 定义资源的名称

HTML 表单

表单基础

HTML 表单用于搜集不同类型的用户输入
HTML 表单包含表单元素，表单元素指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等

HTML 输入类型

input 元素有很多形态，根据不同的 type 属性来区分。

text 定义供文本输入的单行输入字段
password 定义密码字段，password 字段中的字符会被做掩码处理
submit 定义提交表单数据至表单处理程序的按钮
radio 定义单选按钮
checkbox 定义复选框
button 定义按钮
number 用于应该包含数字值的输入字段，可以对数字做出如下限制：
- disabled 规定输入字段应该被禁用
- max 规定输入字段的最大值
- maxlength 规定输入字段的最大字符数
- min 规定输入字段的最小值
- pattern 规定通过其检查输入值的正则表达式
- readonly 规定输入字段为只读的
- required 规定输入字段为必须的
- size 规定输入字段的宽度，以字符计
- step 规定输入字段的合法数字间隔
- value 规定输入字段的默认值
HTML5新增的输入类型：color、date、datetime、datetime-local、email、month、number、range、search、tel、time、url、week

XHTML 基础

XHTML 是 HTML 与 XML 的结合物
XHTML 是更严格更纯净的 HTML 代码
XHTML 指可扩展超文本标签语言（EXtensible HyperText Markup Language）
XHTML 元素必须被正确地嵌套
XHTML 元素必须被关闭
标签名必须用小写字母
XHTML 文档必须拥有一个根元素
属性名称必须小写，属性值必须加引号，属性不能简写

CSS 基础

概述：

CSS 指层叠样式表（Cascading Style Sheets）
样式定义如何显示 HTML 元素
样式通常存储在样式表中
把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
外部样式表可以极大提高工作效率
外部样式表通常存储在 CSS 文件中

基础语法：

由两个主要的部分构成：选择器，以及一条或多条声明
选择器通常是需要改变样式的 HTML 元素
每条声明由一个属性和一个值组成
- 属性（property）是您希望设置的样式属性
- 每个属性有一个值

高级语法：

选择器分组：可以对选择器进行分组，这样，被分组的选择器就可以分享相同的声明，用逗号将需要分组的选择器分开

CSS 选择器

派生选择器

派生选择器允许根据文档的上下文关系来确定某个标签的样式，通过合理地使用派生选择器，可以使 HTML 代码变得更加整洁
```
/* 列表中的 strong 元素变为斜体字 */
li strong {
    font-style: italic;
    font-weight: normal;
}
```

id 选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式
id 属性只能在每个 HTML 文档中出现一次

id 选择器以 # 来定义

#sidebar {
    border: 1px dotted #000;
    padding: 10px;
}

在现代布局中，id 选择器常常用于建立派生选择器。即使被标注为 sidebar 的元素只能在文档中出现一次，这个 id 选择器作为派生选择器也可以被使用很多次

#sidebar p {
    font-style: italic;
    text-align: right;
    margin-top: 0.5em;
}

#sidebar h2 {
    font-size: 1em;
    font-weight: normal;
    font-style: italic;
    margin: 0;
    line-height: 1.5;
    text-align: right;
}

类选择器

类选择器以一个点号显示，类名的第一个字符不能使用数字
和 id 选择器一样，class 选择器也可被用作派生选择器
```
.center {text-align: center}
```

属性选择器

对带有指定属性的 HTML 元素设置样式
```
[title] {color:red;}
```

属性和值选择器

[title=W3School] {border:5px solid blue;}

后代选择器

后代选择器又称为包含选择器
后代选择器可以选择作为某元素后代的元素
```
div.sidebar {background:blue;}
```

子元素选择器

与后代选择器相比，子元素选择器只能选择作为某元素子元素的元素
```
h1 > strong {color:red;}
```

可以结合后代选择器的子元素选择器

/* 选择器会选择作为 td 元素子元素的所有 p 元素，这个 td 元素本身从 table 元素继承，该 table 元素有一个包含 company 的 class 属性 */
table.company td > p

相邻兄弟选择器

相邻兄弟选择器可选择紧接在另一元素后的元素，且二者有相同父元素
```
/* 增加紧接在 h1 元素后出现的段落的上边距 */
h1 + p {margin-top:50px;}
```

伪类和伪元素

伪类：

:active 向被激活的元素添加样式
:focus 向拥有键盘输入焦点的元素添加样式
:hover 当鼠标悬浮在元素上方时向元素添加样式
:link 向未被访问的连接添加样式
:visited 向已被访问的连接添加样式
:first-child 向元素的第一个子元素添加样式
lang 向带有指定 lang 属性的元素添加样式

伪元素：

first-letter 向文本的第一个字母添加特殊样式
first-line 向文本的首行添加特殊样式
before 在元素之前添加内容
after 在元素之后添加内容

CSS 样式

背景

设置背景色：可以使用 background-color 属性为元素设置背景色，这个属性接受任何合法的颜色值
设置背景图像：要把图像放入背景，需要使用 background-image 属性。background-image 属性的默认值是 none，表示背景上没有放置任何图像。如果需要设置一个背景图像，必须为这个属性设置一个 URL 值
设置背景重复：如果需要在页面上对背景图像进行平铺，可以使用 background-repeat 属性。repeat-x 和 repeat-y 分别导致图像只在水平或垂直方向上重复，no-repeat 则不允许图像在任何方向上平铺
设置背景定位：可以利用 background-position 属性改变图像在背景中的位置。为 background-position 属性提供值有很多方法。首先，可以使用一些关键字：top、bottom、left、right 和 center。通常，这些关键字会成对出现，不过也不总是这样。还可以使用长度值，如 100px 或 5cm，最后也可以使用百分数值
设置背景关联：如果文档比较长，那么当文档向下滚动时，背景图像也会随之滚动。当文档滚动到超过图像的位置时，图像就会消失。您可以通过 background-attachment 属性防止这种滚动。通过这个属性，可以声明图像相对于可视区是固定的（fixed），因此不会受到滚动的影响

文本

文本属性：

color 设置文本颜色
direction 设置文本方向
line-height 设置行高
letter-spacing 设置字符间距
text-align 对齐元素中的文本
text-decoration 向文本添加修饰
text-indent 缩进元素中文本的首行
text-shadow 设置文本阴影。CSS2 包含该属性，但是 CSS2.1 没有保留该属性
text-transform 控制元素中的字母
unicode-bidi 设置文本方向
white-space 设置元素中空白的处理方式
word-spacing 设置字间距

字体

在 CSS 中，有两种不同类型的字体系列名称：

通用字体系列 - 拥有相似外观的字体系统组合（比如 "Serif" 或 "Monospace"）
特定字体系列 - 具体的字体系列（比如 "Times" 或 "Courier"）

除了各种特定的字体系列外，CSS 定义了 5 种通用字体系列：

Serif 字体
Sans-serif 字体
Monospace 字体
Cursive 字体
Fantasy 字体

字体属性：

font 简写属性。作用是把所有针对字体的属性设置在一个声明中
font-family 设置字体系列
font-size 设置字体的尺寸
font-size-adjust 当首选字体不可用时，对替换字体进行智能缩放。（CSS2.1 已删除该属性。）
ont-stretch 对字体进行水平拉伸。（CSS2.1 已删除该属性。）
font-style 设置字体风格
font-variant 以小型大写字体或者正常字体显示文本
font-weight 设置字体的粗细

链接

链接的四种状态：

a:link - 普通的、未被访问的链接
a:visited - 用户已访问的链接
a:hover - 鼠标指针位于链接的上方
a:active - 链接被点击的时刻

当为链接的不同状态设置样式时，请按照以下次序规则：

a:hover 必须位于 a:link 和 a:visited 之后
a:active 必须位于 a:hover 之后

列表

列表属性：

list-style 简写属性。用于把所有用于列表的属性设置于一个声明中
list-style-image 将图象设置为列表项标志
list-style-position 设置列表中列表项标志的位置
list-style-type 设置列表项标志的类型

表格

表格属性：

border-collapse 设置是否把表格边框合并为单一的边框。
border-spacing 设置分隔单元格边框的距离。
caption-side 设置表格标题的位置。
empty-cells 设置是否显示表格中的空单元格。
table-layout 设置显示单元、行和列的算法

轮廓

边框属性：

outline 在一个声明中设置所有的轮廓属性
outline-color 设置轮廓的颜色
outline-style 设置轮廓的样式
outline-width 设置轮廓的宽度

CSS 框模型

概述

CSS框模型

内边距、边框和外边距都是可选的，默认值是零
在 CSS 中，width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸

内边距 padding

CSS padding 属性定义元素的内边距。padding 属性接受长度值或百分比值，但不允许使用负值
还可以按照上、右、下、左的顺序分别设置各边的内边距，各边均可以使用不同的单位或百分比值
```
h1 {padding: 10px 0.25em 2ex 20%;}
```
元素的内边距设置百分数值。百分数值是相对于其父元素的 width 计算的，这一点与外边距一样。所以，如果父元素的 width 改变，它们也会改变

边框 border

元素的边框就是围绕元素内容和内边据的一条或多条线