A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

© qiuyi 初级黑马   /  2019-6-7 23:18  /  993 人查看  /  0 人回复  /   0 人收藏 转载请遵从CC协议 禁止商业使用本文

一、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);空格(&nbsp;);div:(布局标签,无语义,独占一行);span:(布局,没有语义,可存多个);文本格式化标签:<strong><em><del><ins>;base标签:<base target='_blank'>

3.标签属性:在标签名后面,属性=“属性值”
<img src='' /> <a href='' target='_blank' />

4.锚点位置:id='id名' <a href='id名'>

5.特殊字符:&nbsp; &lt; &gt;

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;

0 个回复

您需要登录后才可以回帖 登录 | 加入黑马