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

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

© 智障专属 初级黑马   /  2019-6-8 18:34  /  696 人查看  /  0 人回复  /   0 人收藏 转载请遵从CC协议 禁止商业使用本文

  
   
一,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;    电脑屏幕(可视窗口);
   
   
   
  

0 个回复

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