HTML

HTML5学习总结

Element(元素)

  • html5的空标签,如<br>,<hr>, 建议都带结束符,如:<br/>,<hr/>
  • html5的标签是大小写不敏感的,不过建议都小写

Attributes(属性)

  • alt
    • 指定alt属性,可以在元素不能正常显示的时候,显示一段执行的文本
    • 如:<img src="hello.jpg" alt="This is the description of img">
  • 建议所有的属性名称都小写
  • 建议所有的属性值都用引号括起来,通常都用双引号,特殊情况下用单引号
    • <p title='John "ShotGun" Nelson'>
    • <p title="John 'ShotGun' Nelson">

Meta Elements(源元素)

  • meta element 也叫做meta data, 即:元数据,用来描述数据的数据
  • 主要有:<title>,<meta>,<style>,<link>,,<script>

paragraphs(段落)

  • <p> - 用来显示一个段文字,不过格式不好控制
  • <pre - 用来显示已经格式化好的文本,此元素间的内容会把内容的格式如实显示

Formatting Elements(格式化元素)

  • <strong> - 加重(字体会加粗)
  • <em> - 强调(字体会倾斜)
  • <small> - 字体变小(在一段正常的字体中加一些小字体的文本)
  • <mark> - 标记或高亮文本(默认会给文本添加黄色背景)
  • <del> - 标记文本为删除(在文本中线上会添加一条线)
  • <ins> - 插入文本(在文本下面会有一条下划线)
  • <sub> - 下标文字
  • <sup> - 上标文字

Quotation and Citation Elements(表引用或举证的元素)

  • <q> - 行内引用,文本会被双引号括起来

  • <blockquote> - 块级引用

    • cite属性可以用于搜索引擎来搜索相关信息
      <blockquote cite="http://www.worldwildlife.org/who/index.html">
        For 50 years, WWF has been protecting the future of nature.
      </blockquote>
      
  • <cite> - 定义一个work的标题,比如一本书、一首歌、一幅画、一个雕塑、一部电视剧

    <p><cite>The Scream</cite> by Edward Munch. Painted in 1893.</p>
    
  • <abbr> - 缩写(全称可以写在title属性中),字体样式没有变化

    <p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>
    
  • <dfn> - 定义一个术语或缩写,跟<abbr>类似,但字体会倾斜

    <p>The <dfn title="World Health Organization">WHO</dfn> was founded in 1948.</p>
    
  • <address> - 定义一个文档或文章的联系方式或信息,字体会倾斜

  • <bdo> - 重写文本的显示方向位置

    • <bdo dir="rtl">This text will be written from right to left</bdo>
    • 通过控制dir属性来决定是从左到右显示,还是从右到左显示
    • <bdo dir="ltr|rtl">

Computer Code Elements(代码元素)

  • <code> - 用来显示一段代码,为了保持代码的显示格式,内容可以用<pre>包起来

Links(超链接)

  • 超链接(a)的四种状态的顺序从高到低如下:
    • a:link - 正常的,没被访问过
    • a:visited - 已访问过
    • a:hover - 鼠标移动之上
    • a:active - 点击的瞬间动作

Table(表格)

  • 去掉table双边框效果
    table {
      border-collapse: collapse;
    }
    

Layouts(布局)

  • html5中跟布局相关的几个元素:
    • header - 定义一个document或一个section的头部区域
    • nav - 定义一个导航的容器
    • section - 在document中定义一个模块
    • article - 定义一个独立的文章区域块
    • aside - 定义除了具体内容一个外的其他内容(如:侧边栏)
    • footer - 定义一个document或一个section的底部区域
    • details - 定义额外的细节
    • summary - 为details元素定义一个标题

Color value

  • 颜色值有三种写法:
    • 1)直接写颜色单词;2)”#”加一个十六进制的数字;3)rgb颜色。最终都为被转化为十六进制来显示

Responsive(响应式)

  • viewport - 响应式的meta标签的参数
  • 参数的属性值:
属性 描述
width 虚拟视窗的宽度
device-width 设备屏幕的宽度
height 虚拟视窗的高度
device-height 设备屏幕的高度
initial-scale 页面初始化的缩放倍数。1.0为不缩放
minimum-scale 可以缩放的最小倍数
maximum-scale 可以缩放的最大倍数
user-scalable 是否允许缩放,值为Boolean
<meta name="viewport" content="width=device-width, initial-scale=1">

Charset Encoding(字符集编码)

<meta charset="UTF-8">

Form Elements(表单元素)

  • html5新增加的元素:

    • <datalist> - 指定一个有默认选项值的input
      <datalist id="browsers">
        <option value="Internet Explorer">
        <option value="Firefox">
        <option value="Chrome">
        <option value="Opera">
        <option value="Safari">
      </datalist>
      
  • html 新增加的input type:

    • color
    • date
    • datetime
    • datetime-local
    • email
    • month
    • number
    • range
    • search
    • tel
    • time
    • url
    • week
  • Input Attributes(input常用属性)

    • readonly - 只读
    • disabled - 不能用
    • maxlength - 最大长度
    • autofocus
    • min - 最小值
    • max - 最大值
    • multiple - 多选,针对file和image类型
    • pattern - 正则验证,如:pattern=”[A-Za-z]{3}”
    • placeholder - 默认值
    • required - 必须填写
    • step - 数字间隔,针对number类型

