Html 1、网页的组成部分
文字、图片和超链接等元素构成，还包括了音频、视频等等；
3、Web标准
结构标准（html） ---- 搭建页面的结构
表现标准/样式标准（css）---- 页面样式的美化
行为标准（javascript）--- 实现页面的交互效果
5、html标签分类双标签：
例如：<html></html> <body></body> <head></head>
常见的双标签
div、span、p、h1-h6、b、strong、s、del、i、em、ins、u、a
单标签: 常见的单标签
br、hr、img
6、Html标签的关系
• 嵌套关系 --- 后代关系，嵌套关系可以多层嵌套不单是两层；
• 并列关系 --- 兄弟关系
10、段落标记（记住）
段落标签p，双标签，可以清楚得到划分页面的段落；
11、水平线标签
水平线标签hr，单标签
12、浏览器对回车和空格的解析（注意）
浏览器在解析代码的时候，只会解析一个空格，不管输入多少个空格，对于回车换行直接是不解析或者解析成一个空格，所以我们在书写换行效果的时候书写换行用<br />，空格用 书写即可；
13、换行标签
br标签 ，<br />强制换行；
注意：使用段落标签等语义标签换行和br换行是不同的，前者是有控制范围效果有开始有结束，后者只是简单的强制换行效果；
14、div和span（重点）
Div
特点：没有语义，独占一行；
Span
特点：没有语义，一行共存多个；
15、文本格式化标签（记忆）
前者单纯 后者强调
加粗标签： b stong
倾斜标签：i em
下划线标签：u ins
16、图像（图片）标签（重点+记忆）
图像标签 --- img ，单标签
<img />,可以配合src属性将图片引入html页面，<img src=“图片路径” />
图像常见的属性
src 属性值 --- url 图像路径
alt 图像不能正常显示的时候替换文本；
title 鼠标移入图片显示提示文本；
width 设置图片的宽度；
height 设置图片的高度；
17、超链接a（重点）
超链接：实现页面之间的跳转，a标签，双标签；
<a href=”#”></a>
18、html注释：
<!-- 注释内容 -->
添加注释的作用：说明代码的含义，更好的管理代码的可读性，程序是不会对注释的代码进行解析的；
快捷键：Ctrl+？
19、路径
所谓的路径就是从文件（html文件或css文件）自身出发找目标文件；
常见的路径分为两大类：绝对路径（不推荐使用的）和相对路径（是我们一直要用的）
记忆口诀：
同级路径：文件和目标文件是同一个父级，平级关系；
下级路径：从文件出发往里面查找；
上级路径：从文件出发往外面查找，用 ../ 表示上一级关系；
绝对路径
01、带有盘符的路径，坚决不能使用，
例如：“D:\web\log.gif”;
02、完整的网络地址，可以使用，只要网络资源一直存在，
例如： http://www.itcast.cn
20、锚点定位
作用：实现页面内部的跳转
分两步实现锚点链接：
第一步：找目标，想要跳转到的位置添加id=”id名称”
第二步：设置锚点按钮，超链接a，
<a href=”#id名称”>跳转到目标</a>
21、base标签
base标签可以统一设置超链接a的打开方式,书写在<head></head> 之间；
<base target=“_blank”>打开一个新页面
22、特殊字符
注意：我们常用的特殊符号是：空格 、小于号<、大于号>、版权©；
23、表格表格的结构：
一对table标签嵌套tr标签，tr标签嵌套td标签；
table表示表格整体，tr表示行，td表示单元格（列）；
表格标题caption24、列表
列表分为：无序列表、有序列表、自定义列表
无序列表
结构：ul嵌套li标签，li的个数不定，按照设计稿需求进行设置；
有序列表（知道实际工作中不用）
ol嵌套li标签；
自定义列表：
dl嵌套dt和dd标签，dt表示描述标题，dd描述的内容；
一般页脚使用
25、表单（重点要强制记忆哦）完整的表单的组成
提示文本、表单、表单域（总体的提交数据的标签）组成
表单的作用
搜集用户信息，并且提交到后台
input控件
输入的意思，可以更改type属性的属性值来指定不同的控件类型；
还有对应的name、value、size等几个属性；
Input表单属性（死记硬背）
01、value 默认值，没有交互效果 --- value=” 请输入您的名字”/、02、placeholder占位符 html5的新属性，有交互效果 --- placeholder="请输入您的名字"
03、name 给当前的数据起一个名字，让后台工作人员调用
常见的input表单控件
文本框：input的type取值为text
密码框：input的type取值为password
单选按钮：type=“radio” ,想要实现单选效果我们需要给input标签设置相同的name进行设置归为一类；
复选按钮：type=“checkbox”，也可以设置同样的name名称，但是 不会影响多选的效果；
checked=“checkde” 默认选择
普通按钮：<input type=“button” value=“普通按钮” /> 必须要自己设置value值；标签按钮 button
<button>按钮</button>
提交按钮：<input type=“submit” />； 可以设置自己的value值也可以用默认的；
重置按钮：<input type=“reset” />；可以设置自己的value值也可以用默认的；
图片按钮：<input type=“image“ src=”图片路径” /> src属性必须书写查找图片路径；
文件域：<input type=“file” /> 上传文件使用；
label标签
作用：提高用户体验，扩大input表单的可操作性，点击文字可以直接将光标定到输入框，不是表单标签；
使用方法：
01、用label直接包括input表单 -----
<label> 用户名： <input type=“radio” name=“usename” value=“请输入用户名” /> </label>；
Css
1、Css的作用
Cascading Style Sheets，简称层叠样式表，主要是用来进行页面的版面布局和外观样式的美化；
2、使用css的原理
能够将结构html和样式css分离书写，简化代码，提高可阅读性；
3、css的书写位置
行内样式表：书写方便，权重高。缺点：没有实现样式和结构相分离；
内部样式表：部分结构和样式的分离。缺点：没有彻底分离；
外部样式表：完全实现结构和样式分离，方便各个页面的使用。缺点：需要引入
4、Css选择器Css选择器的分类
Css选择器分为两类：基础选择器和高级选择器（复合选择器）
基础选择器：标签选择器（html选择器）、类选择器、ID选择器
复合选择器：后代选择器、并集选择器、指定标签选择器
标签选择器：
以标签名称命名的选择器，可以把将页面中所有的同类元素全部选中，所以实际工作中标签选择器不推荐大家使用；
file:///C:\Users\ASUS\AppData\Local\Temp\ksohtml\wps5CFB.tmp.jpg
类选择器（重点）类选择器定义
类选择器使用有一个过程：
01 定义： 在css里面用点“ . ” + 类名称 +{ css键值对 } 进行样式定义;
02 调用：在html里面哪个标签需要，就在开始标签敲空格class=“类名称”进行调用；
类选择器的命名规则：
不能用纯数字、数字开头的、中文命名；
但是可以用数字结束。
类选择器特殊用法（多类名）
一个标签身上只能使用一个class，如果想要调用多个类名我们可以在一个class里面直接以空格隔开直接书写另一个类名称即可；
例如：<div class=“red font100”>一个元素调用多个类名</div>
通配符选择器*
一个*表示选中所有标签，匹配页面的所有标签，降低页面得到响应时间，不建议使用；
*{
margin:0;
padding:0;
}
5、文字控制属性
字体的综合写法 font复合属性
font：是否倾斜 是否加粗 文字大小/ 行高 字体；
字体样式(风格) font-style italic normal字体加粗 font-weight 100-700 400不加粗 700加粗文字大小 font-size 文字字体 font-family
文字颜色 color文本水平居中 text-align: center; 控制左右
text-align文本居中控制，取值：left、right、center；
也可以让行内元素（a、span、b、strong、u、i、s、em、ins），行内块元素（img、input、button）在父级盒子中居中；
注意：想要元素利用text-align: center;居中显示，必须要有一个父级盒子；
文本的行高 line-height 控制上下文本首行缩进 text-indent 单位em
text-decoration:none;没有线
text-decoration：underline；下划线
text-decoration:line-through; 中 划线/删除线
text-decoration:overline; 上划线
5、链接伪类选择器链接的伪类四种状态：
a:link 未访问的链接（访问前）
a:visited 已访问的链接（访问后）
a:hover 鼠标移动到连接上（鼠标经过）
a:active 选定的链接（按下鼠标的时候）
6、标签显示模式（重点要理解）
块级元素：自己独占一行； --- 代表标签 div、h标签
div/p/h1-h6/ul/li/dl/dt/dd
行内元素：一行可以共存多个；--- 代表标签 span 、a
a span u s del strong em i ins 等；
行内块元素：一行可以共存多个； --- 代表标签 img 、 input
三种显示模式相互转换
Display：inline/block/inline-block
7、实体化三属性（重要滴很）
宽 width
高 height
背景 background
注意：这三个属性属于我们布局的中流砥柱，只要这三个值设置好了，我们书写的网页就很少出现兼容问题；
8、背景的复合写法（死记硬背）
background:背景颜色 url（） 平铺方式 是否固定 X轴 Y轴；
地址 no-repeat/repeat-x/repeat-y fixed/不用写 center
9、Css的三大特性
分为：层叠性（覆盖性）、继承性、优先级；
10、Css权重
第一等：代表内联样式，如: style=””，权值为1000。 1,0，0,0
第二等：代表ID选择器，如：#content，权值为100。 0,1,0,0
第三等：代表类，伪类和属性选择器，如.content，权值为10。 0,0,1,0
第四等：代表类型选择器和伪元素选择器，如div p，权值为1。 0,0,0,1
特等 !important 提高权重，有提权的效果，有了样式优先生效； 老大
第五等 继承性 权重值为0 0,0,0,0
11、盒子模型盒子模型组成
内容： 实体化宽高和里面的文字图片等等
边框： border
内边距： padding 拉开内容到盒子边缘的距离；
外边距： margin 拉开盒子与盒子之间的距离；
border:边框宽度 边框样式 边框颜色；
left/right/top/bottom solid dashed dotted
border-collapse:collapse;合并相邻的边框
12、嵌套垂直外边距合并
直接给父级添加overflow:hidden;（常用方法）
13、css3圆角属性
属性border-radius 顺时针
14、盒子阴影语法：
box-shadow: 水平阴影 垂直阴影 模糊距离 阴影大小 阴影颜色
15、文字阴影语法：
text-shadow: 水平阴影 垂直阴影 模糊距离 阴影大小 阴影颜色
16、网页布局的三种机制
（1）普通流：块级元素独占一行，从上向下顺序排列；常用的元素：div、hr、p、h1-h6、ul、ol、dl、form、table；
行内元素一行共存多个，从左到右排列，碰到父元素边缘则自动换行； 常用元素：span、a、i、em；
（2）浮动：让盒子从普通流中浮起来，让多个块级盒子一行显示；
浮：
浮动之后的元素脱离了标准流；
漏：
盒子浮动之后脱离的标准流原来的位置就空了，下面的盒子会补上来；
特
1、浮动之后的盒子的显示模式会更改为行内块元素的特点；
2、浮动之后的元素之间的没有缝隙的，紧贴在一起，顶部对齐；
3、如果父级盒子不够宽装不下浮动的盒子，盒子会掉下来另起一行；
（3）定位：将盒子在浏览器的某一个位置，后期会经常用到；
定位布局：
定位模式+边偏移（方向英文更改）
边偏移：
top、bottom、left、right属性；
相对定位：position:relative; 占位
绝对定位：position:absolute; 不占位 子绝父相
固定定位：position:fixed; 特殊的绝对
定位的叠加书序z-index
17、关于图片插入底部留白
给所有的图片img设置一个vertical-align: middle;让图片的对齐方式为中心基线对齐；
18、清除浮动的影响
/*声明清除浮动的样式*/
.clearfix:after {
content: "";
display: block;
height: 0;
visibility: hidden;
clear: both;
}
.clearfix {
*zoom: 1; /*ie6,7 专门清除浮动的样式*/
}
19、css属性书写顺序
1、布局定位属性：display / position / float / clear / visibility / overflow
2、自身属性：width / height / margin / padding / border / background
3、文本属性：color / font / text-decoration / text-align / vertical-align / white- space / break-word
4、其他属性（CSS3）：content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient …
20、鼠标的手型图标
• 鼠标样式：cursor
• 小白（默认） cursor:default;
• 小手： cursor:pointer;
• 移动： cursor:move;
• 文本： cursor:text;
• 禁止： cursor:not-allowed;
21、display显示与隐藏（重点）
• 隐藏：display:none; === 属于不占位隐藏
• 显示：display:block; 将隐藏的元素显示出来
22、visibility显示与隐藏
• 占位隐藏：visibility:hidden; 盒子隐藏之后原来的位置还是在的；
25、用户界面-input轮廓线( 重要)
• 表单元素默认选中的时候会有一个蓝色的边框，各个浏览器设置是不一样
input {
outline:none;
}
26、用户界面- textarea防止拖拽文本域( 重要)
• Textarea 文本域默认有轮廓线也可以统统outline:none;取消，同时还存在右下角拖拽放大，我们一般不允许，需要设置不能拖拽，可以通过resize:none;进行设置；
27、溢出的文字省略号显示（一定要会写）（重要的）让超出固定宽的的文字内容以省略号显示三部曲
第一步 ：让文字强制一行显示 ：white-space:nowrap;
第二步：让超出范围的文字隐藏 ： overflow:hidden;
第三部：隐藏的内容以省略号显示；text-overflow:ellipsis;
28、CSS精灵技术好处
• 使用css精灵技术可以减少对服务器的请求次数；
原理
可以将多个小图标合并成一张图片，成为css精灵图或者css雪碧图；
29、滑动门原理
• 一个父级盒子（必须设置为行内块元素display:inline-block）嵌套一个子级盒子，父级盒子放左侧的圆角，子级盒子放右侧的盒子装内容；
• 设置父级盒子的背景图片，设置图片的左对齐默认即可；
background: url(images/to.png) no-repeat;
• 盒子的宽度是内容撑开的，需要给父级盒子和子级添加padding-left和padding-right；
• 子级盒子盛放内容，然后设置子级盒子的背景图片，设置图片右对齐；
background: url(images/to.png) no-repeat top right;
30、盒子边框突出显示效果
想要实现两条边框重叠我们直接用margin-left:-1px;和margin-top:-1px;来实现，如果想要实现鼠标经过突出当前盒子的线条样式分两种情况：
情况1：标准流里面，我们只需要设置鼠标经过给当前盒子添加一个position: relative;相对定位
情况2：设置了定位属性，我们只需要设置鼠标经过当前盒子的时候更改当前盒子的z-index值
31、css实现三角形效果
第一步 ，设置盒子的宽度高度为0
第二步，设置边框的宽度粗细border-width，最终显示为三角形
边框的线条样式 border-style
第三步，设置边框的颜色 border-color，4个边框都要写， 只保留需要的边框颜色，其余的不能省略，都改为 transparent 透明就好了；
第四步，为了照顾兼容性 低版本的浏览器，加上 font-size: 0; line-height: 0; |
|
收藏
淘帖
踩
