一、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;
|