New HTML5 Elements(html5 新增的几个常用元素)

  • 语义化
    • <header>
    • <footer>
    • <article>
    • <section>
  • 图像处理
    • <svg>
    • <canvas>
  • 多媒体
    • <audio>
    • <video>
      <video width="320" height="240" controls>
        <source src="forrest_gump.mp4" type="video/mp4">
        <source src="forrest_gump.ogg" type="video/ogg">
        <track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English">
        <track src="subtitles_no.vtt" kind="subtitles" srclang="no" label="Norwegian">
      </video>

SVG 和 Canvas 最大的不同

  • SVG是基于XML的,每一个元素都是一个DOM元素,可以添加事件
  • Canvas是通过javascript一像素一像素的画出来的

HTML plug-ins(插件)

<object width="400" height="50" data="bookmark.swf"></object>
<embed width="400" height="50" src="bookmark.swf">

HTML5 APIs

  • Geolocation - 定位
  • Drag/Drop - 拖拽
  • Local Storage - 本地存储
  • Web Workers - 可以在后台运行脚本而不影响页面的性能

详细使用请参考:

http://www.w3schools.com/html/

html中meta标签的详解

  • meta标签是什么1

    • META标签是HTML语言HEAD区的一个辅助性标签
  • meta标签是干什么用的?

    • META标签用来描述一个HTML网页文档的属性,例如作者、日期和时间、网页描述、关键词、页面刷新等。它提供的信息虽然用户不可见,但却是文档的最基本的元数据.
  • 元数据又是什么东西?

    • 元数据(Metadata)是用来概括描述数据的一些基本数据。也就是描述数据的数据。还不清楚?那在形象的来解释一下:

    你今天在下班途中邂逅了一个美女,然后回到家之后你就迫不及待的想跟你的朋友炫耀一下。但是你不能只说你邂逅了一个美女,你得描述具体点啊,不然谁信啊?所以你得通过年龄(三十岁上下)、身高(个子高挑)、相貌(身材匀称,黑黑的眉毛,红红的脸蛋)、性格(活跃)来描述。这样你的朋友就可以通过这些信息来意淫一下啦。OK. 废话不多说,到底什么是metadata呢?

    这个例子中的”年龄”、”身高”、”相貌”、”性格”,就是元数据,因为它们是用来描述具体数据/信息的数据/信息。
    当然,这几个元数据用来刻画个人状况还不够精确。我们每个人从小到大,都填过《个人情况登记表》之类的东西吧,其中包括姓名、性别、民族、政治面貌、一寸照片、学历、职称等等……这一套元数据才算比较完备。

    那么对于网页也来说,metadata就是通过一些字段信息来描述一下当前网页,以便浏览器和搜索引擎在访问到此网页的时候,可以通过这些描述信息来知道如何去解析此网页数据。

  • meta标签的使用

    • meta标签共有两个属性:http-equivname;不同的属性又有不同的参数值,这些不同的参数值就实现了不同的网页功能。

      1. name属性

      name属性主要用于描述网页,与之对应的属性值为content,content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。
      meta标签的name属性语法格式是:<meta name=”参数” content=”具体的参数值”> 。其中name属性主要有以下几种参数:

      • Keywords(关键字)
        • 说明:keywords用来告诉搜索引擎你网页的关键字是什么。
        • 举例:<meta name ="keywords" content="science, education,culture,politics,ecnomics,relationships, entertaiment, human">
      • description(网站内容描述)
        • 说明:description用来告诉搜索引擎你的网站主要内容。
        • 举例:<meta name="description" content="This page is about the meaning of science, education,culture.">
      • author(作者)
        • 说明:标注网页的作者
        • 举例:<meta name="author" content"root,root@21cn.com">
        1. http-equiv属性

      http-equiv顾名思义,相当于http协议中文件头的作用,它可以向浏览器传回一些有用的信息,以帮助正确和精确地显示网页内容,与之对应的属性值为content,content中的内容其实就是各个参数的变量值。
      meat标签的http-equiv属性语法格式是:<meta http-equiv=”参数” content=”参数变量值”> ;其中http-equiv属性主要有以下几种参数:

      • content-Type(显示字符集的设定)
        • 说明:设定页面使用的字符集。
        • 用法:<meta http-equiv="content-Type" content="text/html; charset=gb2312">
      • Expires(期限)
        • 说明:可以用于设定网页的到期时间。一旦网页过期,必须到服务器上重新传输。
        • 用法:<meta http-equiv="expires" content="Fri, 12 Jan 2001 18:18:18 GMT">
          注意:必须使用GMT的时间格式。
      • Pragma(cache模式)
        • 说明:禁止浏览器从本地计算机的缓存中访问页面内容。
        • 用法:<meta http-equiv="Pragma" content="no-cache">
          注意:这样设定,访问者将无法脱机浏览。
      • Refresh(刷新)
        • 说明:自动刷新并指向新页面。
        • 用法:<meta http-equiv="Refresh" content="2; URL=http://www.root.net">
          注意:其中的2是指停留2秒钟后自动刷新到URL网址。
      • Set-Cookie(cookie设定)
        • 说明:设置cookie, 如果网页过期,那么存盘的cookie将被删除。
        • 用法:<meta http-equiv="Set-Cookie" content="cookievalue=xxx; expires=Friday, 12-Jan-2001 18:18:18 GMT; path=/">
          注意:必须使用GMT的时间格式。
      • Window-target(显示窗口的设定)
        • 说明:强制页面在当前窗口以独立页面显示。
        • 用法:<meta http-equiv="Window-target" content="_top">
          注意:用来防止别人在框架里调用自己的页面。
          *
  • meta标签对搜索引擎的作用

    meta标签的一个很重要的功能就是设置关键字,来帮助你的主页被各大搜索引擎登录,提高网站的访问量。在这个功能中,最重要的就是对Keywords和description的设置。因为按照搜索引擎的工作原理,搜索引擎首先派出机器人自动检索页面中的keywords和decription,并将其加入到自己的数据库,然后再根据关键词的密度将网站排序。因此,我们必须设置好关键字,来提高页面的搜索点击率。下面我们来举一个例子供大家参考:

 <meta name="keywords" content="政治,经济, 科技,文化, 卫生, 情感,心灵,娱乐,生活,社会,企业,交通">
 <meta name="description" content="政治,经济, 科技,文化, 卫生, 情感,心灵,娱乐,生活,社会,企业,交通">

 设置好这些关键字后,搜索引擎将会自动把这些关键字添加到数据库中,并根据这些关键字的密度来进行合适的排序。

