Day4 HTML新增元素与CSS布局

时间 2019-12-07

标签 day4 day html 新增元素 css 布局栏目 HTML 繁體版

原文原文链接

　　　　　　　　　　　　　　　　Day4 HTML新增元素与CSS布局javascript

HTML新增属性:
一:常见的布局标签(都是块级元素)css

<header>头部</header>
<nav>导航</nav>
<aside>侧边栏</aside>
<article>文章，独立的块，帖子</article>
<section>章节，页眉，页脚</section>
<footer>页脚</footer>

    1.header　　页面头部
   2.nav 　　　导航连接
   3.article 　　定义页面独立的内容区域,例如一篇完整的论坛帖子，一篇博客文章，一个用户评论等.
   4.aside　　　定义页面的侧边栏内容
   5.footer 　　   页脚
   6. section 　定义文档中的节。好比章节、页眉、页脚或文档中的其它部分
    7.figure　　用于对元素进行组合。多用于图片与图片描述组合 ( 跟dl自定义列表dd,dt相同 )html

　 8.figcaption 　　是figure的标题java

<figure>
    <img src="images/img1.png" alt=""/>
    <figcaption>中国队周琦狂砍22分</figcaption>
</figure>
　　　　　　dl自定义列表dd,dt相同,图片不缩进,内容缩进.
　　　　figure图片内容都缩进

9.mark 标记　　(默认黄色背景,字体黑色)
定义带有记号的文本，它会给你要突出显示的文本下加个背景色。web

如：你是<mark>大长腿</mark>吗?

10.details 　　标签用于描述文档或文档某个部分的细节 (IE不支持 <details> 标签) canvas

<details>
    <summary>details中的标题</summary>　　　　summary 是details中的标题
    <p>详细的内容</p>　　　　　　　　　
</details>

   11.meter　　用来表示范围已知且可度量的内容。
   <meter> </meter>标签(同电池)
   <meter> 标签订义度量衡。仅用于已知最大和最小值的度量。浏览器

<meter min="0" max="100" value="80"></meter>
        low:最低预警值
        high：最高预警值
    <meter min="0" max="100" value="81" low="20" high="80"></meter>
                    低于20,高于80会变颜色,相等颜色不变为绿色

   12.ruby　　加注释

    13.<progress></progress>标签　　(同进度条)
            <progress> 标签订义运行中的进度（进程） ruby

   <progress max="100" value="20"></progress>　　
 　　 max：定义完成值　　　　value：定义当前值

   14.<datalist></datalist>标签
       (给input提供选项列表)定义 input 可能的值.datalist 及其选项不会被显示出来，它仅仅是合法的输入值列表

   15.<video> </video>标签　　 (支持mp4,ogg移动端,webM高清) 行内元素,IE5,6,7,8不支持
<video> 标签订义视频，好比电影片断或其余视频流.ide

  eg:<video src="movie.mp4" controls>您的浏览器不支持视频。</video>

经常使用属性:src       路径(必须属性)
   　　　 autoplay 自动播放
   　　　   loop      循环播放
      　　　controls 显示控制面板
   　　　 muted     静音
  　　　    post      视频播放前显示图片   post="img.jpg"
   　　　 width    height 宽度高度

   16.<audio></audio>标签 (支持MP3,ogg,wav) 没有宽高.
<audio> 标签订义声音，好比音乐或其余音频流.oop

 eg:<audio src="someaudio.mp3">您的浏览器不支持音频.</audio>

17.<source></source> 标签
给浏览器提供多种格式,浏览器根据本身支持的状况选择支持的格式.好比视频音频.

  eg:<audio controls>
       <source src="horse.ogg" >
       <source src="horse.mp3" >
         您的浏览器不支持视频.
    </audio>

18.<embed/>标签　　(行内元素)
<embed> 标签订义嵌入的内容，好比插件，也能够用来引入视频,音频.
<embed> 标签必须有 src 属性

 eg1:<embed src="helloworld.mp4" width="800" height="400"/>
 eg2:<embed src="images/纸短情长.mp3" type=""/>

