Web、移动开发之Web前端:(1)HTML语言

创建时间:2017/10/5 18:46:08
关键字:web,html,html5,front,前端,whatwg

参考网址:

http://www.w3school.com.cn/html/index.asp

http://www.runoob.com/html/html-tutorial.html

https://www.w3.org/TR/tr-date-all

https://www.w3.org/TR/2014/REC-html5-20141028

1 HTML概述

1.1 HTML简介

HTML即超文本标记语言(HyperText Markup Language),是用来描述网页的一种语言,通过标记符号来标记要显示的网页的各个部分。

HTML是一种规范和标准,通过在文本文件中的标记符,告诉浏览器如何显示其中的内容。HTML文档就是网页,由浏览器解析、显示(浏览器解析是不严格的)。

1.2 HTML发展历程

1991,1993 HTML

1991年Tim Berners-Lee编写了一份叫做“HTML 标签”的文档,内里包括了大约20个用来标记网页的HTML标签。

1993年6月作为互联网工程工作小组(IETF)工作草案发布(并非标准)。

1994 HTML2.0  

HTML第一个官方版本是1994年由 IETF(互联网工程任务组)推出的HTML 2.0,HTML 2.0吸纳了img标签。

1995年11月HTML2.0 作为RFC 1866发布。

HTML 3.2 1996年1月14日,W3C推荐标准。

1997,1999 HTML4.0HTML4.01

HTML4.0  1997年12月18日W3C推荐标准。

HTML4.01  1999年12月24日W3C推荐标准。

2000,2001 XHTML1.0和XHTML1.1

XHTML1.0  2000年1月26日,W3C推荐标准。没有新标签或属性,要求XML般的严格语法,是XML风格的HTML。2002年8月1日XHTML1.0 (第2版) W3C 推荐标准。

XHTML 1.1  2001年5月31,W3C推荐标准。无法使用 text/htmlmime-type直接输出。

2008 XHTML 2.0更加注重页面规范和可用性,不向前兼容。

XHTML2  2002年8月公开草案初版,2007年9月 最终征求意见稿,2008年2月候选推荐稿,2008年6月 建议推荐标准,2008年9月 推荐版本(recommendation)。2010-12-16 XHMTL2.0 工作组备忘稿(Group Note)。

2009-07-02 发布消息XHTML2工作组预期在2009年底结束工作, W3C 将增加资源支持HTML5。2010-12-17 XHTML2工作组关闭。

2014 HTML5 (2009 HTML草案阶段,2010 移动端如Android发展,对HTML5支持起到推动作用,IE则在往后拉,缓慢持续了几年,直到2014年定稿)

2014-10-28  HTML5 W3C推荐标准  最新:2017-10-03  HTML 5.1

HTML 5成为目前最新的HTML标准,HTML 5既支持疏松语法,也支持XHTML 1的严格语法。推荐的在HTML5中同时使用XHTML1语法规范。

1.3 HTML相关技术发展

1996 CSS1 JavaScript

1998 CSS2

2014 CSS3 2014-03-20 Recommendation

2005 AJAX

2 HTML结构

     <!DOCTYPE html>

  <html>
   <head>

<title>HTML语言</title>

<meta name="description" content="HMTL文档结构">

<meta name="keywords" content="HTML,CSS,JavaScript">

<meta name="author" content="kinglong">

<meta charset="UTF-8">

<link rel="stylesheet" type="text/css" href="cite.css">

<script></script>

<style></style>

</head>

<body >
   <!--
   跨行注释
   -->

</body>

</html>

2.1 <!DOCTYPE> 文档类型声明

HTML 4.01 中,<!DOCTYPE> 声明需引用 DTD (文档类型声明)

HTML5 不是基于 SGML,因此不要求引用 DTD

常见的DOCTYPE声明:

HMTL5

<!DOCTYPE html>

XHTML 1.1 与 XHTML 1.0 Strict 相同,但允许添加模块

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

XHTML 1.0 Strict 不包括表象或过时的元素(如 font ),不允许框架集,结构必须按标准格式的 XML 进行书写

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

