Day4 HTML新增元素与CSS布局

最新推荐文章于 2024-10-01 18:02:39 发布

qq_45670012

最新推荐文章于 2024-10-01 18:02:39 发布

阅读量119

点赞数

分类专栏：前端文章标签： web前端学习

原文链接：https://www.mk2048.com/blog/blog.php?id=hhjajah0jk2j&title=Day4+HTML%E6%96%B0%E5%A2%9E%E5%85%83%E7%B4%A0%E4%B8%8ECSS%E5%B8%83%E5%B1%80

版权

前端专栏收录该内容

1223 篇文章 6 订阅

订阅专栏

　　　　　　　　　　　　　　　　Day4 HTML新增元素与CSS布局

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

<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相同 )

　 8.figcaption 　　是figure的标题

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

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

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

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

<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> 标签定义运行中的进度（进程）

   <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> 标签定义视频，比如电影片段或其他视频流.

  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> 标签定义声音，比如音乐或其他音频流.

 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>