19.<canvas> </canvas> 标签
canvas只是个图形容器，经过脚本js来绘制图形.(好比图标和其余图像).实现很是复杂的动画效果.

 eg: <canvas id="myCanvas">你的浏览器不支持canvas标签</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>

   1.document          文档
   2.getElementById    经过ID获取元素
   3.ctx(getcontext)   获取上下文
   4.fillstyle         填充样式
   5.fillRect          填充剂

三.CSS样式表(Cascading Style Sheets）层叠样式表,又叫级联样式表，简称样式表.
做用:
    1.实现了将内容与表现分离
    2.提升代码的可重用性和可维护性
    3.文件后缀 .css
4.css样式表特征
　1）继承性
  　　　父元素的样式，子元素能够继承.被包含在内部的标签能够拥有外部标签的样式，好比：text-*、font-*、line-height，但有些属性不能继承，好比：border、padding、margin
　 2）层叠性
   　　同一个元素能够设置多个样式
　 3）优先级
   　　设置共同的样式，优先级高的样式生效，优先级相同的状况下，后写的样式生效
　5.css语法
     css有键值对组成
      属性:属性值;
      字体颜色： color:red;
      　　　　 font-size:20px;

1.引入方式
1）行内样式内联样式    只适用于当前元素
经过HTML的style属性
　　<div style="css样式"></div>

2）内部样式只对当前页面生效

<head>
    <style>
        选择器{
            css样式
        }
    </style>
</head>

3）外部样式彻底实现了内容与表现分离提升了代码的可重用性和可维护性

<head>
    <link rel="stylesheet" href="a.css"/>
</head>

一个HTML文件能够引入多个.css文件，同一个css文件能够为多个HTML文件引入

优先级：行内样式>内部样式>外部样式>导入样式

4）导入式

<head>
    <style>
        @import "";(@import url())
    </style>
</head>

@import和link的区别：
1.@import先加载HTML文件，再加载css，link一边加载HTML一边加载css,好比定义rel链接属性等
2.@import有兼容性（IE5以上支持），link没有兼容性
3.@import只能引入css，link能够引入其余内容
4.JavaScript操做DOM时只能操做link引入的css样式，@import引入的css不能操做
5.@import增长http请求,影响加载速度

四.css基础选择器
   做用:选中写样式的元素
1.选择器{CSS样式}

   一.基本选择器

1.全局选择器/通用选择器(*)选中网页中全部元素,经常使用于设置一些默认样式
        优先级最低.

2.元素选择器div p b a img input   button body (范围越小优先于越高)
        选中全部指定元素

3.类选择器
    1) .className{ } 如：.box{ color:red; }

类名不能以数字开头
一个页面中class名字能够重复

   2)ID选择器
     #idName{   }    如：#box{color:red;}
     一个页面中id相同的id名只能出现一次

   3) * 选择一个元素的时候能够直接经过标签，也能够给标签起个class名

　　通常重复使用的样式不使用ID选择器，由于ID属性是惟一的

选择器优先级:行内样式>ID选择器>类选择器>元素选择器>全局选择器
权重:          　　　 1000    　　　　100    　　 10        　　1

   4)合并选择器
    语法：选择器1,选择器2,...{ }
    做用：提取共同的样式，减小重复代码
    例如：.header,.footer{height:300px;}

四:div+css布局
内容和显示分离，便于维护扩展，网页布局方便，当需求改变的时候，效果最明显

div：
1.可定义文档中的分区或节
2.能够把文档分割为独立的、不一样的部分。
3.是一个块级元素。这意味着它的内容自动地开始一个新行
4.一般与css进行配合，会有更增强的表现形式

布局实例时须要用到的css属性
   width:数值
   height:数值
   background-color:颜色
   float:left 使div不占据一行
通常页面可简单分为上中下结构，上为头部，中为内容部分，下位脚部。
    它的html结构以下:
    <body>
   <div class="header"></div>
   <div class="content"></div>
   <div class="footer"></div>
   </body>

1）css属性：width:; 取值 px %（占父元素的百分比）height:; 取值 px %（占父元素的百分比）background-color:;float:left|right; 浮动，块级元素在同一行显示2）div+css布局的优点布局简单，修改容易