首页技术文章正文

技术贴【黑马web前端】

更新时间:2019年07月26日 11时15分46秒 来源:黑马程序员论坛

  
   
一,WEB标准的三种组成:
    主要包括结构(Structure)、表现(Presentation)和行为(Behavior)三个方面。
    结构:结构对于网页元素进行整理和分类,咱们主要学的是HTML.(排版。结构没有图片)
    表现:表现用于设置网页元素的版式、颜色、大小等外观样式,主要指的是CSS,(加入CSS,变成静态页面)
    行为:行为是指网页模型的定义及交互的编写,咱们主要学的是Javascript.(动画)
   
   
   
1,HTML的结构
   
下面是一个完整的html骨架结构
   
<html>
   
            <head>
   
                <title>标题</tilte>
   
           </head>
   
            <body>
   
                    网页内容
   
            </body>
   
</html>
    2.html主要标签介绍       
所有的html标记(标     签)都要放在一组尖括号<>里面,大部分是双标签,如  <head></head>,也有少数是单标签,如<br />。
   
标签之间有两种关系:嵌套()父子)和并列(兄弟)
    3表格标签的使用介绍   
一对table标签嵌套tr标签,tr标签嵌套td标签;
   
table表示表格整体,tr表示行,td表示单元格(列);
   
<table>
   
<tr>
   
<td></td>
   
</tr>
   
</table>
   
    4,列表:
    无序列表  <ul></ul>      <li></li>
    有列表  <ol></ol>      <li></li>
    自定义列表
    <dl>
      <dt>----</dt>
      <dd>---<dd>
      <dd>---<dd>
      <dd>---<dd>
    <dl>
   
   
   
    二,CSS部分:
   
    CSS中数值之后都会带一个单位:PX
   
    1,行内样式:写在开始标签身上
    没有实现结构与样式的分离 尽量不要用
    2,内部嵌套:写在head之间  
    还是在HTML里面写的 没有实现样式和结构的分离
    3,外部链接:最好用以后工作中常用
    新建一个CSS,,然后用link链接到html中,实现结构与样式的分离
    rel:关系
    sytlesheet:样式关系
    herf:路径,相对路径  实际工作中用的都是相对路径
   
   
    1,CSS的选择器:
   
基础选择器:标签选择器(html选择器)、类选择器、ID选择器
   
复合选择器:后代选择器、并集选择器、指定标签选择器
   
2,文字属性
   
字体的综合写法 font复合属性:font:是否倾斜   是否加粗   文字大小/ 行高   字体;
    11、   
   
   
Css的三大特性
   
分为:层叠性(覆盖性)、继承性、优先级;
    层叠性(覆盖性)   
层叠性(就近原则):如果一个标签书写的样式重叠冲突了,后写的css样式会把先写的样式覆盖掉,样式不冲突的话就不会层叠;
    继承性   
有一些css属性子级是可以继承父级的,一般文字控制属性都会被继承,a标签除外,需要单独设置;
    Css权重   
第一等:代表内联样式,如: style=””,权值为1000。            1,0,0,0
   
第二等:代表ID选择器,如:#content,权值为100。           0,1,0,0
   
第三等:代表类,伪类和属性选择器,如.content,权值为10。    0,0,1,0
   
第四等:代表类型选择器和伪元素选择器,如div p,权值为1。     0,0,0,1
   
特等  !important  提高权重,有提权的效果,有了样式优先生效; 老大
   
第五等     继承性 权重值为0                                      0,0,0,0
   
伪类选择器的权重是10  === 0,0,1,0
   
    3盒子模型    盒子模型组成   
    内容:  实体化宽高和里面的文字图片等等
   
     边框:  border
   
  内边距:   padding      拉开内容到盒子边缘的距离;
   
  外边距:   margin       拉开盒子与盒子之间的距离;
   
综合写法:border:边框宽度   边框样式   边框颜色;
    4,网页布局的三种机制   
普通流:块级元素独占一行,从上向下顺序排列;常用的元素:div、hr、p、h1-h6、ul、ol、dl、form、table;
   
行内元素一行共存多个,从左到右排列,碰到父元素边缘则自动换行;    常用元素:span、a、i、em;
   
浮动:让盒子从普通流中浮起来,让多个块级盒子一行显示;
   
定位:将盒子在浏览器的某一个位置,后期会经常用到;
    ,5定位属性   
定位属性:position 取值不同实现的效果不同,如下:
   
静态定位:position:static;
   
相对定位:position:relative;  自己本身原来的位置,进行位置的偏移;
   
   
绝对定位:position:absolute;  默认情况下是自己的父级盒子,但是如果绝对定位的父级盒子没有任何定位属性,参照物就以浏览器为参照去进行定位;
   
子绝父相:子级绝对,父级相对,父级盒子做了相对定位定位了,但是依然占位,不会影响其他盒子的布局
固定定位:position:fixed;    电脑屏幕(可视窗口);
   
   
   
  

推荐了解热门学科

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 软件测试入门到精通


在线咨询 我要报名
和我们在线交谈!