HTML
简介
HTML是用来描述网页的一种语言,它是一种超文本标记语言(Markup Language),不属于编程语言
发展史
-
超文本标记语言——在1993年6月互联网工程工作小组草案发布(并非标准)
-
HTML2.0——1995年11月作为RFC 1886发布,在RFC2854于2000年6月发布之后被宣布过时
-
HTML3.2——1996年1月14日,W3C推荐标准。
-
HTML4.0——1997年12月18日,W3C推荐标准
-
HTML4.01(微小改进)——1999年12月24日,W3C推荐标准,2000年5月15日发布基本严格的HTML4.01语法是国际化标准组织和国际电工委员会的标准
-
XHTML1.0——2000年1月26日发布,是W3C推荐标准,后来经过修订于2002年8月1日重新发布
-
XHTML1.1——2001年5月31日发布
-
XHTML2.0——W3C的工作草案,由于改动过大,学习这项新的技术成本过高而失败,现在最常用的还是XHTML1.0标准
-
HTML5——目前最新的版本,于2004年被提出,2007年被W3C接纳并成立新的HTML工作团队,2008年1月22日公布HTML5第一份正式草案,2012年12月17日HTML5规范正式定稿,2013年5月6日,HTML5.1正式草案公布
优劣势
-
世界知名浏览器对HTML5的支持
-
微软:2010年3月16日,微软于拉斯维加斯举行了MIX10技术大会上宣布以推出Internet Exploror(IE)9浏览器开发预览版,此版本将更多的支持CSS3,SVG和HTML5等互联网浏览的通用标准
-
Google:2010年2月19日,Google Gears项目经理伊安 · 费特通过博客宣布,谷歌将放弃对Greas浏览器插件项目的支持,重点开发HTML5项目
-
苹果:2010年6月7日,苹果在开发者大会的会后发布了Safari5.这款浏览器支持10个以上的HTML5的技术,包括全屏播放,HTML5的地理位置,HTML5的形式验证等
-
Opera:2010年5月5日,Opera软件公司首席技术官Hakon Wium Lif先生在访华之际,接受了中国软件咨询网等少数几家媒体采访,他认为HTML5和CSS3将是全球互联网发展的未来趋势
-
Mozilla:2010年7月,Mozilla基金发布了FireFox4浏览器的第一个测试版,从官方文档看,他对HTML5是完全级别的支持
-
-
市场需求
现在的市场已经迫不及待地要求有一个统一的互联网通用标准。HTML5之前的情况是,由于各浏览器之间的不统一,仅修改Web浏览器之间的由于兼容性而引起的bug就浪费了大量时间,而HTML5的目标就是将Web带入一个成熟的应用平台,在HTML5平台上,视频,音频,图像动画及同计算机的交互都被标准化
-
跨平台
HTML5可以做到跨平台开发,用户只用打开浏览器访问就可以,PC网站,各种移动设备,插件等核心代码就可以不需要重复编写,极大减少了开发人员的工作量
W3C标准
-
使用W3C标准的原因
因为在早期web开发语言标准并不统一,则需要一个组来指定和维护统一的国际化Web开发标准,确保多个浏览器都能兼容,HTML内容结构都是语义化的。在这样的背景下,万维网联盟(World Wide Web Consortium,W3C)诞生了,因此由W3C组织和维护的Web开发标准,也称为W3C标准。它是Web技术领域最据权威和具有影响力的国际中立性技术标准机构,为了能在不同的浏览器上看到同样的效果,就需要一个中间的开发者遵循一个统一的规范,标准经行网页开发,才能满足用户的需求
-
W3C标准介绍
W3C不是某一个标准,而是一系列的标准集合,一个网页一共由三个部分组成:结构(Structure),表现(Presentation),行为(Behavior)
-
在一个网页中同样可以分为很多部分,包括各级标题,正文,图片,列表等,这就是这个网页的结构。每个组成部分的字体,颜色,间距等属性构成了它的表现。用户通过单击让某个元素移动,消失等动画交互就称他为行为
-
W3C的三个标准
-
结构化标准语言(HTML,XML)
-
表现标准语言(CSS)
-
行为标准语言(DOM,ECMScript )
-
-
HTML5文件的基本结构
HTML是一种超文本标记语言,如网页的一个标题,一个段落,一张图片等,这些都是利用HTML的标记完成的,最基本的语法为:
<标记>内容</标记>
HTML5的基本结构分为两部分,整个HTML包括头部(head)和主体(body)两个部分,头部包括网页标签(title)等基本信息,主题包括网页内容信息,如图片,文字等
<html>
<head>
<titile>我的第一个网页</titile> <!--网页标签-->
</head> <!--头部部分-->
<body>
我的第一个网页
</body> <!--主体部分-->
</html> <!--HTML-->
网页的基本信息
-
DOCTYPE声明:为了约束HTML文档的结构,检验是否符合相关web的标准,同时告诉浏览器,使用哪种规范来解释这个文档中的代码。DOCTYPE声明必须位于文档的第一行
-
title标签:使用title标签描述的是网页的标题,类似一篇文章的标题
-
mate标签:使用该标签来描述网页摘要的重要信息,包括文档内容类型,字符编码信息,搜索关键字,网站提供的功能和服务的详细描述等。mate标签描述的内容并不显示,其目的是方便浏览器解析或利于搜索引擎搜索,它采用"名称/值"的方法来描述重要信息
<mate charset = "UFT-8"/>
属性:charset表示字符集编码,常用的编码及有
-
gb2312:简体中文,一般用于包含中文和英文的页面
-
ISO-885901:纯英文,一般用于只包含英文的页面
-
big5:繁体,一般用于带有繁体字的页面
-
UFT-8:国际性通用的字符编码,同样适用于包含中文和英文的页面,和gb2312相比国际通用性更好
属性:中keywords表示搜索关键字,description表示网站具体内容的描述
网页的基本标签
-
标题标签:h1~h6;
-
段落标签:p
-
换行标签:br
-
水平线标签:hr
-
字体样式标签:粗体Strong或者b,斜体em或者i
-
注释:<!---->
-
特殊符号:
特殊符号 字符实体 示例 空格 这里是 中国 大于号(>) > 我今天>8点中回家,就吃不到晚饭 小于号(<) < 我今天<7点中回家,就能迟到晚饭 引号(") " 这里是:"中国"(W3C的规范中,属性值需要用引号括起来) 版权符号(©) © ©中国 腾讯 2008-2021
图像标签
常见的图像格式:
-
JPG格式
-
GIF格式
-
BMP格式
-
PNG格式
图像标签语法:
<img src = "图片地址" alt = "图像代替文字" title = "鼠标悬停提示文字" width = "图像宽度" height = "图像高度"/>
绝对路径:从别的服务器中使用绝对路径提取的图片
相对路径:电脑中自己的图片路径(提取相对链接时可以使用“../”回到上一级调取图片)
超链接标签
使用href属性跳转到属性指定地址
基本语法:
<a href = "链接地址" target = "目标窗口位置">链接文本或图像</a>
-
href:表示链接地址路径
-
target:指定连接在哪个窗口打开,常用的取值有_self(自身窗口)和_blank(新建窗口)
超链接既可以是文本超链接,也可是图像超链接
超链接的应用场合
-
页面间链接:A页到B页,最常用,用于网站导航
<a href = "www.baidu.com" title = "百度">百度</a>
-
锚链接:A页甲位置到A页乙位置或A页甲位置到B页乙位置
设置标记
<a name = "marker">目标位置乙</a>
跳转链接
<a href = "#marker">当前位置甲</a>
- 功能性链接:在页面中调用其他程序功能,如电子邮件,qq,MSN等
跳转到邮件
邮箱链接的用法为:mailto
<a href = "mailto:mail.qq.com">联系我们</a>
列表标签
列表它可以时信息结构化和条理化并以列表的样式显示出来
列表分为:无序列表,有序列表,定义列表
-
无序列表
ul作为列表的开始,li作为列表的内容
<ul> <li>内容1</li> <li>内容2</li> <li>内容3</li> </ul>
ul中只能嵌套li标签,li中能嵌套任意标签(W3C标准)
无序列表的特性
-
没有顺序,每个li标签中都要独占一行(块元素)
-
默认li标签项面前有个实心小圆点
-
一般用于无序类型的列表,如导航,侧边栏新闻,有规律的图文组合模块等
-
-
有序列表
ol作为列表的开始,li作为列表的内容
<ol> <li>内容1</li> <li>内容2</li> <li>内容3</li> </ol>
和无序列表相同:ol中只能嵌套li标签,li中能嵌套任意标签(W3C标准)
有序列表的特性:
-
有顺序,并且每个li标签中都要独占一行(块元素)
-
默认li标签项面前有顺序标记
-
一般用于排序类型的列表,如试卷,问卷选项等
-
-
定义列表
定义列表的开始使用dl标签,dt作为列表的起始项,dd作为内容项
<dl> <dt>标题1</dt> <dd>内容1</dd> <dd>内容2</dd> <dt>标题2</dt> <dd>内容1</dd> </dl>
-
没有顺序,每个dt标签,dd标签独占一行(块元素)
-
默认没有标记
-
一般用于(一个标题下有一个或多个列表项)*n情况
-
表格
为什么使用表格
-
简单通用:由于表格行列的简单结构,以及在生活中的广泛应用,因此对他的理解和编写都很方便
-
结构稳定:表格通常每行的列数一致,同行的单元格高度一致且水平对齐,同列单元格宽度一致且垂直对齐,这种严格的约束形成了一个不易变形的长方形盒子结构,堆叠排列起来结构很稳定
表格的基本结构
-
单元格:单元格时表格中最小的单位,一个或多个单元格纵横排列组成了表格
-
行:一个或多个单元格横向堆叠形成了行
-
列:由于表格单元格宽度必须一致,因此单元格纵向排列形成了列
表格的基本语法
<table> <!--表格开始-->
<tr> <!--行-->
<th>第一行第一列单元格内容<th> <!--列-->
<th>第一行第二列单元格内容<th>
</tr>
<tr> <!--行-->
<th>第二行第一列单元格内容<th> <!--列-->
<th>第二行第二列单元格内容<th>
</tr>
</table>
border是表格边框属性,表格边框属性写在变迁table中
表格的跨行与跨列
-
表格的跨列
跨列是指单元格的横向合并
<table> <tr> <td colspan = "所跨的列数">单元格内容</td> </tr> </table>
col是column的缩写,span为跨度,所以colspan的意思为跨列
-
表格的跨行
跨列是指单元格在垂直方向上的合并
<table> <tr> <td rowspan = "所跨的列数">单元格内容</td> </tr> </table>
row是行的意思,rowspan为跨行
媒体元素
HTML5支持网页播放音频视频元素
视频元素
视频英译video,而在HTML中的video元素是用来播放视频的,支持Ogg,MPEG4,WebM等视频格式,其用法如下
<video src="视频路径" controls="controls"></video>
其中src属性用于指定要播放的视频文件的路径,controls属性用于提供播放,暂停和音量控件,此外,还可以使用width和height设置视频的宽度和高度
如果浏览器不支持video元素,可以在video元素中的插入一段文字用于提示,这样旧的浏览器就可以显示这段文字给用户
video元素的应用
<video controls>
<source src="video/video.wemb"/>
<source sre="video/video.mp4">
你的浏览器不支持video标签
</video>
-
使用了source元素来链接到不同的视频文件,浏览器会自动选第一个可以识别的格式
-
autoplay属性可以使视屏文件自动播放
音频元素
音频元素在HTML5问世之后,终于可以使音频播放领域实现统一的标准,让用户告别插件的繁琐
audio元素的基本语法
HTML5中的audio元素使用来播放音频文件的,支持Ogg,Mp3,WVM等音频格式
<audio src="音频路径"controls="controls"></audio>
其中src属性用于指定要播放的视频文件的路径,controls属性用于提供播放,暂停和音量控件,此外,还可以使用width和height设置视频的宽度和高度
如果浏览器不支持audio元素,可以在audio元素中的插入一段文字用于提示,这样旧的浏览器就可以显示这段文字给用户
audio元素的应用
<audio controls>
<source src="music/music.mp3"/>
<source src="music/music.ogg"/>
</audio>
-
使用了source元素来链接到不同的视频文件,浏览器会自动选第一个可以识别的格式
-
autoplay属性可以使视屏文件自动播放