XHTML 1.0 Transitional 包括表象或过时的元素(如 font ),不允许框架集,结构必须按标准格式的 XML 进行书写。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

XHTML 1.0 Frameset这个 DTD 与 XHTML 1.0 Transitional 相同,但是允许使用框架集内容。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

HTML 4.01  Strict 不包括表象或过时的元素(如 font ),不允许框架集

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

HTML 4.01 Transitional 包括表象或过时的元素(如 font ),不允许框架集

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

HTML 4.01 Frameset 包括表象或过时的元素(如 font ),允许框架集

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

2.2 <head> 所有头部元素的容器

<head> 元素必须包含文档的标题(title).

<head>可以包含meta 信息、脚本、样式以及其他更多的信息。

<title> 必须有

<meta> 在 XHTML中必须包含结束标签,在HTML和 HTML5 中没有结束标签。

在 HTML 5 中,不再支持 scheme 属性。在 HTML 5 中有一个新的 charset 属性,它使字符集的定义更加容易。

在 HTML 4.01 中必须得这么写:<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">,在 HTML 5 中,可以这样写:<meta charset="ISO-8859-1">

<link> 链接到外部样式文件

<style>  定义 HTML 文档的样式信息,每个 HTML 文档能包含多个 <style> 标签。

虽然style可以卸载head外部的其他位置,但是建议css放在head中,能使网页显示效果更好。

"scoped" 属性是 HTML 5 中的新属性,它允许我们为文档的指定部分定义样式,而不是整个文档。如果使用该属性,则样式仅仅应用到 style 元素的父元素及其子元素。

 

<script> 用于定义客户端脚本,如javascript。 

元素既可包含脚本语句,也可以通过 "src" 属性指向外部脚本文件(如果使用 "src" 属性,则 <script> 元素必须是空的)。

虽然可以放到head中,但一般建议放到body后面,这样网页加载会快一些。

在 HTML 4 中,"type" 属性是必需的,但在 HTML5 中是可选的。因此HTML5中<script>标签中type为text/javascript或application/javascript通常就不写type属性,默认这个“script”是 ECMAScript。

"async" 属性是 HTML5 中的新属性 规定异步执行脚本(仅适用于链接外部脚本的情况)

2.3 <body>

body的样式相关的属性基本已废弃,HTML5不支持。应该统一按照css规范来实现视觉效果(通过style或class属性使用css来控制样式)。

2.4 <!----> 注释

使用<!--...--> 在源文档中插入注释,注释不会在浏览器中显示。

<!--...--> 注释标签不支持任何标准属性和事件

3 HMTL块元素与内联元素

块元素(block element)和内联元素(inline element)都是HTML规范中的概念。

内联元素(inline element)一般都是基于语义级(semantic)的基本元素。内联元素只能容纳文本或者其他内联元素,常见内联元素"a"。

块元素和内联元素的基本差异是块元素一般都从新行开始,可容纳内联元素和块元素。

css可以强制改变HTML元素的内联或块级特性,比如可以把内联元素加上display:block属性,让其具有块级元素的特点;也可以使用display:inline属性,让div在行内显示换行。

3.1 块元素(block element)

注:HTML4.01和HTML5中不支持的标签不列出。

语义标签:

address 地址语义标签,换行 斜体
blockquote 块引用,换行 缩进

hr 水平分隔线

格式布局标签:

p 标记一个段落,元素会自动在其前后创建一些空白

h1 - 大标题、h2 - 副标题、h3 - 3级标题、h4 - 4级标题、h5 - 5级标题、h6 - 6级标题
div 定义一个分隔区块或者一个区域部分,常用于组合块级元素,以便通过 CSS 来对这些元素进行格式化

pre 可定义预格式化的文本,被包围在 <pre> 标签中的文本保留空格和换行符,文本也会呈现为等宽字体。不要使用"width" 属性:HTML 4.01已废弃,HTML5 不支持。

组合标签:

ul li 无序列表、ol li 排序列表 列表默认带项目符号 带缩进

dl dt dd 定义列表 标签与 <dt> (定义项目/名字)和 <dd> (描述每一个项目/名字)一起使用

table tr td 表格,主要用于数据展示,而不是布局。

