【前端笔记】? HTML

2018-06-24 01:48:55来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

1. 什么是HTML5

   网页的5.0版本2014年才定制完HTML5的标准,历时8

2. 为什么要用HTML5

  1> 跨平台利用HTML5编写的UI界面能运行在所有拥有浏览器的平台

  2> HTML5的运行平台:浏览器

  3> 但是HTML5不能完成一些特定的功能,比如:拍照(ImagePickerController)、访问相册....

3. 如何使用HTML5

  1> 自己编写大量的HTML5代码

  2> 使用现成的HTML5框架

    sencha-touch

    phoneGap

    jQuery mobile

    bootstrap

4. 手机APP的开发模式

  1> 原生(纯OC

  2> HTML5

  3> 原生+HTML5

5. 为什么要学习HTML5

  1> 未来的一种趋势

  2> 增加面试、开发竞争力

    Android程序员  Java、服务器、HTML5

6. 公司职位的划分

  1> 平面设计师  作图、切图、HTMLCSS

  2> 前端工程师  HTMLCSSJavascript、模板技术

  3> 后台工程师  服务器(Java.NetPHP)、数据库

  4> 移动工程师(iOS/android)手机UI界面(OCHTML5)、跟服务器交互

7. Web开发新时代

  Web1.0

    主流技术HTML+CSS

  Web2.0

    主流技术Ajax(JavaScript/DOM/异步数据请求)

  Web3.0

    主流技术HTML5+CSS3

  HTML5亮点CanvasHTML5音视频、Web存储、GeolocationWorkers多线程处理

  CSS3亮点设计动画、2D变形、N多新特性

8. 网页的组成

  一个有具体功能的完整的网页,一般由3部分组成

  1HTML网页的具体内容和结构

  2CSS网页的样式(美化网页最重要的一块)

  3JavaScript(掌握)网页的交互效果,比如对用户鼠标事件做出响应

    HTML \ CSS \ JavaScript 学习资料:http://www.w3school.com.cn/

9. HTML

  什么是HTMLHTML的全称是HyperText Markup Language,超文本标记语言

  其实它就是文本,由浏览器负责将它解析成具体的网页内容。

10. HTML的组成

  跟XML类似,HTMLN个标签(节点、元素、标记)组成

  HTML语法非常松散,目前的最新版是5.0,也就是HTML 5

11. 常见的HTML标签

  • 标题:h1h2h3h4h5....
  • 段落:p
  • 换行:br
  • 容器:divspan(用来容纳其他标签)
  • 表格:tabletrtd
  • 列表:ulolli
  • 图片:img
  • 表单:input
  • 链接:a

12. HTML5新增标签

  HTML5新增了27个标签元素废弃了16个标签元素主要包括结构性标签、级块性标签、行内语义性标签、交互性标签

  1结构性标签

    负责Web上下文结构的定义,确保HTML文档,包括:

    article  文章主体内容(一篇博客、一篇论坛帖子、一段用户评论、插件)

    header   标记头部区域内容(文章的头部)

    footer   标记脚部区域内容(文章的底部)

    section  区域章节表述 (文章的区域章节)

    nav      菜单导航链接导航

  2》块级性标签(分块用的)

    完成Web页面区域的划分,确保内容的有效分隔,包括:

    aside   注记,贴士,侧栏,摘要,插入的引用作为补充主体的内容

    figure  对多个元素组合并展示的元素,常与figcaption联合使用

    code    表示一段代码块

    dialog  人与人之间对话,包含dtdd两个组合元素(dt用于表示说话者、dd用于表示说话者的内容)

  3》行内语义性标签

    完成Web页面具体内容的引用和表述,丰富展示内容,包括:

    meter     特定范围内的数值,如工资、数量、百分比

    time      时间值

    progress  进度条,可用maxminstep进行控制,完成对进度的表示和监听  

    video     视频元素,用于视频播放,支持缓冲预载和多种视频媒体格式

      <!--视频播放-->

      //  告诉浏览器,我要使用你的播放器 controls

      <video src="source/BigBuck.m4v" controls="controls"></video>

    audio     音频元素,用于音频播放,支持缓冲预载和多种音频媒体格式

      <!--音频播放-->

       //  告诉浏览器,我要使用你的播放器 controls

      <audio src="source/music.m4a" controls="controls"></audio>

  4》交互性标签

    功能性内容的表达,有一定的内容和数据的关联,是各种事件的基础,包括:

    details   表示一段具体的内容,默认不显示,通过某种方式(单击)与legend交互才会显示

    datagrid  控制客户端数据与显示,可用于动态脚本及时更新

    menu      用于交互菜单

    command   用来处理命令按钮

13. HTML标签类型

  • HTMLN多标签,根据显示的类型,主要可以分为3大类

  1》块级标签

    独占一行的标签

    能随时设置宽度和高度(比如divph1h2ulli

  2》行内标签(内联标签)

    多个行内标签能同时显示在一行

    宽度和高度取决于内容的尺寸(比如spanalabel

  3》行内-块级标签(内联-块级标签)

    多个行内-块级标签可以显示在同一行

    能随时设置宽度和高度(比如inputbutton

 

  div与span标签的区别:

    div标签是块级标签,独占一行,可以设置宽度和高度。

    span标签是行内标签:多个行内标签可以同时显示在一行,宽度和高度取决于内容的大小。

14. 修改标签的显示类型

  CSS中有个display属性,能修改标签的显示类型

  1none:隐藏标签

    div {

         color: red;

         <!--隐藏标签(包括标签的结构和内容)-->

         display: none;

    }

  2block:让标签变为块级标签

    span {

         background-color: yellow;

         /* 把当前标签变为块级标签(就可以独占一行和设置标签的宽高)*/

         display: block;

    }

  3inline:让标签变为行内标签

    div {

         background-color: red;

         /* 把当前标签变为行内标签 */

         display: inline;

    }

  4inline-block:让标签变为行内-块级标签(内联-块级标签)

    div {

         background-color: red;

         /*把当前标签变为行内块级标签*/

         display: inline-block;

    }

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:无障碍阅读:页面缩放兼容性处理(zoom,Firefox火狐浏览器)

下一篇:【前端笔记】? Bootstrap