JavaEE
鸿蒙应用开发
HTML&JS+前端
Python+大数据开发
人工智能开发
AI+设计
软件测试
新媒体+短视频
集成电路应用开发
更新时间:2019年07月26日 11时14分59秒 来源:黑马程序员论坛
|
一、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; |
推荐了解热门学科
| java培训 | Python人工智能 | Web前端培训 | PHP培训 |
| 区块链培训 | 影视制作培训 | C++培训 | 产品经理培训 |
| UI设计培训 | 新媒体培训 | 产品经理培训 | Linux运维 |
| 大数据培训 | 智能机器人软件开发 |
传智播客是一家致力于培养高素质软件开发人才的科技公司，“黑马程序员”是传智播客旗下高端IT教育品牌。自“黑马程序员”成立以来，教学研发团队一直致力于打造精品课程资源，不断在产、学、研3个层面创新自己的执教理念与教学方针，并集中“黑马程序员”的优势力量，针对性地出版了计算机系列教材50多册，制作教学视频数+套，发表各类技术文章数百篇。
传智播客从未停止思考
传智播客副总裁毕向东在2019IT培训行业变革大会提到，“传智播客意识到企业的用人需求已经从初级程序员升级到中高级程序员，具备多领域、多行业项目经验的人才成为企业用人的首选。”
中级程序员和初级程序员的差别在哪里?
项目经验。毕向东表示，“中级程序员和初级程序员最大的差别在于中级程序员比初级程序员多了三四年的工作经验，从而多出了更多的项目经验。“为此，传智播客研究院引进曾在知名IT企业如阿里、IBM就职的高级技术专家，集中研发面向中高级程序员的课程，用以满足企业用人需求，尽快补全IT行业所需的人才缺口。
何为中高级程序员课程?
传智播客进行了定义。中高级程序员课程，是在当前主流的初级程序员课程的基础上，增加多领域多行业的含金量项目，从技术的广度和深度上进行拓展。“我们希望用5年的时间，打造上百个高含金量的项目，覆盖主流的32个行业。”传智播客课程研发总监于洋表示。
黑马程序员热门视频教程【点击播放】
| Python入门教程完整版（懂中文就能学会） | 零起点打开Java世界的大门 |
| C++| 匠心之作 从0到1入门学编程 | PHP|零基础入门开发者编程核心技术 |
| Web前端入门教程_Web前端html+css+JavaScript | 软件测试入门到精通 |