html基础

主要整理了html,html5

HTML

  • HTML意思为超文本文档,首先是“文档”,类比word文档,有标题<h1>-<h6>,有段落<p>,有表格<table>,有图片<img>。其次是“超文本”,会有更多的元素,包括超链接<a href="">,视频,音频等等。所有这些元素各有各的属性、内容,用于对不同元素进行充实。
  • 元素由三部分组成:标签、属性、内容。标签用于说明元素的类型,属性用来如何展示内容,内容是显示元素。

头部head

  • title:标题,添加到收藏夹时显示的标题,
  • base定义页面上所有链接的默认地址。
  • link本文档与外部资源『文档』的关系
  • style:定义文档的样式信息。
  • script:客户端脚本
  • meta:关于HTML文档的元数据,包括作者,版权,描述,关键字,可用作搜素

js脚本

  • <script>元素type="text/javascript",document.write来写入

  • 位置

    可以包含在header中,这样只有等js加载完成网页才能显示

    js思想中推荐放在<body>最后,这样可以加速加载,具体使用看情况

文本元素

包括align(对齐)、bgcolor(背景色)、color(字体颜色)等,都用style(样式)来替代。样式的好处可以直接添加到HTML元素,并将可以将样式在css文件中实现。

  • 对齐 style="text-align:center"

  • 字体 style="font-family:verdana;color:red;font-size:20px;"

  • 背景色 style="background-color:red"

  • 字体修改(b粗体、i斜体、big/small大小体、del删除、ins下划线、sub/sup上下标等各式);

  • 计算机输出(编程代码:code代码,var变量,kbd输入,samp代码样本,pre预各式);

  • 引用和属术语定义(abbr定义缩写,acronym首字母缩写,title属性显示完全内容,address定义地址)。

超文本元素

超链接

  • 链接有2种方式:href超链接,指向另一个文档的链接;另一个指向由name元素创建的文档内的书签。
  • 超链接可以是文本,也可以是图像。
  • target="_blank",属性可以用来在新的文档中打开。

图像

  • <img src="boat.gif" alt="Big Boat">

  • 属性align="bottom" "top" "middle" "left" "right"

  • 属性width,height

  • map area

      <map name="planetmap" id="planetmap">
      <area
        shape="circle"
        coords="180,139,14"
        href="/example/html/venus.html"
        target="_blank"
        alt="Venus" />
      <area/>
    

表格

  • <table></table> :border bgcolor background frame="above" "box" "hsizes"
  • tr(table row)
  • td(table data) &nbsp
  • th(table head)
  • caption
  • cellpadding
  • cellspacing

列表

  • 无序列表<ul>:<li> 属性type="circle" "square" "disc"
  • 有序列表<ol>属性type="A" "a" "I" "i"
  • 定义列表dl,<dt>定义项目<dd>定义描述。

块与布局

  • 通过<div><span>将HTML元素组合起来。

  • 块元素其实是模块化思想的结果。同CSS一起使用,<div>元素可以用于对大的内容块设置样式属性。另一个常见的用途是文档布局,它取代了使用表格定义布局的老式方法。

      <div style="color:#00ff00"> 
        <h1></h1> 
        <p></p>
      </div>
    
  • <span>更多的是对行内的进行修改。如注:这种情况。

  • 对块进行分类,使我们能为元素的类定义CSS样式。
  • div标签的class = "cities"属性

布局

  • <div>元素用作布局,并能轻松通过CSS对其进行定位。
  • 在head元素中的<style>元素来定义各个类的颜色、位置等信息。
  • 在body元素中使用定义的类来显示内容。
  • header,footer,nav,section

框架

响应式设计RWD

  • RWD能够以可变尺寸传递网页,对于平板和移动设备是必须的。
  • 使用现成的CSS框架,Bootstrap。
  • meta charset="utf-8"
  • <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
  • link之后可以在div中使用类"container","jumbotron","row","col-md-4"等属性来控制样式。

frame

  • 所谓框架,就是在一个页面中,使用一定的布局来显示多个html文档
  • frameset标签
  • rows/columns属性,规定了每行或者每列的占屏比例。
  • <frame src="frame_a.html" noresize="noresize">

