|
一、Web标准 1.目标：能说出网页 中 web 标准三层组成(结构，表现，行为），能结合人来表述web标准三层
2.优点：1、让Web的发展前景更广阔 2、内容能被更广泛的设备访问 3、更容易被搜寻引擎搜索 4、降低网站流量费用 5、使网站更易于维护 6、提高页面浏览速度
3.构成： 主要包括结构（Structure，html）、表现（Presentation，css）和行为（Behavior，js）三个方面
4.浏览器内核：渲染引擎（读取网页内容，整理讯息，计算网页的显示方式并显示页面）和js引擎（解析执行js获取网页的动态效果。 后来 JS引擎越来越独立，内核就倾向于只指渲染引擎）
5.为什么遵循web标准：浏览器内核不同，显示会有差异，使用web标准，展示统一内容
二、认识html 1.语义化标签的好处：结构清晰，方便阅读和维护
2.标签：标题标签：h1/h2/h3/h4/h5/h6（header）；段落标签：p（paragraph）；水平线标签（hr）；换行（br）；空格（ ；);div：(布局标签，无语义，独占一行）;span：（布局，没有语义，可存多个）；文本格式化标签：<strong><em><del><ins>;base标签：<base target='_blank'>
3.标签属性：在标签名后面，属性=“属性值” <img src='' /> <a href='' target='_blank' />
4.锚点位置：id='id名' <a href='id名'>
5.特殊字符： < >
6.其他：base标签可以统一设置超链接a的打开方式,书写在<head></head>之间<base target='_blank'；注释：comand+/
三、表格、列表、表单 1.注意： Table里面只能嵌套tr和caption标签； <ul></ul>中只能嵌套<li></li>，直接在<ul></ul>标签中输入其他标签或者文字的做法是不被允许的； 一些图文混排效果可以用dl嵌套dt和dd实现，dt放图片，dd放文字；
2.表单的构成：表单，提示文本，表单域。表单搜集用户信息，并且提交到后台
3.input：text、password、radio、checkbox、button、submit、reset、file、image
4.lable：提高用户体验，扩大input表单的可操作性，点击文字可以直接将光标定到输入框，不是表单标签； <label> 用户名： <inputtype=“radio” name=“usename” value=“请输入用户名” /> </label>； <labelfor=“nan”>男</label> <input type=“radio” name=“sex”id=“nan“ />
5.其他：placeholder占位符：在输入框中显示提示信息；checked=‘checked’（ 属性等于属性可以只写属性）；在表单中放表格；<button></ button>
四、css 1.作用：层叠样式表，用来进行版面布局和设计样式（外观样式的美化），将结构html和样式css相分离，简化代码，提高可阅读性
2.3种形式：行内式，内部样式（head），外部样式（css文件，link）
3.css选择器： 基础：iD（#）、class（.）、标签（不推荐）、通配符 复合：后代选择器，子元素选择器，交集选择器(直接在标签选择器后面紧跟着书写类选择器或者id选择器)，并集选择器，链接伪类选择器（lvha）
4.文字控制属性：color、font-size、 font-family 、 font-weight （bold/700;normal/400）、 font-style（italic/normal em）、 line-height、 text-align 、text-indent（2em） 、text-decoration（underline，none） Font : font-style font-weight font-size/line-height font-family(不可省)
5.其他：类名或ID名快捷生成：.demo #demo Weight、height的快捷键：w120+tab h120+tab 文字的行高等于盒子的高度可以让单行文本在盒子中垂直居中对齐。
6.标签显示模式：块级元素，行内元素，行内块元素 注意： p标签是块级元素，但是p标签里面不能放div标签； 同理h标签（标题标签）dt等都是文字类块级标签，里面尽量不能放其他块级元素； 超链接里面不能嵌套超链接； 特殊情况a标签里面可以放块级元素，但是最好给a转换成块级模式（day5 1.html）；
7.background: transparent url(image.jpg) repeat-y scroll center top ;
8.css三大特性：层叠性，继承性，优先级
9.权重：一定要看标签有没有被选中，如果选中了，计算权重，如果未选中，权重为0。伪类选择器权重为10
10.background attachment 没有父级
11.实体化三属性：1.宽 2. 高 3.背景 注意：这三个属性属于我们布局的中流砥柱，只要这三个值设置好了，我们书写的网页就很少出现兼容问题；
12.实际工作中导航的布局思路1 – 利用行内块元素 注意：此方法在实际工作中不用； 一个div父级盒子一般命名为nav，嵌套ul，ul嵌套li，li嵌套a，然后让li在一行显示（将其转换为行内块）设置宽高，然后将li里面的a转换为块元素（display:block;）设置宽高和li一致； 单行文本垂直居中文字的行高等于盒子的高度
13.background-position:X坐标（水平方向） Y坐标（垂直方向）；可以是纯数字+px也可以是方向英文（top/bottom/left/right）; 注意：如果使用方向英文只写一个值另外一个值就默认居中，所以两个值建议都写； 一般情况下我们用大背景图是为了匹配不同的分辨率的屏幕，所以图片越大越好，但是我们用背景插入图片之后需要将图片的位置进行位置调节，让图片的中间位置显示出来，可以是用background-position: center 0；表示X轴（水平方向居中），Y轴（垂直方向贴顶）；
14.Css设置细线表格（死记硬背） table,th,td{ border:1px #ccc solid; border-collapse:collapse; } 注意：如果整个页面只有一个table我们直接写table样式，如果有多个我们可以给table设置一个父级用后代选择器去书写；
15.类选择器的命名规则：不能用纯数字、数字开头的、中文命名；但是可以用数字结束。 id选择器的命名规则：不能用纯数字、数字开头的、中文命名；
16.text-align: center;不仅可以让文字居中，也可以让行内元（a、span、b、strong、u、i、s、em、ins），行内块元素（img、input、button）在父级盒子中居中； 注意：想要元素利用text-align: center;居中显示，必须要有一个父级盒子；
17.css三大特性：层叠性，继承性，优先级
18.css权重： 内嵌式1000----ID 100--class 10 和伪类选择器--标签选择器1--继承0---！important最高
19.盒子添加了padding不撑大的情况（重点） 如果盒子没有设置宽高，加了padding值之后盒子就不会被撑大；
20.让盒子居中的条件（注意） 01 盒子的显示模式必须为块级元素 02 盒子必须要有固定的宽度 03 利用margin：上下 auto；/ margin：auto；/ margin-left:auto;margin-right:auto;
21.胶囊形状：首先是一个长方形，然后设置border-radius的取值为长方形高度一半； 盒子阴影:box-shadow: 水平阴影 垂直阴影 模糊距离 阴影大小 阴影颜色
22.清除浮动的影响：额外标签法、父级加overflow属性法、使用after伪元素法、使用双伪元素清除浮动、固定高度法；
23.css属性书写顺序 1、布局定位属性：display / position / float / clear / visibility /overflow（建议 display 第一个写，毕竟关系到模式） 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 … 24.让超出固定宽的的文字内容以省略号显示三部曲 第一步：让文字强制一行显示 ：white-space:nowrap; 第二步：让超出范围的文字隐藏： overflow:hidden; 第三部：隐藏的内容以省略号显示；text-overflow:ellipsis;
| 
收藏
淘帖
踩
