CHAPTER 01 HTML5基础

Posted 2021-03-28 茉莉谈网络

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CHAPTER 01 HTML5基础相关的知识，希望对你有一定的参考价值。

如今，Web页面呈现信息已经成为各种信息共享和发布的主要形式，超文本标记语言html是创建网页的基础。

通过本节学习，需要掌握：

会使用HTML5的基本结构创建网页
会使用文本相关标签排版文本信息
会使用图像相关标签实现图文并茂的页面
会使用 <a>标签创建超链接，锚链接及功能性链接

1.1 HTML5 文件的基本结构和W3C标准

1.1.1 HTML简介及发展史

1.1.1.1什么是HTML?

HTML是用来描述网页的一种语言，它是一种超本文标记语言。也就是说，HTML不是一种编程语言，而是一种标记语言。

HTML由一套标记标签组成，在制作网页时，HTML使用标记标签来描述网页。

使用浏览器打开任意一个页面，按下F12键，就可以看到源文件。

1.1.1.2HTML 发展史：

HTML草案——HTML2.0——HTML3.2——HTML4.0——TML4.01——XHTML——XHTML1.0——XHTML1.1——XHTML2.0——HTML5（目前最新版本）

1.1.2 HTML5的优势

1、世界知名浏览器厂商对HTML的支持

IE、Google、Firefox、Safari、Opera等主要浏览器都在支持HTML5 上采取了措施。

2、市场的需求

现在的市场已经迫不及待地要求有一个统一的互联网通用标准，HTML5之前，各web浏览器之间是不兼容的，HTML5的目标就是将Web带入一个成熟的应用平台。

3、跨平台

HTML5 可以做到跨平台开发

1.1.3 W3C标准

1、使用W3C标准的原因

发明HTML的初衷是实现信息资料的网络传播和共享，希望HTML文档具有平台无关性，但遗憾的是，各浏览器厂商因为激烈竞争关系，并不兼容，因此需要一个组织来制定和维护统一的国际化Web开发标准，确保多个浏览器都兼容，HTML内容结构都是语义化的。于是万维网联盟(World Wide Web Construction,W3C)诞生了，由W3C组织制定和维护的Web开发标准，也称为W3C标准。

2、W3C标准的介绍

W3C标准不是某一个标准，而是一系列的标准集合。一个网页主要由3个部分组成，即结构(structure), 表现 (Presentation)和行为（Behavior）,简而言之，“结构””表现“”行为“分别对应了3种非常常用的技术，即HTML、CSS、javascript，这3个组成部分被明确后，一个重要的思想随之产生，即将”结构“”表现“”行为“三者相分离，会给页面开发带来很多优点。

W3C标准包括结构化标准语言（HTML、XML）、表现标准语言(CSS)、行为标准语言（DOM、ECMAScript）到这里为止，我们已经初步认识到网页开发要包括的3个基本步骤，并且这三个步骤都要依照W3C 标准进行开发，相信大家已经迫不及待地想来尝试着3个步骤地开发了吧。

1.1.4 网页编辑工具

俗话说：“磨刀不误砍柴工”。要进行网页开发也是一样的，选择一款好的开发工具是非常必要的，可以开发网页的工具很多，如记事本、Dreamweaver、UltraEdit、Sublime、VSCode、webStorm等，在Vscode与Webstorm的比较中，Vscode背后站着微软，未来vscode一统天下似乎是必然之势，但目前而言，其尚且年幼，唯有webstorm正值壮年。Webstorm功能更强大提示更丰富，但是占用内存cpu。所以在这之后的学习中，我们采用webstorm作为编辑工具，浏览器方面，Chrome浏览器的控制台调试模拟功能非常强大且方便，因此采用Chrome浏览器作为浏览测试的主要浏览器，IE浏览器和Firefox浏览器作为辅助测试浏览器。

1.1.5 HTML5文件的基本结构

HTML5的基本结构分为两部分，整个HTML包括头部(head)和主体(body)两部分。

1.1.6 网页的基本信息

1、DOCTYPE声明

<!DOCTYPE html>声明必须位于HTML文档的第一行，约束HTML文档结构，检验是否符合相关Web标准，同时告诉浏览器使用哪种规范来解释这个文档中的代码。

2、<title>标签

浏览器窗口的标题栏显示网页标题、<title>搜狐——中国最大的门户网站</title>

3、<meta>标签

使用<meta>标签描述网页的摘要信息，包括文档内容类型、字符编码信息、搜索关键字、网站提供的功能和服务的详细描述等。<meta> 标签描述的内容并不显示，其目的是方便浏览器解析或便于搜索引擎搜索，它采用“名称/值”对的方式描述摘要信息。

文档内容类型、字符编码信息书写如下。

注意：当页面发生乱码时，可以先观察页面中是否有写编码方式的语句，然后使用记事本打开该乱码文件，单击“另存为”按钮，在弹出的“另存为”对话框中修改编码方式，使其与页面中的编码方式一致。

搜索关键字和内容描述信息书写如下：

实现的方式仍然为”名称/值“对的形式。

注意：使用 Webstorm工具自动生成的HTML基本结构中的<head>标签里有一个属性lang=”en”,它表示本页面是英文的。

1.2 网页的基本标签

搭建一个网页结构需要学习很多其他的标签。

1.2.1 标题标签

1.2.2 段落标签和换行标签

<br/>

1.2.3 水平线标签

<hr/>

1.2.4 字体样式标签

1.2.5 注释和特殊符号

由于大于号(>)\小于号(<)等已经作为HTML的语法符号，因此，如果要在页面中显示这些特殊符号，就必须使用相应的HTML代码表示，这些特殊符号对应的HTML代码称为字符实体。

HTML中常用的特殊符号及其对应的字符实体如下所示，这些字符实体符号都是以”&”开头，以”;”结束。

表1-1 HTML中常用的特殊符号及其对应的字符实体

特殊符号	字符实体	示例
空格		<a href=”#”>百度</a> \| ...
大于号(>)	>	如果时间>晚上6点，就坐车回家
小于号(<)	<	如果时间&lt早上7点，就走路去上学
引号(“)	&quote;	W3C规范中，HTML的属性值必须用成对的&quote;引起来
版权符号(©)	©	©2013-2018北大青鸟