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

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

© 加勒比海带c 初级黑马   /  2018-9-15 18:23  /  1344 人查看  /  0 人回复  /   0 人收藏 转载请遵从CC协议 禁止商业使用本文

                                               HTML
1、Web标注构成
      结构:HTML    表现:CSS     行为:JS
2、HTML语言语法骨架格式:
<head>
        <title>Document</title>
</head>
<body>
       
</body>
</html>
3、无语义化标签:
<div></div>       块级元素,独占一行
<span></span>     行内元素,独占一行
  有语义化标签:
<h1>…..<h6>  标题标签    <p></p>段落标签    <hr />水平线标签   <br />换行标签
   文本格式化标签(右边的语义更加强烈):
<b></b> <strong></strong>  文字粗体显示       <i></i> <em></em> 文字斜体显示
<s></s> <del></del>  文字加删除线显示       <u></u> <ins></ins>  文字加下划线显示
4、图像标签:
<img src=“图像url/>
② 当图片找不到时,<img src=“图像 urlalt=“提示文本”/>  图像不能显示时替换文本。
③ 鼠标悬停时显示的内容:<img src=“图像urltitle=“文字”/>
④ 设置图像的宽度:<img src=“图像urlwidth=“数值”>
⑤ 设置图像的宽度:<img src=“图像urlheight=“数值”>
⑥ 设置图像边框的宽度:<img src=“图像urlborder=“数值”>
5、链接标签:
<a href=“跳转目标”>文本或图像</a>  (例: <a href=http://www.baidu.com>百度</a>
如果当时没有确定链接目标时,通常将href属性定义为“#”,即href=#”,表示该链接暂时为一个空链接。
target=“目标窗口弹出方式”,blank为在新窗口中打开方式。(例:<a href=http://www.baidu.comtarget=_blank>百度</a>
锚点定位:1、使用<a href=#ID>链接文本</a>创建链接文本。
          2、使用相应的ID名标注跳转目标的位置。
base标签:base可以设置整体链接的打开状态
                <head>
                        <base target=_blank/>
</head>
特殊字符:   空格      < 小于号    > 大于号
注释标签: <! - - 注释语句 - ->   html:ctrl+?    css:ctrl+shift+?
6、相对路径:
① 图像文件和HTML文件位于同一个文件夹,只需输入图像文件名称即可。如 <img src=“图像.jpg/>
② 图像文件位于HTML文件的下一级文件夹,输入文件夹名和文件名之间用 / 隔开,如<img src=“文件/图像.jpg/>
③ 图像文件位于HTML文件的上一级文件夹,在文件名之前加入../ ,如果是上两级,则需要使用 ../../ ,如<img src=../图像.jpg/>
  绝对路径:<img src=“文件右击属性+图像名称.jpg/>   (不推荐使用)
7、列表,表格和表单:
   一、列表
        ① 无序列表(无序列表的各个列表项之间没有顺序级别之分,是并列的)
                如:<ul>
                                <li> 列表项1 <li>
                                <li> 列表项2 <li>  
                                <li> 列表项3 <li>
                   </ul>
ul里面只能装lili里面放什么都可以
②有序列表
   如:<ol>
                        <li> 中国 </li>
                <li> 英国 </li>
                                <li> 俄罗斯 </li>
③自定义列表
  如:<dl>
                        <dt> 名词 </dt>
                        <dd> 名词解释1 </dd>
                        <dd> 名词解释2 </dd>
         </dl>
二、表格
<table>
                <caption></caption>
                <th></th>
                <tr></tr>
                        <td></td>
            <tr></tr>
                   <td></td>
                <tr></tr>
                   <td></td>
</table>
表格居中:    align:center
cellspacing=“”   单元格与单元格之间的距离
cellpadding=“”   单元格内容与单元格边框之间的距离
表格合并:  colspan  跨列合并      rowspan  跨行合并
三、表单
男女性别只能选一个的情况  <input type=radioname=sex/>
多选的情况  <input type=checkboxname=“”/>
预先选定的情况  <input type=radioname=sexchecked=checked />
表单:表单控件、表单域、提示文本。
type:button”  普通按钮       type:reset”  重置按钮
type:“submit”  提交按钮       type:“file”   文件按钮(上传文件)
下拉栏(实际中一般用js做,这个不常用): <select>
                        <option> 1990</option>
                        <option> 1991</option>
                        <option> 1992</option>
                 </select>
<input type=textplaceholder(占位字符)=“文本”>
<form action=“” method=get/post>
        用户名:<input type=textname=username>
        密码:<input type=passwordname=psaaword>
        <input type=submit>
                                                CSS
1、字体
   ① font-size  字体大小   ② font-family  字体类型  ③  font-weight 字体粗细(400=normal700=bold)   ④ font-style 字体风格 (normalitalic
   ②  font连写顺序:{fontfont-style  font-weight        font-size        font-family;}
   ③  text-indent 首行缩进  单位为em
   ④  换行:word-wrap;break-word
2、复合选择器
   ① 后代选择器:.nav li (选择所有的子孙后代)
   ② 子代选择器:.nav li  (选择子儿子,第一级别的儿子)
   ③ 并集选择器:.nav, .footer  (如果偶遇相同的样式,集体声明,逗号隔开)
   ④ 交集选择器:p.nav (既是又是的关系,这个是p标签,而且他的类名是nav
   ⑤ 链接伪类选择器: a:hover(鼠标经过链接时的状态)  a:link(未访问过的链接)
                                           a:visited(已访问过的链接)                a:active (当我们点击的时候,按下鼠标不松开)
3、显示模式
        行内元素: ① 一行显示多个 ② 不能设置宽度和高度 ③ 默认的大小是内容的大小 ④ spanaubi,strong ⑤ 文本级元素
        块级元素:① 一行只能放一个标签 ② 可以设置宽度和高度 ③ 宽度默认是容器(父级宽度)的100% divpuloldltableli ⑤ 容器级元素
        行内块元素: ① 一行可以放多个 ② 可以设置宽度和高度 ③ 和相邻行内元素(行内块)在一行上,但是之间会有空白缝隙 ④ 默认宽度就是它本身内容的宽度 ⑤ img input td
4、三大特性
        层叠性
                如果样式冲突,我们采取就近原则。
        继承性
                子级不指定,有一些样式会继承父亲的样式。(text-  font-  line-  colora标签什么都不继承)
        优先级
                ① 不同选择器,级别执行不一样
                ② 通配符选择器或者继承  权重(0,0,0,0
                ③ 标签选择器  权重(0,0,0,1
                ④ 类选择器或伪类(a:hover) 权重(0,0,1,0
                ⑤ id选择器  权重(0,1,0,0
                ⑥ 行内样式表  权重(1,0,0,0
                ⑦ !important  权重最高
5、盒子的内外边距
        ① 盒子的实际大小:内容的宽度和高度+内边距(padding+边框(border
        ②padding:内边距,指内容与边框之间的距离。Padding连写顺序为上右下左。
          padding: apx  bpx  cpx;  上内边距为apx,左右内边距为bpx,下内边距为cpx
          padding: apx  bpx;  上下内边距为apx,左右内边距为bpx
        ③margin:外边距,指盒子与盒子之间的距离。
          margin 上下左右外边距值参照padding
        ④让块级盒子居中对齐:
          必须有宽度(如果没有宽度,这个块就成了通栏盒子);左右外边距设置为auto
          通常写法:marginautomargin0 auto
               
6、插入图片和背景图片的区别
        ① 插入图片,用的比较多的是产品展示类,移动位置靠盒模型,paddingmargin
           ② 背景图片,一般用于小图标背景或者超大背景图片。移动位置靠background-positionx坐标,y坐标。background-attachment:scroll/fixed (背景图片固定)
7、嵌套块元素垂直外边距的合并问题(塌陷)
                解决办法:① 可以为父元素定义上边框(border-top);
                                  ② 可以为父元素定义上内边距(padding-top);
                                  ③ 可以为父元素添加overflowhidden
8、盒子模型稳定性
                width > padding > margin
1、 margin会有外边距合并,还有IE6下面margin加倍的bug,最后使用。
2、 padding会影响盒子大小,其次使用
3、 width没有问题
9、清除浮动的方法
        ① 额外标签法:在浮动元素末尾添加一个空标签,<div class=clear></div>,在style里添加 .clear{clear:both;}
        ② 父级元素添加overflow属性,overflow:hidden;
        ③ 使用after伪元素清除浮动
                .clearfix::after {
                        content:“”;
                        display: block;
                        height: 0;
                        visibility: hidden;
                        clear: both;
                }
                /* ie6\7专门清除浮动的样式/
                .clearfix {
                        *zoom: 1;
                }
         class=clearfix
        ④ 清除浮动之父级添加双伪元素
                .clearfix:before
                .clearfix:after {
                        content:“”;
                        display:table
                }
                .clearfix:after {
                        clearboth;
                }
                .clearfix {
                        *zoom1
                }
10、定位
        定义:将盒子定在某一个位置,自由的漂浮在其他盒子上面。
        标准流在最底层(海底),浮动的盒子在中间层(海面),定位的盒子在最上面层(天空)。
        定位=定位模式+边偏移
        静态定位:static   相对定位:relative   绝对定位:absolute   固定定位:fixed
        ① 静态定位:静态定位按照标准流特性摆放位置,它没有边偏移。
                 静态定位在布局时我们几乎不用。
        ② 相对定位:相对定位是元素相对于它原来在标准流中的位置来说的。
                 原来在标准流的区域继续占有,后面的盒子仍然以标准流的方式对待它。
        ③绝对定位:绝对定位是以带有定位(相对、绝对、固定)的父级元素来移动位置,如果父级元素都没有定位,则以浏览器文档为准移动位置。
④固定定位:固定定位是绝对定位的一种特殊方式。
                           完全脱标——完全不占位置
                           只认浏览器的可视窗口——浏览器可视窗口+边偏移属性来设置元素的位置。
                           跟父元素没有任何关系,不随滚动条滚动
⑤子绝父相:子级是绝对定位,父级要用相对定位。
⑥在使用绝对定位时,要想子盒子水平居中。
                1left50%   让盒子左侧移动到父级元素的水平中心位置。margin-left: -子盒子的一半,让盒子向左移动自身宽度的一半。
                2transform:translate-50%,-50%
                3、全部为0top=0left=0,bottom=0,right=0,margin=0
⑦鼠标样式:
                default   小白(默认)
                pointer         小手
                move         移动
                text     文本
                not-allowed    禁止
⑧溢出的文字省略号显示
                1white-space:nowrap;   强制在一行内显示文本
                2overflowhidden         溢出隐藏
                3text-overflow:ellipsis        文字溢出部分转换成省略号
⑨精灵图
                使用background-position 来调整位置,通常是负值。

0 个回复

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