本书依据《Web前端开发职业技能等级标准（初级）》和部分院校的《Web前端技术课程教学标准》编写，内容涵盖Web页面制作基础、HTML5和CSS3开发基础与应用、JavaScript程序设计和社区新闻网制作实例。以模块化的方式组织内容，同时选取静态网站设计与制作的典型应用作为教学案例。 本书可作为高等职业院校Web前端技术和网页设计与制作课程的教材，也适合作为1 X职业技能等级证书中Web前端开发（初级）的教学及参考用书。

第1章 HTML5基础1 1.1 Web的基本概念1 1.1.1 WWW1 1.1.2 网页浏览器1 1.1.3 Web服务器2 1.1.4 网站2 1.1.5 网页2 1.1.6 URL2 1.1.7 标记语言3 1.1.8 网页标准3 1.2 HTML5的基本结构和语法规则3 1.2.1 HTML5文档的基本结构3 1.2.2 HTML5的基本语法6 1.2.3 HTML的字符实体和颜色表示8 1.2.4 HTML5开发人员编码规范9 1.3 用记事本编辑HTML文档10 1.4 实训——制作社区网版权信息11 习题112 第2章 HTML5的块级元素13 2.1 基本块级元素13 2.1.1 标题元素h1～h613 2.1.2 段落元素p和换行元素br14 2.1.3 水平线元素hr14 2.1.4 注释元素15 2.2 列表元素16 2.2.1 无序列表元素ul16 2.2.2 有序列表元素ol17 2.2.3 自定义列表元素dl18 2.2.4 嵌套列表19 2.3 表格元素table20 2.3.1 基本表格20 2.3.2 合并行和列21 2.3.3 表格数据的分组22 2.3.4 调整列的格式23 2.4 表单24 2.4.1 表单元素form24 2.4.2 输入元素input25 2.4.3 标签元素label27 2.4.4 选择栏元素select28 2.4.5 按钮元素button30 2.4.6 多行文本元素textarea31 2.5 分区元素div32 2.6 缩排元素blockquote33 2.7 实训——制作精选信息板块34 习题235 第3章 HTML5的行级元素36 3.1 格式化元素36 3.1.1 字体样式元素36 3.1.2 短语元素37 3.2 图像元素img38 3.3 超链接元素a40 3.3.1 a元素40 3.3.2 用图像作为超链接热点40 3.3.3 指向其他页面的链接41 3.3.4 创建链接至书签42 3.3.5 指向下载文件的链接43 3.3.6 指向电子邮件的链接44 3.3.7 JavaScript链接44 3.3.8 空链接44 3.4 图像热区超链接元素map、area44 3.4.1 用map元素定义图像地图45 3.4.2 img元素与map元素的关联45 3.5 范围元素span46 3.6 多媒体元素47 3.6.1 音频元素audio47 3.6.2 视频元素video47 3.7 用HBuilder X编辑HTML文件48 3.8 实训—制作广告板块49 习题350 第4章 CSS3基础52 4.1 CSS设计与编写原则52 4.2 在HTML中使用CSS的方法53 4.2.1 行内样式54 4.2.2 内部样式55 4.2.3 链入外部样式文件56 4.2.4 导入外部样式文件58 4.3 CSS的两个主要特性60 4.3.1 层叠60 4.3.2 继承60 4.4 CSS的基本语法62 4.4.1 基本语法62 4.4.2 注意事项62 4.5 CSS的选择器64 4.5.1 元素选择器64 4.5.2 通配符选择器64 4.5.3 属性选择器65 4.5.4 派生选择器67 4.5.5 兄弟选择器70 4.5.6 id选择器71 4.5.7 类选择器72 4.5.8 伪类选择器73 4.5.9 UI元素状态伪类选择器77 4.5.10 结构伪类选择器83 4.5.11 其他伪类选择器88 4.5.12 伪元素选择器89 4.6 属性值的写法和单位94 4.6.1 长度、百分比单位94 4.6.2 色彩单位95 4.7 HTML文档结构与元素类型96 4.7.1 文档结构的基本概念96 4.7.2 元素类型97 4.8 实训——制作内容详情页98 习题499 第5章 CSS3的属性101 5.1 CSS背景属性101 5.1.1 背景颜色属性background-color101 5.1.2 背景图像属性background-image102 5.1.3 重复背景图像属性background-repeat104 5.1.4 固定背景图像属性background-attachment106 5.1.5 背景图像位置属性background-position106 5.1.6 背景图像大小属性background-size107 5.1.7 背景属性background108 5.1.8 背景覆盖区域属性background-clip109 5.1.9 背景图像起点属性background-origin109 5.1.10 背景渐变属性background-image111 5.2 CSS字体属性114 5.2.1 字体类型属性font-family114 5.2.2 字体尺寸属性font-size115 5.2.3 字体倾斜属性font-style115 5.2.4 小写字体属性font-variant115 5.2.5 字体粗细属性font-weight116 5.2.6 字体简写属性font117 5.2.7 CSS3新增使用服务器字体117 5.3 CSS文本属性118 5.3.1 文本颜色属性color118 5.3.2 文本方向属性direction118 5.3.3 字符间隔属性letter-spacing118 5.3.4 行高属性line-height119 5.3.5 文本水平对齐方式属性text-align119 5.3.6 为文本添加装饰属性text-decoration119 5.3.7 段落首行缩进属性text-indent120 5.3.8 文本的阴影属性text-shadow120 5.3.9 文本的大小写属性text-transform120 5.3.10 元素内部的空白属性white-space121 5.3.11 单词之间的间隔属性word-spacing121 5.3.12 文本的截断效果属性text-overflow121 5.3.13 文本的换行方式属性word-break122 5.3.14 单词断字属性word-wrap122 5.4 CSS尺寸属性123 5.4.1 宽度属性width123 5.4.2 高度属性height124 5.4.3 *小宽度属性min-width124 5.4.4 *大宽度属性max-width125 5.4.5 *小高度属性min-height125 5.4.6 *大高度属性max-height125 5.5 CSS列表属性126 5.5.1 图像作为列表项的标记属性list-style-image126 5.5.2 列表项标记的位置属性list-style-position127 5.5.3 标记的类型属性list-style-type127 5.5.4 列表简写属性list-style128 5.6 CSS表格属性130 5.6.1