|
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 单位emtext-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;
| 
收藏
淘帖
踩
