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

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

© 973921325 初级黑马   /  2019-6-7 10:35  /  689 人查看  /  0 人回复  /   1 人收藏 转载请遵从CC协议 禁止商业使用本文

                                                                                       html  1、网页的组成部分
   文字、图片和超链接等元素构成,还包括了音频、视频等等;
2.Web标准的组成
[size=18.6667px]  Web标准不是一个标准是一系列的标准:
  结构标准(html) ---- 搭建页面的结构
  表现标准/样式标准(css)---- 页面样式的美化
  行为标准(javascript)--- 实现页面的交互效果
3、html标签分类双标签:
由开始标签<开始标签>和结束标签</结束标签>组成;
例如:<html></html>    <body></body>   <head></head>  
常见的双标签
div、span、p、h1-h6b、strong、s、del、i、em、ins、u、a
单标签:  
不需要包含内容,直接在开始标签最后面添加一个结束的符号/;
例如:<br />
<hr />
常见的单标签
br、hr、img
4、Html标签的关系
嵌套关系  --- 后代关系,嵌套关系可以多层嵌套不单是两层;
并列关系  --- 兄弟关系
5、sublime的使用技巧(重要)
      新建文档   Ctrl+N         
      保存   Ctrl+S    保存文件名必须为.html;
      放大缩小界面文字大小:按住Ctrl键,滚动鼠标滚轮或者Ctrl+加号变大,Ctrl+减号缩小;
      生成页面骨架01 – html:5 按下tab键       02  !按tab键;
      浏览页面效果:右键在浏览器中打开;
                                              CSS
css文件,然后分别连接过来即可;
1.三种链接方式的使用总结
行内样式表:书写方便,权重高。缺点:没有实现样式和结构相分离;
内部样式表:部分结构和样式的分离。缺点:没有彻底分离;
外部样式表:完全实现结构和样式分离,方便各个页面的使用。缺点:需要引入
2.文字控制属性文字颜色   colorColor取值
a、直接写英文单词yellow,red等等
b、16进制表示#aabbcc或者#abc
c、rgb()如rgb(0,0,0)
d、rgb()如rgba(0,0,0,0.5)a为透明度
常用测试颜色16进制:
黑色系列:#000; #333;  #666; #999;
灰色系列:#ccc; #eee; #ddd; #dedede;
红色:#f00;
文字大小   font-size 文字字体    font-family3、文本线条装饰 text-decoration  
text-decoration:none;没有线
text-decoration:underline;下划线
4、background属性背景颜色background-color
background-color取值是具体的色值
background-color: #0ff;
背景图片background-image
background-image取值是url(图片路径)
                background-image: url(img/03.jpeg);
背景平铺background-repeat
background-repeat
取值: 平铺:repeat         不平铺:no-repeat
              X轴平铺:repeat-x    Y轴平铺:repeat-y
图片定位background-position:
background-position:X坐标(水平方向)  Y坐标(垂直方向);
方位名词取值:
可以是纯数字+px也可以是方向英文(top/bottom/left/right);
方位名词left和right只能控制水平方向(X轴)
方位名词top个bottom只能控制垂直方向(Y轴)
方位名词center可以同时控制水平和垂直的方向
注意:如果使用方向英文只写一个值另外一个值就默认居中,所以两个值建议都写;
5.边框border边框的综合写法
边框的宽度:border-width:3px;
边框的样式:border-style:solid;     
常用的线条样式solid实线   dashed虚线    dotted点线
边框的颜色: border-color:red;
综合写法:border:边框宽度   边框样式   边框颜色;
设置不同方向的边框border-方向英文
如果只写border表示四个方向的边框都有,也可以利用 “  –  方向英文”来设置不同方向的边框: 方向英文:left/right/top/bottom/center
border:3px  solid  #ccc;   四个边框都有
border-left:3px  solid  #ccc;  左边框
border-right:3px  solid  #ccc;  右边框
border-top:3px  solid  #ccc;  上边框
border-bottom:3px  solid  #ccc;  下边框
Css设置细线表格
table,th,td{
     border:1px #ccc solid;
     border-collapse:collapse;
6、浮动:浮动布局的原理应用
让元素脱离文档流,进行页面效果的布局;
作用:
让多个盒子水平排列一行显示实现网页布局,盒子左右对齐,最早是用来实现文字环绕文字;
属性:float取值:left  right  none(不浮动默认就是)  浮动的特点浮:
浮动之后的元素脱离了标准流;
漏:
盒子浮动之后脱离的标准流原来的位置就空了,下面的盒子会补上来;
1、浮动之后的盒子的显示模式会更改为行内块元素的特点;
2、浮动之后的元素之间的没有缝隙的,紧贴在一起,顶部对齐;
7.定位模式
常见的定位模式分为:相对定位、绝对定位、固定定位
定位属性
定位属性:position 取值不同实现的效果不同,如下:
静态定位position:static;
相对定位position:relative;
绝对定位position:absolute;
固定定位position:fixed;
7、display显示与隐藏(重点)
隐藏:display:none;   === 属于不占位隐藏
显示:display:block; 将隐藏的元素显示出来
visibility显示与隐藏
占位隐藏:visibility:hidden; 盒子隐藏之后原来的位置还是在的;
overflow溢出隐藏
• overflow:hideen; 溢出隐藏,将超出固定宽高范围内的内容隐藏起来,不是删除了;
• overflow:scroll; 显示横向和竖向的滚动条显示(不用);
• overflow:auto;溢出滚动, 将超出固定宽高范围的内容以滚动条的形式显示(不用);


0 个回复

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