HTML标签构建网页框架，CSS使布局更加美观合理，本节课程是关于这两项内容的应用学习。

1.HTML 如上所述，HTML5的构建是由标签组成，而大部分标签都有两个属性：class(类名)和id(标识符)，而且通常一前一后形成起始-结束的容器（少数标签可以无需闭合标签，如），容器内的标签是容器标签的子元素，容器标签自然就是父元素了。

以下是关于一个表单、导航条、权利声明的html页面示例的编译代码 运行效果如下

2.CSS CSS全名叫层叠样式表，用于控制网页标签的样式和布局的显示。一般有两种方案：通过<style></style>容器，将CSS代码直接写在页面中，示例如下：

<style> body {background-color: powderblue;} h1 {color: blue;} p {color: red;} </style>

另一种是单独写成一个style.css文件，再通过html的导入显示命令。

CSS的格式有两部分组成：选择器和声明（属性+值），如上示例，h1就是一个选择器，选定后以声明{color: blue;}（属性:值）控制显示方式。默认情况下子元素会继承父元素的属性设置，除非子元素自有个性化设置。另外，多个选择器可以被分到同组，共享某个声明。 运行效果

2.1派生选择器 如果在代码复杂的情况下，想要根据上下文的关系，对某一选择器更改声明，可以使用 <上文标签><选择器> { 声明 } 来更改，例如： 运行效果

2.2 ID 选择器 相同ID值的HTML元素（容器），可以共享某一声明设置，ID选择器以 # 开头：#pid a{ color:#00755f; } 设置 id 为 pid 的 元素字体颜色为 #00755f

对应的HTML网页代码新增 运行效果

2.3 类选择器 上面说过，标签可以定义自身的类名(class)和标识符(id)，通过选择某一类名，CSS可以控制该类标签的显示效果，类选择器以 . 开头。 代码编译 运行效果

2.4 属性及属性值选择器 元素标签可以设置多个属性，通过索引这些属性，CSS能够快速设置标签的显示。 [title]/[title=foo] { color: black; } HTML网页代码编译 运行效果

2.5 常用属性 CSS中有多个常用属性，涉及背景、定位、文本、内外边距、尺寸、边框等显示控制。举个栗子 运行效果

2.6 框模型 框模型是指用CSS设定了背景、定位、内外边距等环境的显示框架，顺序依次是外边距-边框-内边距-正文。 再举个栗子 首先设置所有元素的内外边距为0，再通过类选择器选定box，逐个设置外边距、边框（实线样式及粗细）和内边距。 运行效果 对比上下文的截图可知，更改后整体页面向左上角逼近，文字行距缩小。

另外需要注意的是，外边距 margin 和内边距 padding 都可以通过对向获取，自动设置等额参数，例如 .box {padding:10px 20px} 等价于 .box {padding:10px 20px 10px 20px}。另外，当两个垂直外边距相遇时，它们会自动合并，合并后以外边距较高者的参数为定。