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="data: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="data: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布局的优势
布局简单，修改容易

Day4 HTML新增元素与CSS布局的更多相关文章

  1. 深入css布局篇(1) — 盒模型 & 元素分类

    深入css布局(1)-- 盒模型 & 元素分类     " 在css知识体系中,除了css选择器,样式属性等基础知识外,css布局相关的知识才是css比较核心和重要的点.今天我们来深 ...

  2. CSS布局：元素垂直居中

    CSS布局之元素垂直居中 本文将依次介绍在不同条件下实现垂直居中的多种方法及简单原理 Tip:下文中说的适用场景只是举了几个简单的例子方便读者理解.实际应用场景太复杂,生搬硬套容易出错.最重要的是掌握 ...

  3. CSS布局：元素水平居中

    CSS布局之元素水平居中 本文将依次介绍在不同条件下实现水平居中多种方法 一.使用 text-align: center : 适用于块级元素内部的行内元素水平居中(也适用于图片的水平居中) 此方法对i ...

  4. CSS布局：元素水平垂直居中

    CSS布局:元素水平垂直居中 本文将依次介绍在不同条件下实现水平垂直居中的多种方法 水平垂直居中是在写网页时经常会用到的需求,在上两篇博客中,分别介绍了水平居中和垂直居中的方法.本文的水平垂直居中就是 ...

  5. 界面设计技法之css布局

    css布局之于页面就如同ECMAScript之于JS一般,细想一番,html就如同语文,css就如同数学,js呢,就是物理,有些扯远,这里就先不展开了. 回到主题,从最开始的css到如今的sass(l ...

  6. CSS布局：水平居中

    前言 一直对CSS布局一知半解,这段时间打算定下心来好好学习一下,于是先从最简单的水平居中布局开始入手.下面以分页组件为实例来记录各种实现方式. common.css <style type=& ...

  7. CSS布局 ——从display，position， float属性谈起(转)

    CSS布局 ——从display,position, float属性谈起   页面布局,或者是在页面上做些小效果的时候经常会用到 display,position和float 属性,如果对它们不是很了 ...

  8. 深入css布局篇(2) — 定位与浮动

    深入css布局(2) - 定位与浮动      在css知识体系中,除了css选择器,样式属性等基础知识外,css布局相关的知识才是css比较核心和重要的点.今天我们来深入学习一下css布局相关的知识 ...

  9. CSS布局那点事儿

    布局 最开始老的一代网站开发,布局都是通过表格实现的. 这样可以形成规整的网格布局,但是也会带来一定的复杂性.比如想要新增某个页面元素,就有可能要改动整个表格,添加很多无用的行或者列. 后来,衍生出不 ...

随机推荐

  1. Windchill

    判断某查询栏位是否为空 错误:if (projComp != null && !projComp.equals("")) 正确:if((projComp != nu ...

  2. SSM框架集成Redis

    SSM-Spring+SpringMVC+Mybatis框架相信大家都很熟悉了,但是有的时候需要频繁访问数据库中不变或者不经常改变的数据,就会加重数据库的负担,这时我们就会想起Redis Redis是 ...

  3. Ubuntu12.04安装R ，Rstudio, RHive

    环境: Ubuntu12.04 R-3.1.0 0.Ubuntu安装R官网的介绍 http://mirrors.ustc.edu.cn/CRAN/ Precise Pangolin (12.04; L ...

  4. mahout 实现canopy

    环境: mahout-0.8 hadoop-1.1.2 ubuntu-12.04 理论这里就不说了,直接上实例: 下面举一个例子. 数据准备: canopy.dat文件,COPY到HDFS上,文件内容 ...

  5. Win7常用但是被忽略的快捷键

    General keyboard shortcuts 1.Ctrl + Right Arrow Move the cursor to the beginning of the next word  向 ...

  6. java线程基础知识----java daemon线程

    java线程是一个运用很广泛的重点知识,我们很有必要了解java的daemon线程. 1.首先我们必须清楚的认识到java的线程分为两类: 用户线程和daemon线程 A. 用户线程: 用户线程可以简 ...

  7. SCUT - 223 - Maya - 构造

    https://scut.online/p/223 给定两个数N,M,构造M个在[0,80000]以内的互不相同的数使之异或和为N. 首先特判一下M<=2的两个简单情况,还有坑爹的-1! 然后想 ...

  8. Scrapy框架初探

    Scrapy 貌似是 Python 最出名的爬虫框架 0. 文档 中文文档:https://scrapy-chs.readthedocs.io/zh_CN/0.24/intro/tutorial.ht ...

  9. 解决request中文乱码问题

    因为request请求都是ISO-8859-1,而jsp页面是采用UTF-8编码,所以当传递的参数有中文时,页面会出现乱码,但是可以将取到的数据通过String的构造函数使用指定的编码类型重新构造一个 ...

  10. JS对DOM节点操作整理

    获取节点: //按照ID获取 document.getElementById('element'); //按照节点名称获取,返回类数组对象 document.getElementsByTagName( ...