功能标签:

form 交互表单

fieldset 将表单内的相关元素分组,标签会在相关表单元素周围绘制边框。HTML5 中新增了一些 <fieldset> 的新属性:disabled、form、name

iframe 内联框架,src属性制定内联框架的地址。

 

frames HTML5不支持frames、 frameset、noframes
noframes frames可选内容,在frameset下(对不支持frame的浏览器显示此区块内容)

3.2 内联元素(inline element)

语义或短语标签,利于SEO:

em 强调

strong 粗体强调

code 计算机代码

cite 定义引用 如作品的标题 默认斜体样式

samp 定义范例计算机代码

kbd 定义键盘文本

dfn 定义一个定义项目

var 定义变量

small 小型文本

big 大字体文本

mark 突出显示

关于语义化标签:像div、span这种标签,Safari浏览器不认为它是可以产生交互的元素,如果又没有在这些元素上直接绑定事件,那些用事件委托绑定的事件就失效了。按照w3c提倡的语义化,用button或者a或者input去写一个按钮的话,这种bug就不会出现了。

格式标签:

br 换行 使后面的元素新行开始,但是他本身还是属于上一行的

sub 下标
sup 上标

i 斜体

del 中划线 HTML5 不支持 <strike> 和 <s>标签。请用 <del> 标签代替

q 短引用 自动添加引号
abbr 缩写  HTML5 不支持 <acronym> 标签,使用 <abbr> 标签代替它。

功能标签:

span 常用内联容器,定义文本内区块

a 锚点 超链接

img 图片

input 输入框

textarea 多行文本输入框

select 项目选择

label 表单标签 和表单元素组合使用  for=""绑定表单元素的Id值

4 HTML标签详解(部分)

&

由于"&"在html中有特殊作用,显示"&"使用&amp;

&lt;和 &gt;

由于"<"和">"在html中用作标签,因此原样显示时需要转义

显示"<" 使用&lt; 

显示">" 使用&gt; 

显示空格

浏览器对空格的处理:

如果空格两边均有内容(文本),那么多个空格与换行视为一个空格
  如果两边只要要有一边没有内容,就忽略空格
  如果需要显示空格使用," "表示一个空格

hr

当内容的主题发生变化时,使用 <hr> 标签进行分隔

所有的布局属性在HTML4.01都已废弃,在HTML5 中也不支持,使用css替代。

pre

预格式化 保留原始原样的格式
 <pre>
           锄禾日当午,
  汗 滴 禾 下 土。
              谁知盘中餐,
     粒 粒 皆 辛 苦。
 </pre>

a标签

a标签

   <a name="md">这是一个锚点</a>
  <a href="#md">跳到锚点</a>

a标签超链接
  <a href="url">连接显示的内容</a>
  示例:<a href="http://www.baidu.com">百度一下</a>

a标签的target属性

链接的网页在新窗口中打开

  <a href="http://www.tudou.com" target="_blank">土豆</a>

a标签内嵌图片

  <a href="http://www.baidu.com"><img src=".\baidu.gif" /></a>

a标签的下载功能

一个下载链接放到客户端是a标签,其href属性是文件的路径,如果是txt或jpg这种文件,点击链接直接在窗口显示。如果是doc或其他文件,无法显示时,就会弹出下载框。

a标签发送邮件

<a href="mailto:kinglong1984@126.com?subject=mailTitle&body=mailbody" >发送邮件</a>

a标签打开视频文件

<a href="支付流程.avi"  title="视频">教学视频</a><br />

a标签运行可执行文件

<a href="维护/角色管理.exe"  title="角色管理" >角色管理</a>

Img标签

<img src="图片地址" alt="图片不存在" title="这是一张图片" />

width 宽度 height 高度 只设置其中一个则等比例缩放,若果设置了两个,则拉伸缩放;
alt 必需的属性,它规定在图像无法显示时的替代文本;
title 鼠标放上去显示 
除width height 之外,其他的样式相关的属性都废弃,统一按css规范实现视觉效果

列表

定义列表

<dl>

  <dt>Coffee</dt>

  <dd>Black hot drink</dd>

  <dt>Milk</dt>

  <dd>White cold drink</dd>