iframe

可以在body元素中使用,并可通过name属性命名,可通过target=""来选择内联框架使用。类似于"_blank"

实体

  • 类似于C语言中的\作用,转义:
    • 空格 &nbsp
    • < &lt
    • > &gt
    • & &amp
    • " &quot
    • * &times
    • / &divides

表单

form

<form>表单用于收集用户的输入

<form>
.
表单元素
.
</form>

表单元素指的是不同类型的输入元素、复选框、单选按钮、提交按钮等等。

input

  • type

    类型描述
    text定义常规文本输入
    radio单选按钮
    checkbox复选框
    button按钮,响应onclick
    submit提交按钮
    password字符会被做掩码处理
    file上传文档
    image上传图片
    emailhtml5增加,检查@
    numberhtml5增加,检查数字
    rangehtml5增加,滑动块
    datehtml5增加,日期
    datetimehtml5增加,日期时间
    colorhtml5增加,颜色
    urlhtml5增加,url
      <input type="number" name="points" min="0" max="10" step="3"/>
    
    <form>
    <input type="radio" name="sex" value="male" checked>Male
    <br>
    <input type="radio" name="sex" value="female">Female
    </form> 
    
    <input type="button" onclick="alert('Hello World!')" value="Click Me!">
    
    <form>
    Birthday:
    <input type="date" name="bday">
    </form>
    

select

下拉框

<select name="cars">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="fiat">Fiat</option>
  <option value="audi">Audi</option>
</select>

textarea

多行输入

<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>

datalist

datalist也是下拉框,但可以输入数据,可以看到预设的option

<form action="action_page.php">
<input list="browsers">
<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
</datalist> 
</form>

属性

  • autocomplete

    表单的记忆功能,对input与form都有效,与private类似,父标签声明对子标签有用,子标签的声明大于的声明。

  • autofocus

    自定义焦点,对于input可能会更有用一些。

  • 表单的form属性

    实现了在form外声明表单的可能。

  • formaction属性

    为submit标签,提供了,重载action的方法。

  • list属性

    • 规定输入域的datalist(选项列表)
    • list="url_list"
    • <datalist id="url_list">
  • multiple属性

    • 规定输入框中可以选择多个值
    • <input type="file" name="img" multiple="multiple" />
  • novalidate属性

    • novalidate属性规定在提交表单时不应该验证form或input域
    • <form action="demo_form.asp" method="get" novalidate="true">
    • 在这种情况下,type="email"时就不再验证@
  • pattern属性

    • 用于验证ipnut域的模式,正则表达式
    • <input type="text" name="country_code" pattern="[A-Z]{3}" title="three letter country code" />
  • placeholder

    • 属性提供一种提示,描述输入域所期待的值
    • <input type="search" name="user_search" placeholder="Search W3School" />
  • required

    • required属性规定必须在提交之前写输入域(不能为空)
    • <input type="text" name="usr_name" required="required" />

HTML5

简介

背景

  • RIA技术
  • 服务器、浏览器的交互历史:文本、图片、声音、动画、可交互游戏、游戏
  • flex、sliverlight、flash、html5

发展简史

  • html1.0 (1993)
  • html 2.0 (1994)
  • html4.0(1999),使用最多。
  • w3c组织--> xhtml --> xhtml2.0 (xml标准)这个版本被主流浏览器公司有意见
  • 主流浏览器厂商组织WHATGW,2004年提出html5.0草案 --> 合并成一个2008年提出html5.0

HTML5 约等于 HTML+CSS3+Javascript APIs

  • HTML5支持了Css3的强大的选择器和动画等功能, 再加上支持了Javascript的新的函数API,所以就很强大了。

  • chrome、firefox、opera;UC、QQ、百度等

特性

  • 增加了<header><footer>标签,做到内容与结构分离,我们很多网页都有头和尾

      <html>
      <header>网页的头部<header>
      hell,world
      <footer>网页的尾部<footer>
      </html>
    
  • 增加了<canvas>标签,画布标签,程序员可以在这里绘制图形,在一定程度上可替代flash

  • 增加了<video><audio>标签,用于音频和视频的嵌入功能
    使视频与音频的嵌入变得简单
    1、这里的video支持ogg格式与mp4格式
    2、如果把这个html5_2.html放在apache下,就可以看这个视频。

  • 增加离线存储功能

