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. Java探索之旅(5)——数组

    1.声明数组变量:        double[] array=new double[10];         double array[]=new double[10];       double[ ...

  2. 怀旧系列(1)----FBasic

    小时候,老爸斥巨资给我买了一台小霸王学习机.玩遍了所有游戏后,里面有个F-Basic语言,黑乎乎的,一点也不好玩.直到杰兄从学校带回一本BASIC语言,才知道这玩意儿还可以编辑**图案.由于没有人指导 ...

  3. uva1610 聚会游戏（细节处理）

    uva1610 聚会游戏(细节处理) 输入一个n(n<=1000且为偶数)个字符串的集合D,找一个长度最短的字符串(不一定要在D中出现)S,使得D中恰好一半字符串小于等于S,另一半大于S.如果有 ...

  4. RabbitMQ简介和使用

    一.RabbitMQ简介 1.什么是RabbitMQ AMQP,即Advanced Message Queuing Protocol,高级消息队列协议,是应用层协议的一个开放标准,为面向消息的中间件设 ...

  5. springMVC容器加载源码分析

    springmvc是一个基于servlet容器的轻量灵活的mvc框架,在它整个请求过程中,为了能够灵活定制各种需求,所以提供了一系列的组件完成整个请求的映射,响应等等处理.这里我们来分析下spring ...

  6. Jmeter-返回值乱码处理

    Jmeter安装目录/bin/jmeter.properties中sampleresult.default.encoding默认为ISO-8859-1,将参数修改为 sampleresult.defa ...

  7. 通过sql语句对MySql数据库的基本操作

    一.数据库的基本操作 CREATE DATABASE mybookstore; DROP DATABASE mybookstore; 二.表的基本操作 1.创建表 insert into 表名(字段名 ...

  8. 60个DevOps开源工具，你在用哪些？

    你喜欢免费的东西吗?获得开发者社区支持的自动化,开源的工具是大家梦寐以求的.这里列举了 60 多款最棒的开源工具,可以帮助你很好的实行 DevOps. 一.开发工具 版本控制&协作开发 1.版 ...

  9. EOS 智能合约编写（一）

    本文编写了一个简单的EOS智能合约,实现用户管理和资产管理,包括存钱,取钱,转帐的功能,旨在学习如何编写自己的EOS合约功能. 系统:Ubuntu      EOS版本:v1.1.1 一.智能合约代码 ...

  10. 软件包管理（rpm&yum）

    一.rpm包管理器 rpm是一个功能强大的包管理工具,可用于构建,安装,查询,验证,更新和卸载软件包. 用法: rpm [OPTION...] 配置文件: /var/lib/rpm/ 已安装rpm包的 ...