目 录
第I篇 HTML 5网页设计
第1章 初识HTML 5 3
1.1 HTML 5的基本概念 4
1.1.1 HTML的发展历程 4
1.1.2 什么是HTML 5 4
1.1.3 HTML 5文件的基本结构 5
1.2 HTML 5的优势 5
1.2.1 解决了跨浏览器问题 5
1.2.2 新增了多个新特性 5
1.2.3 用户优先的原则 6
1.2.4 化繁为简的优势 7
1.3 HTML 5文件的编写方法 7<p>目 录</p> <p>第I篇 HTML 5网页设计</p> <p> </p> <p>第1章 初识HTML 5 3</p> <p>1.1 HTML 5的基本概念 4</p> <p>1.1.1 HTML的发展历程 4</p> <p>1.1.2 什么是HTML 5 4</p> <p>1.1.3 HTML 5文件的基本结构 5</p> <p>1.2 HTML 5的优势 5</p> <p>1.2.1 解决了跨浏览器问题 5</p> <p>1.2.2 新增了多个新特性 5</p> <p>1.2.3 用户优先的原则 6</p> <p>1.2.4 化繁为简的优势 7</p> <p>1.3 HTML 5文件的编写方法 7</p> <p>1.3.1 使用记事本手工编写HTML 5 7</p> <p>1.3.2 使用Dreamweaver CC编写</p> <p>HTML文件 8</p> <p>1.4 使用浏览器查看HTML 5文件 12</p> <p>1.4.1 查看页面效果 12</p> <p>1.4.2 查看源文件 13</p> <p>1.5 疑难解惑 13</p> <p>第2章 HTML 5网页的文档结构 15</p> <p>2.1 HTML 5文件的基本结构 16</p> <p>2.1.1 HTML 5页面的整体结构 16</p> <p>2.1.2 HTML 5新增的结构标记 16</p> <p>2.2 HTML 5基本标记详解 17</p> <p>2.2.1 文档类型说明 17</p> <p>2.2.2 HTML标记 17</p> <p>2.2.3 头标记head 18</p> <p>2.2.4 网页的主体标记body 20</p> <p>2.2.5 页面注释标记<!-- --> 21</p> <p>2.3 HTML 5语法的变化 22</p> <p>2.3.1 标签不再区分大小写 22</p> <p>2.3.2 允许属性值不使用引号 22</p> <p>2.3.3 允���部分属性的属性值省略 23</p> <p>2.4 综合案例——符合W3C标准的</p> <p>HTML 5网页 23</p> <p>2.5 跟我学上机——简单的HTML 5</p> <p>网页 25</p> <p>2.6 疑难解惑 26</p> <p>第3章 HTML 5网页中的文本和图像 27</p> <p>3.1 在网页中添加文本 28</p> <p>3.1.1 普通文本的添加 28</p> <p>3.1.2 特殊字符文本的添加 28</p> <p>3.1.3 使用HTML 5标记添加特殊</p> <p>文本 30</p> <p>3.2 文本排版 32</p> <p>3.2.1 换行标记<br> 32</p> <p>3.2.2 段落标记<p> 32</p> <p>3.2.3 标题标记<h1>~<h6> 33</p> <p>3.3 文字列表 34</p> <p>3.3.1 建立无序列表<ul> 34</p> <p>3.3.2 建立有序列表<ol> 36</p> <p>3.3.3 建立不同类型的无序列表 37</p> <p>3.3.4 建立不同类型的有序列表 38</p> <p>3.3.5 建立嵌套列表 38</p> <p>3.3.6 自定义列表 39</p> <p>3.4 网页中的图像<img> 40</p> <p>3.4.1 在网页中插入图像 40</p> <p>3.4.2 设置图像的宽度和高度 42</p> <p>3.4.3 设置图像的提示文字 43</p> <p>3.4.4 将图片设置为网页背景 44</p> <p>3.4.5 排列图像 45</p> <p>3.5 综合案例——图文并茂的房屋装饰装修</p> <p>网页 45</p> <p>3.6 跟我学上机——在线购物网站的产品</p> <p>展示效果 47</p> <p>3.7 疑难解惑 48</p> <p>第4章 用HTML 5建立超链接 49</p> <p>4.1 URL的概念 50</p> <p>4.1.1 URL的格式 50</p> <p>4.1.2 URL的类型 50</p> <p>4.2 超链接标记<a> 51</p> <p>4.2.1 设置文本和图片的超链接 51</p> <p>4.2.2 创建指向不同目标类型的</p> <p>超链接 52</p> <p>4.2.3 设置以新窗口显示超链接</p> <p>页面 54</p> <p>4.2.4 链接到同一页面的不同位置 55</p> <p>4.3 创建热点区域 56</p> <p>4.4 创建浮动框架 58</p> <p>4.5 综合案例——用Dreamweaver**</p> <p>定位热点区域 59</p> <p>4.6 跟我学上机——创建热点区域 61</p> <p>4.7 疑难解惑 62</p> <p>第5章 用HTML 5创建表格 63</p> <p>5.1 表格的基本结构 64</p> <p>5.2 创建表格 65</p> <p>5.2.1 创建普通表格 65</p> <p>5.2.2 创建一个带有标题的表格 66</p> <p>5.3 编辑表格 67</p> <p>5.3.1 定义表格的边框类型 67</p> <p>5.3.2 定义表格的表头 68</p> <p>5.3.3 设置表格背景 69</p> <p>5.3.4 设置单元格的背景 71</p> <p>5.3.5 合并单元格 72</p> <p>5.3.6 排列单元格中的内容 76</p> <p>5.3.7 设置单元格的行高与列宽 77</p> <p>5.4 完整的表格标记 78</p> <p>5.5 综合案例——制作计算机报价表 79</p> <p>5.6 跟我学上机——制作学生成绩表 82</p> <p>5.7 疑难解惑 85</p> <p>第6章 用HTML 5创建表单 87</p> <p>6.1 表单概述 88</p> <p>6.2 表单基本元素的使用 88</p> <p>6.2.1 单行文本输入框 89</p> <p>6.2.2 多行文本输入框 89</p> <p>6.2.3 密码输入框 90</p> <p>6.2.4 单选按钮 91</p> <p>6.2.5 复选框 92</p> <p>6.2.6 列表框 92</p> <p>6.2.7 普通按钮 93</p> <p>6.2.8 提交按钮 94</p> <p>6.2.9 重置按钮 95</p> <p>6.3 表单**元素的使用 96</p> <p>6.3.1 url属性的使用 96</p> <p>6.3.2 email属性的使用 97</p> <p>6.3.3 date和time属性的使用 97</p> <p>6.3.4 number属性的使用 98</p> <p>6.3.5 range属性的使用 99</p> <p>6.3.6 required属性的使用 100</p> <p>6.4 综合案例——创建用户反馈表单 101</p> <p>6.5 跟我学上机——制作用户注册表单 102</p> <p>6.6 疑难解惑 103</p> <p>第7章 用HTML 5绘制图形 105</p> <p>7.1 添加canvas的步骤 106</p> <p>7.2 绘制基本形状 106</p> <p>7.2.1 绘制矩形 107</p> <p>7.2.2 绘制圆形 108</p> <p>7.2.3 使用moveTo与lineTo绘制</p> <p>直线 108</p> <p>7.2.4 使用bezierCurveTo绘制贝塞尔</p> <p>曲线 109</p> <p>7.3 绘制渐变图形 111</p> <p>7.3.1 绘制线性渐变 111</p> <p>7.3.2 绘制径向渐变 112</p> <p>7.4 绘制变形图形 114</p> <p>7.4.1 绘制平移效果的图形 114</p> <p>7.4.2 绘制缩放效果的图形 115</p> <p>7.4.3 绘制旋转效果的图形 116</p> <p>7.4.4 绘制组合图形 117</p> <p>7.4.5 绘制带阴影的图形 119</p> <p>7.5 使用图像 120</p> <p>7.5.1 绘制图像 120</p> <p>7.5.2 平铺图像 121</p> <p>7.5.3 裁剪图像 122</p> <p>7.5.4 图像的像素化处理 124</p> <p>7.6 绘制文字 126</p> <p>7.7 图形的保存与恢复 127</p> <p>7.7.1 保存与恢复状态 127</p> <p>7.7.2 保存图形 129</p> <p>7.8 综合案例——绘制火柴棒人物 130</p> <p>7.9 跟我学上机——绘制商标 132</p> <p>7.10 疑难解惑 134</p> <p>第8章 HTML 5中的音频和视频 135</p> <p>8.1 audio标签概述 136</p> <p>8.1.1 audio标签概述 136</p> <p>8.1.2 audio标签的属性 137</p> <p>8.1.3 浏览器对audio标签的支持</p> <p>情况 137</p> <p>8.2 在网页中添加音频文件 138</p> <p>8.2.1 添加自动播放的音频文件 138</p> <p>8.2.2 添加带有控件的音频文件 138</p> <p>8.2.3 添加循环播放的音频文件 139</p> <p>8.2.4 添加预播放的音频文件 139</p> <p>8.3 video标签概述 140</p> <p>8.3.1 video标签概述 140</p> <p>8.3.2 video标签的属性 141</p> <p>8.3.3 浏览器对video标签的支持</p> <p>情况 142</p> <p>8.4 在网页中添加视频文件 142</p> <p>8.4.1 添加自动播放的视频文件 142</p> <p>8.4.2 添加带有控件的视频文件 143</p> <p>8.4.3 添加循环播放的视频文件 144</p> <p>8.5 综合案例——设置视频文件的高度</p> <p>与宽度 144</p> <p>8.6 跟我学上机——添加预播放的视频</p> <p>文件 145</p> <p>8.5 疑难解惑 146</p> <p> </p> <p> </p> <p>第II篇 CSS 3美化网页</p> <p> </p> <p>第9章 CSS 3概述与基本语法 149</p> <p>9.1 CSS 3概述 150</p> <p>9.1.1 CSS 3的功能 150</p> <p>9.1.2 浏览器与CSS 3 150</p> <p>9.1.3 CSS 3的基础语法 151</p> <p>9.1.4 CSS 3的常用单位 151</p> <p>9.2 编辑和浏览CSS 3 156</p> <p>9.2.1 手工编写CSS 3 156</p> <p>9.2.2 用Dreamweaver编写CSS 157</p> <p>9.3 在HTML 5中使用CSS 3的方法 158</p> <p>9.3.1 行内样式 158</p> <p>9.3.2 内嵌样式 159</p> <p>9.3.3 链接样式 161</p> <p>9.3.4 导入样式 162</p> <p>9.3.5 优先级问题 163</p> <p>9.4 CSS 3的常用选择器 165</p> <p>9.4.1 标签选择器 165</p> <p>9.4.2 类选择器 166</p> <p>9.4.3 ID选择器 167</p> <p>9.4.4 全局选择器 168</p> <p>9.4.5 组合选择器 169</p> <p>9.4.6 继承选择器 170</p> <p>9.4.7 伪类选择器 171</p> <p>9.5 选择器声明 172</p> <p>9.5.1 集体声明 172</p> <p>9.5.2 多重嵌套声明 173</p> <p>9.6 综合案例——制作炫彩网站Logo 174</p> <p>9.7 跟我学上机——制作学生信息</p> <p>统计表 176</p> <p>9.8 疑难解惑 178</p> <p>第10章 用CSS 3美化网页字体</p> <p> 与段落 179</p> <p>10.1 美化网页文字 180</p> <p>10.1.1 设置文字的字体 180</p> <p>10.1.2 设置文字的字号 181</p> <p>10.1.3 设置字体风格 182</p> <p>10.1.4 设置加粗字体 183</p> <p>10.1.5 将小写字母转为大写字母 184</p> <p>10.1.6 设置字体的复合属性 185</p> <p>10.1.7 设置字体颜色 186</p> <p>10.2 设置文本的**样式 187</p> <p>10.2.1 设置文本阴影效果 187</p> <p>10.2.2 设置文本的溢出效果 189</p> <p>10.2.3 设置文本的控制换行 190</p> <p>10.2.4 保持字体尺寸不变 191</p> <p>10.3 美化网页中的段落 192</p> <p>10.3.1 设置单词之间的间隔 192</p> <p>10.3.2 设置字符之间的间隔 193</p> <p>10.3.3 设置文字的修饰效果 194</p> <p>10.3.4 设置垂直对齐方式 195</p> <p>10.3.5 转换文本的大小写 196</p> <p>10.3.6 设置文本的水平对齐方式 197</p> <p>10.3.7 设置文本的缩进效果 199</p> <p>10.3.8 设置文本的行高 199</p> <p>10.3.9 文本的空白处理 200</p> <p>10.3.10 文本的反排 202</p> <p>10.4 综合案例——设置网页标题 203</p> <p>10.5 跟我学上机——制作新闻页面 204</p> <p>10.6 疑难解惑 206</p>显示全部信息前 言前 言
“网站开发案例课堂”系列图书是专门为办公技能和网页设计初学者量身定制的一套学习用书。整套书涵盖**办公、网站开发、数据库设计等方面。整套书具有以下几个特点。
前沿科技
无论是网站建设、数据库设计还是HTML 5、CSS 3,我们都精选较为前沿或者用户群*大的领域推进,帮助大家认识和了解*新动态。
权威的作者团队
组织****实验室和**应用专家联手编著该套图书,融合丰富的教学经验与**的管理理念。
学习型案例设计
以技术的实际应用过程为主线,全程采用图解和同步多媒体结合的教学方式,生动、直观、全面地剖析使用过程中的各种应用技能,降低难度以提**习效率。<p>前 言</p> <p> “网站开发案例课堂”系列图书是专门为办公技能和网页设计初学者量身定制的一套学习用书。整套书涵盖**办公、网站开发、数据库设计等方面。整套书具有以下几个特点。</p> <p>前沿科技</p> <p> 无论是网站建设、数据库设计还是HTML 5、CSS 3,我们都精选较为前沿或者用户群*大的领域推进,帮助大家认识和了解*新动态。</p> <p>权威的作者团队</p> <p> 组织****实验室和**应用专家联手编著该套图书,融合丰富的教学经验与**的管理理念。</p> <p>学习型案例设计</p> <p> 以技术的实际应用过程为主线,全程采用图解和同步多媒体结合的教学方式,生动、直观、全面地剖析使用过程中的各种应用技能,降低难度以提**习效率。</p> <p>为什么要写这样一本书</p> <p> 目前,HTML 5、CSS 3和JavaScript是网页制作和设计的黄金搭档。特别是HTML 5的出现,大大减轻了前端***的工作量,降低了开发成本。目前学习和关注的人越来越多,而很多网页制作和设计的初学者都苦于找不到一本通俗易懂、容易入门和案例实用的参考书。通过本书的案例实训,读者可以很快地上手流行的工具,提高职业化能力,从而帮助解决公司与学生的双重需求问题。</p> <p>本书特色</p> <p>零基础、入门级的讲解</p> <p> 无论您是否从事计算机相关行业,是否接触过网页制作和设计,都能从本书中找到*佳起点。</p> <p>超多、实用、专业的范例和项目</p> <p> 本书在编排上紧密结合深入学习网页制作技术的先后过程,从HTML 5的基本概念开始,带领大家逐步深入地学习各种应用技巧,侧重实战技能,使用简单易懂的实际案例进行分析和操作指导,让读者读起来简明轻松,操作起来有章可循。</p> <p>随时检测自己的学习成果</p> <p> 每章首页中,均提供了学习目标,以指导读者**学习及学后检查。</p> <p> 大部分章*后的“跟我学上机”板块,均根据本章内容精选而成,读者可以随时检测自己的学习成果和实战能力,做到融会贯通。</p> <p>细致入微、贴心提示</p> <p> 本书在讲解过程中,在各章中使用了“注意”“提示”“技巧”等小贴士,使读者在学习过程中更清楚地了解相关操作、理解相关概念,并轻松掌握各种操作技巧。</p> <p>专业创作团队和技术支持</p> <p> 本书由千谷高新教育**编著和提供技术支持。</p> <p> 您在学习过程中遇到任何问题,可加入QQ群(案例课堂VIP)——451102631进行提问,专家人员会在线答疑。</p> <p>超值资源大放送</p> <p>全程同步教学录像</p> <p> 涵盖本书所有知识点,详细讲解每个实例及项目的过程及技术关键点。比看书更轻松地掌握书中所有的网页制作和设计知识,而且扩展的讲解部分使您得到比书中更多的收获。</p> <p>超多容量**资源</p> <p> 赠送大量**资源,包括实例源代码、教学幻灯片、本书精品教学视频、88个实用类网页模板、12部网页开发**参考手册、HTML 5标签速查手册、精选的JavaScript实例、CSS 3属性速查表、JavaScript函数速查手册、CSS DIV布局赏析案例、精彩网站配色方案赏析、网页样式与布局案例赏析、Web前端工程师常见面试题等。读者可以通过QQ群(案例课堂VIP)——451102631获取赠送资源,也可以扫描二维码,下载本书资源。</p> <p>读者对象</p> <p>没有任何网页设计基础的初学者。</p> <p>有一定的HTML 5和CSS 3基础,想精通网页制作和设计的人员。</p> <p>有一定的HTML 5和CSS 3基础,没有项目经验的人员。</p> <p>正在进行毕业设计的学生。</p> <p>大专院校及培训学校的老师和学生。</p> <p> </p> <p>创作团队</p> <p> 本书由刘春茂编著,参加编写的人员还有刘玉萍、张金伟、蒲娟、周佳、付红、李园、郭广新、侯永岗、王攀登、刘海松、孙若淞、王月娇、包慧利、陈伟光、胡同夫、王伟、展娜娜、李琪、梁云梁和周浩浩。在编写过程中,我们竭尽所能地将*好的讲解呈现给读者,但也难免有疏漏和不妥之处,敬请不吝指正。若您在学习中遇到困难或疑问,或有何建议,可写信至信箱357975357@qq.com。</p> <p> </p> <p> 编 者 </p> <p> </p>显示全部信息免费在线读第2章 HTML 5网页的文档结构
一个完整的HTML 5网页文档包括标题、段落、列表、表格、绘制的图形以及各种嵌入对象,这些对象统称为HTML 5元素。本章详细介绍HTML 5网页文档的基��结构。
2.1 HTML 5文件的基本结构
在一个HTML 5文档中,必须包含 HTML /HTML 标记,并且放在一个HTML 5文档中的开始和结束位置。即每个文档以 HTML 开始,以 /HTML 结束。 HTML /HTML 之间通常包含两个部分,分别为 HEAD /HEAD 和 BODY /BODY 。HEAD标记包含HTML头部信息,如文档标题、样式定义等。BODY包含文档主体部分,即网页内容。需要注意的是,HTML标记不区分大小写。
2.1.1 HTML 5页面的整体结构
为了便于读者从整体上把握HTML 5的文档结构,我们通过一个HTML 5页面来介绍HTML 5页面的整体结构,示例代码如下:
!DOCTYPE HTML
HTML
HEAD
TITLE 网页标题 /TITLE
/HEAD
BODY
网页内容
/BODY
/HTML