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>斜体

    &copy:版权

    Shift+&:特殊符号

      1.空格:&nbsp;

      2.大于号(>):&gt;

      3.小于号(<):&lt;

      4.引号("):&quot;

      5.版权符号(@):&copy;

    注释:<!--注释内容-->

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>

 

posted @ 2017-08-25 15:29  岔气的猫  阅读(173)  评论(0编辑  收藏  举报