共计 5511 个字符，预计需要花费 14 分钟才能阅读完成。
HTML 的组成
<!DOCTYPE html>
<!-- 文档头申明 -->
<meta charset="UTF-8">
<!-- 解析规范（大管家）-->
head:
meta[keywords,description,author],title,link,script.style
css- 正文
css 的正文 /* */
html- 正文
<!-- html 的正文 -->
css 的引入有四种
一、行间款式
写法：在标签中，写一个 style 的属性, 例如：style="..."，在引号当中写 css 款式
劣势：优先级最高
劣势：不是人写的代码
二、外部样式表
写法：在 head 标签中，写一个 style 的标签，在 style 标签中通过选择器来管制款式
通过选择器进行对标签的款式操作
三、内部样式表
1. 新建一个 css 的文件
2. 在 head 标签中写一个 link 标签，写法：<link rel="stylesheet" href="门路">
用来关联 1 个 css 文件，在 css 文件中，通过选择器来管制款式
长处：利于扩大，利于保护
毛病：须要申请服务器。四、@import
css 款式的优先级：引入行间款式 > id 选择器 > class 选择器 > 标签名选择器
css-background
背景色彩
background-color: 英文单词，十六进制，rgb()
背景图片
background-image:url("门路")
舒适小提示：门路不要写错了，否则不显示
背景平铺
background-repeat:
repeat-x x 轴平铺
repeat-y y 轴平铺
no-repeat 不平铺
背景定位
background-position:x 轴地位 y 轴地位;
第一值为 X 轴地位
能够承受含糊的值如：left center right
也能够承受具体的数值：如：100px
第二只为 Y 轴地位
能够承受含糊的值如：top center bottom
也能够承受具体的数值：如：100px
例子：background-position:100px 35px;
或
background-position:right bottom;
复合写法
background:color image position repeat;
css- 边框
border 边框，算标签页面的宽度
边框形态：solid(实线) dashed(虚线) datted(点线)
边框通明 border:10px solid transparent;
css- 圆角
圆角 border-radius: 具体数值
一个值代表 4 个角
两个值代表两条对角线，第一个值代表左上 / 右下，第二个值代表右上 / 左下
三个值，第一个值代表左上，第二个值代表右上 / 左下，第三个值代表右下
四个值，从左上开始，顺时针顺次安顿，第一个值左上，第二个值是右上，第三个值右下，第四个值是左下
css- 内边距
padding 内边距，算标签在页面的宽度
css- 外边距
margin 外边距，不算标签在页面的宽度
margin 的小性子
1. 父级的第一个子级的 margin-top 会穿透父级
解决办法：1. 给父级加边框
2.overflow:hidden
3. 不要用 margin-top, 用父级的 padding-top
2. 兄弟之间的 margin-top 和 margin-bottom 会叠压
盒模型 标签在页面中具体的地位
页面的宽度:border-left + padding-left + width + padding-right + border-right
页面的高度:border-yop + padding-top + height + padding-bottom + border-bottom
标签类型
一、块标签
个性：1 独占一行
2 默认宽度是父级的 100%
3 反对所有的 css 款式
权重最大的标签是：title
在 head 标签中，权重最重的标签，为 10.
1、div
史上最罕用的标签
写法 <div></div>
语义：无意义
权重：无
2、h1-h6
题目标签
写法：双标签
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
3、p 标签
4、ul ol li
二、内联标签
内联标签分为：内联标签
内联块标签
个性：同类型的标签在同一排
内容撑开宽高
不反对宽高，不反对 margin 和 padding
1、span
无意义
无权重
2、strong
强调
强调作用
默认款式：font-weight
3、em
链接
链接作用
舒适提醒
1.href="..." 中的网址肯定记得加 http://
2. 在新页面关上，要在标签中增加一个 target 属性，值为_blank；例如：<a href="http://www.baidu.com" target="_blank"></a>
三、内联块标签个性：1. 同类型的标签排在同一排
2. 内容撑开宽高
3. 反对所有的 css 款式
4. 代码换行被解析, 解析宽度和父级的字体大小无关
img
图片标签
写法:<img src="门路" alt="图片说明">
语义：图片
权重：alt 利于搜索引擎优化
标签类型的转化
display
block 转为块标签
inline 转为内联标签
inline-block 转为内联块标签
none 显示为无
字体大小
font-size: 具体数值;
行高
line-height: 具体的数值;
示意文字中一行的高度（高低居中）测量方法，从一行文字的顶端，量到下一行文字的顶端
文字字体
font-family:
'simsun' 宋体
'simhei' 黑体
'Microsoft yahei' 微软雅黑
'kaiti' 楷体
字体歪斜
font-style:
italic 歪斜
normal 不歪斜
文本款式（字体的粗细）font-weight: 具体的数值 (100 ~ 900)/ bold/bolder
例子:font-weight:100;
文本款式的复合写法
font:style weight size/line-height family ;
舒适小提示：font 的设置，必须蕴含 font-size、line-height 和 font-family，否则不失效
例如：font:20px/40px "simhei";
文本对齐
text-align:;
left 默认值 左对齐
center 两头对齐
right 右对齐
首行缩进
text-indent: 具体的数值 /2em;
具体的数值就是偏移多少数值
2em, 是指缩进两个字符
字符间隙
letter-spacing: 具体的数值;
舒适提醒：数值能够是正数；单词间隙
word-spacing: 具体的数值;
舒适提醒：数值能够是正数；文本款式的继承问题
父级设置的文本款式，子级会享受父级的文本款式，就是继承
只有 a 标签的文字色彩设置例外，a 标签的文字色彩须要独自设立色彩。浮动
float
飘起来 left right
浮动的个性
1. 浮动元素排在同一排
2. 浮动元素内容撑开宽高
3. 浮动元素反对所有的 css 款式
4. 脱离文档流
解决脱离文档流的形式为清浮动（4 种清浮动的形式）1. 父级浮动
弊病：整个页面都会飘起来，margin 居中会生效
2. 给父级加高，子级有多高，父级就多高
弊病：不利于扩大
3. 给父级加 overflow:hidden;（hidden【暗藏】；scroll【呈现滚动条】）弊病：裁刀，子级超出的内容全副干掉
4. 标签清浮动
clear
left：标签左侧不容许呈现浮动元素
right：标签右侧不容许呈现浮动元素
both：标签两侧不容许呈现浮动元素
5. 晋升层级半级
定位
position:relative 绝对于原地位的左上角，不会让出原来的空间
个别状况下会作为，脱离规范文档流父级来应用
position:absolute 相对定位【页面的左上角定位，脱离规范文档流父级】position:fixed 固定定位【个别用来定广告位】z-index 只能用在脱离了规范流的元素中【position】float: 文字围绕图片
table 内部表格构造
thead 表格头部
tr 行
th 头部单元格【默认状况下，文本程度，垂直对齐，文本加粗】tr
td 内容单元格
tbody
tfoot
鼠标悬浮：hover：first-child 第一个子元素：last-child 最初一个子元素：nth-child(n）第几个子元素：nth-child(2n）偶数个元素：nth-child(2n-1）奇数个元素
空格 后辈选择器
> 子元素选择器
+ 第一个相邻兄弟
~ 所有兄弟
ftp: 文件的上传下载
服务器 / 空间：阿里，景安【文件夹】域名 www 一级域名 二级域名
SEM: 百度竞价，花钱的
SEO：优化，不花钱，代码，文件，服务器，内部文字【外链】品牌的关键词，行业的关键词
keywords:
description:
h1：题目
单标签：<img/> <br/> <hr/> <mata/><link/>
双标签：html body head h1~h6 p a i ul li ol strong
em span div dt dd dl b u sup sub
form 表单，用来做数据的提交，跟后盾交互
mathod: get【地址栏传输数据；电商网站；字符串】post【暗藏的模式传递；传输明码；file，能够传输大文件】action 属性，定义连贯的门路；如果不写，跳转到以后门路；input 输出元素
type 类型辨别
text 单行文本
placeholder 提醒文本，输出文本之后会主动隐没
maxlenth 最大长度
name 传输数据的键【重要的，必须增加】password 明码框【cols 列 [宽]，row 行 [高]】textarea 多行文本
radio 单选按钮【所有的按钮的 name 值必须统一 [性别]】checkbox 多选按钮【name 值必须统一】select option 下拉菜单
file 浏览框
reset 重置按钮
button 一般按钮
submit 提交按钮
value 提醒文本
按钮的 readonly 和 disabled
readonly 只读，能够提交数据
disabled 不容许，禁止 不能够提交数据
border-radius：% 或者 px 圆角
box-shadow 背景暗影
box-shadow: 程度暗影的地位 垂直暗影的地位 含糊度 暗影的尺寸，内外部暗影【默认为 outside】，内暗影 inside
分类：单层暗影，多层暗影，内暗影，外暗影
图片设置暗影：外暗影，不能设置内暗影
text-shadow 文本暗影
语法 text-shadow：x,y,blur,color
背景突变 指定两个以上的色彩进行适度
分类：线性突变：linear-gradient
径向突变：radial-gradient
反复线性突变：repeating-linear-gradient
反复径向突变：repeating-radial-gradient
线性突变语法：background：linear-gradient（方向，color1，color2）径向突变语法：background：-webkit-radial-gradient(center,shape【circla 圆形，ellipse 椭圆】,size,color1,color2)
shape 示意径向突变的形态，默认状况下是椭圆的
浏览器的兼容性：-o- Opear 欧朋
-webkit- Safari Chrome
-moz- Firefox 火狐
-ms- IE 浏览器
默认状况下：方向为从上到下
before 和 after 伪元素选择器
iframe 内联框架
varify 验证码
opacity 图片，文本通明
overflow 溢出
background-Origin 背景图片地位
background-clip 背景剪切
伪类：：hover：focus：active
伪元素：first-letter：第一个文本
first-line：第一行
before 在元素后面插入元素
after 在元素的前面插入元素
伪类：a:link【未拜访的链接】蓝色
a:visited【已拜访过的链接】紫色
a:hover【鼠标滑过链接】没有色彩
a:active【已选中的链接】红色
iframe 在一个 html 页面中增加另一个 html（内联框架）<iframe name=""src="" frameborder="0|1" scrolling="no|auto|yes"><iframe/>
name: 规定 iframe 的名称
src：规定 iframe 中显示文档的 URL
scrolling: 规定是否在 iframe 中显示滚动条
white-space: nowrap;【不让文本换行】overflow：hidden【溢出暗藏】text-overflow：ellipsis;【增加省略号】雪碧图 借助工具
transition: 过渡过程（不兼容的，须要加上浏览器前缀）transition：属性，破费的工夫，速度，提早
transition-property: 规定利用过渡的 css 属性的名称（width height background transform）transition-duration: 定义过渡成果。默认是 0（2，3）transition-timing-function：规定过渡成果的工夫曲线。默认是 ease（ease 由慢到快 再由快到慢，linear 匀速，ease-in 由慢到快，ease-out 先快后慢，ease-in-out 中间慢）transition-delay：规定过渡成果何时开始。默认是 0s。transform：rotate(0deg)；旋转 0 度
deg 为正值时，顺时针
负值，逆时针
缩放：scale（x，y）[x,y 别离代表 x 轴 y 轴]
x 是倍数，1 为不缩放；大于 1 放大；小于 1 放大
能够为负值，如果 x 为负值，沿着 x 轴翻转
如果 y 轴为负值，沿着 y 轴翻转
如果都为负值则沿着中心点翻转
x,y 的值为倍数，不能用 px
歪斜：skew(x,y)
100. 本期的教程到了这里就完结了啦, 让咱们一起致力走向巅峰!
正文完