理解HTTP Header

  • HTTP协议是怎样传输的?
    • HTTP采用请求/响应模型,浏览器端发送请求,服务器给与响应。就整个网络资源传输而言,包括message-header和message-body两部分。
    • http 请求的整个过程
  • http header
    • http header内容的组织形式,大体分为Request和Response两部分。
  • Request
    • 当你在流览器位址栏里键入一个url,你的流览器会将类似如下的http请求
      GET /tutorials/other/top-20-mysql-best-practices/ HTTP/1.1 (Request line)
      Host: net.tutsplus.com
      User-Agent: Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US; rv:1.9.1.5) Gecko/20091102 Firefox/3.5.5 (.NET CLR 3.5.30729)
      Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
      Accept-Language: en-us,en;q=0.5
      Accept-Encoding: gzip,deflate
      Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
      Keep-Alive: 300
      Connection: keep-alive
      Cookie: PHPSESSID=r2t5uvjq435r4q7ib3vtdjq120
      Pragma: no-cache
      Cache-Control: no-cache
      
      • 第一行被称为“Request Line” 它描述的是这个请求的基本资讯,剩下的就是HTTP headers了。
  • Response
    • 请求完成之后,你的流览器可能会收到如下的HTTP回应:
      HTTP/1.x 200 OK (state line)
      Transfer-Encoding: chunked
      Date: Sat, 28 Nov 2009 04:36:25 GMT
      Server: LiteSpeed
      Connection: close
      X-Powered-By: W3 Total Cache/0.8
      Pragma: public
      Expires: Sat, 28 Nov 2009 05:36:25 GMT
      Etag: "pub1259380237;gz"
      Cache-Control: max-age=3600, public
      Content-Type: text/html; charset=UTF-8
      Last-Modified: Sat, 28 Nov 2009 03:50:37 GMT
      X-Pingback: http://net.tutsplus.com/xmlrpc.php
      Content-Encoding: gzip
      Vary: Accept-Encoding, Cookie, User-Agent
      <!-- ... rest of the html ... -->
      
      • 第一行被称为“Status Line”,它之后就是http headers,空行完了就开始输出内容了(在这个案例中是一些html输出)。
  • HTTP Request结构
    • 被称作“first line”的第一行包含三个部分:
      • “method” 表明这是何种类型的请求. 最常见的请求类型有GET,POST和HEAD.
      • “path” 体现的是主机之后的路径. 例如,当你请求“http://net.tutsplus.com/tutorials/other”时, path 就会是”/tutorials/other”.
      • “protocol” 包含有“HTTP” 和版本号.
    • 剩下的部分每行都是一个”Name:Value”对(即: MIME信息)。它们包含了各式各样关于请求和你流览器的资讯。
  • HTTP Response结构
    • 第一个有价值的资讯就是协定。目前伺服器都会使用HTTP/1.x 或者HTTP/1.1。
    • 接下来一个简短的资讯代表状态。代码200意味着我们的请求已经发送成功了,伺服器将会返回给我们所请求的文档,在Header资讯之后。
      • HTTP 状态码
        • 200 用来表示请求成功.
        • 300 来表示重定向.
        • 400 用来表示请求出现问题.
        • 500 用来表示伺服器出现问题.
    • 同样,这些Header资讯也是可选的。