基础

视频

 <video width="320" height="240" controls="controls">
   <source src="/i/movie.ogg" type="video/ogg">
 </video>
  • video的属性包括

    • autoplay
    • controls
    • height/width
    • loop
    • preload
    <video controls="controls" autoplay="autoplay" loop="loop">
    </video>
    
  • video + dom 进行控制

    • <video>元素同样拥有方法、属性和事件。
      方法用于播放、暂停以及加载等。
      属性(时长、音量等)可以被读取或设置
      其中的DOM事件能够通知您,如<video>元素开始播放、已暂停、已停止等。

    • 示例:
      先用<div>画出<button><video>,在<button>中指定槽函数
      然后用<script>脚本,来获取到<video>元素,在槽函数的实现中,完成对<video>的控制如下所示:

      <!DOCTYPE html>
      <html>
      <body>
        <div>
          <button onclick="playPause()">播放/暂停</button>
        <button onclick="makeBigger">大</button>
        <button onclick="makeSmaller">小</button>
        <video id="v1" controls="controls" width="400" heigh="400" >
          <source src="/example/html5/move.bbb.mp4" type="video/mp4" />
        </video>
        </div>
        <script type="text/javascript">
        var testVedio = document.getElementById("v1");
      
        function playPause()
        {
          if(testVedio.paused)
          testVedio.play();
        else
          testVedio.pause();
        }
      
        function makeBigger()
        {
          testVedio.width += 20;
        }
      
        function makeSmaller()
        {
          testVedio.width -= 20;
        }
        <scipt>
      </body>
      </html>
      
  • 总结:先用<div>将控件、视频等画出,在通过<script>将使用的函数实现。类似于C的全局实现

  • 方法、属性以及事件
    方法:play()、pause()、load()
    属性:paused、height、width、muted、volume、ended;可以通过对属性的控制来实现方法的控制。可以都认为是public
    事件:play/pause/ended等等。

音频

  • 示例1

    <audio src="song.ogg" controls="controls">
    </audio>
    
  • 示例2

    <audio controls="controls">
      <source src="song.ogg" type="audio/ogg">
      <source src="song.mp3" type="audio/mp3">
    </audio>
    

<audio>元素允许有多个source。source元素可以链接不同的音频文件。浏览器将使用第一个可视频的格式。

  • 标签属性

    与视频相同属性包括:controls/autoplay/loop/preload
    还包括一种src

画布

<canvas>使用JavaScript在网页上绘制图像。画图是一个矩形区域,您可以控制其每一个像素。canvas拥有每种绘制路径、矩形、圆形、字符以及添加图像的方法。

  • 基本运用

    • 创建Canvas元素

      <canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"></canvas>
      
    • 通过JavaScript来绘制

      <script type="text/javacript">
      var c=document.getElementById("myCanvas");
      var cxt=c.getContext("2d");
      cxt.fillStyle = "#FF0000";
      cxt.fillRect(0,0,150,75);
      </script>
      
  • Javascript的绘制函数

    • 直线

      cxt.moveTo(10,10);   //移动到起始位置
      cxt.lineTo(150,50);  //画线到(150,50)
      cxt.lineTo(10,50);   //从(150,10),画到(10,50)
      cxt.stroke();
      
    • 画圆

      cxt.fillStyle="#FF0000";
      cxt.beginPath();
      cxt.arc(70,18,15,0,Math.PI*2,true);  // 圆心(70,18)半径15
      cxt.closePath();
      cxt.fill();    // 与stroke()等类似
      
    • 渐变色

      var grd=cxt.createLinearGradient(0,0,175,50);  //创建线性梯度/斜率
      grd.addColorStop(0, "#FF0000");  
      grd.addColorStop(1, "#00FF00");  // 从红色到绿色的渐进
      cxt.fillStyle=grd;
      cxt.fillRect(0,0,170,50);
      
    • 图像

      var img=new Image();
      img.src="flower.png";
      cxt.drawImage(img,0,0);
      

