AI智能应用开发
AI大模型开发
AI鸿蒙开发
AI嵌入式+
AI大数据开发
AI运维
AI测试
跨境电商运营
AI设计
AI+短视频直播运营
更新时间:2023年03月06日 11时29分52秒 来源:黑马程序员论坛
|
html的核心结构:<!DOCTYPE html>使用的是h5格式 <html lang="en"> <head> <meta charset="UTF-8">字符集 <title>Document</title>标题 </head> <body> 内容 </body> </html> 表格:table标签 表单:input标签 图片:img src 链接:a href 空格: 小于号:< 大于号:> 谷歌浏览器内核:blink; web标准的组成部分 结构标准（HTML） 表现标准（CSS样式） 行为标准（javascript） 关于HTML的概念 • 1、HTML是超文本标记语言，不是编程语言； • 2、用HTML标签来描述网页元素，比如：链接、图片、文字等； • 3、我们需要将所有的标签放在尖括号“<>” 里面 权重对比第一等：代表内联样式，如:style=””，权值为1000。 第二等：代表ID选择器，如：#content，权值为100。 == 0,1,0,0 第三等：代表类，伪类和属性选择器，如.content，权值为10 == 0,0,1,0 第四等：代表类型选择器和伪元素选择器，如div p，权值为1== 0,0,0,1 最高等级：!important 提高权重，有提权的效果，有了样式优先生效； 继承的权重为0盒子的组成： 内容 一般指的就是宽和高 边框：border 内边距：padding 拉开内容到盒子边缘的距离； 外边距： margin 拉开盒子与盒子之间的距离； 边框的宽度：border-width:3px; 边框的样式：border-style:solid; 取值：solid实线 dashed虚线 dotted点线 边框的颜色： border-color:red; 综合写法：border:边框宽度 边框样式 边框颜色； 设置边框border的不同方向的样式边框的设置：如果只写border表示四个方向的边框都有，也可以利用 “ – + 方向英文”来设置不同方向的边框 border:3px solid #ccc; 四个边框都有 border-left:3px solid #ccc; 左边框 border-right:3px solid #ccc; 右边框 border-top:3px solid #ccc; 上边框 border-bottom:3px solid #ccc; 下边框 border:none; 没有边框 注意:01border的书写顺序如果我们在最后面书写border:none;会将所有的border清空，所以在书写的一定要注意书写顺序； 02 有一些标签默认是有border的，我们需要单独设置，比如：input Padding不同方向设置：padding:30px; 四个方向的内边距都是一个值； padding-left:40px; 设置左边的内边距； padding-right:40px; 设置右边的内边距 padding-top:40px; 设置距离顶部的内边距 padding-bottom:40px; 设置距离底部的内边距 取值的个数不同表示意思不同： padding：30px； 表示四个方向的取值都一样； padding：30px 60px； 表示：上下 左右 取值； padding：30px 50px 60px； 表示：上 左右 下 取值； padding：30px 40px 50px 60px ；表示：上 右 下 左 取值； 盒子的实际占位尺寸蓝色表示 内容的大小 绿色表示 内边距padding 黄色表示 边框border 橙色表示 外边距margin 注意：计算实际占位尺寸的时候没有margin，外边距是用来更改盒子的所占的位置，而不是本身的大小； 问题：01、如果盒子有固定的宽高的情况下，添加了边框和内边距，盒子的实际大小会变大； 解决方案：加多少减去多少，再减的是还要注意是减去宽度环视高度； 02、如果盒子没有设置宽高，加了padding值之后盒子就不会被撑大； Margin外边距的设置margin不同方向设置：margin:30px; 四个方向的外边距都是一个值； margin-left:40px; 设置左边的外边距； margin-right:40px; 设置右边的外边距 margin-top:40px; 设置距离顶部的外边距 margin-bottom:40px; 设置距离底部的外边距 取值的个数不同表示意思不同： margin：30px； 表示四个方向的取值都一样； margin：30px 60px； 表示：上下 左右 取值； margin：30px 50px 60px； 表示：上 左右 下 取值； margin：30px 40px 50px 60px ；表示：上 右 下 左 取值； 块级盒子水平居中• 让盒子居中的条件： • 01 盒子的显示模式必须为块级元素 • 02 盒子必须要有固定的宽度 • 03 利用margin：上下 auto；/ margin：auto； • 注意：上下的值可以自定义设置，如果没有设置为 margin:0 auto; 文本居中属性text-align: center;和margin:auto;的区别text-align:center; 是让父级盒子里面的文本、行内元素（span/a/em）、行内块元素(img/input)水平居中显示; margin:auto; 只让块元素水平居中显示; 4、插入图片和背景图片区别• 内容一般用插入图片，装饰性的小图标一般用背景图片； • 插入图片移动位置要使用盒子模型的外边距margin和内边距padding设置； • 背景图片移动位置用背景图片额度定位background-position进行设置； 5、清除元素默认的内外边距默认的标签基本上都会有一些默认的内外边距，会影响我的网页布局，所以我们需要在书写网页的时候清除这些默认的边距：*{marin:0；padding:0;} 以后书写网页的时候css第一行就书写改代码； 6、行内元素设置外边距margin和padding的问题给行内元素设置margin-top、margin-bottom、padding-top、padding-bottom是不会显示效果的；如果想要让他们生效怎么处理？ 解决方案：01、不要添加； 02、将行内元素的显示模式用display: block;转换给块元素或者用display:inline-block;转换行内块元素； 7、垂直排列的盒子外边距合并问题：两个盒子如果垂直排列，上面的盒子设置了marin-bottom,下面的盒子设置了margin-top，最终显示的样式两个值谁大就显示谁； 解决方案：不要同时设置，只给一个盒子设置即可； 8、嵌套垂直外边距合并问题：如果两个盒子有嵌套包含的父子级关系，如果给子级盒子设置了margin-top，效果显示父级盒子也会跟着掉下来； 解决方案： 1、为父级设置上边框（不用，因为添加了border父级的高度会增大） 2、直接给父级设置padding-top：1px，如果父级有高度注意减去对应的高度； 3、直接给父级添加overflow:hidden;（常用方法） 首先是正方形，然后设置border-radius:50%; 不管是长方形还是正方形，只要设置border-radius的取值为固定的值即可； 设置border-radius的取值为盒子高度的一半； == border-radius:左上角和右下角 右上角和左下角； == border-radius:左上角 右上角和左下角 右下角； == border-radius:左上角 右上角 右下角 左下角； |
推荐了解热门学科
| 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 | 软件测试入门到精通 |
