1.HTML
1.1 HyperText Markup Language 超文本标记语言
<!DOCTYPE html> 文档类型声明，必须为所有HTML文件的第一行代码
标记格式：<p>Hello World!</p>【以尖括号“<”和“>”包裹标签，分为头部和尾部，其中尾部加入“/”，表示结束，内容在两对尖括号中间】
格式要求：不同标签之间换行后，利用两个空格进行缩进（不使用tab键）。
<DOCTYPE html>
<html><!--定义html结构-->
<head><!--必须包含标题title信息，可以包含脚本、样式、meta信息以及其它-->
<title>The First Page!</title>
</head>
<body>
</body><!--包含文档主题-->
</html>
1.2 HTML元素
- 标题元素
一共可以使用六级标题
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
- 段落元素
<p>...</p>
- 无序列表
<ul>
<li>...</li>
<li>...</li>
...
</ul>
- 有序列表
<ol>
<li>...</li>
<li>...</li>
...
<ol>
- 链接
<a href="http://www.baidu.com" target="_blank">This Is A Link.</a><!--target="_blank"，打开新标签页-->
- 图片
<!--alt="图片描述"，对图片进行描述-->
- 给图片插入链接 *
<a href="http://www.baidu.com" target="_blank"></a>
- 换行符
<br/>
- 注释符
<!--这是一段注释！-->
1.3 CSS Cascading Style Sheets 级联样式表
在HTML文件中定义CSS层级样式
<head>
<title>...</title>
<style>
...<!--CSS代码-->
</style>
</head>
处于<style>...</style>中的CSS定义可以安排在一个CSS文件中，HTML文件指向它。
即：
<head>
<title>...</title>
<!--type="text/css"，定义css样式，text是指对象为网页中的文本，css是指当前指定的文本类型-->
<!--rel="stylesheet"，规定当前文档与被链接文档之间的关系，只有 rel 属性的 "stylesheet" 值得到了所有浏览器的支持。其他值只得到了部分地支持-->
<link href="/style.css" type="text/css" rel="stylesheet">
</head>
1.4 CSS基本结构和语法
p {
/*指向html文件中的<p>...</p>元素，对其进行装饰*/
}
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不可用的时候使用*/
}
使用外部字体
在<head>...</head>定义中使用外部链接的字体，<link href="https://fonts.googleapis.com/css?family=Raleway" type="text/css" rel="stylesheet" >字体大小属性
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
<h1 id="botswana">Botswana</h1>对标有ID的特定元素设置CSS样式，以“#”开头进行选择
#botswana {
background-color: #56ABFF;
}
- 共享标识符 Class
<h1 class="science">Scientist Discovers Important Cure</h1>
<h1 class="science">New Study Reveals The Importance of Sleep</h1>
对标有Class的特定元素设置CSS样式，以“.”开头进行选择
.science {
font-family: Georgia, Times, serif;
color: #A3B4C5;
text-transform: uppercase;
}
只针对某种标签进行设置
【针对<p>标签进行设置breaking样式】
p.breaking {
line-height: 1.3em;
}
- 多类选择器
h1, p {
font-family: Garamond, serif;
}
.first, .last {
font-size: 20px;
}
- 区分类标记
<h1 class="book domestic">The Way of the Deep</h1>
<h1 class="book foreign">A Night in the Sky</h1>
.book {
font-family: Georgia, serif;
}
.domestic {
font-color: #0902CC;
}
.foreign {
font-color: #B097DD;
}
-
<div>标签定义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 表格
<table>
<thead>/*组合 HTML 表格的表头内容*/
<tr>
<th>列标题</th>
...
</tr>
</thead>
<tbody>/*组合 HTML 表格的主体内容*/
<tr>
<td>表格内容</td>
<td colspan="2">...</td> /*按列合并单元格*/
<td rowspan="2">...</td> /*按行合并单元格*/
...
</tr>
</tbody>
<tfoot>/*组合 HTML 表格中的表注[定义表格的页脚（脚注或表注）]内容*/
<tr>
<td>表格内容</td>
...
</tr>
</tfoot>
</table>
设置表格框线
table, td {
border: 1px solid black;
}
设置表格样式
table, th, td {
border: 1px solid black;
font-family: Arial, sans-serif;
text-align: center;
}
