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. python fabric的安装与使用

    背景:fabric主要执行远程的shell命令,包括文件的上传.下载,以及提示用户输入等辅助其它功能. 测试系统:ubuntu16 要求:python //系统有自带,ubuntu16 通常自带pyt ...

  2. mysql主从服务器复制操作

    master主机ip:192.168.1.19  用户名sunzy 密码123456slave主机ip:192.168.1.20 1.配置master1)接下来对master进行配置,包括打开二进制日 ...

  3. Java 常见注解

    @Retention 1.RetentionPolicy.SOURCE —— 这种类型的Annotations只在源代码级别保留,编译时就会被忽略2.RetentionPolicy.CLASS —— ...

  4. Angular14 Angular相关命令

    1 创建相关 1.1 创建项目 ng new 项目名  ->  创建新项目 ng new 项目名 --skip-install  -> 不进行模块安装  ng new 项目名 -si ng ...

  5. Learning Python 008 正则表达式-003 search()方法

    Python 正则表达式 - search()方法 findall()方法在找到第一个匹配之后,还会继续找下去,findall吗,就是找到所有的匹配的意思.如果你只是想找到第一个匹配的信息后,就不在继 ...

  6. windows10 Ubuntu子系统下卸载Mysql重装

    首先删除mysql: sudo apt-get remove mysql-* 然后清理残留的数据 dpkg -l |grep ^rc|awk '{print $2}' |sudo xargs dpkg ...

  7. Entity Framework Code-First（2）：What is Code-First?

    What is Code-First?: Entity Framework introduced Code-First approach from Entity Framework 4.1. Code ...

  8. JS使用replace替换字符串中的某段或某个字符

    函数的介绍参考:http://www.w3school.com.cn/jsref/jsref_replace.asp 下列代码将Hello World!中的World替换为Jim <html&g ...

  9. mssql 递归

    --递归id往下所有内容with temp ( URE_ID, URE_PARENT_ID,URE_NAME ,URE_TYPE)as(select URE_ID, URE_PARENT_ID,URE ...

  10. 在Android中使用Protocol Buffers（中篇）

    本文来自网易云社区. FlatBuffers 编码原理 FlatBuffers的Java库只提供了如下的4个类: ./com/google/flatbuffers/Constants.java ./c ...