HTML学习笔记Day11

一、CSS文档统筹

  (一)网页自身的优化

  (二)CSS规范

    1、命名方法(语义化命名,结构化命名)

      ID:结构化    header footer   

      class: .border0    . red:    .font12      .clear

    2、CSS命名规则

      1)建议使用小写字母

      2)以英文字母开头,后面可以连接数字、字母、下划线、连字符,建议尽量使用英文字母,适当使用下划线和连接线;

      3)词必达意,名称要反映用途和相关信息,同时也要简短。

  (三)样式重置

    1、规则设置

      1)以新浪为例:

      html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldset, legend, img { margin:0; padding:0; }

      fieldset, img { border:none; }

      img{display: block;}

      address, caption, cite, code, dfn, th, var { font-style:normal; font-weight:normal; }

      ul, ol,li { list-style:none; } 

      body { color:#333; font:12px/20px "SimSun","宋体","Arial Narrow",HELVETICA; background:#fff;/* overflow-y:scroll;*/ overflow-x:hidden;}

      a { color:#666; text-decoration:none; }

      a:visited { color:#666; }

      a:hover, a:active, a:focus { color:#ff8400; text-decoration:underline; }

二、HTML5基础

  (一)HTML5发展史

    HTML5草案的前身名为 Web Applications 1.0,于2004年被WHATWG提出,于2007年被W3C接纳,并成立了新的 HTML 工作团队。

    HTML 5 的第一份正式草案已于2008年1月22日公布。HTML5 仍处于完善之中。然而,大部分现代浏览器已经具备了某些 HTML5 支持。

    2012年12月17日,万维网联盟(W3C)正式宣布凝结了大量网络工作者心血的HTML5规范已经正式定稿。根据W3C的发言稿称:“HTML5是开放的Web网络平台的基石。”

    2013年5月6日, HTML 5.1正式草案公布。该规范定义了第五次重大版本,第一次要修订万维网的核心语言:超文本标记语言(HTML)。在这个版本中,新功能不断推出,以帮助Web应用程序的作者,努力提高新元素的操作性。

    本次草案的发布,从2012年12月27日至今,进行了多达近百项的修改,包括HTML和XHTML的标签,相关的API、Canvas等,同时HTML5的图像img标签及svg也进行了改进,性能得到进一步提升。

  (二)HTML5的浏览器兼容

    支持Html5的浏览器包括Firefox(火狐浏览器),IE9及其更高版本,Chrome(谷歌浏览器),Safari,Opera等;国内的 遨游浏览器(Maxthon),以及基于IE或Chromium(Chrome的工程版或称实验版)所推出的360浏览器、搜狗浏览器、QQ浏览器、猎豹浏览器等国产浏览器同样具备支持HTML5的能力。

  (三)HTML语法

    内容类型(ContentType):HTML5的文件扩展符与内容类型保持不变,仍然为".html"或".htm";

    DOCTYPE声明:<!DOCTYPE html>不区分大小写;

    指定字符集编码:<meta charset="UTF-8">;

    可省略标记的元素

      不允许写结束标记的元素:br、col、embed、hr、img、input、、link、meta

      可以省略结束标记的元素:li、dt、dd、p、option、colgroup、thead、tbody、tfoot、tr、td、th

      可以省略全部标记的元素:html、head、body、colgroup、tbody

    省略引号:属性值可以使用双引号,也可以使用单引号;(单引号与双引号出现嵌套关系时:单引号里面只能嵌套双引号,双引号里只能嵌套单引号;不能单引号嵌套单引号,也不能双引号嵌套双引号)

  (四)HTML新增语义化标签

    section元素 表示页面中的一个内容区块

    article元素 表示一块与上下文无关的独立的内容

    aside元素 在article之外的,与article内容相关的辅助信息

    header元素 表示页面中一个内容区块或整个页面的标题

    footer元素 表示页面中一个内容区块或整个页面的脚注

    nav元素 表示页面中导航链接部分

    figure元素 表示一段独立的流内容,使用figcaption元素为其添加标题(第一个或最后一个子元素的位置)

    main元素 表示页面中的主要的内容(ie不兼容)

    hgroup标题的一个分组

    mark:标签定义带有记号的文本,在需要突出显示文本时使用 

    兼容低版本浏览器:<script src=“html5.js”></script>

   (五)Video(视频)和Audio(音频)的应用

    1.video元素 定义视频

    语法1:<video src="视频路径" controls="controls">Video元素</video>

    语法2:<video 属性=“属性值”>

          <source type="video/视频格式" src="视频路径">

         </video>

    视频格式:ogg/mp4/webm(type属性值:video/ogg、video/mp4、video/webm)

    2.audio元素 定义音频

    语法1:<audio src="音频路径" controls="controls">Audio元素</audio>

    语法2:<audio 属性=“属性值”>

          <source type="video音频格式" src="音频路径">

         </audio>

    音频格式:ogg/mpeg(mp3)(type属性值:audio/ogg、audio/mpeg)

    3.视频及音频的属性

      controls属性:如果出现该属性,则向用户显示控件,比如播放按钮。

      autoplay属性:如果出现该属性,则视频在就绪后马上播放。(IE9以下以及及新版本的Chorme不支持(部分Chorme支持此属性))

      loop属性:重复播放属性。

      muted属性:静音属性。

      poster属性:规定视频正在下载时显示的图像,直到用户点击播放按钮。 poster=”路径”(此属性音频不适用)

    4.标签为媒介元素(比如 <video> 和 <audio>)定义媒介资源

    <source> 标签允许规定可替换的视频/音频文件供浏览器根据它对媒体类型或者编解码器的支持进行选择;

    浏览器兼容各种格式的视频音频写法:

    视频:<video 属性=“属性值”>

          <source type="video/ogg" src="视频路径">

          <source type="video/mp4" src="视频路径">

          <source type="video/webm" src="视频路径">

       </video>

    音频:<video 属性=“属性值”>

          <source type="audio/ogg" src="音频路径">

          <source type="audio/mpeg" src="音频路径">

       </video>

  (六)HTML5智能表单

    1.新增输入类型

    Type=“number” 专门用来输入数字的文本框

    Type=“email” 限制用户必须输入email类型 “@”

    Type=“url” 限制用户必须输入url类型 “http://”

    Type=“range” 产生一个滑动条表单

    Type=“search” 产生一个搜索意义的表单 <input type=”search” name=“name名”/>

    Type=“color” 生成一个颜色选择的表单

    Type=“time” 限制用户必须输入时间类型

    Type=“month” 限制用户必须输入月类型

    Type=“week” 限制用户必须输入周类型

    Type=“datetime-local” 选取本地时间

posted @ 2019-01-09 19:40  元哥0317  阅读(132)  评论(0编辑  收藏  举报