HTML5基础
1.HTML简介及发展史
HTML是用来描述网页的一种语言的,它是一种超文本标记语言,也就是说,HTML不是一种编程语言,仅是一种标记语言.
(1)超文本标记语言--在1993年6月互联网工程工作小组工作草案发布(并非标准)
(2)HTML2.0--1995年11月作为RFC 1866发布,在RFC 2854于2000年6月发布之后被宣布过时
(3)HTML3.2--1996年1月14日,W3C推荐标准
(4)HTML4.0--1997年12月18日,W3C推荐标准
(5)HTML4.01(微小改进)--1999年12月24日,W3C推荐标准,2000年5月15日发布基本严格的HTML4.01语法,是国际标准化组织和国际电工委员会的标准
(6)XHTML1.0--2000年1月26日发布,是W3C推荐标准,后来经过修改于2002年8月1日重新发布
(7)XHTML1.1--2001年5月31日发布
(8)XHTML2.0--W3C的工作草案,由于改动过大,学习这项新技术的成本过高而最终失败,因此,现在常用的还是XHTML1.0标准
(9)HTML5--目前最新的版本,于2004年被提出,2013年5月6日,HTML5.1正式草案公布
2.网页编辑工具
1)使用WebStrom编辑HTML文档的步骤如下:
(1)打开WebStorm编辑器后,选择File-New-HTML File命令,打开"HTML File"对话框
(2)在"Name"文本框中输入HTML的文件名为"my_firstPage",在"Kind"下拉列表框中选择"HTML 5 file"选项,单击"OK"按钮即可创建一个HTML5页面的模板
(3)在boby元素和title元素中添加网页内容
(4)网页内容添加完成后,鼠标移动到WebStorm编辑器右上方,会出现几个常见的浏览器图标
(5)在Chrome浏览器中显示的效果
3.网页的基本信息
1)DOCTYPE声明
2)<title>标签
3)<meta>标签
(1)文档内容类型,字符编码信息书写如下:
<meta charset="UTF-8"/>
属性:charset表示字符集编码,常用的编码有以下几种:
1.gb2312:简体中文,一般用于包含中文和英文的页面
2.ISO-885901:纯英文,一般用于只包含英文的页面
3.big5:繁体,一般用于带有繁体字的页面
4.UTF-8:国际性通用的字符编码,同样用于中文和英文的页面.和gb2312编码相比,国际通用性更好
在保存文件时编码方式一定要与HTML5页面中<meta>标签中的编码方式保持一致,否则,将会出现乱码
(2)搜索关键字和内容描述信息书写
4.网页的基本标签:
1)标题标签:
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>不同等级的标题标签对比</title> </head> <body> <h1>一级标题</h1> <h2>二级标签</h2> <h3>三级标签</h3> <h4>四级标签</h4> <h5>五级标签</h5> <h6>六级标签</h6> </body> </html>
2)段落标签和换行标签
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>段落标签的应用</title> </head> <body> <h1>北京欢迎你</h1> <p>北京欢迎你,有梦想谁都了不起!</p> <p>有勇气就会有奇迹</p> </body> </html>
换行标签:<br/>
水平线标签:<hr/>
字体样式标签:
1.<strong></strong>加粗
2.<p></p>换行并空行
3.<em></em>斜体
©:版权
Shift+&:特殊符号
1.空格:
2.大于号(>):>
3.小于号(<):<
4.引号("):"
5.版权符号(@):©
注释:<!--注释内容-->
5.图像标签
1)常见的图像格式:
(1)JPG格式
(2)GIF格式
(3)BMP格式
(4)PNG格式
2)图像标签的基本语法:
<img src="图片地址" alt="图像的替代文字" title="鼠标悬停提示文字" width="图片宽度" height="图片高度" />
6.超链接标签
1)超链接的基本用法:
<a href="链接地址" target="目标窗口位置">链接文本或图像</a>
href:表示链接地址的路径
target:指定链接在哪个窗口开,常用的取值有_self(自身窗口),_blank(新建窗口).
超链接既可以是文本超链接,也可以是图像超链接
7.超链接的应用场合:
1)页面间链接:A页到B页,最常用,用于网站导航
2)锚链接:A页甲位置到A页乙位置或A页甲位置到B页乙位置
3)功能性链接:在网页中调用其他程序功能
1.页面间链接:就是从一个页面链接到另一个页面
2.锚链接:常用于目标页内容很多,需定位到目标页内容中的某个具体位置时.
(1)在页面的乙位置设置标记
<a name="marekr">目标位置乙</a>
(2)设置甲位置链接路径href属性值为"#标记名",语法如下:
<a href="#marker">当前位置甲</a>
