**HTML：**
结构-样式-交互（结构-表现-行为），命名必须由数字、字母、下划线组成，不能以数字开头，最好使用字母。
HTML的语法：<元素 属性=‘属性值’ 属性=‘属性值’>内容</元素
标签：
HTML常用标签：标题<hn>（n=1-6中的数字）</hn> 、段落<p>内容</p>
<hr>水平线、<br>换行
文字标签：
加粗<strong>内容</strpong>、倾斜<em>内容</em>、变大<big>内容</big>、变小<small>内容</small>、上标<sup>内容</sup>、下标<sub>内容</sub>、特殊符号（&符号名）大空格   版权 © 商标 ®
组合标签：
无序标签<ul><li>内容<li></ul>、有序标签<ol><li>内容<li></ol>、定义列表<dl><dt>图片</dt><dd>内容</dd></dl>
图片：
<img src=’路径> <alt>替代文本 <width>’宽度’ <height>’高度’ <title>=‘悬停的提示文本‘
路径：
绝对路径：从协议或者盘符开始的路径
相对路径：从当前位置出发得到的路径
同级 直接输入名字、下级 / 上级 ../
超链接：
<a href=’要跳转的地址’ target（链接打开方式）=‘_self’或者_blank’>要被标记为链接的内容</a>
表单（6-23内容） self当前页面打开 blank新页面打开
div标签：
块标签：主要用于后期布局实现样式的样式的标签，本身是没有特殊效果的
表示方法：<div>内容</div>
**CSS：**
概念：层叠样式表，在网页实现样式的。
语法： 改变文字颜色的属性是 color
选择器{属性:属性值; 改变文字大小的属性是 font -size:*px;
Css的三种引入方式
1.内联式 <元素 style=’ 属性:属性值;属性:属性值;’></元素>
<p style=’color:pink;’>段落文字</p>
<div>这是div的内容</div>
2.内部式 在head标签里面添加一个style标间
在style里按照css基本语法写代码
<head>
<style>选择器{属性:属性值;
属性;属性值:}
. 3.外链式 创建一个以.css为后缀的css文件
在head标签里面添加一个link标签，在标签的href属性里面写要映入的css文件的路径
在css文件里面按照css基本语法写css代码
<head>
<link rel=’stylesheet’ href=’要引入的css文件的路径‘>
</head>
选择器：是一种匹配模式，用于匹配想要选中的元素
选中所有元素（通配符）
*{ 元素 }
2. 选中所有对应的标签 【标签选择器】
标签名{ }
3. 选中所有对应类名的与元素 【类选择器】
1.元素设置类名 <元素 class=‘类名1 类名2’></元素>
2.使用类选择器 .类名1{ } .类名2{ } 类目是多个的
4. 选中指定id名的元素 [id选择器]
1.元素设置id名 <元素 id=’id名></元素>
2.使用id选择器 #id名{ } id是唯一的
5.群组选择器
选择A和B a，b{ }
选择器的优先级
后代选择器
e f { } 选中e后代中所有f
7.子代选择器
e>f { } 选中e后代中的f
无穷 1000 100 10 1 0
越具体越优先，important优先级最高，!important>行内样式>id>类>标签>*>a>继承>默认 多个选择器，计算权重之和。大的优先，如果权重一致，后者覆盖前者。
CSS的浮动和盒子 ：
元素的分类
块级元素：独占整行，可以设置宽高
行级元素：有多宽占多款，不可以设宽高
行内块元素：有多宽占多款，可以设宽高
浮动 jQUERY
语法：float:left或者right; 作用：1.让元素横着排列，实现一行多列效果
注意：浮动会让元素脱离文档流 2.设置文字环绕方式
3. 盒子模型
概念:是一种思维模型，宽高+内边距+外边距+边框，主要用于页面布局
设置宽度： width：*px; 或者 *%；
设置高度：height：*px; 或者*%；
内边距：内容和盒子边缘之间的间隔
设置指定方向的内边距 【padding-方向：*px;】
Padding-top：上方向
Padding-bottom：下方向
Padding-left：左方向
Padding-right：右方向
一次性设置多个方向：padding；*px；
设置值可以是1-4个；从上开始顺时针对应有缺省去对边
注意：内边距会撑大盒子
外边距：盒子a与盒子b之间的间隔
设置指定方向的外边距 marigin-方向：*px；
一次性设置多个方向： margin：*px； 对应规则同padding
边框
设置各个方向的边框 border-方向：*px solid 颜色;
设置4个方向的边框 border：*px solid 颜色;
Solid实线 dashed虚线
盒子模型相关的细节说明：
给所有元素清除内外边距
*{margin:0;
Padding:0;
}
可内可外，优先内
盒子水平居中，使用margin:0 auto;
5.CSS的核心属性
1.文本属性
大小
font-size:*px 丨 *em 丨 *rem;
px是像素，绝对大小
em是父元素的字体大小的倍数
rem是根元素的字体大小的倍数
颜色
color;颜色的英文 丨 #16进制值丨rgb（R,G,B）丨rgba（R,G,B,透明度）
粗细
font-weight; 400 normal 丨700 bold;
400或者normal代表注册粗细
700或者bold代表加粗
字体类型 【宋体、微软雅黑】
font-family:’类型1’，’类型2’…….；
字体样式 【是否切斜】、
font-style: normal 丨 italic;
行高：一行文字所占的高低【文字本身大小+间隔】
Line-height:*px;
应用：单行文字垂直居中，多行文字，调整行间距
文本缩进
text-indent:*px;
注意行级元素不行
文本水平对齐
Text-align:left 丨center丨right丨justify;
Justify是针对多行文字
文本修饰线
text-decoration:none 丨underline丨line-through;
none没有线 underline下划线 line-through删除线、贯穿线
Font可以符合属性
可以设置字体的多个样式，但是最简的形式都必须带字体大小和类型
font:font-size/line-height font-family
字间隔 letter-spacing
列表相关的属性
List-style：none; 去掉序列的样式
2.列表相关的属性
list-style：none; 去掉序列的样式
3.继承：有上下级关系的元素之间，上级元素的样式北下级元素拥有，这就是继承
文本和列表相关的属性可以被继承
4.背景相关的属性
背景颜色 background-color
背景图片 background-image：url
背景平铺 background-repeat：no-repeat；
背景其实位置 background-position：x的坐标 y的坐标；//也可以是对应方向的英文left左 right右 center中心 top上 bottom下
背景大小 background-size：宽度 高度 ；
背景是否固定 background-attachment：fixed；
背景的符合属性 background：属性值
精灵图的步骤：
实现一个指定大小的盒子
设置精灵图为背景图
通过background-position：0px 0px; 网页调整，然后输入调整背景图的位置
优缺点：性能好，命名少，占用内存小
步骤繁琐，增删图表麻烦
文字溢出
1.当行文本溢出现实省略号
1.设置宽度 width:*px;
2. 强制不换行 white-space:nowrap;
3.溢出隐藏 overflow：hidden；
4. 文本溢出的标识为省略号 text-overflow:ellipsis;
多行溢出添加：
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
项目搭建
文件夹：
css
js
imgs
文件：*.html
命名规范
名字有数字、字母、下划线、-组成，不能用数字开头
建议使用驼峰命名
使用对应内容的英文作为名字
给大盒子用id名，盒子里面使用类名
元素分类
常规分类：
块级元素：可以设置宽高，独占一整行
行级元素：不可以何止宽高，有多宽占据多宽
行内块元素：可以设置宽高，有多宽占据多宽
元素嵌套的规则：
行级元素包含行级元素，块级元素可以包裹行级和块级
p标签中不能包含块级元素，会造成分割
a可以包裹块级元素
置换元素：浏览器根据元素的标签和熟悉，绝对现实的内容
非置换元素：出去置换之外的元素，就是非置换。
元素类型的转换：
display：block | inline-block | none | inline;
block: 显示为块
inline-block：显示为行内块
none：隐藏
inline：显示为行级元素
鼠标悬停在‘标签’身上就是 需要悬停的标签:hover 悬停显示的标签{ }（同级元素不能使用
只能在父子关系使用
垂直对齐
vertical-align: top（在上方） | middle（在中间） ; 垂直对齐
使用场景为1.解决图片3px（图片会把盒子高度撑大3px）问题 2.实现表格内垂直对齐的方式设置
查错方式
1.html ： 1元素类型2布局问题3没有保存未刷新
2.css
定位
概念:讲一个元素放在指定的位置上
语法： position:left：*px; 或者right:*px；
position：定位方式；
坐标设置： left：px 或者right： *px；
top或者bottom：*px；
定位方式
1.static 静态定位：元素的默认定位方式
2.fixed 固定定位：基于浏览器窗口就行位置移动
盒子完全居中位置大小的盒子
方式1：
position:fixed;
top:50%;
margin-top:-盒子高度的一半；
left：50%；
margin-left：盒子宽度的一半；
方式2：
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
3.relative 不会脱离文档流 相对定位：基于元素原来的位置进行移动
4.absolute 绝对定位： 基于被设置非静态定位的最近上级元素进行定位。如果都没有，基于浏览器的第一屏进行定位。（子绝父相）
5.sticky 粘性定位
锚点
<div id='id名'>要跳转的区域</div>
<a href='#id名'>链接的文字</a>
透明度
opacity： 数字【值应该在0-1之间，0是完全透明，1是完全不透明】
兼容低版本ie浏览器 filter：alpha(opacity=数值)；[值应该在0-100之间，0为完全透明]
滚动设置
语法：<marquee behavior（行为）="scroll(滚动)/alternate（晃动）"direction（方向）="up(从下向上)/down（从上向下）/left（从右向左）/right（从左向右）"scrollamount（滚动速度）="value"height="value(上下滚动范围)"width=""(左右滚动范围)>内容</marquee>
04-13
11-26
07-12
225
225
07-15
112
112
07-14
604
604
07-12
1191
1191
“相关推荐”对你有帮助么？
-
非常没帮助 -
没帮助 -
一般 -
有帮助 -
非常有帮助
提交
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
