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. Maven 命令格式及一些常用命令

    Maven自身指定定义了一套对项目进行编译,测试,打包,运行,部署等工作的抽象.Maven自己是不实际负责这些工作的,而是把它们交给了插件.所以Maven命令的实际工作执行者是各种各样的插件. 要了解 ...

  2. android studio在windows上设置git/ssh

    windows果然是与众不同的,凡事都要那么麻烦一点点(当然..是对程序员来说..) 一开始,我想用cygwin里的git,就省得我再多装一套软件,配置也可以统一,但事实证明不行 在android s ...

  3. p2371&bzoj2118 墨墨的等式

    传送门(bzoj) 题目 墨墨突然对等式很感兴趣,他正在研究a1x1+a2y2+…+anxn=B存在非负整数解的条件,他要求你编写一个程序,给定N.{an}.以及B的取值范围,求出有多少B可以使等式存 ...

  4. 2.XML实体注入漏洞攻与防

    XML实体注入基础 当允许引用外部实体时,通过构造恶意内容,可导致读取任意文件.执行系统命令.探测内网端口.攻击内网网站等危害. 简单了解XML以后,我们知道要在XML中使用特殊字符,需要使用实体字符 ...

  5. 功防技术与实践第1.2章，kali初步了解

    20169314 2016-2017-2 <网络攻防实践>/<网络攻击与防范>第2周学习总结 一.教材学习内容总结 1.hacker和cracker的区别 网络攻防分三部分:系 ...

  6. 【转】log4j.properties 详解与配置步骤 - edward0830ly的专栏 - 博客频道 - CSDN.NET

    一.log4j.properties 的使用详解 1.输出级别的种类 ERROR.WARN.INFO.DEBUGERROR 为严重错误 主要是程序的错误WARN 为一般警告,比如session丢失IN ...

  7. Permutations and Permutations II

    Permutations 问题:给定一个无重复元素的数组,输出其中元素可能的所有排列 示例: 输入:[2,3,4] 输出:[ [2,3,4], [2,4,3], [3,2,4], [3,4,2], [ ...

  8. Spark Context 概述

    1. Spark 程序在运行的时候分为 Driver 和 Executor 两部分: 2. Spark 的程序编写是基于 SparkContext 的,具体来说包含两方面: a)    Spark 编 ...

  9. 小R的棋子

    小R的棋子(dp) 数轴上有 n 个位置可以摆放棋子,标号为1,2,3...n.小 R 现在要在一些位置摆放棋子,每个位置最多摆放一个棋子,摆放棋子的总数没有限制.小 R 不希望他摆放的棋子过于拥挤, ...

  10. NodeJS什么都能做，为什么还要JAVA？

    这张图看起来简单而且很好理解,但没尝试过,会有很多疑问. SPA模式中,后端已供了所需的数据接口,view前端已经可以控制,为什么要多加NodeJS这一层? 多加一层,性能怎么样? 多加一层,前端的工 ...