HTML5 学习

HTML 和 CSS 基础简介 HTML，CSS，JavaScript 是 Web 开发的基础，任何一个网页都离不开 HTML, CSS。HTML 标签组构建了网页的基本框架，而 CSS 则使得网页布局更加合理美观。本节实验中我们将学习 HTML5 和 CSS3。知识点 HTML5 基础知识 CSS3 基础知识环境准备本节实验可以在任意一个浏览器中完成，只需要使用浏览器打开示例文件即可。你可以按照以下步骤创建学习环境。创建一个工作目录，如果是 Linux 平台，可以使用以下命令创建； $ mkdir ~/Code 然后在 ~/Code 目录中创建文件 index.html 和 style.css 文件；在 index.html 中输入下面的代码，下列代码中内容是注释，可以不用输入： HTML5 学习

主体内容

style.css 内的内容暂时不用输入，在开始学习 CSS 前再编写相关代码。现在使用浏览器打开 index.html 文件，就看到如下图的效果：此处输入图片的描述本节实验的内容都基于 Chrome 60.0.3112.101 版本进行测试。前端学习环境准备视频：您还没有安装flash播放器，请点击这里安装安装后重启浏览器即可播放视频 HTML5 基础 HTML 有很多版本，其中最新的 HTML5 目前最新也最为流行的版本。我们看到的任何一个网页，查看其源码时，能看到类似于

这样的标签，HTML 就由这些标签组成，学习 HTML5 的过程学习各种各种标签，了解其用途和各种属性。HTML 本身非常简单，任何一个网页都是很好的学习例子，所以多看网页源码，多练习就可以快速掌握了。 HTML5 页面有各种标签组成，基本的结构如在前文中已经展示过，现在先介绍下 index.html 页面基本结构: 指示了页面的文档类型是 HTML5 文档；定义了文档的头部，描述了这个页面的一些信息，比如标题，编码，引用的 CSS 等信息；定义了文档的主体，包含文档的所有内容；可以看到 HTML5 就是由各类标签组成的，这些标签大部分有一个起始标签和闭合标签，比如

是起始标签，而

是闭合标签。起始标签和闭合标签形成了一个容器，又可以包含其他各种标签。有一些标签，可以没有闭合标签，比如上面出现的标签。完整的标签列表，可以参考 https://developer.mozilla.org/en/docs/Web/HTML/Element 文档。 HTML 页面上的所有标签组成了一颗树，比如所有标签内的标签都称为标签的子元素，称为父元素。标签经过浏览器渲染显示的时候，可以按默认显示类型分为两种，一种是在行内显示，类似于标签，其他大部分的标签都直接显示成一行，比如

标签。标签可以包含各种属性，比如标签的 href 属性指定了加载的 CSS 文件路径。

标签的 class 属性指定了标签的类名。大部分标签都可有 class 和 id 两个属性，前者指定了标签的类名，后者指定的标签内的标识符，一个 HTML 文档内不能有相同的 id 属性。一些常用的标签如下表所示：标签用途

最常用的标签，可以包含各种标签，页面布局最常用的标签定义连接
插入换行符

“楼+之Python实战第3期”实验报告