一、(预习)
浏览器是网页的载体，网页需要在浏览器里运行
PC端常见的浏览器：谷歌、火狐、IE、QQ浏览器、欧朋
手机端常见的浏览器：Safari、chrom、QQ浏览器
编写网页的语言叫做HTML，规则W3C制定
W3C(万维网联盟)
HTML(超文本标记语言)
标题标签
<h1>...</h1>
<h6>...</h6>
段落标签
<p>...</p> <!-- 段落标签，文字会独占一行 -->
其他标签
<i>...</i> <!-- 斜体 -->
<b>...</b> <!-- 加粗 -->
<u>...</u> <!-- 下划线 -->
<del>...</del> <!-- 删除线 -->
<sup>...</sup> <!-- 上标 -->
<center>...</center> <!-- 文字居中 -->
<br> <!-- 换行 -->
<hr> <!-- 水平线 -->
<!-- 空格 -->
<a href="" target="_blank">...</a> <!-- 超链接 -->
*target表示目标，blank表示空白，target="_blank"表示在新窗口打开页面
<img title="" alt="" src=""/> <!-- 图片 -->
*title：鼠标移上去出现的文字
*alt：图片加载失败后出现的文字
列表
<!-- 无序列表 -->
<ul>
<li>
列表项目
</li>
</ul>
*<ul type="">,type:disc实心圆(默认)、circle空心圆、square实心方块
<ol>
<li>
列表项目
</li>
</ol>
*<ol type="">,type:l数字(默认)、a大小写字母、i罗马字母
绝对地址：在任何情况下，都可以找到的地址
相对地址：必须知道当前所在，才能找到
表格
<table border="" cellspacing="" > <!-- 表格 -->
<col width=""> <!-- 列 -->
<tr height="" align=""> <!-- 行 -->
<td width="" align=""></td> <!-- 单元格 -->
</tr>
</table>
*border：边框
*cellspacing：单元格间隙
*align：对齐方式
<!-- 单元格合并 -->
<td colspan="" rowspan=""></td>
*colspan：合并列
*rowspan：合并行
<!-- 补充 -->
<th>...</th> <!-- 加粗并水平居中的td -->
<colgroup span="" width="">
<table>
<thead>
表格的页眉
</thead>
<tbody>
表格的主体
</thead>
<tfooter>
表格的页脚
</tfooter>
</table>
标签嵌套
超链接不能嵌套超链接
P标签不能嵌套P标签
标题标签也不能互相嵌套
表单
<form action="表单数据提交地址" method="">
<input type="">
</form>
*type= text(文本文字)
password(密码输入框)
button(普通按钮) submit提交按钮、reset重置按钮
radio(单选框)
checkbox(复选框)
file(文件选择框)
*method= get
post
*get请求和post请求的区别
get请求通常表示获取数据
post请求通常表示提交数据
get请求发送的数据都写在地址栏上，用户可见
post请求发送的数据用户不可见
get请求不能提交大量数据，但post可以，因此不要混用
*注意事项：
form必须有action属性，表示提交地址
所有需要提交的数据，input必须有name属性
input按钮的文字，使用value属性表示
input标签必须放在form标签内才能提交
文本属性
color：文字颜色
font-family：字体类型
font-size：文字大小
font-weight:bold /* 文字加粗 */
font-style:italic /* 文字倾斜 */
text-indent：60px /* 首行缩进 */
text-align:center /* 水平对齐方式 */
line-height:100px /* 行高 */
text-decoration:underline /* 文本修饰 */
图片属性
background-image:url();
background-repeat:no-repeat;
background-position:center center;
浮动
1.浮动元素会脱离网页文档，与其他元素发生重叠，但是不会与文字内容发生重叠
(脱离文档流)
2.浮动元素在排列时，只参考前一个元素位置即可
3.用途：
文字环绕效果
横向排版布局
4.浮动元素的重叠问题
浮动元素不会覆盖文字的内容
浮动元素不会覆盖图片的内容
浮动元素不会覆盖表单元素
(输入框、单选按钮、复选框、下拉选择框等)
5.
overflow：auto /* 对超出边界的元素，父元素自动进行调整 */
clear：left/right/both /* 清除浮动，该元素不受左/右/两边浮动的影响 */
盒模型
padding:内边距 (填充，会撑开容器大小)
margin:外边距
元素类型
1.块元素
可以设置宽高大小，默认宽度为100%，并且独占一行(浮动元素也是块元素)
(p、ul li、h1~h6、div、form、table)
2.内联(行内)元素
无法设置宽高，元素大小随内容变化，所有元素默认排在一行
(i、b、span、a)
3.内联块元素
既能设置宽高大小、又能排在一行显示
(img、input)
display: block (块元素)
inline (行内元素)
inline-block (内联块元素)
定位
position: absolute (绝对定位)
relative (相对定位)
fixed (固定定位，相对浏览器)
*子绝父相
鼠标移入
.class:hover { }
二、HTML+CSS基础
快捷键
ctrl + s : 保存
ctrl + a : 全选
ctrl + x、ctrl + c、ctrl + v : 剪切、复制、粘贴
ctrl + z、ctrl + y : 撤销、前进
shift + end : 从头选中一行
shift + home : 从尾部选中一行
shift + alt + ↓ : 快速复制一行
alt + ↑或↓ : 快速移动一行
tab : 向后缩进
tab + shift : 向前缩进
多光标 : alt + 鼠标左键
ctrl + d : 选则相同元素的下一个
HTML常见标签：http://www.html5star.com/manual/html5label-meaning/
HTML初始代码
<!DOCTYPE html> 文档声明 : 告诉浏览器这是一个html文件
<html lang="en"> html文件的最外层标签：包裹着所有html标签代码 lang="en"表示是一个英文网站 lang="zh-CN"表示一个中文网站
<head>
<meta charset="UTF-8"> 元信息：是编写网页中的一些辅助信息 charset="UTF-8"国际编码，让网页不出现乱码的情况
<title>Document</title> 设置网页的标题
</head>
<body>
显示网页内容的区域
</body>
</html>
HTML语义化
所谓HTML语义化指的是，根据网页中内容的结构，选择适合的HTML标签进行编写
好处：
1.在没有CSS的情况下，页面也能呈现出很好的内容结构
2.有利于SEO，让搜索引擎爬虫更好的理解网页
3.方便其他设备解析(如屏幕阅读器、盲人阅读器等)
4.便于团队开发与维护
文本修饰标签
强调: <strong></strong>、<em></em>
下标 : <sub></sub>
上标 : <sup></sup>
删除文本 : <del></del>
插入文本 : <ins></ins>
注：一般情况下，删除文本都是和插入文本配合使用的。
图片标签
img -> 单标签
src : 引入图片的地址。
alt : 当图片出现问题的时候，可以显示一段友好的提示文字。
title : 提示信息
width、height : 图片的大小
链接标签
双标签 <a></a>
href属性 : 链接的地址
target属性 : 可以改变链接打开的方式，默认情况下：在当前页面打开 _self 新窗口打开 _blank
base -> 单标签 ：作用就是改变链接的默认行为的。
<head>
<base target="_blank">
</head>
跳转锚点
#id属性
<a href="#html">HTML</a>
<h2 id="html">HTML超文本标记语言</h2>
#name属性 (name属性加给的是a标签!<a name=""></a>)
<a href="#html">HTML</a>
<a name="html"></a>
特殊字符
空格符：
版权(©)：©
注册商标(®)：®
小于号：<
大于号：>
和号(&)：&
人民币(￥)：¥
摄氏度：°
列表
-
无序列表
注：ul和li必须是组合出现的，他们之间不能有其他标签 type属性更改前面标记的样式 -
有序列表
<ol> <li></li> </ol> 一般用得少，可以用无序列表模拟 -
定义列表
<dl> <dt>...</dt> <dd>...</dd> </dl> <dl>...</dl>:定义列表 <dt>...</dt>:定义专业术语或名词 <dd>...</dd>:对名词进行解释和描述 列表项需要添加标题和对标题进行描述的内容 -
嵌套列表
表格标签
<table>
<caption>...</caption>
<tHead>
<tr>
<th>...</th>
</tr>
</tHead>
<tBody>
<tr>
<td>...</td>
</tr>
</tBody>
<tFood>
</tFood>
</table>
table:表格的最外层容器
tr:定义表格行
th:定义表头
td:定义表格单元
caption：定义表格标题
语义化标签:<tHead>、<tBody>、<tFood>
表格属性
border:表格边框
cellpadding:单元格内的空间
cellspacing:单元格之间的空间
rowspan:合并行
colspan:合并列
align:左右对齐方式
valign:上下对齐方式
表单标签
<form action="">
<input type="">
</form>
type = text(普通的文本输入框)
password(密码输入框)
checkbox(复选框)
radio(单选框)
file(上传文件)
submit(提交按钮)
reset(重置按钮)
注:单选框，选项需要设置相同的name
checked:初始选上
disable:不可选
placeholder:提示内容
多行文本框
<textarea cols="" rows=""></textarea>
下拉菜单
<select>
<option>...</option>
</select>
selected:当前被选中的项(<option selected>...</option>)
multiple:多选(<select multiple>)
辅助表单
<label>...</label>
*使得可选择的范围变大
<input type="radio" name="gender" id="man"><label for="man">男</label>
<input type="radio" name="gender" id="woman"><label for="woman">女</label>
CSS样式的引入方式
-
内联(行内、行间)样式
在HTML标签上添加style属性来实现 -
内部样式
在<style>...</style>标签内添加的样式 注:内部样式的优点是可以复用代码 -
外部样式
<link rel="stylesheet" herf=""> rel:规定当前文档与被链接文档之间的关系 herf:地址 @import url('');
CSS中的颜色表示法
- 单词表示法
red，green，blue
- 十六进制表示法
#000000，#ffffff
- RGB三原色表示法
rgb(255, 255, 255) 取值范围0~255
CSS背景样式
background-color:背景颜色
background-image:url() 背景图片
background-repeat:背景图片的平铺方式,默认铺满
* repeat-x:x轴平铺
repeat-y:y轴平铺
repeat:平铺
no-repeat:不平铺
background-position:背景图片的位置(相对x、y轴)
background-attachment:背景图随滚动条的移动方式
* scroll:默认值(背景位置是按当前元素进行偏移的)
fix:固定不动(背景位置是按浏览器进行偏移的)
CSS边框样式
border-style:边框样式
* border-left-style
* solid:实线
dashed:虚线
dotted:点线
border-width:边框大小
border-color:边框颜色
* transparent透明颜色
CSS文字样式
font-family:字体类型
font-size:字体大小(默认16px)
font-weight:字体粗细(normal、bold)
font-style:字体样式(normal、italic)
color:字体颜色
CSS段落样式
text-decoration:文本修饰(可以添加多个)
* underline:下划线
overline:上划线
line-through:删除线
none:不添加任何装饰
text-transform:文本大小写
* lowercase:小写
uppercase:大写
capitalize:只针对首字母大写
text-indent:文本缩进(em)
text-align:文本对齐方式
*对齐方式:left、right、center、justify(两端点对齐)
line-height:定义行高
letter-spacing:字间距
word-spacing:词间距(英文)
word-break:break-all(非常强烈的折行)
word-wrap:break-word(不是那么强烈的折行，会产生空白区域)
CSS复合样式
background
border
font
*font至少要有两个值size family(顺序固定，放最后才能生效)
weight style size/line-height family
CSS选择器
-
id选择器(#elem{})
id是唯一值 命名规范 -
CLASS选择器(.elem{})
可以复用 可以添加多个class (多个样式的时候，样式的优先级根据css决定，而不是class属性中的顺序) -
标签选择器(TAG选择器)
css中div{} html中<div></div>
- 群组选择器(分组选择器)
div, #text, .title{}
*通过逗号的方式，给多个不同的选择器添加统一的css样式
- 通配选择器
*{}
使用的场景：去掉所有标签的默认样式时
- 层次选择器
后代：M N {}
父子：M > N {}
兄弟：M ~ N {} 当前M下面的所有兄弟标签
相邻：M + N {} 当前M下面相邻的N标签
- 属性选择器
M[attr] {}
= ：完全匹配
*= ：部分匹配
^= ：起始匹配
&= ：结束匹配
[][][]：组合匹配
- 伪类选择器
CSS伪类用于向某些元素添加特殊效果。一般用于初始样式添加不上的时候，用伪类来添加。
M:伪类{}
:link 访问前的样式
:visited 访问后的样式
:hover 鼠标移入时的样式
:active 鼠标按下时的样式
:after、:before 通过伪类的方式给元素添加一段文本内容，使用content属性
:checked、:disable、:foucs
结构性伪类选择器：
nth-of-type() 角标是从1开始的，1表示第一项 | n值，表示0到无穷大(隔行换色)
first-of-type()
last-of-type()
only-of-type()
## CSS样式继承
文字相关的样式可以被继承
布局相关的样式不能被继承(默认不能继承，但可以设置继承属性inherit)
## CSS优先级
相同样式优先级：
当设置相同样式时，后面的优先级较高，但不建议出现重复设置样式的情况
内部样式与外部样式：
内部样式与外部样式优先级相同，如果都设置了相同样式，那么后写的引入方式优先级高
单一样式优先级：
style行间(权重:1000) > id(100) > class(10) > tag(1) > * > 继承
!important：提升样式优先级，非规范方式，不建议使用(继承无用)
标签 + 类与单类：
标签 + 类 > 单类
群组优先级：
群组选择器与单一选择器的优先级相同，靠后写的优先级高
层次优先级：
权重比较
约分比较
## CSS盒子模型
组成：content -> padding -> border -> margin
content：内容区域，width和height组成
padding：内边距(内填充)
margin：外边距(外填充)
注：背景颜色会填充到margin以内的区域(不包括margin区域)
padding不能为负数，而margin可以为负数
box-sizing：
box-sizing属性允许以特定的方式定义匹配某个区域的特定元素，取值为content-box(默认值)|border-box
(盒尺寸，可以改变盒子模型的展示形态)
content-box：width、height -> content
border-box：width、height -> content padding border
盒子模型的一些问题：
margin叠加问题，出现在上下margin同时存在时，会取上下值中较大的作为叠加的值
margin传递问题，出现在嵌套的结构中，只是针对margin-top的问题
margin自适应居中：
margin:auto
## 标签分类
按类型分类：
block：块
(div、p、ul、li、h1…)
特性：独占一行、支持所有样式、不写宽度时与父元素的宽相同、所占区域是一个矩形
inline：内联(行内)
(span、a、em、strong、img…)
特性：左右排列并不独占一行、不支持某些样式如宽高、宽度由内容决定、所占区域不一定是一个矩形、内联标签之间会有空隙(换行产生的)
inline-block：内联块
(input、select…)
特性：并排一起但是支持宽高
注：布局一般用块标签，修饰文本一般用内联标签
按内容划分：
Flow：流内容
Metadata：元数据 base、link、noscript、script、style、template、title
Sectioning：分区 article、aside、nav、section
Heading：标题 h1、h2、h3…
Phrasing：措辞 a、audio、button、data、del…
Embedded：嵌入的 audio、canvas、embed、iframe、img、math、object、picture、svg、video
Interactive：互动的 a、button、img、label、select
按显示划分：
替换元素：浏览器根据元素的标签和属性，来决定元素的具体显示内容
非替换元素：将内容直接告诉浏览器，将其显示出来
## 显示框类型
display：block
inline
inline-block
none
扫一扫
4万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