SVG

  • 基本概念

    • SVG可伸缩矢量图形(Scalable Vector Graphics)
    • 用于定义网络的基于矢量的图形
    • 使用XML格式定义图形
    • 图像在放大或者缩小时,图形质量不会有损失
  • 优势

    • 可通过文本编辑器来创建和修改
    • 在任何分辨率下被高质量的打印,在图像质量不下降的情况下放大。
  • 实例

    <!DOCTYPE html>
    <html>
      <body>
        <svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
          <polygon points="100,40 40,180 190,60 10,60 160,180" 
                   style="fill:red;stroke:blue;stroke-width:3;fill-rule:evenodd;"/>
        </svg>
      </body>
    </html>
    
  • 说明
    // 画多边形,从一个点到另一个点

// 动词fill为填充,stroke为线

  • SVG VS 画布

    • Canvas

      • 依赖分辨率
      • 不支持事件处理器
      • 弱的文本渲染能力
      • 最适合图像密集型游戏,其中的许多对象会被频繁重绘
    • SVG

      • 不依赖分辨率
      • 支持事件处理器
      • 最适合带有大型渲染区域的应用(谷歌地图)
      • 复杂度高会减慢渲染速度
      • 不适合游戏应用,(由于复杂度高,频繁重绘效率低下)

特点

地理定位

  • 简介

    地理定位使用navigator.geolocation.getCurrentPosition();函数来实现

    航海家.地理位置.获取当前坐标。可以传递函数作为参数。

  • 实例

<body>
<p id="demo">点击这个按钮,获得您的坐标:</p>
<button onclick="getLocation()">试一下</button>
<script>
var x=document.getElementById("demo");

function getLocation()
{
  if (navigator.geolocation)
    {
    navigator.geolocation.getCurrentPosition(showPosition,showError);
    }
  else{x.innerHTML="Geolocation is not supported by this browser.";}
}

function showPosition(position)
{
  x.innerHTML="Latitude: " + position.coords.latitude + 
  "<br />Longitude: " + position.coords.longitude;	
  }

function showError(error)
{
  switch(error.code) 
    {
    case error.PERMISSION_DENIED:
      x.innerHTML="User denied the request for Geolocation."
      break;
    case error.POSITION_UNAVAILABLE:
      x.innerHTML="Location information is unavailable."
      break;
    case error.TIMEOUT:
      x.innerHTML="The request to get user location timed out."
      break;
    case error.UNKNOWN_ERROR:
      x.innerHTML="An unknown error occurred."
      break;
    }
}
</script>
</body>
  • getCurrentPosition()方法

    若成功是重返回纬度(latitude)经度(longitude)以及(accuracy)

    coords.latitude(纬度)

    coords.longitude(经度)

    coords.accuracy(经纬的精度)

    coords.altitude(海拔)

    coords.altitudeAccuracy(海拔精度)

    coords.heading(方向)

    coords.speed(速度)

    timestamp:时间戳

Web存储

  • 简介

    • HTML5提供两种客户端存储数据的方法:

      localStorage:永久的存储

      sessionStorage:基于会话的存储

    • 对于不同网站,数据存储于不同区域,一个网站只能访问其自身的数据

    • HTML5使用Javascript来存储和访问数据。

  • localStorage

    <script type="text/javascript">
    if(localStorage.pagecount)
    {
        localStorage.pagecount = Number(localStorage.pagecount)+1;
    }
    else
    {
        localStorage.pagecount = 1;
    }
    documents.write("visits:" + localStorage.pagecount + "times.");
    </script>
    
  • sessionStorage

    sessionStorage与lacalStorage类似用法,只不过在关闭网页后,数据清空

