1.HTML
1.1 HyperText Markup Language 超文本标记语言
Hello World! 文档类型声明，必须为所有HTML文件的第一行代码
标记格式：
格式要求：不同标签之间换行后，利用两个空格进行缩进（不使用tab键）。
The First Page!
1.2 HTML元素
- 标题元素
一共可以使用六级标题
一级标题
二级标题
三级标题
四级标题
五级标题
六级标题
- 段落元素
...
- 无序列表
- ...
- ...
...
- 有序列表
- ...
- ...
...
- 链接
This Is A Link.
- 图片
- 给图片插入链接 *
- 换行符
- 注释符
1.3 CSS Cascading Style Sheets 级联样式表
在HTML文件中定义CSS层级样式
...
处于中的CSS定义可以安排在一个CSS文件中，HTML文件指向它。
即：
...
1.4 CSS基本结构和语法
p {
/*指向html文件中的...
元素，对其进行装饰*/
}
h1, p {
/*属性和值的设置*/
font-size: 42px;
}
- 通用选择器
* {
}
- 格式要求：选择器和“{”之间存在一个空格，两个规则之间空一行，使用两个空格进行缩进，一个规则结束使用“;”进行。 *
利用/*这是一段注释！*/进行注释。
1.5 CSS颜色设置
- 前景色
color - 背景色
background-color
CSS提供的147种命名颜色的列表。
三种自定义颜色方式
- rgb(red, green, blue)，16,777,216种可能；
- #09AA34，09代表红色，AA代表绿色，34代表蓝色；
- HSL【Hue色调 0~360； Saturation饱和度 0~100%； Lightness亮度 0~100%，默认值50%】。
- 设置透明色，
rgba(red, green, blue, alpha)，alpha value表示透明度，大小范围0~1之间。
注意
h1 {
color: rgb(3, 150, 100);
color: rgba(3, 150, 100, 0.75);
}
上述两个颜色中，第二个是优先显示的，但是如果浏览器不支持透明色，则只选用第一个。
1.6 CSS字体设置
改变网页中的字体，使用属性font-family: Garamond;，当字体名字为多个字母组合的时候，使用双引号括起来。
衬线字体 serif
非衬线字体 sans-serif
设置后备字体
h1 {
font-family: Garamond, Times, serif; /*Times字体在Garamond不可用的时候使用*/
}
使用外部字体
在...定义中使用外部链接的字体，字体大小属性
font-size: 18px;
大小单位：px，em，%线高度属性
line-height: 1.5em;
其值为后一行字体底部到前一行字体底部的距离。单词间距
word-spacing: 0.3em;字母间距
letter-spacing: 0.3em;粗体
font-weight: bold;斜体
font-style: italic;大小写转换
text-transform: uppercase;，大写；
text-transform: lowercase;，小写。移动字体
text-align: right;;
text-align: left;;
text-align: center;;
1.7 标记HTML元素
-
唯一标识符 ID
Botswana
对标有ID的特定元素设置CSS样式，以“#”开头进行选择
#botswana {
background-color: #56ABFF;
}
- 共享标识符 Class
Scientist Discovers Important Cure
New Study Reveals The Importance of Sleep
对标有Class的特定元素设置CSS样式，以“.”开头进行选择
.science {
font-family: Georgia, Times, serif;
color: #A3B4C5;
text-transform: uppercase;
}
只针对某种标签进行设置
【针对标签进行设置breaking样式】
p.breaking {
line-height: 1.3em;
}
- 多类选择器
h1, p {
font-family: Garamond, serif;
}
.first, .last {
font-size: 20px;
}
- 区分类标记
The Way of the Deep
A Night in the Sky
.book {
font-family: Georgia, serif;
}
.domestic {
font-color: #0902CC;
}
.foreign {
font-color: #B097DD;
}
- 标签
定义HTML文档的分区或节
1.8 CSS 框
* { border: 1px solid rgba(0, 0, 0, 0.3); }-
height和width属性
height: 320px;
width: 80%; 最小与最大宽度属性
p { min-width: 300px; max-width: 600px; }- 最小与最大高度属性
p { min-height: 150px; max-height: 300px; }- 内容溢出，overflow属性
p { min-width: 300px; max-width: 600px; min-height: 150px; max-height: 300px; overflow: scroll; /*值可以为scroll或hidden*/ }- border-style 边框类型
div { border-style: solid; }`solid`，实线边框 `dashed`，虚线边框 `dotted`，点线边框 `double`，双实线边框 `groove`，3D凹槽边框 `inset`，3D inset 边框 `outset`，3D outset 边框 `ridge`，3D 垄状边框 `hidden` or `none`，无边框- border-width 边框宽度
p { border-style: solid; border-width: 5px; /*thin or medium or thick*/ }p { border-style: solid; border-width: 3px 1px 2px 4px; /*top: 3 pixels, right: 1 pixel, bottom: 2 pixels, left: 4 pixel*/ }p { border-style: solid; border-left-width: 4px;/*border-top-width,border-right-width,border-bottom-width,border-left-width*/ }border-color 边框颜色
border 边框
div.container { border: 3px solid rgb(22, 77, 100);/*border-width: 3px,border-style: solid, border-color: rgb(22, 77, 100)*/ }- border-radius 圆角边框
1.9 内容
- padding 填充【Box的内容和边框之间的填充】
p { border: 3px solid #XXXXXX; padding: 5px 10px 5px 10px;/*top: 5 pixels, right: 10 pixel, bottom: 5 pixels, left: 10 pixel*/ padding: 5px 10px;/*top and bottom: 5 pixels,left and right: 10 pixel*/ padding-top: 5px; padding-right: 10px; padding-bottom: 5px; padding-left: 10px; }-
margin 外边距
【值的设置同padding，
auto值为设置其在页面中央】 display 显示
li { display: inline; }`inline`，内联元素，默认值 `block`，块级元素 `inline-block`，行内块元素 `none`，不显示元素- visibility 可见
.future { visibility: hidden; }`hidden`，设置不可见元素 `visible`，设置可见元素1.10 更改Box
用于更改用于计算元素宽度和高度的默认的 CSS 盒子模型
可以使用此属性来模拟不正确支持CSS盒子模型规范的浏览器的行为* { box-sizing: border-box; }-
position 布局
static默认值，没有定位
relative绝对定位，相对与最近的已经定位父元素
absolute相对定位，相对元素正常位置
fixed相对浏览器窗口是固定位置
.box-bottom { background-color: DeepSkyBlue; position: relative; top: 20px; left: 50px; }`top` 元素向下移动 `bottom` 元素向上移动 `left` 元素向右移动 `right` 元素向左移动z-index 元素堆叠顺序
【屏幕内外方向上的位置】-
float 浮动
left向左浮动
right向右浮动 -
clear 不允许浮动元素
left左侧不允许浮动元素
right右侧不允许浮动元素
both左右两侧不允许浮动元素
none允许浮动元素，默认值
1.11 添加图像
设置长宽属性，显示方式，外边距
img.leaf { width: 300px; height: 200px; display: block; margin: 0px auto; }- background-image 背景图片
body { background-image: url("https://www.example.com/leaf.jpg"); }- background-repeat 是否重复显示图像
p { background-image: url("#"); background-repeat: repeat-x; }`repeat` 默认。背景图像将在垂直方向和水平方向重复 `repeat-x` 背景图像将在水平方向重复 `repeat-y` 背景图像将在垂直方向重复 `no-repeat` 背景图像将仅显示一次- background-position 图片显示位置
p { background-image: url("#"); background-repeat: no-repeat; background-position: right center; }`left top` 左上角 `center top` 中心上方 `right top` 右上角 `left center` 中心左侧 `center center` 中心 `right center` 中心右侧 `left bottom` 左下角 `center bottom` 中心下方 `right bottom` 右下角- 合并设置
p { background: url("#") no-repeat right center; }- background-size 图像大小
div.header { height: 400px; width: 100%; background: url("#") no-repeat right center; background-size: cover; }`cover` 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域，背景图像的某些部分也许无法显示在背景定位区域中 `contain` 把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域- background-attachment 是否固定图像
p { background: url("#") no-repeat right center; background-attachment: fixed; }`scroll` 默认值。背景图像会随着页面其余部分的滚动而移动 `fixed` 当页面的其余部分滚动时，背景图像不会移动- -webkit-linear-gradient() 颜色线性渐变变化
div.header { height: 400px; width: 400px; background-image: -webkit-linear-gradient(#666CCC, #BC1324); }1.12 表格
/*组合 HTML 表格的表头内容*/
列标题 ...表格内容 ... /*按列合并单元格*/... /*按行合并单元格*/ ...表格内容 ...设置表格框线
table, td { border: 1px solid black; }设置表格样式
table, th, td { border: 1px solid black; font-family: Arial, sans-serif; text-align: center; } -