</dl>

嵌套列表

<ul>

  <li>Coffee</li>

  <li>Tea

    <ul>

      <li>Black tea</li>

      <li>Green tea</li>

    </ul>

  </li>

  <li>Milk</li>

</ul>

列表样式:CSS list-style-type属性

none: 无(取消所有的list样式)

 

disc: 点

circle: 圆圈

square: 正方形

decimal: 数字

decimal-leading-zero: 十进制数,不足两位的补齐前导0,例如: 01, 02, 03, ..., 98, 99

lower-roman: 小写罗马文字,例如: i, ii, iii, iv, v, ...

upper-roman: 大写罗马文字,例如: I, II, III, IV, V, ...

lower-alpha: 小写英文,例如: a, b, c, ... z

upper-alpha: 大写英文,例如: A, B, C, ... Z

lower-latin: 小写拉丁文,例如: a, b, c, ... z

upper-latin: 大写拉丁文,例如: A, B, C, ... Z

lower-greek: 小写希腊字母,例如: α(alpha), β(beta), γ(gamma), ...

georgian: 乔治亚数字,例如: an, ban, gan, ..., he, tan, in, in-an, ...

armenian: 亚美尼亚数字

inherit:继承

 

li标签不换行

方式一:float:left

ul{

display:inline;

}

li{

 float:left;

}

 

方式二:display:inline-block

ul{

display:block;

white-space:nowrap;

overflow:auto;

}

li{

 display:inline-block;

}

表格

td 的rowspan、colspan属性跨几行 跨几列。

表格细边框样式:(注意有兼容性问题)

.tb,tr,td

{

border-collapse:collapse;

}

表单及表单元素

表单标签:包含了处理表单数据所用服务端程序的URL以及数据提交到服务器的方法。

表单域:包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等

表单按钮:包括提交按钮、复位按钮和一般按钮;用于将数据传送到服务器上,还可以用表单按钮来控制定义了处理脚本的处理工作。

form 表单标签

action属性的值为接收和处理表单数据的服务端网页地址。

method属性 表示提交表单数据http请求方法,post表示使用post方式提交。

<form action="/" method="post">

        <input type="text" name="txt" value=" " />

        <input type="submit" name="name" value=" " />

</form>

fieldset

在数据周围绘制一个带标题的框,如:

<form>

<fieldset>

<legend>个人信息:</legend>

   Name: <input type="text"><br>

   Email: <input type="text"><br>

   Date of birth: <input type="text">

</fieldset>

</form>

input submit  

type为submit的按钮,点击会将表单提交到服务器

 <form action="/" method="post">

        <input type="text" name="txt" value=" " />

        <input type="submit" name="name" value=" " />

</form>

input text文本域

当用户要在表单中键入字母、数字等内容时,就会用到文本域。

<form>

姓名: <input type="text" name="txt_name" /><br />

年龄: <input type="text" name=" txt_age " />

</form>

textarea 多行文本域   

 <textarea rows="12" cols="26">

白日依山尽,

黄河入海流。

欲穷千里目,

更上一层楼。

</textarea>

非单值表单元素:radio、checkbox、select

radio单选按钮

将文字放在label标签中,绑定一个radio的id,点击label标签中的内容与点击radio效果一样。

<form action="/" method="post">

       <input id = "m" type = "radio" name = "sex" checked = "checked"/><label for = "m">male<label>

  <input id ="fm" type = "radio" name = "sex" /><label for = "fm" >female</label>

<br/>

        <input type="submit" value="Send" />

</form>

checkbox 复选框

将文字放在label标签中,绑定一个checkbox 的id,点击label标签中的内容与点击checkbox 效果一样。

<form action="/" method="post">    

    <div>

       <label>爱好:</label><br/>

      <input id = "c1" type = "checkbox" name = "ds" value = "1" checked="checked"/><label for = "c1">登山</label>

    <input id = "c2" type = "checkbox" name = "yy" value = "2" checked="checked"/><label for = "c2">游泳</label>

</div>

<input type="submit" value="提交" />

</form>

select

