HTML5 学习

2周实验12 HTML和CSS ---------------------------- ###一、环境准备 - 本节实验可以在任意一个浏览器中完成，只需要使用浏览器打开示例文件即可。你可以按照以下步骤创建学习环境。 - 创建一个工作目录，如果是 Linux 平台，可以使用以下命令创建； ``` $ mkdir ~/Code ``` - 然后在 ~/Code 目录中创建文件 index.html 和 style.css 文件； - 在 index.html 中输入下面的代码，下列代码中内容是注释，可以不用输入： ``` HTML5 学习

主体内容

``` ![实验楼](https://dn-simplecloud.shiyanlou.com/6210581522414496184-wm) - style.css 内的内容暂时不用输入，在开始学习 CSS 前再编写相关代码。 - 现在使用浏览器打开 index.html 文件，就看到如下图的效果： ![实验楼](https://dn-simplecloud.shiyanlou.com/6210581522415065149-wm) ###二、HTML5 基础 - HTML 有很多版本，其中最新的 HTML5 目前最新也最为流行的版本。我们看到的任何一个网页，查看其源码时，能看到类似于

这样的标签，HTML 就由这些标签组成，学习 HTML5 的过程学习各种各种标签，了解其用途和各种属性。HTML 本身非常简单，任何一个网页都是很好的学习例子，所以多看网页源码，多练习就可以快速掌握了。 - HTML5 页面有各种标签组成，基本的结构如在前文中已经展示过，现在先介绍下 index.html 页面基本结构: ``` 指示了页面的文档类型是 HTML5 文档；定义了文档的头部，描述了这个页面的一些信息，比如标题，编码，引用的 CSS 等信息；定义了文档的主体，包含文档的所有内容； ``` - 可以看到 HTML5 就是由各类标签组成的，这些标签大部分有一个起始标签和闭合标签，比如 < div > 是起始标签，而 < /div > 是闭合标签。起始标签和闭合标签形成了一个容器，又可以包含其他各种标签。有一些标签，可以没有闭合标签，比如上面出现的标签。完整的标签列表，可以参考 https://developer.mozilla.org/en/docs/Web/HTML/Element 文档。 - HTML 页面上的所有标签组成了一颗树，比如所有标签内的标签都称为标签的子元素，称为父元素。 - 标签经过浏览器渲染显示的时候，可以按默认显示类型分为两种，一种是在行内显示，类似于标签，其他大部分的标签都直接显示成一行，比如 < div >, < p > 标签。标签可以包含各种属性，比如标签的 href 属性指定了加载的 CSS 文件路径。< div > 标签的 class 属性指定了标签的类名。大部分标签都可有 class 和 id 两个属性，前者指定了标签的类名，后者指定的标签内的标识符，一个 HTML 文档内不能有相同的 id 属性。 - 一些常用的标签如下表所示： ``` 标签用途

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

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