应用存储

  • 简介

    • HTML5引入了应用程序缓存,应用可以从服务端缓存数据,在没有网络连接时,也可进行访问。

    • 优势:

      离线浏览

      速度更快

      减少服务器负载,浏览器只从服务器下载更新过的资源即可。

  • 实例

    <!DOCTYPE html>
    <html manifest="demo.appache">
      <body>
      </body>
    </html> 
    
  • Cache Manifest基础

    • 如需启动应用缓存,在<html>标签中包含manifest属性,并指定manifest文件,扩展 名为 .appache
    • 浏览器根据manifest文件,对内容进行缓存
  • Manifest文件

    三部分:

    CACHE MANIFEST:首次打开后进行缓存

    NETWORK:必须联网,不缓存

    FALLBACK:断网时的回退界面

  • 实例

    CACHE MANIFEST
    # 注释2012-02-21 v1.0.0
    /theme.css
    /logo.gif
    /main.js
    
    NETWORK:
    login.asp
    
    FALLBACK:
    /html5/ /404.html
    

Web Worker

  • 简介

    • 当在HTML执行脚本是,页面的状态是堵塞的,知道脚本执行完成
    • web worker 是运行在后台的JavaScript,独立与其他脚本,不堵塞(多线程)
  • 实例

    <!DOCTYPE html>
    <html>
      <body>
        <p>计数:<output id="result"></output></p>
      <button onclick="startWorker()">开始Worker</button>
      <button onclick="stopWorker()">开始Worker</button>
    
      <script>
        var w;  // 在此处直接定义会是定时技术延迟3个500ms
    
        function startWorker()
        {
          # 注意是否支持Woker
          if(typeof(Worker)!="undefined")
          {
          # 判断变量是否定义
            if(typeof(w)=="undefined")
            {
              # 创建worker
              w=new Worker("/example/html5/demo_workers.js");
            }
    
            # 相应消息,注意function的写法
            w.onMessage = function(event)
            {
              # 注意内容的展示
              document.getElementeById("result").innerHTML=event.data;
            }
          } else {
            document.getElementById("result").innerHTML="您的浏览器不支持Worker"
          }
        }
    
        function stopWorker()
        {
          # 停止worker
          w.terminate();
        }
      </script>
      </body>
    </html>
    
    • demo_workers.js的内容如下
    var i=0;
    function timeCount()
    {
      i=i+1;
      # 注意消息的发送
      postMessage(i);
      setTimeOut("timeCount()", 500);
    }
    timeCount();
    
  • 注意

    由于worker存在与外部文件中,它无法访问一下的javascript对象

    window对象

    document对象

    parent对象

事件

  • 简介

    Server-Sent事件-单向消息传递

    Server-Sent事件指的是网页自动获取来自服务器的更新。

    之前的做法是网页轮询是否有更新。但通过服务器发送事件,更新能自动到达

  • 实例

    • 客户端

      <!DOCTYPE html>
      <html>
        <body>
          <h1>获取服务器更新</h1>
        <div id="result"></div>
      
        <script>
          if(typeof(EventSource)!=="undefined")
          {
            var source = new EventSource("/example/html5/demo_sse.php");
            source.onmessage=function(event)
            {
              document.getElementById("result").innerHTML=event.data + "<br />";
            }
          }
          else
          {
              document.getElementById("result").innerHTML="您的浏览器不支持server-sent";
          }
        </script>
        </body>
      </html>
      
    • 服务端

      <?php
      header('Content-Type: text/event-stream');
      header('Cache-Control: no-cache');
    
      $time = date('r');
      echo "data: The server time is: {$time}\n\n";
      flush();
      ?>
    
    • 疑问

      在EventSource中已经定义了服务器脚本的存在,那岂不是在客户端自己这就可以产生此技术?

      服务器的运行时怎样实现的?

总结

  • 【控件】HTML的学习类似与Qt的学习,首先需要学习的是各个控件的使用,包括:按钮/输出/音频/视频/画布/SVG、地理定位/客户端存储/应用缓存/worker,还要学习各种表单的使用、表格/输入类型:下拉框/输入框,输入框的属性:自动完成、自动foucus、 属性提示、唯一性提示、多属性、不检查有效性等等。
  • 【布局】除了部件的学习,还有布局的学习,布局大约使用CSS,可以等到CSS时深入学习
  • 【操作】学习用JavaScript来实现槽函数的控制
  • 【方式】对于前端、后端结构的理解

评论

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×