<select>选择列表元素
<option>选择列表条目元素

        示例:

  <select id = "s1" name = "domain">
    <option value = "1">@126.com</option>
    <option value = "2" selected = "selected">@qq.com</option>
    <option value = "3">@163.com</option>
  </select>

设置size属性

    -> size默认为1,就是ComboBox,只将选中的项显示出来,其他项在下拉列表中。
    -> 设置size为n,表示显示n行的ListBox,一次显示n项,大于n项时可滚动查看。

设置multiple

默认情况是单选,在select中添加multiple属性即可多选,如设置size="3" multiple="multiple"时,效果如下

iframe标签

iframe 元素会创建包含另外一个文档的内联框架(即行内框架)

动态设置资源

  var frame=document.getElementById("iframe");

  frame.src= "http://iprogram.com.cn";

获取iframe文档内的元素

使用window.frames[0].document获取文档

以id获取的方式window.frames["iframe"].document在火狐浏览器上取不到

    var iframedoc = window.frames[0].document;

 

使用jQuery和选择器可从内联文档获取元素

var html =$(iframedoc ).find(“html”);

var body = $(iframedoc ).find(“body”);

//如果内联文档有类名为label的元素 有id为btn_submit的元素,可以这样获取

var label= $(iframedoc ).find(“.label”);

var button = $(iframedoc ).find(“#btn_submit”);

frameset (帧标签)

HTML5已经不支持 不推荐使用

示例(可嵌套使用):

<html>
 <frameset rows =30%,*>
    <frame src="top.html">
    <frameset cols =20%,*>
      <frame src="left.html">
      <frame src="main.html">
    </frameset>

<noframes><body>您的浏览器不支持</body>frameset</noframes>
 </frameset>

</html>

<frameset></frameset>
  一个html中直接写上frameset,不需要提供<html>、<body>等标签
  在frameset中可以添加frame标签,默认就是一个页面,用src写地址
  在frameset标签中有两个常见的属性
  rows 行分大小 rows="30%,40%,*"
  cols 列分大小
  frame标签中有个属性表示noresize="noresize",使得页面不能调整大小

<noframes>
  并非所有浏览器都兼容frameset,那么如果有不兼容的时候,可以提供noframes标签,在不兼容的情况下,显示noframes中的内容,如:
    <noframes><body>您的浏览器不支持</body>frameset</noframes>

(<body></body> 标签不能与 <frameset></frameset> 标签同时使用!不过包含一段文本的 <noframes> 标签,必须将这段文字嵌套于 <body></body> 标签内。)

5 HTML规范

5.1 HTML与XML比较

都是标记语言,注释相同,可以通过DOM控制,可以通过CSS控制;不同在于xml主要存储数据,html注重展示数据,xml语法更加严格规范。

XHTML是符合xml语法规范的HTML ,是更严格更纯净的 HTML 版本。

5.2 XHTML标准规范XHTML1

HTML标准规范现状

XHTML1让杂乱的HTML4代码有了新书写和解释规范,使网页能够被浏览器正确及较快地编译。目前大多网站为了seo和多浏览器支持,都采用XHTML1标准写法。

XHTML1以后,出现了XHTML2和HMTL5两种不兼容的、互相竞争的标准。XHTML2相比XHMTL1有很大的变化,且不兼容XHML1及以前的标准,没有得到浏览器厂商的支持。HTML 5是由包括Google、Mirosoft、Mozilla、Opera、Apple在内多家浏览器厂商共同起草的下一代web规范,增加了很多符合最新web发展趋势的功能。最终W3C停止了对XHTML2的开发,转而大力支持HTML5的规则制定,并于2014年发布了HTML5 的W3C推荐标准版。

HTML5既支持宽松的语法规范,也支持严格的XHML1规范,最新的HTML编写规范推荐在HTML5文档中使用XHML1规范。

XHML1标准规范特点

标签:有始有终,小写规范。标签必须有结束标签,不能省略。
  内容:body分工,内容其中。
  注释:跨行注释,不要嵌套。
  属性:键值双引,空格分列。属性名与属性值成对出现,属性名小写属性值使用双引号

标识:使用id做为元素的唯一标志,而不是name。