H5+class7

作者: 敲出天下 | 来源:发表于2017-02-20 18:36 被阅读0次

    今天主讲讲解了三点:

    1、文章布局中中剩余的几个知识点:

    • 清除默认边距;
    • 还原字体和字号等;
    • 浮动元素;

    2、网页布局中第二种方式:浮动流;
    3、自学标签:

    • placeholder(input-text配套使用)
    • bdo标签
    • big标签
    • blockquote+cite标签
    • canvas标签(配合js使用)

    ·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·……·…·…·…·…

    一、清除默认内边距:目的:为了更好的排版;
    • 方法1:使用通配符*
      格式:
    *{
                margin: 0;
                padding: 0;
            }
    
    • 方法2:这种写法相对于使用通配符,可以弱弱的提高网页响应性能;
      格式:
    body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{
                margin:0;padding:0
    

    ·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·……·…·…·…·…

    • 还原字体和字号等;
      这里的行高和字号其实是指100%区模拟一个网页上的文字的排版,包括了行高、字号、字体等元素。这里其实就是将需要模仿的网页截图,然后通过firefox软件,然后自己输入字体,慢慢调整将原来的内容恰好覆盖。

    ·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·……·…·…·…·…

    二、浮动流:

    1.标准流(文档流/普通流)排版方式
    1.1其实浏览器默认的排版方式就是标准流的排版方式
    1.2在CSS中将元素分为三类, 分别是块级元素/行内元素/行内块级元素
    1.3 在标准流中有两种排版方式, 一种是垂直排版, 一种是水平排版
    垂直排版, 如果元素是块级元素, 那么就会垂直排版
    水平排版, 如果元素是行内元素/行内块级元素, 那么就会水平排版

    2.浮动流排版方式
    2.1浮动流是一种"半脱离标准流"的排版方式
    2.2浮动流只有一种排版方式, 就是水平排版. 它只能设置某个元素左对齐或者右对齐

    注意点:
    1.浮动流中没有居中对齐, 也就是没有center这个取值
    2.在浮动流中是不可以使用margin: 0 auto;

    特点:
    1.在浮动流中是不区分块级元素/行内元素/行内块级元素的
    无论是级元素/行内元素/行内块级元素都可以水平排版
    2.在浮动流中无论是块级元素/行内元素/行内块级元素都可以设置宽高
    3.综上所述, 浮动流中的元素和标准流中的行内块级元素很像

    浮动元素的特点:
    排序规则:
    1.浮动元素排序规则
    1.1相同方向上的浮动元素, 先浮动的元素会显示在前面, 后浮动的元素会显示在后面
    1.2不同方向上的浮动元素, 左浮动会找左浮动, 右浮动会找右浮动
    1.3浮动元素浮动之后的位置, 由浮动元素浮动之前在标准流中的位置来确定
    贴靠现象:
    1.什么是浮动元素贴靠现象?
    1.如果父元素的宽度能够显示所有浮动元素, 那么浮动的元素会并排显示
    2.如果父元素的宽度不能显示所有浮动元素, 那么会从最后一个元开始往前贴靠
    3.如果贴靠了前面所有浮动元素之后都不能显示, 最终会贴靠到父元素的左边或者右边
    字围现象:
    浮动元素不会挡住没有浮动元素中的文字, 没有浮动的文字会自动给浮动的元素让位置,这个就是浮动元素字围现象

    ·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·……·…·…·…·…

    三、自学标签:
    • 3.1 placeholder:用于在input的text中预先填写一个内容,提醒用户这里输入内容的方向。

    • 3.2 bdo标签的使用:
      格式:

    <bdo dir="rtl">Here is some text</bdo>
    

    取值:
    字体顺着写,和字体反着写:取值有两个:rtl和ltr

    • 3.3 big标签:<big></big>,可以多层嵌套,比如两层嵌套:<big><big></big></big>,这个标签各个浏览器都支持,不过已经弃用。

    • 3.4 blockquote+cite标签作用:

    <blockquote cite="http://www.wwf.org">
    WWF's ultimate goal is to build a future where people live in harmony with nature.
    </blockquote>
    

    作用:
    blockquote 与 /blockquote之间的所有文本都会从常规文本中分离出来,经常会在左、右两边进行缩进(增加外边距),而且有时会使用斜体。
    cite:
    用 cite 标签把指向其他文档的引用分离出来,尤其是分离那些传统媒体中的文档,如书籍、杂志、期刊,等等。如果引用的这些文档有联机版本,还应该把引用包括在一个 a标签中,从而把一个超链接指向该联机版本。cite 标签还有一个隐藏的功能:它可以使你或者其他人从文档中自动摘录参考书目。我们可以很容易地想象一个浏览器,它能够自动整理引用表格,并把它们作为脚注或者独立的文档来显示。<cite> 标签的语义已经远远超过了改变它所包含的文本外观的作用;它使浏览器能够以各种实用的方式来向用户表达文档的内容。
    cite没看懂

    • 3.5canvas标签:
      例子格式:用于获得一个长80高100的矩形。
    <canvas id="myCanvas"></canvas>
    <script type="text/javascript">
    var canvas=document.getElementById('myCanvas');
    var ctx=canvas.getContext('2d');
    ctx.fillStyle='#FF0000';
    ctx.fillRect(0,0,80,100);
    </script>
    

    扩展了解:API
    api就是接口,html里面的api也不例外,也是些编程接口,是你访问一些编码指令和一些标准的一个接口一个集合,就跟插座一样,是电和电器的一个接口。比如html5里面的canvas,是绘图的一个api,html5获取地理位置的api,即时通信的api,文件读取api等等,通过这些api来访问标准里面的指令编码,来操纵相应的操作。
    canvas 标记和 SVG 以及 VML 之间的差异:
    canvas 标记和 SVG 以及 VML 之间的一个重要的不同是,<canvas> 有一个基于 JavaScript 的绘图 API,而 SVG 和 VML 使用一个 XML 文档来描述绘图。
    这两种方式在功能上是等同的,任何一种都可以用另一种来模拟。从表面上看,它们很不相同,可是,每一种都有强项和弱点。例如,SVG 绘图很容易编辑,只要从其描述中移除元素就行。
    要从同一图形的一个 <canvas> 标记中移除元素,往往需要擦掉绘图重新绘制它。

    相关文章

      网友评论

          本文标题:H5+class7

          本文链接:https://www.haomeiwen.com/subject/tprewttx.html