首页 › 前端开发综合论坛 › 《Web前端开发技术》笔记

星光耀眼 發表於 2022-5-28 00:13:00

《Web前端开发技术》笔记

<p>参考文献——《Web前端开发技术》 by 储久良</p>
<p id="main-toc"><strong>目录</strong></p>
<p id="%E7%AC%AC1%E7%AB%A0%20Web%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E6%8A%80%E6%9C%AF%E7%BB%BC%E8%BF%B0-toc" style="margin-left: 0">第1章 Web前端开发技术综述</p>
<p id="1.1%20Web%E6%A6%82%E8%BF%B0-toc" style="margin-left: 40px">1.1 Web概述</p>
<p id="1.1.1%20Web%E7%9A%84%E8%B5%B7%E6%BA%90-toc" style="margin-left: 80px">1.1.1 Web的起源</p>
<p id="1.1.2%20Web%E7%9A%84%E7%89%B9%E7%82%B9-toc" style="margin-left: 80px">1.1.2 Web的特点</p>
<p id="1.1.3%20Web%E5%B7%A5%E4%BD%9C%E5%8E%9F%E7%90%86-toc" style="margin-left: 80px">1.1.3 Web工作原理</p>
<p id="1.1.4%20Web%E7%9B%B8%E5%85%B3%E6%A6%82%E5%BF%B5-toc" style="margin-left: 80px">1.1.4 Web相关概念</p>
<p id="1.3%20Web%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E6%8A%80%E6%9C%AF-toc" style="margin-left: 40px">1.3 Web前端开发技术</p>
<p id="1.3.1%20HTML(Hypertext%20Markkup%20Language)-toc" style="margin-left: 80px">1.3.1 HTML(Hypertext Markkup Language)</p>
<p id="1.3.2%20CSS-toc" style="margin-left: 80px">1.3.2 CSS</p>
<p id="1.3.3%20JavaScript-toc" style="margin-left: 80px">1.3.3 JavaScript</p>
<p id="1.3.4%20HTML%20DOM-toc" style="margin-left: 80px">1.3.4 HTML DOM</p>
<p id="1.3.5%20BOM-toc" style="margin-left: 80px">1.3.5 BOM</p>
<p id="1.3.6%20AJAX-toc" style="margin-left: 80px">1.3.6 AJAX</p>
<p id="1.3.7%20jQuery-toc" style="margin-left: 80px">1.3.7 jQuery</p>
<p id="1.4%20Web%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E5%B7%A5%E5%85%B7-toc" style="margin-left: 40px">1.4 Web前端开发工具</p>
<p id="1.4.1%20EditPlus-toc" style="margin-left: 80px">1.4.1 EditPlus</p>
<p id="1.4.2%20Adobe%20Dreamweaver-toc" style="margin-left: 80px">1.4.2 Adobe Dreamweaver</p>
<p id="1.4.3%20Sublime%20Text-toc" style="margin-left: 80px">1.4.3 Sublime Text</p>
<p id="1.4.4%20WebStorm-toc" style="margin-left: 80px">1.4.4 WebStorm</p>
<p id="1.4.5%20HBuilder-toc" style="margin-left: 80px">1.4.5 HBuilder</p>
<p id="1.5%E6%B5%8F%E8%A7%88%E5%99%A8%E5%B7%A5%E5%85%B7-toc" style="margin-left: 40px">1.5浏览器工具</p>
<p id="1.5.1%20Internet%20Explorer-toc" style="margin-left: 80px">1.5.1 Internet Explorer</p>
<p id="1.5.2%20Google%20Chrome-toc" style="margin-left: 80px">1.5.2 Google Chrome</p>
<p id="1.5.3%20Mozilla%20Firefox-toc" style="margin-left: 80px">1.5.3 Mozilla Firefox</p>
<p id="1.5.4%20Safari-toc" style="margin-left: 80px">1.5.4 Safari</p>
<p id="1.5.5%20Opera-toc" style="margin-left: 80px">1.5.5 Opera</p>
<p id="%E7%AC%AC2%E7%AB%A0%20HTML%E5%9F%BA%E7%A1%80-toc" style="margin-left: 0">第2章 HTML基础</p>
<p id="2.1%20HTML%E6%96%87%E6%A1%A3%E7%BB%93%E6%9E%84-toc" style="margin-left: 40px">2.1 HTML文档结构</p>
<p id="2.2%E5%A4%B4%E9%83%A8head-toc" style="margin-left: 40px">2.2头部head</p>
<p id="2.2.1%E6%A0%87%E9%A2%98title%E6%A0%87%E8%AE%B0-toc" style="margin-left: 80px">2.2.1标题title标记</p>
<p id="2.2.2%E5%85%83%E4%BF%A1%E6%81%AFmeta%E6%A0%87%E8%AE%B0-toc" style="margin-left: 80px">2.2.2元信息meta标记</p>
<p id="2.3%E4%B8%BB%E4%BD%93body-toc" style="margin-left: 40px">2.3主体body</p>
<p id="2.3.1%20body%E6%A0%87%E8%AE%B0-toc" style="margin-left: 80px">2.3.1 body标记</p>
<p id="2.3.2%20body%E6%A0%87%E8%AE%B0%E5%B1%9E%E6%80%A7-toc" style="margin-left: 80px">2.3.2 body标记属性</p>
<p id="2.4%20HTML%E5%9F%BA%E6%9C%AC%E8%AF%AD%E6%B3%95-toc" style="margin-left: 40px">2.4 HTML基本语法</p>
<p id="2.4.1%E6%A0%87%E8%AE%B0%E7%B1%BB%E5%9E%8B-toc" style="margin-left: 80px">2.4.1标记类型</p>
<p id="2.4.2%20HTML%E5%B1%9E%E6%80%A7-toc" style="margin-left: 80px">2.4.2 HTML属性</p>
<p id="2.5%E6%B3%A8%E9%87%8A-toc" style="margin-left: 40px">2.5注释</p>
<p id="2.6%20HTML%E6%96%87%E6%A1%A3%E7%BC%96%E5%86%99%E8%A7%84%E8%8C%83-toc" style="margin-left: 40px">2.6 HTML文档编写规范</p>
<p id="2.6.1%20HTML%E4%BB%A3%E7%A0%81%E4%B9%A6%E5%86%99%E8%A7%84%E8%8C%83-toc" style="margin-left: 80px">2.6.1 HTML代码书写规范</p>
<p id="2.6.2%20HTML%E6%96%87%E6%A1%A3%E5%91%BD%E5%90%8D%E8%A7%84%E5%88%99-toc" style="margin-left: 80px">2.6.2 HTML文档命名规则</p>
<p id="2.7%20HTML%E6%96%87%E6%A1%A3%E7%B1%BB%E5%9E%8B-toc" style="margin-left: 40px">2.7 HTML文档类型</p>
<p id="2.7.1%20%3C!DOCTYPE%3E%E6%A0%87%E8%AE%B0-toc" style="margin-left: 80px">2.7.1 标记</p>
<p id="2.7.2%20DTD%E7%B1%BB%E5%9E%8B-toc" style="margin-left: 80px">2.7.2 DTD类型</p>
<p id="%E7%AC%AC3%E7%AB%A0%20%E6%A0%BC%E5%BC%8F%E5%8C%96%E6%96%87%E6%9C%AC%E4%B8%8E%E6%AE%B5%E8%90%BD-toc" style="margin-left: 0">第3章 格式化文本与段落</p>
<p id="3.1%20Web%E9%A1%B5%E9%9D%A2%E5%88%9D%E6%AD%A5%E8%AE%BE%E8%AE%A1-toc" style="margin-left: 40px">3.1 Web页面初步设计</p>
<p id="3.1.1%E5%90%91Web%E9%A1%B5%E9%9D%A2%E6%B7%BB%E5%8A%A0%E6%96%87%E5%AD%97%E4%BF%A1%E6%81%AF-toc" style="margin-left: 80px">3.1.1向Web页面添加文字信息</p>
<p id="3.1.2%E6%A0%87%E9%A2%98%E5%AD%97%E6%A0%87%E8%AE%B0-toc" style="margin-left: 80px">3.1.2标题字标记</p>
<p id="3.1.3%E6%B7%BB%E5%8A%A0%E7%A9%BA%E6%A0%BC%E4%B8%8E%E7%89%B9%E6%AE%8A%E7%AC%A6%E5%8F%B7-toc" style="margin-left: 80px">3.1.3添加空格与特殊符号</p>
<p id="3.2%E6%A0%BC%E5%BC%8F%E5%8C%96%E6%96%87%E6%9C%AC%E6%A0%87%E8%AE%B0-toc" style="margin-left: 40px">3.2格式化文本标记</p>
<p id="3.2.1%E6%96%87%E6%9C%AC%E4%BF%AE%E9%A5%B0%E6%A0%87%E8%AE%B0-toc" style="margin-left: 80px">3.2.1文本修饰标记</p>
<p id="3.2.2%E8%AE%A1%E7%AE%97%E6%9C%BA%E8%BE%93%E5%87%BA%E6%A0%87%E8%AE%B0-toc" style="margin-left: 80px">3.2.2计算机输出标记</p>
<p id="3.2.3%E5%BC%95%E7%94%A8%E5%92%8C%E6%9C%AF%E8%AF%AD%E6%A0%87%E8%AE%B0-toc" style="margin-left: 80px">3.2.3引用和术语标记</p>
<p id="3.2.4%E5%AD%97%E4%BD%93font%E6%A0%87%E8%AE%B0-toc" style="margin-left: 80px">3.2.4字体font标记</p>
<p id="3.3%E6%AE%B5%E8%90%BD%E4%B8%8E%E6%8E%92%E7%89%88%E6%A0%87%E8%AE%B0-toc" style="margin-left: 40px">3.3段落与排版标记</p>
<p id="3.3.1%E6%AE%B5%E8%90%BDp%E6%A0%87%E8%AE%B0-toc" style="margin-left: 80px">3.3.1段落p标记</p>
<p id="3.3.2%E6%8D%A2%E8%A1%8Cbr%E6%A0%87%E8%AE%B0-toc" style="margin-left: 80px">3.3.2换行br标记</p>
<p id="3.3.3%E6%B0%B4%E5%B9%B3%E5%88%86%E9%9A%94%E7%BA%BFhr%E6%A0%87%E8%AE%B0-toc" style="margin-left: 80px">3.3.3水平分隔线hr标记</p>
<p id="3.3.4%E6%8B%BC%E9%9F%B3%2F%E9%9F%B3%E6%A0%87%E6%B3%A8%E9%87%8Aruby%E6%A0%87%E8%AE%B0%E5%92%8Crt%2Frp%E6%A0%87%E8%AE%B0-toc" style="margin-left: 80px">3.3.4拼音/音标注释ruby标记和rt/rp标记</p>
<p id="3.3.5%E6%AE%B5%E8%90%BD%E7%BC%A9%E8%BF%9Bblockquote%E6%A0%87%E8%AE%B0-toc" style="margin-left: 80px">3.3.5段落缩进blockquote标记</p>
<p id="3.3.6%E9%A2%84%E6%A0%BC%E5%BC%8F%E5%8C%96pre%E6%A0%87%E8%AE%B0-toc" style="margin-left: 80px">3.3.6预格式化pre标记</p>
<p id="%E7%AC%AC4%E7%AB%A0%20%E5%88%97%E8%A1%A8-toc" style="margin-left: 0">第4章 列表</p>
<p id="4.2%E6%97%A0%E5%BA%8F%E5%88%97%E8%A1%A8ul-toc" style="margin-left: 40px">4.2无序列表ul</p>
<p id="4.3%E6%9C%89%E5%BA%8F%E5%88%97%E8%A1%A8ol-toc" style="margin-left: 40px">4.3有序列表ol</p>
<p id="4.4%E5%88%97%E8%A1%A8%E5%B5%8C%E5%A5%97-toc" style="margin-left: 40px">4.4列表嵌套</p>
<p id="4.5%E5%AE%9A%E4%B9%89%E5%88%97%E8%A1%A8dl-toc" style="margin-left: 40px">4.5定义列表dl</p>
<p id="%E7%AC%AC5%E7%AB%A0%20%E8%B6%85%E9%93%BE%E6%8E%A5%E4%B8%8E%E6%B5%AE%E5%8A%A8%E6%A1%86%E6%9E%B6-toc" style="margin-left: 0">第5章 超链接与浮动框架</p>
<p id="5.2%E8%B6%85%E9%93%BE%E6%8E%A5%E8%AF%AD%E6%B3%95%E3%80%81%E8%B7%AF%E5%BE%84%E5%8F%8A%E5%88%86%E7%B1%BB-toc" style="margin-left: 40px">5.2超链接语法、路径及分类</p>
<p id="5.2.1%E8%B6%85%E9%93%BE%E6%8E%A5%E8%AF%AD%E6%B3%95-toc" style="margin-left: 80px">5.2.1超链接语法</p>
<p id="5.2.2%E8%B6%85%E9%93%BE%E6%8E%A5%E8%B7%AF%E5%BE%84-toc" style="margin-left: 80px">5.2.2超链接路径</p>
<p id="5.2.3%E8%B6%85%E9%93%BE%E6%8E%A5%E5%88%86%E7%B1%BB-toc" style="margin-left: 80px">5.2.3超链接分类</p>
<p id="5.3%E8%B6%85%E9%93%BE%E6%8E%A5%E7%9A%84%E5%BA%94%E7%94%A8-toc" style="margin-left: 40px">5.3超链接的应用</p>
<p id="5.3.1%E5%88%9B%E5%BB%BAHTTP%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD%E8%B6%85%E9%93%BE%E6%8E%A5-toc" style="margin-left: 80px">5.3.1创建HTTP文件下载超链接</p>
<p id="5.3.2%E5%88%9B%E5%BB%BAFTP%E7%AB%99%E7%82%B9%E8%AE%BF%E9%97%AE%E8%B6%85%E9%93%BE%E6%8E%A5-toc" style="margin-left: 80px">5.3.2创建FTP站点访问超链接</p>
<p id="5.3.3%E5%88%9B%E5%BB%BA%E5%9B%BE%E5%83%8F%E8%B6%85%E9%93%BE%E6%8E%A5-toc" style="margin-left: 80px">5.3.3创建图像超链接</p>
<p id="5.3.4%E5%88%9B%E5%BB%BA%E7%94%B5%E5%AD%90%E9%82%AE%E4%BB%B6%E8%B6%85%E9%93%BE%E6%8E%A5-toc" style="margin-left: 80px">5.3.4创建电子邮件超链接</p>
<p id="5.3.5%E5%88%9B%E5%BB%BA%E9%A1%B5%E9%9D%A2%E4%B9%A6%E7%AD%BE%E9%93%BE%E6%8E%A5-toc" style="margin-left: 80px">5.3.5创建页面书签链接</p>
<p id="5.4%E6%B5%AE%E5%8A%A8%E6%A1%86%E6%9E%B6-toc" style="margin-left: 40px">5.4浮动框架</p>
<p id="%E7%AC%AC6%E7%AB%A0%20%E5%9B%BE%E5%83%8F%E4%B8%8E%E5%A4%9A%E5%AA%92%E4%BD%93%E6%96%87%E4%BB%B6-toc" style="margin-left: 0">第6章 图像与多媒体文件</p>
<p id="6.1%E5%9B%BE%E5%83%8F-toc" style="margin-left: 40px">6.1图像</p>
<p id="6.1.1%E6%8F%92%E5%85%A5%E5%9B%BE%E5%83%8F-toc" style="margin-left: 80px">6.1.1插入图像</p>
<p id="6.1.3%E8%AE%BE%E7%BD%AE%E5%9B%BE%E5%83%8F%E7%9A%84%E9%AB%98%E5%BA%A6%E5%92%8C%E5%AE%BD%E5%BA%A6-toc" style="margin-left: 80px">6.1.3设置图像的高度和宽度</p>
<p id="6.1.4%E8%AE%BE%E7%BD%AE%E5%9B%BE%E5%83%8F%E7%9A%84%E8%BE%B9%E6%A1%86-toc" style="margin-left: 80px">6.1.4设置图像的边框</p>
<p id="6.1.5%E8%AE%BE%E7%BD%AE%E5%9B%BE%E5%83%8F%E5%AF%B9%E9%BD%90%E6%96%B9%E5%BC%8F-toc" style="margin-left: 80px">6.1.5设置图像对齐方式</p>
<p id="6.1.6%E8%AE%BE%E7%BD%AE%E5%9B%BE%E5%83%8F%E7%9A%84%E9%97%B4%E8%B7%9D-toc" style="margin-left: 80px">6.1.6设置图像的间距</p>
<p id="6.1.7%E8%AE%BE%E7%BD%AE%E5%9B%BE%E5%83%8F%E7%83%AD%E5%8C%BA%E9%93%BE%E6%8E%A5-toc" style="margin-left: 80px">6.1.7设置图像热区链接</p>
<p id="6.2%E6%BB%9A%E5%8A%A8%E6%96%87%E5%AD%97-toc" style="margin-left: 40px">6.2滚动文字</p>
<p id="6.2.1%E6%B7%BB%E5%8A%A0%E6%BB%9A%E5%8A%A8%E6%96%87%E5%AD%97-toc" style="margin-left: 80px">6.2.1添加滚动文字</p>
<p id="%E2%80%8B6.2.2%E8%AE%BE%E7%BD%AE%E6%BB%9A%E5%8A%A8%E6%96%87%E5%AD%97%E8%83%8C%E6%99%AF%E9%A2%9C%E8%89%B2%E4%B8%8E%E6%BB%9A%E5%8A%A8%E5%BE%AA%E7%8E%AF-toc" style="margin-left: 80px">​6.2.2设置滚动文字背景颜色与滚动循环</p>
<p id="6.2.3%E8%AE%BE%E7%BD%AE%E6%BB%9A%E5%8A%A8%E6%96%B9%E5%90%91%E4%B8%8E%E6%BB%9A%E5%8A%A8%E6%96%B9%E5%BC%8F-toc" style="margin-left: 80px">6.2.3设置滚动方向与滚动方式</p>
<p id="6.2.4%E8%AE%BE%E7%BD%AE%E6%BB%9A%E5%8A%A8%E9%80%9F%E5%BA%A6%E4%B8%8E%E6%BB%9A%E5%8A%A8%E5%BB%B6%E8%BF%9F-toc" style="margin-left: 80px">6.2.4设置滚动速度与滚动延迟</p>
<p id="6.2.5%E8%AE%BE%E7%BD%AE%E6%BB%9A%E5%8A%A8%E8%8C%83%E5%9B%B4%E4%B8%8E%E6%BB%9A%E5%8A%A8%E7%A9%BA%E7%99%BD%E7%A9%BA%E9%97%B4-toc" style="margin-left: 80px">6.2.5设置滚动范围与滚动空白空间</p>
<p id="6.3%E9%9F%B3%E9%A2%91%E3%80%81%E8%A7%86%E9%A2%91%E5%8F%8AFlash%E6%96%87%E4%BB%B6-toc" style="margin-left: 40px">6.3音频、视频及Flash文件</p>
<p id="%E7%AC%AC7%E7%AB%A0%20CSS%E5%9F%BA%E7%A1%80-toc" style="margin-left: 0">第7章 CSS基础</p>
<p id="7.1%20CSS%E6%A6%82%E5%BF%B5-toc" style="margin-left: 40px">7.1 CSS概念</p>
<p id="7.1.5%20CSS%E7%9A%84%E7%BC%96%E8%BE%91%E6%96%B9%E6%B3%95-toc" style="margin-left: 80px">7.1.5 CSS的编辑方法</p>
<p id="7.2%E4%BD%BF%E7%94%A8CSS%E6%8E%A7%E5%88%B6Web%E9%A1%B5%E9%9D%A2-toc" style="margin-left: 40px">7.2使用CSS控制Web页面</p>
<p id="7.2.2%20CSS%E9%80%89%E6%8B%A9%E5%99%A8%E7%B1%BB%E5%9E%8B-toc" style="margin-left: 80px">7.2.2 CSS选择器类型</p>
<p id="7.2.3%20CSS%E9%80%89%E6%8B%A9%E5%99%A8%E5%A3%B0%E6%98%8E-toc" style="margin-left: 80px">7.2.3 CSS选择器声明</p>
<p id="7.2.4%20CSS%E5%AE%9A%E4%B9%89%E4%B8%8E%E5%BC%95%E7%94%A8-toc" style="margin-left: 80px">7.2.4 CSS定义与引用</p>
<p id="7.3%20CSS%E7%BB%A7%E6%89%BF%E4%B8%8E%E5%B1%82%E5%8F%A0-toc" style="margin-left: 40px">7.3 CSS继承与层叠</p>
<p id="%E7%AC%AC8%E7%AB%A0%20DIV%E4%B8%8ESPAN-toc" style="margin-left: 0">第8章 DIV与SPAN</p>
<p id="8.1%20DIV%E5%9B%BE%E5%B1%82-toc" style="margin-left: 40px">8.1 DIV图层</p>
<p id="8.2%E5%9B%BE%E5%B1%82%E5%B5%8C%E5%A5%97%E4%B8%8E%E5%B1%82%E5%8F%A0-toc" style="margin-left: 40px">8.2图层嵌套与层叠</p>
<p id="8.2.1%20DIV%E5%B5%8C%E5%A5%97-toc" style="margin-left: 80px">8.2.1 DIV嵌套</p>
<p id="8.2.2%20DIV%E5%B1%82%E5%8F%A0-toc" style="margin-left: 80px">8.2.2 DIV层叠</p>
<p id="8.3%20div%E6%A0%87%E8%AE%B0%E4%B8%8Espan%E6%A0%87%E8%AE%B0-toc" style="margin-left: 80px">8.3 div标记与span标记</p>
<p id="%E7%AC%AC9%E7%AB%A0%20CSS%E6%A0%B7%E5%BC%8F%E5%B1%9E%E6%80%A7-toc" style="margin-left: 0">第9章 CSS样式属性</p>
<p id="9.1%20CSS%E5%B1%9E%E6%80%A7%E5%80%BC%E4%B8%AD%E7%9A%84%E5%8D%95%E4%BD%8D-toc" style="margin-left: 40px">9.1 CSS属性值中的单位</p>
<p id="9.1.1%E7%BB%9D%E5%AF%B9%E5%8D%95%E4%BD%8D-toc" style="margin-left: 80px">9.1.1绝对单位</p>
<p id="9.1.2%E7%9B%B8%E5%AF%B9%E5%8D%95%E4%BD%8D-toc" style="margin-left: 80px">9.1.2相对单位</p>
<p id="9.2%20CSS%E5%AD%97%E4%BD%93%E6%A0%B7%E5%BC%8F-toc" style="margin-left: 40px">9.2 CSS字体样式</p>
<p id="9.2.1%E5%AD%97%E4%BD%93%E5%A4%A7%E5%B0%8Ffont-size%E5%B1%9E%E6%80%A7-toc" style="margin-left: 80px">9.2.1字体大小font-size属性</p>
<p id="9.2.2%E5%AD%97%E4%BD%93%E6%A0%B7%E5%BC%8Ffont-style%E5%B1%9E%E6%80%A7-toc" style="margin-left: 80px">9.2.2字体样式font-style属性</p>
<p id="9.2.3%E5%AD%97%E4%BD%93%E7%B3%BB%E5%88%97font-family%E5%B1%9E%E6%80%A7-toc" style="margin-left: 80px">9.2.3字体系列font-family属性</p>
<p id="9.2.4%E5%AD%97%E4%BD%93%E5%8F%98%E4%BD%93font-variant%E5%B1%9E%E6%80%A7-toc" style="margin-left: 80px">9.2.4字体变体font-variant属性</p>
<p id="9.2.5%E5%AD%97%E4%BD%93%E7%B2%97%E7%BB%86font-weight%E5%B1%9E%E6%80%A7-toc" style="margin-left: 80px">9.2.5字体粗细font-weight属性</p>
<p id="9.2.6%E5%AD%97%E4%BD%93font%E5%B1%9E%E6%80%A7-toc" style="margin-left: 80px">9.2.6字体font属性</p>
<p id="9.3%20CSS%E6%96%87%E6%9C%AC%E6%A0%B7%E5%BC%8F-toc" style="margin-left: 40px">9.3 CSS文本样式</p>
<p id="9.3.1%E5%AD%97%E7%AC%A6%E9%97%B4%E8%B7%9Dletter-spacing%E5%B1%9E%E6%80%A7-toc" style="margin-left: 80px">9.3.1字符间距letter-spacing属性</p>
<p id="9.3.2%E8%A1%8C%E8%B7%9Dline-height%E5%B1%9E%E6%80%A7-toc" style="margin-left: 80px">9.3.2行距line-height属性</p>
<p id="9.3.3%E9%A6%96%E8%A1%8C%E7%BC%A9%E8%BF%9Btext-indent%E5%B1%9E%E6%80%A7-toc" style="margin-left: 80px">9.3.3首行缩进text-indent属性</p>
<p id="9.3.4%E5%AD%97%E7%AC%A6%E8%A3%85%E9%A5%B0text-decoration%E5%B1%9E%E6%80%A7-toc" style="margin-left: 80px">9.3.4字符装饰text-decoration属性</p>
<p id="9.3.5%E8%8B%B1%E6%96%87%E5%A4%A7%E5%B0%8F%E5%86%99%E8%BD%AC%E6%8D%A2text-transform%E5%B1%9E%E6%80%A7-toc" style="margin-left: 80px">9.3.5英文大小写转换text-transform属性</p>
<p id="9.3.6%E6%B0%B4%E5%B9%B3%E5%AF%B9%E9%BD%90text-align%E5%B1%9E%E6%80%A7-toc" style="margin-left: 80px">9.3.6水平对齐text-align属性</p>
<p id="9.3.7%E5%9E%82%E7%9B%B4%E5%AF%B9%E9%BD%90vertical-align%E5%B1%9E%E6%80%A7-toc" style="margin-left: 80px">9.3.7垂直对齐vertical-align属性</p>
<p id="9.4%20CSS%E9%A2%9C%E8%89%B2%E4%B8%8E%E8%83%8C%E6%99%AF-toc" style="margin-left: 40px">9.4 CSS颜色与背景</p>
<p id="9.4.1%E9%A2%9C%E8%89%B2color%E5%B1%9E%E6%80%A7-toc" style="margin-left: 80px">9.4.1颜色color属性</p>
<p id="9.4.2%E8%83%8C%E6%99%AFbackground%E5%B1%9E%E6%80%A7-toc" style="margin-left: 80px">9.4.2背景background属性</p>
<p id="9.5%20CSS%E5%88%97%E8%A1%A8%E6%A0%B7%E5%BC%8F-toc" style="margin-left: 40px">9.5 CSS列表样式</p>
<p id="9.6%20CSS%E7%9B%92%E6%A8%A1%E5%9E%8B-toc" style="margin-left: 40px">9.6 CSS盒模型</p>
<p id="9.6.2%20%E8%BE%B9%E7%95%8C%E5%B1%9E%E6%80%A7%E8%AE%BE%E7%BD%AE-toc" style="margin-left: 80px">9.6.2 边界属性设置</p>
<p id="9.6.3%E8%BE%B9%E6%A1%86%E5%B1%9E%E6%80%A7%E8%AE%BE%E7%BD%AE-toc" style="margin-left: 80px">9.6.3边框属性设置</p>
<p id="9.6.4%E5%A1%AB%E5%85%85%E5%B1%9E%E6%80%A7%E8%AE%BE%E7%BD%AE-toc" style="margin-left: 80px">9.6.4填充属性设置</p>
<p id="%E7%AC%AC10%E7%AB%A0%20DIV%2BCSS%E9%A1%B5%E9%9D%A2%E5%B8%83%E5%B1%80-toc" style="margin-left: 0">第10章 DIV+CSS页面布局</p>
<p id="10.1%E9%A1%B5%E9%9D%A2%E5%B8%83%E5%B1%80%E8%AE%BE%E8%AE%A1-toc" style="margin-left: 40px">10.1页面布局设计</p>
<p id="10.1.1%E2%80%9C%E4%B8%89%E8%A1%8C%E6%A8%A1%E5%BC%8F%E2%80%9D%E6%88%96%E2%80%9C%E4%B8%89%E5%88%97%E6%A8%A1%E5%BC%8F%E2%80%9D-toc" style="margin-left: 80px">10.1.1“三行模式”或“三列模式”</p>
<p id="10.1.2%E2%80%9C%E4%B8%89%E8%A1%8C%E4%BA%8C%E5%88%97%E2%80%9D%E2%80%9C%E4%B8%89%E8%A1%8C%E4%B8%89%E5%88%97%E2%80%9D%E6%A8%A1%E5%BC%8F-toc" style="margin-left: 80px">10.1.2“三行二列”“三行三列”模式</p>
<p id="10.1.3%E5%A4%9A%E8%A1%8C%E5%A4%9A%E5%88%97%E5%A4%8D%E6%9D%82%E6%A8%A1%E5%BC%8F-toc" style="margin-left: 80px">10.1.3多行多列复杂模式</p>
<p id="10.2%E5%AF%BC%E8%88%AA%E8%8F%9C%E5%8D%95%E8%AE%BE%E8%AE%A1-toc" style="margin-left: 40px">10.2导航菜单设计</p>
<p id="10.2.1%E4%B8%80%E7%BA%A7%E6%B0%B4%E5%B9%B3%E5%AF%BC%E8%88%AA%E8%8F%9C%E5%8D%95-toc" style="margin-left: 80px">10.2.1一级水平导航菜单</p>
<p id="10.2.2%E4%BA%8C%E7%BA%A7%E6%B0%B4%E5%B9%B3%E5%AF%BC%E8%88%AA%E8%8F%9C%E5%8D%95-toc" style="margin-left: 80px">10.2.2二级水平导航菜单</p>
<p id="10.3%E5%AF%B9%E8%B1%A1%E7%9A%84%E6%98%BE%E7%A4%BA%E4%B8%8E%E9%9A%90%E8%97%8FCSS%E8%A7%84%E5%88%99%E8%AE%BE%E8%AE%A1-toc" style="margin-left: 40px">10.3对象的显示与隐藏CSS规则设计</p>
<p id="%E7%AC%AC11%E7%AB%A0%20%E8%A1%A8%E6%A0%BC-toc" style="margin-left: 0">第11章 表格</p>
<p id="11.2%E8%A1%A8%E6%A0%BC%E6%A0%87%E8%AE%B0-toc" style="margin-left: 40px">11.2表格标记</p>
<p id="11.3%E8%A1%A8%E6%A0%BC%E5%B1%9E%E6%80%A7%E8%AE%BE%E7%BD%AE-toc" style="margin-left: 40px">11.3表格属性设置</p>
<p id="11.3.1%E8%A1%A8%E6%A0%BC%E8%BE%B9%E6%A1%86%E5%B1%9E%E6%80%A7-toc" style="margin-left: 80px">11.3.1表格边框属性</p>
<p id="11.3.2%E8%A1%A8%E6%A0%BC%E7%9A%84%E5%AE%BD%E5%BA%A6%E5%92%8C%E9%AB%98%E5%BA%A6%E5%B1%9E%E6%80%A7-toc" style="margin-left: 80px">11.3.2表格的宽度和高度属性</p>
<p id="11.3.3%E8%A1%A8%E6%A0%BC%E8%83%8C%E6%99%AF%E9%A2%9C%E8%89%B2%E4%B8%8E%E8%83%8C%E6%99%AF%E5%9B%BE%E5%83%8F%E5%B1%9E%E6%80%A7-toc" style="margin-left: 80px">11.3.3表格背景颜色与背景图像属性</p>
<p id="11.3.4%E8%A1%A8%E6%A0%BC%E8%BE%B9%E6%A1%86%E6%A0%B7%E5%BC%8F%E5%B1%9E%E6%80%A7-toc" style="margin-left: 80px">11.3.4表格边框样式属性</p>
<p id="11.3.5%E8%A1%A8%E6%A0%BC%E5%8D%95%E5%85%83%E6%A0%BC%E9%97%B4%E8%B7%9D%E3%80%81%E5%8D%95%E5%85%83%E6%A0%BC%E8%BE%B9%E8%B7%9D%E5%B1%9E%E6%80%A7-toc" style="margin-left: 80px">11.3.5表格单元格间距、单元格边距属性</p>
<p id="11.3.6%E8%A1%A8%E6%A0%BC%E6%B0%B4%E5%B9%B3%E5%AF%B9%E9%BD%90%E5%B1%9E%E6%80%A7-toc" style="margin-left: 80px">11.3.6表格水平对齐属性</p>
<p id="11.4%E8%AE%BE%E7%BD%AE%E8%A1%A8%E6%A0%BC%E8%A1%8C%E7%9A%84%E5%B1%9E%E6%80%A7-toc" style="margin-left: 40px">11.4设置表格行的属性</p>
<p id="11.5%E8%AE%BE%E7%BD%AE%E5%8D%95%E5%85%83%E6%A0%BC%E7%9A%84%E5%B1%9E%E6%80%A7-toc" style="margin-left: 40px">11.5设置单元格的属性</p>
<p id="11.5.1%E8%A1%A8%E6%A0%BC%E5%8D%95%E5%85%83%E6%A0%BC%E8%B7%A8%E8%A1%8C%E5%B1%9E%E6%80%A7-toc" style="margin-left: 80px">11.5.1表格单元格跨行属性</p>
<p id="11.5.2%E8%A1%A8%E6%A0%BC%E5%8D%95%E5%85%83%E6%A0%BC%E8%B7%A8%E5%88%97%E5%B1%9E%E6%80%A7-toc" style="margin-left: 80px">11.5.2表格单元格跨列属性</p>
<p id="11.6%E8%A1%A8%E6%A0%BC%E5%B5%8C%E5%A5%97-toc" style="margin-left: 40px">11.6表格嵌套</p>
<p id="%E7%AC%AC12%E7%AB%A0%20%E8%A1%A8%E5%8D%95-toc" style="margin-left: 0">第12章 表单</p>
<p id="12.1%E8%A1%A8%E5%8D%95%E6%A6%82%E8%BF%B0-toc" style="margin-left: 40px">12.1表单概述</p>
<p id="12.1.1%E8%A1%A8%E5%8D%95%E6%A0%87%E8%AE%B0-toc" style="margin-left: 80px">12.1.1表单标记</p>
<p id="12.2%E5%AE%9A%E4%B9%89%E5%9F%9F%E5%92%8C%E5%9F%9F%E6%A0%87%E9%A2%98-toc" style="margin-left: 40px">12.2定义域和域标题</p>
<p id="12.3%E8%A1%A8%E5%8D%95%E4%BF%A1%E6%81%AF%E8%BE%93%E5%85%A5-toc" style="margin-left: 40px">12.3表单信息输入</p>
<p id="12.3.1%E5%8D%95%E8%A1%8C%E6%96%87%E6%9C%AC%E8%BE%93%E5%85%A5%E6%A1%86-toc" style="margin-left: 80px">12.3.1单行文本输入框</p>
<p id="12.3.2%E5%AF%86%E7%A0%81%E8%BE%93%E5%85%A5%E6%A1%86-toc" style="margin-left: 80px">12.3.2密码输入框</p>
<p id="12.3.3%E5%A4%8D%E9%80%89%E6%A1%86-toc" style="margin-left: 80px">12.3.3复选框</p>
<p id="12.3.4%E5%8D%95%E9%80%89%E6%8C%89%E9%92%AE-toc" style="margin-left: 80px">12.3.4单选按钮</p>
<p id="12.3.5%E5%9B%BE%E5%83%8F%E6%8C%89%E9%92%AE-toc" style="margin-left: 80px">12.3.5图像按钮</p>
<p id="12.3.6%E6%8F%90%E4%BA%A4%E6%8C%89%E9%92%AE-toc" style="margin-left: 80px">12.3.6提交按钮</p>
<p id="12.3.7%E9%87%8D%E7%BD%AE%E6%8C%89%E9%92%AE-toc" style="margin-left: 80px">12.3.7重置按钮</p>
<p id="12.3.8%E6%99%AE%E9%80%9A%E6%8C%89%E9%92%AE-toc" style="margin-left: 80px">12.3.8普通按钮</p>
<p id="12.3.9%E6%96%87%E4%BB%B6%E9%80%89%E6%8B%A9%E6%A1%86-toc" style="margin-left: 80px">12.3.9文件选择框</p>
<p id="12.3.10%E9%9A%90%E8%97%8F%E6%A1%86-toc" style="margin-left: 80px">12.3.10隐藏框</p>
<p id="12.4%E5%A4%9A%E8%A1%8C%E6%96%87%E6%9C%AC%E8%BE%93%E5%85%A5%E6%A1%86-toc" style="margin-left: 40px">12.4多行文本输入框</p>
<p id="12.5%E4%B8%8B%E6%8B%89%E5%88%97%E8%A1%A8%E6%A1%86-toc" style="margin-left: 40px">12.5下拉列表框</p>
<p id="%E7%AC%AC13%E7%AB%A0%20HTML5%E5%9F%BA%E7%A1%80%E4%B8%8ECSS3%E5%BA%94%E7%94%A8-toc" style="margin-left: 0">第13章 HTML5基础与CSS3应用</p>
<p id="13.1%20HTML5%E6%A6%82%E8%BF%B0-toc" style="margin-left: 40px">13.1 HTML5概述</p>
<p id="13.1.1%20HTML5%E7%9A%84%E5%85%AB%E4%B8%AA%E7%89%B9%E6%80%A7-toc" style="margin-left: 80px">13.1.1 HTML5的八个特性</p>
<p id="13.1.2%20HTML5%E7%9A%84%E4%BC%98%E5%8A%BF-toc" style="margin-left: 80px">13.1.2 HTML5的优势</p>
<p id="13.2%20HTML5%E6%96%87%E6%A1%A3%E7%BB%93%E6%9E%84-toc" style="margin-left: 40px">13.2 HTML5文档结构</p>
<p id="13.2.1%20HTML5%E9%A1%B5%E9%9D%A2%E7%BB%93%E6%9E%84-toc" style="margin-left: 80px">13.2.1 HTML5页面结构</p>
<p id="13.2.2%20HTML5%E6%96%B0%E5%A2%9E%E7%BB%93%E6%9E%84%E5%85%83%E7%B4%A0-toc" style="margin-left: 80px">13.2.2 HTML5新增结构元素</p>
<p id="13.3%20HTML5%E6%96%B0%E5%A2%9E%E9%A1%B5%E9%9D%A2%E5%85%83%E7%B4%A0-toc" style="margin-left: 40px">13.3 HTML5新增页面元素</p>
<p id="13.3.1%20hgroup%E6%A0%87%E8%AE%B0-toc" style="margin-left: 80px">13.3.1 hgroup标记</p>
<p id="13.3.2%20figure%E6%A0%87%E8%AE%B0%E4%B8%8Efigcaption%E6%A0%87%E8%AE%B0-toc" style="margin-left: 80px">13.3.2 figure标记与figcaption标记</p>
<p id="13.3.3%20mark%E6%A0%87%E8%AE%B0%E4%B8%8Etime%E6%A0%87%E8%AE%B0-toc" style="margin-left: 80px">13.3.3 mark标记与time标记</p>
<p id="13.3.4%20details%E6%A0%87%E8%AE%B0%E4%B8%8Esummary%E6%A0%87%E8%AE%B0-toc" style="margin-left: 80px">13.3.4 details标记与summary标记</p>
<p id="13.3.5%20progress%E6%A0%87%E8%AE%B0%E4%B8%8Emeter%E6%A0%87%E8%AE%B0-toc" style="margin-left: 80px">13.3.5 progress标记与meter标记</p>
<p id="13.3.6%20input%E6%A0%87%E8%AE%B0%E4%B8%8Edatalist%E6%A0%87%E8%AE%B0-toc" style="margin-left: 80px">13.3.6 input标记与datalist标记</p>
<p id="13.4%20HTML5%E8%A1%A8%E5%8D%95-toc" style="margin-left: 40px">13.4 HTML5表单</p>
<p id="13.4.1%20HTML5%E6%96%B0%E5%A2%9E%E7%9A%84%E8%A1%A8%E5%8D%95%E5%B1%9E%E6%80%A7-toc" style="margin-left: 80px">13.4.1 HTML5新增的表单属性</p>
<p id="13.4.2%20HTML5%E6%96%B0%E5%A2%9E%E7%9A%84%E8%A1%A8%E5%8D%95%E5%85%83%E7%B4%A0-toc" style="margin-left: 80px">13.4.2 HTML5新增的表单元素</p>
<p id="13.4.3%20HTML%E6%96%B0%E5%A2%9E%E7%9A%84input%E7%B1%BB%E5%9E%8B-toc" style="margin-left: 80px">13.4.3 HTML新增的input类型</p>
<p id="13.5%20HTML5%E8%A7%86%E9%A2%91%E4%B8%8E%E9%9F%B3%E9%A2%91-toc" style="margin-left: 40px">13.5 HTML5视频与音频</p>
<p id="13.5.1%20video%E6%A0%87%E8%AE%B0%E5%8F%8A%E5%B1%9E%E6%80%A7-toc" style="margin-left: 80px">13.5.1 video标记及属性</p>
<p id="13.5.2%20audio%E6%A0%87%E8%AE%B0%E5%8F%8A%E5%B1%9E%E6%80%A7-toc" style="margin-left: 80px">13.5.2 audio标记及属性</p>
<p id="13.6%20CSS3%E5%9F%BA%E7%A1%80%E5%BA%94%E7%94%A8-toc" style="margin-left: 40px">13.6 CSS3基础应用</p>
<p id="13.6.2%20CSS3%E6%B5%8F%E8%A7%88%E5%99%A8%E5%85%BC%E5%AE%B9%E6%80%A7-toc" style="margin-left: 80px">13.6.2 CSS3浏览器兼容性</p>
<p id="13.6.3%20CSS3%E8%BE%B9%E6%A1%86-toc" style="margin-left: 80px">13.6.3 CSS3边框</p>
<p id="13.6.4%20CSS3%E8%BD%AC%E6%8D%A2transform%E5%B1%9E%E6%80%A7-toc" style="margin-left: 80px">13.6.4 CSS3转换transform属性</p>
<p id="13.6.5%20CSS3%E8%BF%87%E6%B8%A1transition%E5%B1%9E%E6%80%A7-toc" style="margin-left: 80px">13.6.5 CSS3过渡transition属性</p>
<p id="13.6.6%20CSS3%E5%8A%A8%E7%94%BBanimation-toc" style="margin-left: 80px">13.6.6 CSS3动画animation</p>
<p id="13.6.7%20CSS3%E5%A4%9A%E5%88%97%E5%B1%9E%E6%80%A7-toc" style="margin-left: 80px">13.6.7 CSS3多列属性</p>
<p id="13.6.8%20CSS3%E6%96%87%E6%9C%AC%E6%95%88%E6%9E%9C-toc" style="margin-left: 80px">13.6.8 CSS3文本效果</p>
<hr id="hr-toc">
<div>
<h1 id="%E7%AC%AC1%E7%AB%A0%20Web%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E6%8A%80%E6%9C%AF%E7%BB%BC%E8%BF%B0" style="margin-left: 0.0001pt; text-align: center">第1章 Web前端开发技术综述</h1>
<h2 id="1.1%20Web%E6%A6%82%E8%BF%B0" style="margin-left: 0.0001pt; text-align: justify">1.1 Web概述</h2>
<p style="margin-left: 0.0001pt; text-align: justify">Tim Berners-Lee(蒂姆·伯纳斯·李)发明了世界上第一个网站</p>
<h3 id="1.1.1%20Web%E7%9A%84%E8%B5%B7%E6%BA%90" style="margin-left: 0.0001pt; text-align: justify">1.1.1 Web的起源</h3>
<p style="margin-left: 0.0001pt; text-align: justify">1、超文本起源于20世纪60年代的几个项目</p>
<p style="margin-left: 0.0001pt; text-align: justify">2、Tim发明了一个全球网络资源唯一认证的系统：统一资源标识符(Uniform Resource Identifier，URI)，这证明了超文本和因特网结合的可行性</p>
<p style="margin-left: 0.0001pt; text-align: justify">3、为了让World Wide Web不被少数人所控制，Tim组织成立了World Wide Web Consortium，即W3C。HTML协议各个版本都出自W3C会议，且HTML规范是以“建议”的形式发布，并不强迫任何厂商或个人接受</p>
<h3 id="1.1.2%20Web%E7%9A%84%E7%89%B9%E7%82%B9" style="margin-left: 0.0001pt; text-align: justify">1.1.2 Web的特点</h3>
<p style="margin-left: 0.0001pt; text-align: justify">1、易导航和图形化的界面</p>
<p style="margin-left: 0.0001pt; text-align: justify">2、与平台无关性</p>
<p style="margin-left: 0.0001pt; text-align: justify">3、分布式结构</p>
<p style="margin-left: 0.0001pt; text-align: justify">4、动态性</p>
<p style="margin-left: 0.0001pt; text-align: justify">5、交互性</p>
<h3 id="1.1.3%20Web%E5%B7%A5%E4%BD%9C%E5%8E%9F%E7%90%86" style="margin-left: 0.0001pt; text-align: justify">1.1.3 Web工作原理</h3>
<p style="margin-left: 0.0001pt; text-align: justify"><img alt="" height="739" src="https://img-blog.csdnimg.cn/8ec9598afac04188a1cf9ad2e5f36241.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5a6B6Z2ZX-iHtOi_nF8=,size_20,color_FFFFFF,t_70,g_se,x_16" width="1200"></p>
<p style="margin-left: 0.0001pt; text-align: justify">HTTP(Hypertext Transfer Protocol)：超文本传输协议</p>
<h3 id="1.1.4%20Web%E7%9B%B8%E5%85%B3%E6%A6%82%E5%BF%B5" style="margin-left: 0.0001pt; text-align: justify">1.1.4 Web相关概念</h3>
<p style="margin-left: 0.0001pt; text-align: justify">1、URL(Uniform Resource Locator)：统一资源定位器或统一资源定位符，即网页地址</p>
<p style="margin-left: 0.0001pt; text-align: justify"><img alt="" height="336" src="https://img-blog.csdnimg.cn/a7033963e56e419885f41cc004d1250c.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5a6B6Z2ZX-iHtOi_nF8=,size_20,color_FFFFFF,t_70,g_se,x_16" width="1200"></p>
<p style="margin-left: 0.0001pt; text-align: justify"><img alt="" height="714" src="https://img-blog.csdnimg.cn/ad237ca4d2b9405c8cab316331b38178.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5a6B6Z2ZX-iHtOi_nF8=,size_20,color_FFFFFF,t_70,g_se,x_16" width="1200"></p>
<p style="margin-left: 0.0001pt; text-align: justify">2、Web服务器</p>
<p style="margin-left: 0.0001pt; text-align: justify">也称为网站，是由计算机软件和硬件组成的有机整体</p>
<p style="margin-left: 0.0001pt; text-align: justify">3、超链接(Hyper Link)</p>
<p style="margin-left: 0.0001pt; text-align: justify">从一个网页指向另一个目标的连接关系</p>
<p style="margin-left: 0.0001pt; text-align: justify"></p>
<h2 id="1.3%20Web%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E6%8A%80%E6%9C%AF" style="margin-left: 0.0001pt; text-align: justify">1.3 Web前端开发技术</h2>
<p style="margin-left: 0.0001pt; text-align: justify">新一代网站需要HTML、CSS、JavaScript、DOM、AJAX等组合技术，其中HTML、CSS、JavaScript三大技术称为“Web标准三剑客”</p>
<h3 id="1.3.1%20HTML(Hypertext%20Markkup%20Language)" style="margin-left: 0.0001pt; text-align: justify">1.3.1 HTML(Hypertext Markkup Language)</h3>
<p style="margin-left: 0.0001pt; text-align: justify">HTML是超文本标记语言，是Web页面的结构，使用标记来描述网页。</p>
<p style="margin-left: 0.0001pt; text-align: justify">网页的内容包括标题、副标题、段落、无序列表、定义列表、表格、表单等</p>
<p style="margin-left: 0.0001pt; text-align: justify">HTML是SGML(Standard Generalized Markup Language，标准通用标记语言)下的一个应用，也是一种标准规范</p>
<p style="margin-left: 0.0001pt; text-align: justify">SGML是定义电子文档结构和描述其内容的国际标准语言，是所有电子文档标记语言的起源</p>
<p style="margin-left: 0.0001pt; text-align: justify">&lt;head&gt;、&lt;meta&gt;、&lt;title&gt;、&lt;link&gt;等都是HTML的标记</p>
<p style="margin-left: 0.0001pt; text-align: justify">2014年后为HTML5版本</p>
<h3 id="1.3.2%20CSS" style="margin-left: 0.0001pt; text-align: justify">1.3.2 CSS</h3>
<p style="margin-left: 0.0001pt; text-align: justify">1、CSS的作用</p>
<p style="margin-left: 0.0001pt; text-align: justify">解决网页内容与表现分离的问题</p>
<p style="margin-left: 0.0001pt; text-align: justify">2、CSS的发展历史</p>
<p style="margin-left: 0.0001pt; text-align: justify">当前为CSS3版本</p>
<h3 id="1.3.3%20JavaScript" style="margin-left: 0.0001pt; text-align: justify">1.3.3 JavaScript</h3>
<p style="margin-left: 0.0001pt; text-align: justify">使用JavaScript可以开发交互式Web页面</p>
<p style="margin-left: 0.0001pt; text-align: justify">1、JavaScript由来</p>
<p style="margin-left: 0.0001pt; text-align: justify">JavaScript是基于对象和事件驱动并具有相对安全性的客户端脚本语言，常用来给HTML网页添加动态的功能</p>
<p style="margin-left: 0.0001pt; text-align: justify">欧洲计算机制造商协会(European Computer Manufacturers Association，ECMA)以JavaScript为基础制定了ECMAScript标准</p>
<p style="margin-left: 0.0001pt; text-align: justify">2、JavaScript的组成</p>
<p style="margin-left: 0.0001pt; text-align: justify">（1）核心（ECMAScript）</p>
<p style="margin-left: 0.0001pt; text-align: justify">（2）文档对象模型（Document Object Model，DOM）</p>
<p style="margin-left: 0.0001pt; text-align: justify">（3）浏览器对象模型（Browser Object Model，BOM）</p>
<h3 id="1.3.4%20HTML%20DOM" style="margin-left: 0.0001pt; text-align: justify">1.3.4 HTML DOM</h3>
<p style="margin-left: 0.0001pt; text-align: justify">DOM是一种与浏览器、平台语言无关的接口，使得用户可以访问页面上其他的标准组件</p>
<p style="margin-left: 0.0001pt; text-align: justify">DOM与JavaScript结合起来实现了Web网页的行为与结构的分离</p>
<p style="margin-left: 0.0001pt; text-align: justify">1、DOM由来</p>
<p style="margin-left: 0.0001pt; text-align: justify">为了定义访问和操作HTML文档的标准</p>
<p style="margin-left: 0.0001pt; text-align: justify">2、HTML DOM Level</p>
<p style="margin-left: 0.0001pt; text-align: justify">当前为DOM Level3版本</p>
<h3 id="1.3.5%20BOM" style="margin-left: 0.0001pt; text-align: justify">1.3.5 BOM</h3>
<p style="margin-left: 0.0001pt; text-align: justify">定义了JavaScript可以进行操作的浏览器的各个功能部件的接口，提供访问文档各个功能部件的途径以及操作方法</p>
<p style="margin-left: 0.0001pt; text-align: justify">由于没有相关的BOM标准，每种浏览器都有自己的BOM实现的方法</p>
<p style="margin-left: 0.0001pt; text-align: justify"><img alt="" height="537" src="https://img-blog.csdnimg.cn/61d097fe127b47a8a699dc598d473732.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5a6B6Z2ZX-iHtOi_nF8=,size_20,color_FFFFFF,t_70,g_se,x_16" width="1200"></p>
<h3 id="1.3.6%20AJAX" style="margin-left: 0.0001pt; text-align: justify">1.3.6 AJAX</h3>
<p style="margin-left: 0.0001pt; text-align: justify">AJAX(Asynchronous JavaScript and XML)：也称为异步JavaScript和XML，它是多种技术的综合，打破了使用页面重载的惯例技术组合，可以部分更新网页内容</p>
<h3 id="1.3.7%20jQuery" style="margin-left: 0.0001pt; text-align: justify">1.3.7 jQuery</h3>
<p style="margin-left: 0.0001pt; text-align: justify">jQuery是一套跨浏览器的javaScript库，简化HTML与JavaScript之间的操作，是目前最受欢迎的JavaScript库</p>
<p style="margin-left: 0.0001pt; text-align: justify"></p>
<h2 id="1.4%20Web%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E5%B7%A5%E5%85%B7" style="margin-left: 0.0001pt; text-align: justify">1.4 Web前端开发工具</h2>
<h3 id="1.4.1%20EditPlus" style="margin-left: 0.0001pt; text-align: justify">1.4.1 EditPlus</h3>
<h3 id="1.4.2%20Adobe%20Dreamweaver" style="margin-left: 0.0001pt; text-align: justify">1.4.2 Adobe Dreamweaver</h3>
<h3 id="1.4.3%20Sublime%20Text" style="margin-left: 0.0001pt; text-align: justify">1.4.3 Sublime Text</h3>
<h3 id="1.4.4%20WebStorm" style="margin-left: 0.0001pt; text-align: justify">1.4.4 WebStorm</h3>
<h3 id="1.4.5%20HBuilder" style="margin-left: 0.0001pt; text-align: justify">1.4.5 HBuilder</h3>
<p style="margin-left: 0.0001pt; text-align: justify"></p>
<h2 id="1.5%E6%B5%8F%E8%A7%88%E5%99%A8%E5%B7%A5%E5%85%B7" style="margin-left: 0.0001pt; text-align: justify">1.5浏览器工具</h2>
<h3 id="1.5.1%20Internet%20Explorer" style="margin-left: 0.0001pt; text-align: justify">1.5.1 Internet Explorer</h3>
<h3 id="1.5.2%20Google%20Chrome" style="margin-left: 0.0001pt; text-align: justify">1.5.2 Google Chrome</h3>
<h3 id="1.5.3%20Mozilla%20Firefox" style="margin-left: 0.0001pt; text-align: justify">1.5.3 Mozilla Firefox</h3>
<h3 id="1.5.4%20Safari" style="margin-left: 0.0001pt; text-align: justify">1.5.4 Safari</h3>
<h3 id="1.5.5%20Opera" style="margin-left: 0.0001pt; text-align: justify">1.5.5 Opera</h3>
</div>
<p></p>
<div>
<h1 id="%E7%AC%AC2%E7%AB%A0%20HTML%E5%9F%BA%E7%A1%80" style="margin-left: 0.0001pt; text-align: center">第2章 HTML基础</h1>
<h2 id="2.1%20HTML%E6%96%87%E6%A1%A3%E7%BB%93%E6%9E%84" style="margin-left: 0.0001pt; text-align: justify">2.1 HTML文档结构</h2>
<p style="margin-left: 0.0001pt; text-align: justify">HTML文档由头部head和主体body两个部分组成。头部信息不显示在网页上，主体内容是网页要显示的信息</p>
<p style="margin-left: 0.0001pt; text-align: justify">HTML文档以&lt;html&gt;标记开始，以&lt;/html&gt;标记结束，每个HTML文档都应该有且只有一个html、head和body元素</p>
<p style="margin-left: 0.0001pt; text-align: justify"></p>
<h2 id="2.2%E5%A4%B4%E9%83%A8head" style="margin-left: 0.0001pt; text-align: justify">2.2头部head</h2>
<h3 id="2.2.1%E6%A0%87%E9%A2%98title%E6%A0%87%E8%AE%B0" style="margin-left: 0.0001pt; text-align: justify">2.2.1标题title标记</h3>
<p style="margin-left: 0.0001pt; text-align: justify">&lt;title&gt;是开始标记，&lt;/title&gt;是结束标记，两者之间的内容为显示在浏览器的标题栏上的信息</p>
<h3 id="2.2.2%E5%85%83%E4%BF%A1%E6%81%AFmeta%E6%A0%87%E8%AE%B0" style="margin-left: 0.0001pt; text-align: justify">2.2.2元信息meta标记</h3>
<p style="margin-left: 0.0001pt; text-align: justify"><img alt="" height="1200" src="https://img-blog.csdnimg.cn/dcc5a8e0cba74447bcb915641a77c5ad.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5a6B6Z2ZX-iHtOi_nF8=,size_20,color_FFFFFF,t_70,g_se,x_16" width="1200"></p>
<p style="margin-left: 0.0001pt; text-align: justify"><img alt="" height="297" src="https://img-blog.csdnimg.cn/252390f857e84bb08c6496f5b0415a6f.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5a6B6Z2ZX-iHtOi_nF8=,size_20,color_FFFFFF,t_70,g_se,x_16" width="1200"></p>
<p style="margin-left: 0.0001pt; text-align: justify"></p>
<h2 id="2.3%E4%B8%BB%E4%BD%93body" style="margin-left: 0.0001pt; text-align: justify">2.3主体body</h2>
<h3 id="2.3.1%20body%E6%A0%87%E8%AE%B0" style="margin-left: 0.0001pt; text-align: justify">2.3.1 body标记</h3>
<p style="margin-left: 0.0001pt; text-align: justify">&lt;body&gt;是开始标记，&lt;/body&gt;是结束标志。两者之间所包括的内容为网页上显示的信息</p>
<h3 id="2.3.2%20body%E6%A0%87%E8%AE%B0%E5%B1%9E%E6%80%A7" style="margin-left: 0.0001pt; text-align: justify">2.3.2 body标记属性</h3>
<p style="margin-left: 0.0001pt; text-align: justify"><img alt="" height="283" src="https://img-blog.csdnimg.cn/4840630ad1b64740857ca4ff2e7379a3.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5a6B6Z2ZX-iHtOi_nF8=,size_20,color_FFFFFF,t_70,g_se,x_16" width="1200"></p>
<p style="margin-left: 0.0001pt; text-align: justify"><img alt="" height="650" src="https://img-blog.csdnimg.cn/0814b779deed4e449c66f2de8903e868.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5a6B6Z2ZX-iHtOi_nF8=,size_20,color_FFFFFF,t_70,g_se,x_16" width="1200"></p>
<p style="margin-left: 0.0001pt; text-align: justify"></p>
<h2 id="2.4%20HTML%E5%9F%BA%E6%9C%AC%E8%AF%AD%E6%B3%95" style="margin-left: 0.0001pt; text-align: justify">2.4 HTML基本语法</h2>
<h3 id="2.4.1%E6%A0%87%E8%AE%B0%E7%B1%BB%E5%9E%8B" style="margin-left: 0.0001pt; text-align: justify">2.4.1标记类型</h3>
<p style="margin-left: 0.0001pt; text-align: justify">1、单标记</p>
<p style="margin-left: 0.0001pt; text-align: justify">&lt;标记名称&gt;或&lt;标记名称/&gt;</p>
<p style="margin-left: 0.0001pt; text-align: justify">2、双标记</p>
<p style="margin-left: 0.0001pt; text-align: justify">第一个标记是开始标记（首标记），第二个标记是结束标记（尾标记）</p>
<p style="margin-left: 0.0001pt; text-align: justify">&lt;标记名称&gt;内容&lt;/标记名称&gt;</p>
<p style="margin-left: 0.0001pt; text-align: justify">标记可以互相嵌套，但不能交叉</p>
<h3 id="2.4.2%20HTML%E5%B1%9E%E6%80%A7" style="margin-left: 0.0001pt; text-align: justify">2.4.2 HTML属性</h3>
<p style="margin-left: 0.0001pt; text-align: justify">&lt;标记名称 属性名1=”属性值1” 属性名2=”属性值2” … 属性名n=”属性值n”&gt;&lt;/标记名称&gt;</p>
<p style="margin-left: 0.0001pt; text-align: justify"></p>
<h2 id="2.5%E6%B3%A8%E9%87%8A" style="margin-left: 0.0001pt; text-align: justify">2.5注释</h2>
<p style="margin-left: 0.0001pt; text-align: justify">&lt;!--注释信息 --&gt;</p>
<p style="margin-left: 0.0001pt; text-align: justify">&lt;comment&gt;注释信息&lt;/comment&gt;</p>
<p style="margin-left: 0.0001pt; text-align: justify"></p>
<h2 id="2.6%20HTML%E6%96%87%E6%A1%A3%E7%BC%96%E5%86%99%E8%A7%84%E8%8C%83" style="margin-left: 0.0001pt; text-align: justify">2.6 HTML文档编写规范</h2>
<h3 id="2.6.1%20HTML%E4%BB%A3%E7%A0%81%E4%B9%A6%E5%86%99%E8%A7%84%E8%8C%83" style="margin-left: 0.0001pt; text-align: justify">2.6.1 HTML代码书写规范</h3>
<p style="margin-left: 0.0001pt; text-align: justify">1、在HTML代码书写时不区分大小写</p>
<p style="margin-left: 0.0001pt; text-align: justify">2、回车符和空格在HTML页面显示时均不起作用。需要时可使用&lt;br/&gt;和&amp;nbsp;来实现换行和插入空格</p>
<h3 id="2.6.2%20HTML%E6%96%87%E6%A1%A3%E5%91%BD%E5%90%8D%E8%A7%84%E5%88%99" style="margin-left: 0.0001pt; text-align: justify">2.6.2 HTML文档命名规则</h3>
<p style="margin-left: 0.0001pt; text-align: justify">（1）文档的拓展名为htm或html</p>
<p style="margin-left: 0.0001pt; text-align: justify">（2）文档名称只能由英文字母、数字或下划线组成</p>
<p style="margin-left: 0.0001pt; text-align: justify">（3）文档名称不能包含特殊符号</p>
<p style="margin-left: 0.0001pt; text-align: justify">（4）文档名称区分大小写</p>
<p style="margin-left: 0.0001pt; text-align: justify">（5）Web服务器主页一般命名为index.html或default.html</p>
<p style="margin-left: 0.0001pt; text-align: justify"></p>
<h2 id="2.7%20HTML%E6%96%87%E6%A1%A3%E7%B1%BB%E5%9E%8B" style="margin-left: 0.0001pt; text-align: justify">2.7 HTML文档类型</h2>
<h3 id="2.7.1%20%3C!DOCTYPE%3E%E6%A0%87%E8%AE%B0" style="margin-left: 0.0001pt; text-align: justify">2.7.1 &lt;!DOCTYPE&gt;标记</h3>
<p style="margin-left: 0.0001pt; text-align: justify"><img alt="" height="725" src="https://img-blog.csdnimg.cn/760047cb0d39496999ce09a336f440d6.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5a6B6Z2ZX-iHtOi_nF8=,size_20,color_FFFFFF,t_70,g_se,x_16" width="1200"></p>
<h3 id="2.7.2%20DTD%E7%B1%BB%E5%9E%8B" style="margin-left: 0.0001pt; text-align: justify">2.7.2 DTD类型</h3>
<p style="margin-left: 0.0001pt; text-align: justify"><img alt="" height="744" src="https://img-blog.csdnimg.cn/618248df5e5543d5bd9480a86fed4c3d.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5a6B6Z2ZX-iHtOi_nF8=,size_20,color_FFFFFF,t_70,g_se,x_16" width="1200"></p>
</div>
<p></p>
<div>
<h1 id="%E7%AC%AC3%E7%AB%A0%20%E6%A0%BC%E5%BC%8F%E5%8C%96%E6%96%87%E6%9C%AC%E4%B8%8E%E6%AE%B5%E8%90%BD" style="margin-left: 0.0001pt; text-align: center">第3章 格式化文本与段落</h1>
<h2 id="3.1%20Web%E9%A1%B5%E9%9D%A2%E5%88%9D%E6%AD%A5%E8%AE%BE%E8%AE%A1" style="margin-left: 0.0001pt; text-align: justify">3.1 Web页面初步设计</h2>
<h3 id="3.1.1%E5%90%91Web%E9%A1%B5%E9%9D%A2%E6%B7%BB%E5%8A%A0%E6%96%87%E5%AD%97%E4%BF%A1%E6%81%AF" style="margin-left: 0.0001pt; text-align: justify">3.1.1向Web页面添加文字信息</h3>
<p style="margin-left: 0.0001pt; text-align: justify">&lt;body&gt;向这里添加内容&lt;/body&gt;</p>
<h3 id="3.1.2%E6%A0%87%E9%A2%98%E5%AD%97%E6%A0%87%E8%AE%B0" style="margin-left: 0.0001pt; text-align: justify">3.1.2标题字标记</h3>
<p style="margin-left: 0.0001pt; text-align: justify"><img alt="" height="350" src="https://img-blog.csdnimg.cn/249429dcd207466f8a8c596be04c013e.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5a6B6Z2ZX-iHtOi_nF8=,size_20,color_FFFFFF,t_70,g_se,x_16" width="1200"></p>
<h3 id="3.1.3%E6%B7%BB%E5%8A%A0%E7%A9%BA%E6%A0%BC%E4%B8%8E%E7%89%B9%E6%AE%8A%E7%AC%A6%E5%8F%B7" style="margin-left: 0.0001pt; text-align: justify">3.1.3添加空格与特殊符号</h3>
<p style="margin-left: 0.0001pt; text-align: justify"><img alt="" height="498" src="https://img-blog.csdnimg.cn/968142f39dc54f1aa3a81489be18f6a2.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5a6B6Z2ZX-iHtOi_nF8=,size_20,color_FFFFFF,t_70,g_se,x_16" width="1200"></p>
<p style="margin-left: 0.0001pt; text-align: justify"></p>
<h2 id="3.2%E6%A0%BC%E5%BC%8F%E5%8C%96%E6%96%87%E6%9C%AC%E6%A0%87%E8%AE%B0" style="margin-left: 0.0001pt; text-align: justify">3.2格式化文本标记</h2>
<h3 id="3.2.1%E6%96%87%E6%9C%AC%E4%BF%AE%E9%A5%B0%E6%A0%87%E8%AE%B0" style="margin-left: 0.0001pt; text-align: justify">3.2.1文本修饰标记</h3>
<p style="margin-left: 0.0001pt; text-align: justify"><img alt="" height="548" src="https://img-blog.csdnimg.cn/48899b33f401436fa6104ae3a4073d37.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5a6B6Z2ZX-iHtOi_nF8=,size_20,color_FFFFFF,t_70,g_se,x_16" width="1200"></p>
<h3 id="3.2.2%E8%AE%A1%E7%AE%97%E6%9C%BA%E8%BE%93%E5%87%BA%E6%A0%87%E8%AE%B0" style="margin-left: 0.0001pt; text-align: justify">3.2.2计算机输出标记</h3>
<p style="margin-left: 0.0001pt; text-align: justify"><img alt="" height="537" src="https://img-blog.csdnimg.cn/003e593a9e77475face11d937606eb61.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5a6B6Z2ZX-iHtOi_nF8=,size_20,color_FFFFFF,t_70,g_se,x_16" width="1200"></p>
<h3 id="3.2.3%E5%BC%95%E7%94%A8%E5%92%8C%E6%9C%AF%E8%AF%AD%E6%A0%87%E8%AE%B0" style="margin-left: 0.0001pt; text-align: justify">3.2.3引用和术语标记</h3>
<p style="margin-left: 0.0001pt; text-align: justify"><img alt="" height="384" src="https://img-blog.csdnimg.cn/f82cec2e26094311a5b2241b28ea2a94.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5a6B6Z2ZX-iHtOi_nF8=,size_20,color_FFFFFF,t_70,g_se,x_16" width="1200"></p>
<h3 id="3.2.4%E5%AD%97%E4%BD%93font%E6%A0%87%E8%AE%B0" style="margin-left: 0.0001pt; text-align: justify">3.2.4字体font标记</h3>
<p style="margin-left: 0.0001pt; text-align: justify"><img alt="" height="860" src="https://img-blog.csdnimg.cn/71147a718c0f40eea77b1d906451d56a.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5a6B6Z2ZX-iHtOi_nF8=,size_20,color_FFFFFF,t_70,g_se,x_16" width="1200"></p>
<p style="margin-left: 0.0001pt; text-align: justify"></p>
<h2 id="3.3%E6%AE%B5%E8%90%BD%E4%B8%8E%E6%8E%92%E7%89%88%E6%A0%87%E8%AE%B0" style="margin-left: 0.0001pt; text-align: justify">3.3段落与排版标记</h2>
<h3 id="3.3.1%E6%AE%B5%E8%90%BDp%E6%A0%87%E8%AE%B0" style="margin-left: 0.0001pt; text-align: justify">3.3.1段落p标记</h3>
<p style="margin-left: 0.0001pt; text-align: justify"><img alt="" height="216" src="https://img-blog.csdnimg.cn/a9930537c9cd432cb7d84f8b6fdd428a.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5a6B6Z2ZX-iHtOi_nF8=,size_20,color_FFFFFF,t_70,g_se,x_16" width="1200"></p>
<h3 id="3.3.2%E6%8D%A2%E8%A1%8Cbr%E6%A0%87%E8%AE%B0" style="margin-left: 0.0001pt; text-align: justify">3.3.2换行br标记</h3>
<p style="margin-left: 0.0001pt; text-align: justify">&lt;br&gt;或&lt;br/&gt;</p>
<h3 id="3.3.3%E6%B0%B4%E5%B9%B3%E5%88%86%E9%9A%94%E7%BA%BFhr%E6%A0%87%E8%AE%B0" style="margin-left: 0.0001pt; text-align: justify">3.3.3水平分隔线hr标记</h3>
<p style="margin-left: 0.0001pt; text-align: justify"><img alt="" height="469" src="https://img-blog.csdnimg.cn/9cbacf5422be4080927462d150b19c74.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5a6B6Z2ZX-iHtOi_nF8=,size_20,color_FFFFFF,t_70,g_se,x_16" width="1200"></p>
<h3 id="3.3.4%E6%8B%BC%E9%9F%B3%2F%E9%9F%B3%E6%A0%87%E6%B3%A8%E9%87%8Aruby%E6%A0%87%E8%AE%B0%E5%92%8Crt%2Frp%E6%A0%87%E8%AE%B0" style="margin-left: 0.0001pt; text-align: justify">3.3.4拼音/音标注释ruby标记和rt/rp标记</h3>
<p style="margin-left: 0.0001pt; text-align: justify"><img alt="" height="216" src="https://img-blog.csdnimg.cn/b6ae0f36ce7f45339e1629411156cc7a.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5a6B6Z2ZX-iHtOi_nF8=,size_20,color_FFFFFF,t_70,g_se,x_16" width="481"></p>
<h3 id="3.3.5%E6%AE%B5%E8%90%BD%E7%BC%A9%E8%BF%9Bblockquote%E6%A0%87%E8%AE%B0" style="margin-left: 0.0001pt; text-align: justify">3.3.5段落缩进blockquote标记</h3>
<p style="margin-left: 0.0001pt; text-align: justify"><img alt="" height="212" src="https://img-blog.csdnimg.cn/58a2e632b55248fcbc0041dbd5f73a5e.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5a6B6Z2ZX-iHtOi_nF8=,size_20,color_FFFFFF,t_70,g_se,x_16" width="1200"></p>
<h3 id="3.3.6%E9%A2%84%E6%A0%BC%E5%BC%8F%E5%8C%96pre%E6%A0%87%E8%AE%B0" style="margin-left: 0.0001pt; text-align: justify">3.3.6预格式化pre标记</h3>
<p style="margin-left: 0.0001pt; text-align: justify"><img alt="" height="167" src="https://img-blog.csdnimg.cn/b3f8a0e0eb824fac99fb146f15e40b5c.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5a6B6Z2ZX-iHtOi_nF8=,size_20,color_FFFFFF,t_70,g_se,x_16" width="1200"></p>
</div>
<p></p>
<div>
<h1 id="%E7%AC%AC4%E7%AB%A0%20%E5%88%97%E8%A1%A8" style="margin-left: 0.0001pt; text-align: center">第4章 列表</h1>
<h2 id="4.2%E6%97%A0%E5%BA%8F%E5%88%97%E8%A1%A8ul" style="margin-left: 0.0001pt; text-align: justify">4.2无序列表ul</h2>
<img alt="" height="139" src="https://img-blog.csdnimg.cn/dc076a1c959b4264a52f161e8200c844.png" width="274">
<p style="margin-left: 0.0001pt; text-align: justify"><img alt="" height="485" src="https://img-blog.csdnimg.cn/05474b70fb3d4aaba0eface5cfc51721.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5a6B6Z2ZX-iHtOi_nF8=,size_20,color_FFFFFF,t_70,g_se,x_16" width="1200"></p>
<p style="margin-left: 0.0001pt; text-align: justify"></p>
<h2 id="4.3%E6%9C%89%E5%BA%8F%E5%88%97%E8%A1%A8ol" style="margin-left: 0.0001pt; text-align: justify">4.3有序列表ol</h2>
<p style="margin-left: 0.0001pt; text-align: justify"><img alt="" height="1200" src="https://img-blog.csdnimg.cn/9bf9c235851a42b584938d6f15b35074.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5a6B6Z2ZX-iHtOi_nF8=,size_20,color_FFFFFF,t_70,g_se,x_16" width="1200"></p>
<p style="margin-left: 0.0001pt; text-align: justify"></p>
<h2 id="4.4%E5%88%97%E8%A1%A8%E5%B5%8C%E5%A5%97" style="margin-left: 0.0001pt; text-align: justify">4.4列表嵌套</h2>
<p style="margin-left: 0.0001pt; text-align: justify"></p>
<h2 id="4.5%E5%AE%9A%E4%B9%89%E5%88%97%E8%A1%A8dl" style="margin-left: 0.0001pt; text-align: justify">4.5定义列表dl</h2>
<p style="margin-left: 0.0001pt; text-align: justify"><img alt="" height="567" src="https://img-blog.csdnimg.cn/3869b7f107234c61940330914bf6e9bf.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5a6B6Z2ZX-iHtOi_nF8=,size_20,color_FFFFFF,t_70,g_se,x_16" width="1200"></p>
</div>
<p></p>
<p></p>
<div>
<h1 id="%E7%AC%AC5%E7%AB%A0%20%E8%B6%85%E9%93%BE%E6%8E%A5%E4%B8%8E%E6%B5%AE%E5%8A%A8%E6%A1%86%E6%9E%B6" style="margin-left: 0.0001pt; text-align: center">第5章 超链接与浮动框架</h1>
<h2 id="5.2%E8%B6%85%E9%93%BE%E6%8E%A5%E8%AF%AD%E6%B3%95%E3%80%81%E8%B7%AF%E5%BE%84%E5%8F%8A%E5%88%86%E7%B1%BB" style="margin-left: 0.0001pt; text-align: justify">5.2超链接语法、路径及分类</h2>
<h3 id="5.2.1%E8%B6%85%E9%93%BE%E6%8E%A5%E8%AF%AD%E6%B3%95" style="margin-left: 0.0001pt; text-align: justify">5.2.1超链接语法</h3>
<p style="margin-left: 0.0001pt; text-align: justify"><img alt="" height="871" src="https://img-blog.csdnimg.cn/f0385e2da3764e279b89272b17c15a35.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5a6B6Z2ZX-iHtOi_nF8=,size_20,color_FFFFFF,t_70,g_se,x_16" width="1200"></p>
<h3 id="5.2.2%E8%B6%85%E9%93%BE%E6%8E%A5%E8%B7%AF%E5%BE%84" style="margin-left: 0.0001pt; text-align: justify">5.2.2超链接路径</h3>
<p style="margin-left: 0.0001pt; text-align: justify"><img alt="" height="1200" src="https://img-blog.csdnimg.cn/5218af55aa8e449e9c75df7b918e4947.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5a6B6Z2ZX-iHtOi_nF8=,size_20,color_FFFFFF,t_70,g_se,x_16" width="1200"></p>
<h3 id="5.2.3%E8%B6%85%E9%93%BE%E6%8E%A5%E5%88%86%E7%B1%BB" style="margin-left: 0.0001pt; text-align: justify">5.2.3超链接分类</h3>
<p style="margin-left: 0.0001pt; text-align: justify">内部链接：网站内部文件之间的链接。将URL设置为相对路径则为内部链接</p>
<p style="margin-left: 0.0001pt; text-align: justify">外部链接：网站内的文件链接到站点内容外的文件。将URL设置为绝对路径则为外部链接</p>
<p style="margin-left: 0.0001pt; text-align: justify"></p>
<h2 id="5.3%E8%B6%85%E9%93%BE%E6%8E%A5%E7%9A%84%E5%BA%94%E7%94%A8" style="margin-left: 0.0001pt; text-align: justify">5.3超链接的应用</h2>
<h3 id="5.3.1%E5%88%9B%E5%BB%BAHTTP%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD%E8%B6%85%E9%93%BE%E6%8E%A5" style="margin-left: 0.0001pt; text-align: justify">5.3.1创建HTTP文件下载超链接</h3>
<p style="margin-left: 0.0001pt; text-align: justify">&lt;a href=”url”&gt;链接内容&lt;/a&gt;</p>
<p style="margin-left: 0.0001pt; text-align: justify">url指向要下载文件所在的相对路径或绝对路径</p>
<h3 id="5.3.2%E5%88%9B%E5%BB%BAFTP%E7%AB%99%E7%82%B9%E8%AE%BF%E9%97%AE%E8%B6%85%E9%93%BE%E6%8E%A5" style="margin-left: 0.0001pt; text-align: justify">5.3.2创建FTP站点访问超链接</h3>
<p style="margin-left: 0.0001pt; text-align: justify"><img alt="" height="190" src="https://img-blog.csdnimg.cn/30b70c72f96541019db1490b5c34aaab.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5a6B6Z2ZX-iHtOi_nF8=,size_20,color_FFFFFF,t_70,g_se,x_16" width="1200"></p>
<h3 id="5.3.3%E5%88%9B%E5%BB%BA%E5%9B%BE%E5%83%8F%E8%B6%85%E9%93%BE%E6%8E%A5" style="margin-left: 0.0001pt; text-align: justify">5.3.3创建图像超链接</h3>
<p style="margin-left: 0.0001pt; text-align: justify"><img alt="" height="207" src="https://img-blog.csdnimg.cn/2b053ba6cf0444e894c773dd393a988d.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5a6B6Z2ZX-iHtOi_nF8=,size_20,color_FFFFFF,t_70,g_se,x_16" width="1200"></p>
<h3 id="5.3.4%E5%88%9B%E5%BB%BA%E7%94%B5%E5%AD%90%E9%82%AE%E4%BB%B6%E8%B6%85%E9%93%BE%E6%8E%A5" style="margin-left: 0.0001pt; text-align: justify">5.3.4创建电子邮件超链接</h3>
<p style="margin-left: 0.0001pt; text-align: justify"><img alt="" height="401" src="https://img-blog.csdnimg.cn/6dd7af67e43543fe868de6eca87a36f6.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5a6B6Z2ZX-iHtOi_nF8=,size_20,color_FFFFFF,t_70,g_se,x_16" width="1200"></p>
<h3 id="5.3.5%E5%88%9B%E5%BB%BA%E9%A1%B5%E9%9D%A2%E4%B9%A6%E7%AD%BE%E9%93%BE%E6%8E%A5" style="margin-left: 0.0001pt; text-align: justify">5.3.5创建页面书签链接</h3>
<p style="margin-left: 0.0001pt; text-align: justify"><img alt="" height="809" src="https://img-blog.csdnimg.cn/f6214b03205f4fb4849fc3c4b3ad9ee9.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5a6B6Z2ZX-iHtOi_nF8=,size_20,color_FFFFFF,t_70,g_se,x_16" width="1200"></p>
<p style="margin-left: 0.0001pt; text-align: justify"></p>
<h2 id="5.4%E6%B5%AE%E5%8A%A8%E6%A1%86%E6%9E%B6" style="margin-left: 0.0001pt; text-align: justify">5.4浮动框架</h2>
<p style="margin-left: 0.0001pt; text-align: justify"><img alt="" height="325" src="https://img-blog.csdnimg.cn/20d20490f3804d73a30fb64983eec92f.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5a6B6Z2ZX-iHtOi_nF8=,size_20,color_FFFFFF,t_70,g_se,x_16" width="1200"></p>
<p style="margin-left: 0.0001pt; text-align: justify"><img alt="" height="329" src="https://img-blog.csdnimg.cn/5d8a74e37fa145d5915937dfcc284c8e.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5a6B6Z2ZX-iHtOi_nF8=,size_20,color_FFFFFF,t_70,g_se,x_16" width="1200"></p>
</div>
<p></p>
<div>
<p style="margin-left: 0.0001pt; text-align: justify"></p>
<h1 id="%E7%AC%AC6%E7%AB%A0%20%E5%9B%BE%E5%83%8F%E4%B8%8E%E5%A4%9A%E5%AA%92%E4%BD%93%E6%96%87%E4%BB%B6" style="margin-left: 0.0001pt; text-align: center">第6章 图像与多媒体文件</h1>
<h2 id="6.1%E5%9B%BE%E5%83%8F" style="margin-left: 0.0001pt; text-align: justify">6.1图像</h2>
<h3 id="6.1.1%E6%8F%92%E5%85%A5%E5%9B%BE%E5%83%8F" style="margin-left: 0.0001pt; text-align: justify">6.1.1插入图像</h3>
<p style="margin-left: 0.0001pt; text-align: justify">&lt;img src=”URL” alt=”替代文本”&gt;</p>
<p style="margin-left: 0.0001pt; text-align: justify"><img alt="" height="557" src="https://img-blog.csdnimg.cn/fc9d1a54304e4111af30723089b94b4d.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5a6B6Z2ZX-iHtOi_nF8=,size_20,color_FFFFFF,t_70,g_se,x_16" width="1200"></p>
<h3 id="6.1.3%E8%AE%BE%E7%BD%AE%E5%9B%BE%E5%83%8F%E7%9A%84%E9%AB%98%E5%BA%A6%E5%92%8C%E5%AE%BD%E5%BA%A6" style="margin-left: 0.0001pt; text-align: justify">6.1.3设置图像的高度和宽度</h3>
<p style="margin-left: 0.0001pt; text-align: justify">如不设置图像的宽度和高度，图像的大小和原图一样</p>
<p style="margin-left: 0.0001pt; text-align: justify">&lt;img src=”URL” width=”value” height=”value”&gt;</p>
<p style="margin-left: 0.0001pt; text-align: justify">单位可以是像素也可以是百分比</p>
<h3 id="6.1.4%E8%AE%BE%E7%BD%AE%E5%9B%BE%E5%83%8F%E7%9A%84%E8%BE%B9%E6%A1%86" style="margin-left: 0.0001pt; text-align: justify">6.1.4设置图像的边框</h3>
<p style="margin-left: 0.0001pt; text-align: justify">&lt;img src=”URL” border=”value” &gt;</p>
<p style="margin-left: 0.0001pt; text-align: justify">Value为边框的宽度，用数字表示，单位为像素</p>
<h3 id="6.1.5%E8%AE%BE%E7%BD%AE%E5%9B%BE%E5%83%8F%E5%AF%B9%E9%BD%90%E6%96%B9%E5%BC%8F" style="margin-left: 0.0001pt; text-align: justify">6.1.5设置图像对齐方式</h3>
<p style="margin-left: 0.0001pt; text-align: justify"><img alt="" height="744" src="https://img-blog.csdnimg.cn/88dfac10299b4021be7e723735386b28.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5a6B6Z2ZX-iHtOi_nF8=,size_20,color_FFFFFF,t_70,g_se,x_16" width="1200"></p>
<h3 id="6.1.6%E8%AE%BE%E7%BD%AE%E5%9B%BE%E5%83%8F%E7%9A%84%E9%97%B4%E8%B7%9D" style="margin-left: 0.0001pt; text-align: justify">6.1.6设置图像的间距</h3>
<p style="margin-left: 0.0001pt; text-align: justify"><img alt="" height="326" src="https://img-blog.csdnimg.cn/781b78fa54f041e392422f25dff64774.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5a6B6Z2ZX-iHtOi_nF8=,size_20,color_FFFFFF,t_70,g_se,x_16" width="1200"></p>
<h3 id="6.1.7%E8%AE%BE%E7%BD%AE%E5%9B%BE%E5%83%8F%E7%83%AD%E5%8C%BA%E9%93%BE%E6%8E%A5" style="margin-left: 0.0001pt; text-align: justify">6.1.7设置图像热区链接</h3>
<p style="margin-left: 0.0001pt; text-align: justify"><img alt="" height="418" src="https://img-blog.csdnimg.cn/b151bf1f422b45f4b16aa8332f2d72f6.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5a6B6Z2ZX-iHtOi_nF8=,size_20,color_FFFFFF,t_70,g_se,x_16" width="1200"></p>
<p style="margin-left: 0.0001pt; text-align: justify"><img alt="" height="264" src="https://img-blog.csdnimg.cn/a08c4375db5a4ac6a93ad8a23f39faf1.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5a6B6Z2ZX-iHtOi_nF8=,size_20,color_FFFFFF,t_70,g_se,x_16" width="1200"></p>
<p style="margin-left: 0.0001pt; text-align: justify"></p>
<h2 id="6.2%E6%BB%9A%E5%8A%A8%E6%96%87%E5%AD%97" style="margin-left: 0.0001pt; text-align: justify">6.2滚动文字</h2>
<h3 id="6.2.1%E6%B7%BB%E5%8A%A0%E6%BB%9A%E5%8A%A8%E6%96%87%E5%AD%97" style="margin-left: 0.0001pt; text-align: justify">6.2.1添加滚动文字</h3>
<h3 id="%E2%80%8B6.2.2%E8%AE%BE%E7%BD%AE%E6%BB%9A%E5%8A%A8%E6%96%87%E5%AD%97%E8%83%8C%E6%99%AF%E9%A2%9C%E8%89%B2%E4%B8%8E%E6%BB%9A%E5%8A%A8%E5%BE%AA%E7%8E%AF" style="margin-left: 0.0001pt; text-align: justify"><img alt="" height="215" src="https://img-blog.csdnimg.cn/1c7afec239e44be0916a96fbf18a4fba.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5a6B6Z2ZX-iHtOi_nF8=,size_20,color_FFFFFF,t_70,g_se,x_16" width="1200">6.2.2设置滚动文字背景颜色与滚动循环</h3>
<p style="margin-left: 0.0001pt; text-align: justify"><img alt="" height="332" src="https://img-blog.csdnimg.cn/63e32d10d2a94d19b4e721cecc7ea10f.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5a6B6Z2ZX-iHtOi_nF8=,size_20,color_FFFFFF,t_70,g_se,x_16" width="1200"></p>
<h3 id="6.2.3%E8%AE%BE%E7%BD%AE%E6%BB%9A%E5%8A%A8%E6%96%B9%E5%90%91%E4%B8%8E%E6%BB%9A%E5%8A%A8%E6%96%B9%E5%BC%8F" style="margin-left: 0.0001pt; text-align: justify">6.2.3设置滚动方向与滚动方式</h3>
<p style="margin-left: 0.0001pt; text-align: justify">&lt;marquee direction=”滚动方向” behavior=”滚动方式”&gt;滚动内容&lt;/marquee&gt;</p>
<p style="margin-left: 0.0001pt; text-align: justify"><img alt="" height="545" src="https://img-blog.csdnimg.cn/b8d50f39ffbe4be897053398cd6ca170.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5a6B6Z2ZX-iHtOi_nF8=,size_20,color_FFFFFF,t_70,g_se,x_16" width="1200"></p>
<h3 id="6.2.4%E8%AE%BE%E7%BD%AE%E6%BB%9A%E5%8A%A8%E9%80%9F%E5%BA%A6%E4%B8%8E%E6%BB%9A%E5%8A%A8%E5%BB%B6%E8%BF%9F" style="margin-left: 0.0001pt; text-align: justify">6.2.4设置滚动速度与滚动延迟</h3>
<p style="margin-left: 0.0001pt; text-align: justify"><img alt="" height="383" src="https://img-blog.csdnimg.cn/c5362d2127f24c5ba854c928a9f8a7d7.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5a6B6Z2ZX-iHtOi_nF8=,size_20,color_FFFFFF,t_70,g_se,x_16" width="1200"></p>
<h3 id="6.2.5%E8%AE%BE%E7%BD%AE%E6%BB%9A%E5%8A%A8%E8%8C%83%E5%9B%B4%E4%B8%8E%E6%BB%9A%E5%8A%A8%E7%A9%BA%E7%99%BD%E7%A9%BA%E9%97%B4" style="margin-left: 0.0001pt; text-align: justify">6.2.5设置滚动范围与滚动空白空间</h3>
<p style="margin-left: 0.0001pt; text-align: justify"><img alt="" height="315" src="https://img-blog.csdnimg.cn/fbf2ac62640f4fa782fdc0a27ee504b2.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5a6B6Z2ZX-iHtOi_nF8=,size_20,color_FFFFFF,t_70,g_se,x_16" width="1200"></p>
<p style="margin-left: 0.0001pt; text-align: justify"></p>
<h2 id="6.3%E9%9F%B3%E9%A2%91%E3%80%81%E8%A7%86%E9%A2%91%E5%8F%8AFlash%E6%96%87%E4%BB%B6" style="margin-left: 0.0001pt; text-align: justify">6.3音频、视频及Flash文件</h2>
<p style="margin-left: 0.0001pt; text-align: justify"><img alt="" height="424" src="https://img-blog.csdnimg.cn/ef374b69bf454272999cbc88d198f29d.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5a6B6Z2ZX-iHtOi_nF8=,size_20,color_FFFFFF,t_70,g_se,x_16" width="1200"></p>
<p style="margin-left: 0.0001pt; text-align: justify"><img alt="" height="190" src="https://img-blog.csdnimg.cn/9b4901c1c83040d797bf7d676bc7dd28.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5a6B6Z2ZX-iHtOi_nF8=,size_20,color_FFFFFF,t_70,g_se,x_16" width="1200"></p>
</div>
<p></p>
<div>
<h1 id="%E7%AC%AC7%E7%AB%A0%20CSS%E5%9F%BA%E7%A1%80" style="margin-left: 0.0001pt; text-align: center">第7章 CSS基础</h1>
<h2 id="7.1%20CSS%E6%A6%82%E5%BF%B5" style="margin-left: 0.0001pt; text-align: justify">7.1 CSS概念</h2>
<h3 id="7.1.5%20CSS%E7%9A%84%E7%BC%96%E8%BE%91%E6%96%B9%E6%B3%95" style="margin-left: 0.0001pt; text-align: justify">7.1.5 CSS的编辑方法</h3>
<p style="margin-left: 0.0001pt; text-align: justify">1、HTML里面的CSS规则</p>
<p style="margin-left: 0.0001pt; text-align: justify">（1）写在body中某个标记的属性部分</p>
<p style="margin-left: 0.0001pt; text-align: justify">（2）写在head标记里面</p>
<p style="margin-left: 0.0001pt; text-align: justify">2、写在单独的文件中，该文件称为CSS文件，文件名后缀为.css</p>
<p style="margin-left: 0.0001pt; text-align: justify"></p>
<h2 id="7.2%E4%BD%BF%E7%94%A8CSS%E6%8E%A7%E5%88%B6Web%E9%A1%B5%E9%9D%A2" style="margin-left: 0.0001pt; text-align: justify">7.2使用CSS控制Web页面</h2>
<p style="margin-left: 0.0001pt; text-align: justify"><img alt="" height="951" src="https://img-blog.csdnimg.cn/8b2c331b44bf4350adf1edb2d97f82f8.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5a6B6Z2ZX-iHtOi_nF8=,size_20,color_FFFFFF,t_70,g_se,x_16" width="1200"></p>
<p style="margin-left: 0.0001pt; text-align: justify"><img alt="" height="1200" src="https://img-blog.csdnimg.cn/c71c3f10dd8843c9907440df049c379f.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5a6B6Z2ZX-iHtOi_nF8=,size_20,color_FFFFFF,t_70,g_se,x_16" width="1200"></p>
<h3 id="7.2.2%20CSS%E9%80%89%E6%8B%A9%E5%99%A8%E7%B1%BB%E5%9E%8B" style="margin-left: 0.0001pt; text-align: justify">7.2.2 CSS选择器类型</h3>
<p style="margin-left: 0.0001pt; text-align: justify">1、标记选择器（元素选择器）：直接使用HTML标记名称作为选择器</p>
<p style="margin-left: 0.0001pt; text-align: justify">2、类选择器</p>
<p style="margin-left: 0.0001pt; text-align: justify"><img alt="" height="716" src="https://img-blog.csdnimg.cn/1cac289ed9204507b498ded90ed27e14.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5a6B6Z2ZX-iHtOi_nF8=,size_20,color_FFFFFF,t_70,g_se,x_16" width="1200"></p>
<p style="margin-left: 0.0001pt; text-align: justify">3、id选择器</p>
<p style="margin-left: 0.0001pt; text-align: justify"><img alt="" height="375" src="https://img-blog.csdnimg.cn/0623897d79df42d2b43f35324d681c14.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5a6B6Z2ZX-iHtOi_nF8=,size_20,color_FFFFFF,t_70,g_se,x_16" width="1200"></p>
<p style="margin-left: 0.0001pt; text-align: justify">4、伪类选择器</p>
<p style="margin-left: 0.0001pt; text-align: justify"><img alt="" height="648" src="https://img-blog.csdnimg.cn/a1c1f3dee2894c66bad0a35170fb280f.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5a6B6Z2ZX-iHtOi_nF8=,size_20,color_FFFFFF,t_70,g_se,x_16" width="1200"></p>
<p style="margin-left: 0.0001pt; text-align: justify"><img alt="" height="244" src="https://img-blog.csdnimg.cn/900313b79e00423289bdcfe870bf2abb.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5a6B6Z2ZX-iHtOi_nF8=,size_20,color_FFFFFF,t_70,g_se,x_16" width="1200"></p>
<p style="margin-left: 0.0001pt; text-align: justify">5、CSS属性选择器</p>
<p style="margin-left: 0.0001pt; text-align: justify"><img alt="" height="1200" src="https://img-blog.csdnimg.cn/72266daa3c3940bea69b9ad6843202f2.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5a6B6Z2ZX-iHtOi_nF8=,size_20,color_FFFFFF,t_70,g_se,x_16" width="1200"></p>
<h3 id="7.2.3%20CSS%E9%80%89%E6%8B%A9%E5%99%A8%E5%A3%B0%E6%98%8E" style="margin-left: 0.0001pt; text-align: justify">7.2.3 CSS选择器声明</h3>
<p style="margin-left: 0.0001pt; text-align: justify"><img alt="" height="363" src="https://img-blog.csdnimg.cn/41957dec5d4a4e81925cc8b7913e233a.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5a6B6Z2ZX-iHtOi_nF8=,size_20,color_FFFFFF,t_70,g_se,x_16" width="1200"></p>
<p style="margin-left: 0.0001pt; text-align: justify"><img alt="" height="855" src="https://img-blog.csdnimg.cn/c53ed3c2756b482f88239d2edd1e6265.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5a6B6Z2ZX-iHtOi_nF8=,size_20,color_FFFFFF,t_70,g_se,x_16" width="1200"></p>
<h3 id="7.2.4%20CSS%E5%AE%9A%E4%B9%89%E4%B8%8E%E5%BC%95%E7%94%A8" style="margin-left: 0.0001pt; text-align: justify">7.2.4 CSS定义与引用</h3>
<p style="margin-left: 0.0001pt; text-align: justify">1、内联样式表（行内样式表）</p>
<p style="margin-left: 0.0001pt; text-align: justify"><img alt="" height="429" src="https://img-blog.csdnimg.cn/e86550d0feeb43a99edffa2a903eddca.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5a6B6Z2ZX-iHtOi_nF8=,size_20,color_FFFFFF,t_70,g_se,x_16" width="1200"></p>
<p style="margin-left: 0.0001pt; text-align: justify">2、内部样式表</p>
<p style="margin-left: 0.0001pt; text-align: justify"><img alt="" height="585" src="https://img-blog.csdnimg.cn/06408e9de1be4fcb885c7cbc5912fbbb.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5a6B6Z2ZX-iHtOi_nF8=,size_20,color_FFFFFF,t_70,g_se,x_16" width="1200"></p>
<p style="margin-left: 0.0001pt; text-align: justify">3、外部样式表</p>
<p style="margin-left: 0.0001pt; text-align: justify"><img alt="" height="554" src="https://img-blog.csdnimg.cn/d301556c479b4051a546ef129a4d0d2f.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5a6B6Z2ZX-iHtOi_nF8=,size_20,color_FFFFFF,t_70,g_se,x_16" width="1200"></p>
<p style="margin-left: 0.0001pt; text-align: justify"><img alt="" height="254" src="https://img-blog.csdnimg.cn/1611e5bfa5bd40f1944f2be1636c1302.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5a6B6Z2ZX-iHtOi_nF8=,size_20,color_FFFFFF,t_70,g_se,x_16" width="1200"></p>
<p style="margin-left: 0.0001pt; text-align: justify"><img alt="" height="676" src="https://img-blog.csdnimg.cn/41cd3eeebaed40d48081d8521bfb94dd.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5a6B6Z2ZX-iHtOi_nF8=,size_20,color_FFFFFF,t_70,g_se,x_16" width="1200"></p>
<p style="margin-left: 0.0001pt; text-align: justify"></p>
<h2 id="7.3%20CSS%E7%BB%A7%E6%89%BF%E4%B8%8E%E5%B1%82%E5%8F%A0" style="margin-left: 0.0001pt; text-align: justify">7.3 CSS继承与层叠</h2>
<p style="margin-left: 0.0001pt; text-align: justify">1、CSS继承：子标记会继承父标记的所有样式风格，并且可以在父标记样式风格的基础上再加以修改，产生新的样式，而子标记的样式风格不会影响父标记。但并不是所有属性都会自动传给子元素</p>
<p style="margin-left: 0.0001pt; text-align: justify">2、CSS层叠：即对同一内容设置了多个不同类型样式产生冲突时的处理，CSS规定如下优先级：行内样式&gt;id样式&gt;class样式&gt;标记样式</p>
</div>
<p></p>
<div>
<h1 id="%E7%AC%AC8%E7%AB%A0%20DIV%E4%B8%8ESPAN" style="margin-left: 0.0001pt; text-align: center">第8章 DIV与SPAN</h1>
<h2 id="8.1%20DIV%E5%9B%BE%E5%B1%82" style="margin-left: 0.0001pt; text-align: justify">8.1 DIV图层</h2>
<p style="margin-left: 0.0001pt; text-align: justify">DIV是分区或分节的意思</p>
<p style="margin-left: 0.0001pt; text-align: justify"><img alt="" height="544" src="https://img-blog.csdnimg.cn/d65aef9e31504652ba34102f433a2f4d.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5a6B6Z2ZX-iHtOi_nF8=,size_20,color_FFFFFF,t_70,g_se,x_16" width="1200"></p>
<p style="margin-left: 0.0001pt; text-align: justify"><img alt="" height="888" src="https://img-blog.csdnimg.cn/07f8d432c18147aeb98ba472627d3d30.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5a6B6Z2ZX-iHtOi_nF8=,size_20,color_FFFFFF,t_70,g_se,x_16" width="1200"></p>
<p style="margin-left: 0.0001pt; text-align: justify"></p>
<h2 id="8.2%E5%9B%BE%E5%B1%82%E5%B5%8C%E5%A5%97%E4%B8%8E%E5%B1%82%E5%8F%A0" style="margin-left: 0.0001pt; text-align: justify">8.2图层嵌套与层叠</h2>
<h3 id="8.2.1%20DIV%E5%B5%8C%E5%A5%97" style="margin-left: 0.0001pt; text-align: justify">8.2.1 DIV嵌套</h3>
<p style="margin-left: 0.0001pt; text-align: justify">即图层在同一水平上有重叠的地方</p>
<h3 id="8.2.2%20DIV%E5%B1%82%E5%8F%A0" style="margin-left: 0.0001pt; text-align: justify">8.2.2 DIV层叠</h3>
<p style="margin-left: 0.0001pt; text-align: justify">即图层不在同一水平面上的“层叠”</p>
<p style="margin-left: 0.0001pt; text-align: justify">首先要将position属性设置为absolute，然后利用z-index属性控制层叠关系</p>
<h3 id="8.3%20div%E6%A0%87%E8%AE%B0%E4%B8%8Espan%E6%A0%87%E8%AE%B0" style="margin-left: 0.0001pt; text-align: justify">8.3 div标记与span标记</h3>
<p style="margin-left: 0.0001pt; text-align: justify">1、span标记的使用</p>
<p style="margin-left: 0.0001pt; text-align: justify"><img alt="" height="258" src="https://img-blog.csdnimg.cn/9d6e78af0b5c48b894a713991be906f8.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5a6B6Z2ZX-iHtOi_nF8=,size_20,color_FFFFFF,t_70,g_se,x_16" width="1200"></p>
<p style="margin-left: 0.0001pt; text-align: justify">2、div与span标记的区别</p>
<p style="margin-left: 0.0001pt; text-align: justify"><img alt="" height="591" src="https://img-blog.csdnimg.cn/c61d81ac985b46db87cdd93dec6d9b8e.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5a6B6Z2ZX-iHtOi_nF8=,size_20,color_FFFFFF,t_70,g_se,x_16" width="1200"></p>
</div>
<p></p>
<div>
<h1 id="%E7%AC%AC9%E7%AB%A0%20CSS%E6%A0%B7%E5%BC%8F%E5%B1%9E%E6%80%A7" style="margin-left: 0.0001pt; text-align: center">第9章 CSS样式属性</h1>
<h2 id="9.1%20CSS%E5%B1%9E%E6%80%A7%E5%80%BC%E4%B8%AD%E7%9A%84%E5%8D%95%E4%BD%8D" style="margin-left: 0.0001pt; text-align: justify">9.1 CSS属性值中的单位</h2>
<h3 id="9.1.1%E7%BB%9D%E5%AF%B9%E5%8D%95%E4%BD%8D" style="margin-left: 0.0001pt; text-align: justify">9.1.1绝对单位</h3>
<p style="margin-left: 0.0001pt; text-align: justify">包括英寸、厘米、毫米、磅和pica（皮卡）</p>
<h3 id="9.1.2%E7%9B%B8%E5%AF%B9%E5%8D%95%E4%BD%8D" style="margin-left: 0.0001pt; text-align: justify">9.1.2相对单位</h3>
<p style="margin-left: 0.0001pt; text-align: justify">包括em、ex、px、%</p>
<p style="margin-left: 0.0001pt; text-align: justify"></p>
<h2 id="9.2%20CSS%E5%AD%97%E4%BD%93%E6%A0%B7%E5%BC%8F" style="margin-left: 0.0001pt; text-align: justify">9.2 CSS字体样式</h2>
<h3 id="9.2.1%E5%AD%97%E4%BD%93%E5%A4%A7%E5%B0%8Ffont-size%E5%B1%9E%E6%80%A7" style="margin-left: 0.0001pt; text-align: justify">9.2.1字体大小font-size属性</h3>
<p style="margin-left: 0.0001pt; text-align: justify"><img alt="" height="483" src="https://img-blog.csdnimg.cn/04ed096cbb1a40298c97825e18dd7c72.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5a6B6Z2ZX-iHtOi_nF8=,size_20,color_FFFFFF,t_70,g_se,x_16" width="1200"></p>
<h3 id="9.2.2%E5%AD%97%E4%BD%93%E6%A0%B7%E5%BC%8Ffont-style%E5%B1%9E%E6%80%A7" style="margin-left: 0.0001pt; text-align: justify">9.2.2字体样式font-style属性</h3>
<p style="margin-left: 0.0001pt; text-align: justify"><img alt="" height="594" src="https://img-blog.csdnimg.cn/31bf5dbb86e543e88cf0a1d746056277.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5a6B6Z2ZX-iHtOi_nF8=,size_20,color_FFFFFF,t_70,g_se,x_16" width="1200"></p>
<h3 id="9.2.3%E5%AD%97%E4%BD%93%E7%B3%BB%E5%88%97font-family%E5%B1%9E%E6%80%A7" style="margin-left: 0.0001pt; text-align: justify">9.2.3字体系列font-family属性</h3>
<p style="margin-left: 0.0001pt; text-align: justify"><img alt="" height="358" src="https://img-blog.csdnimg.cn/0459d2a93c8d4bca8764de622e73ba80.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5a6B6Z2ZX-iHtOi_nF8=,size_20,color_FFFFFF,t_70,g_se,x_16" width="1200"></p>
<h3 id="9.2.4%E5%AD%97%E4%BD%93%E5%8F%98%E4%BD%93font-variant%E5%B1%9E%E6%80%A7" style="margin-left: 0.0001pt; text-align: justify">9.2.4字体变体font-variant属性</h3>
<p style="margin-left: 0.0001pt; text-align: justify"><img alt="" height="223" src="https://img-blog.csdnimg.cn/e8c2f0e573c34f05aae5ad2fe0208c1e.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5a6B6Z2ZX-iHtOi_nF8=,size_20,color_FFFFFF,t_70,g_se,x_16" width="431"></p>
<h3 id="9.2.5%E5%AD%97%E4%BD%93%E7%B2%97%E7%BB%86font-weight%E5%B1%9E%E6%80%A7" style="margin-left: 0.0001pt; text-align: justify">9.2.5字体粗细font-weight属性</h3>
<p style="margin-left: 0.0001pt; text-align: justify"><img alt="" height="609" src="https://img-blog.csdnimg.cn/b5ceacaa83c94181b94368ee9def1aa9.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5a6B6Z2ZX-iHtOi_nF8=,size_20,color_FFFFFF,t_70,g_se,x_16" width="1200"></p>
<h3 id="9.2.6%E5%AD%97%E4%BD%93font%E5%B1%9E%E6%80%A7" style="margin-left: 0.0001pt; text-align: justify">9.2.6字体font属性</h3>
<p style="margin-left: 0.0001pt; text-align: justify"><img alt="" height="452" src="https://img-blog.csdnimg.cn/3e0bc21222ff4a8195b7b6578ca01aaf.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5a6B6Z2ZX-iHtOi_nF8=,size_20,color_FFFFFF,t_70,g_se,x_16" width="1200"></p>
<p style="margin-left: 0.0001pt; text-align: justify"></p>
<h2 id="9.3%20CSS%E6%96%87%E6%9C%AC%E6%A0%B7%E5%BC%8F" style="margin-left: 0.0001pt; text-align: justify">9.3 CSS文本样式</h2>
<h3 id="9.3.1%E5%AD%97%E7%AC%A6%E9%97%B4%E8%B7%9Dletter-spacing%E5%B1%9E%E6%80%A7" style="margin-left: 0.0001pt; text-align: justify">9.3.1字符间距letter-spacing属性</h3>
<p style="margin-left: 0.0001pt; text-align: justify"><img alt="" height="351" src="https://img-blog.csdnimg.cn/919c0a0da41c4208a68def37cc7a07d7.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5a6B6Z2ZX-iHtOi_nF8=,size_20,color_FFFFFF,t_70,g_se,x_16" width="1200"></p>
<h3 id="9.3.2%E8%A1%8C%E8%B7%9Dline-height%E5%B1%9E%E6%80%A7" style="margin-left: 0.0001pt; text-align: justify">9.3.2行距line-height属性</h3>
<p style="margin-left: 0.0001pt; text-align: justify"><img alt="" height="300" src="https://img-blog.csdnimg.cn/0f89aeaee5dd46499f5c08b9cc9f3b62.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5a6B6Z2ZX-iHtOi_nF8=,size_20,color_FFFFFF,t_70,g_se,x_16" width="1200"></p>
<h3 id="9.3.3%E9%A6%96%E8%A1%8C%E7%BC%A9%E8%BF%9Btext-indent%E5%B1%9E%E6%80%A7" style="margin-left: 0.0001pt; text-align: justify">9.3.3首行缩进text-indent属性</h3>
<p style="margin-left: 0.0001pt; text-align: justify"><img alt="" height="342" src="https://img-blog.csdnimg.cn/07485384b2cc41068614e3afaa362928.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5a6B6Z2ZX-iHtOi_nF8=,size_20,color_FFFFFF,t_70,g_se,x_16" width="1200"></p>
<h3 id="9.3.4%E5%AD%97%E7%AC%A6%E8%A3%85%E9%A5%B0text-decoration%E5%B1%9E%E6%80%A7" style="margin-left: 0.0001pt; text-align: justify">9.3.4字符装饰text-decoration属性</h3>
<p style="margin-left: 0.0001pt; text-align: justify"><img alt="" height="284" src="https://img-blog.csdnimg.cn/46441c84111d434cbafb43f4c1f54050.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5a6B6Z2ZX-iHtOi_nF8=,size_20,color_FFFFFF,t_70,g_se,x_16" width="1200"></p>
<h3 id="9.3.5%E8%8B%B1%E6%96%87%E5%A4%A7%E5%B0%8F%E5%86%99%E8%BD%AC%E6%8D%A2text-transform%E5%B1%9E%E6%80%A7" style="margin-left: 0.0001pt; text-align: justify">9.3.5英文大小写转换text-transform属性</h3>
<p style="margin-left: 0.0001pt; text-align: justify"><img alt="" height="191" src="https://img-blog.csdnimg.cn/eeebcf6c681c4416bbc71c7d7184d656.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5a6B6Z2ZX-iHtOi_nF8=,size_20,color_FFFFFF,t_70,g_se,x_16" width="555"></p>
<h3 id="9.3.6%E6%B0%B4%E5%B9%B3%E5%AF%B9%E9%BD%90text-align%E5%B1%9E%E6%80%A7" style="margin-left: 0.0001pt; text-align: justify">9.3.6水平对齐text-align属性</h3>
<p style="margin-left: 0.0001pt; text-align: justify"><img alt="" height="271" src="https://img-blog.csdnimg.cn/17e0ad5a3c114f818cf223e394c757aa.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5a6B6Z2ZX-iHtOi_nF8=,size_20,color_FFFFFF,t_70,g_se,x_16" width="1200"></p>
<h3 id="9.3.7%E5%9E%82%E7%9B%B4%E5%AF%B9%E9%BD%90vertical-align%E5%B1%9E%E6%80%A7" style="margin-left: 0.0001pt; text-align: justify">9.3.7垂直对齐vertical-align属性</h3>
<p style="margin-left: 0.0001pt; text-align: justify"><img alt="" height="640" src="https://img-blog.csdnimg.cn/e867a3efe13248faa985aedc0289d04f.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5a6B6Z2ZX-iHtOi_nF8=,size_20,color_FFFFFF,t_70,g_se,x_16" width="1200"></p>
<p style="margin-left: 0.0001pt; text-align: justify"></p>
<h2 id="9.4%20CSS%E9%A2%9C%E8%89%B2%E4%B8%8E%E8%83%8C%E6%99%AF" style="margin-left: 0.0001pt; text-align: justify">9.4 CSS颜色与背景</h2>
<h3 id="9.4.1%E9%A2%9C%E8%89%B2color%E5%B1%9E%E6%80%A7" style="margin-left: 0.0001pt; text-align: justify">9.4.1颜色color属性</h3>
<p style="margin-left: 0.0001pt; text-align: justify"><img alt="" height="178" src="https://img-blog.csdnimg.cn/ad59484abe534822b48ec817ee17c674.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5a6B6Z2ZX-iHtOi_nF8=,size_20,color_FFFFFF,t_70,g_se,x_16" width="1200"></p>
<p style="margin-left: 0.0001pt; text-align: justify"><img alt="" height="348" src="https://img-blog.csdnimg.cn/7f2d7e166c9440a1ab5e804111f9ae7b.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5a6B6Z2ZX-iHtOi_nF8=,size_20,color_FFFFFF,t_70,g_se,x_16" width="1200"></p>
<p style="margin-left: 0.0001pt; text-align: justify"><img alt="" height="353" src="https://img-blog.csdnimg.cn/0d5109ab6b2c4de8b013ea9adc54b009.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5a6B6Z2ZX-iHtOi_nF8=,size_20,color_FFFFFF,t_70,g_se,x_16" width="1200"></p>
<p style="margin-left: 0.0001pt; text-align: justify"></p>
<h3 id="9.4.2%E8%83%8C%E6%99%AFbackground%E5%B1%9E%E6%80%A7" style="margin-left: 0.0001pt; text-align: justify">9.4.2背景background属性</h3>
<p style="margin-left: 0.0001pt; text-align: justify">1、背景颜色background-color属性</p>
<p style="margin-left: 0.0001pt; text-align: justify">语法和上面的颜色color属性相同</p>
<p style="margin-left: 0.0001pt; text-align: justify">2、背景图像background-image属性</p>
<p style="margin-left: 0.0001pt; text-align: justify"><img alt="" height="277" src="https://img-blog.csdnimg.cn/32543eb0e8b448b8a8a91487b5ac9d64.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5a6B6Z2ZX-iHtOi_nF8=,size_20,color_FFFFFF,t_70,g_se,x_16" width="1200"></p>
<p style="margin-left: 0.0001pt; text-align: justify">3、背景图像重复background-repeat属性</p>
<p style="margin-left: 0.0001pt; text-align: justify"><img alt="" height="215" src="https://img-blog.csdnimg.cn/7a51dd80f2c84732982ffbc74e47561c.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5a6B6Z2ZX-iHtOi_nF8=,size_20,color_FFFFFF,t_70,g_se,x_16" width="544"></p>
<p style="margin-left: 0.0001pt; text-align: justify">4、背景附件background-attachment属性</p>
<p style="margin-left: 0.0001pt; text-align: justify"><img alt="" height="152" src="https://img-blog.csdnimg.cn/644e54d01d084cf187fdac05a9e80c6c.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5a6B6Z2ZX-iHtOi_nF8=,size_20,color_FFFFFF,t_70,g_se,x_16" width="606"></p>
<p style="margin-left: 0.0001pt; text-align: justify">fixed：表示在文字页面滚动时，背景附件固定不滚动</p>
<p style="margin-left: 0.0001pt; text-align: justify">5、背景图像位置background-position属性</p>
<p style="margin-left: 0.0001pt; text-align: justify"><img alt="" height="756" src="https://img-blog.csdnimg.cn/354dbd4632af42fc9630ae8ccdc06060.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5a6B6Z2ZX-iHtOi_nF8=,size_20,color_FFFFFF,t_70,g_se,x_16" width="1200"></p>
<p style="margin-left: 0.0001pt; text-align: justify"></p>
<p style="margin-left: 0.0001pt; text-align: justify"><strong>6、background复合属性</strong></p>
<p style="margin-left: 0.0001pt; text-align: justify"><img alt="" height="358" src="https://img-blog.csdnimg.cn/1462296c604048909091ceed8b01a902.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5a6B6Z2ZX-iHtOi_nF8=,size_20,color_FFFFFF,t_70,g_se,x_16" width="1200"></p>
<p style="margin-left: 0.0001pt; text-align: justify"></p>
<h2 id="9.5%20CSS%E5%88%97%E8%A1%A8%E6%A0%B7%E5%BC%8F" style="margin-left: 0.0001pt; text-align: justify">9.5 CSS列表样式</h2>
<p style="margin-left: 0.0001pt; text-align: justify"><img alt="" height="1200" src="https://img-blog.csdnimg.cn/7412872fe9de46aa9876d25f94482162.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5a6B6Z2ZX-iHtOi_nF8=,size_20,color_FFFFFF,t_70,g_se,x_16" width="1200"></p>
<p style="margin-left: 0.0001pt; text-align: justify"></p>
<h2 id="9.6%20CSS%E7%9B%92%E6%A8%A1%E5%9E%8B" style="margin-left: 0.0001pt; text-align: justify">9.6 CSS盒模型</h2>
<h3 id="9.6.2%20%E8%BE%B9%E7%95%8C%E5%B1%9E%E6%80%A7%E8%AE%BE%E7%BD%AE" style="margin-left: 0.0001pt; text-align: justify">9.6.2 边界属性设置</h3>
<p style="margin-left: 0.0001pt; text-align: justify"><img alt="" height="885" src="https://img-blog.csdnimg.cn/e5e6a1d9d84342c690d4c7333ef6aa81.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5a6B6Z2ZX-iHtOi_nF8=,size_20,color_FFFFFF,t_70,g_se,x_16" width="1200"></p>
<h3 id="9.6.3%E8%BE%B9%E6%A1%86%E5%B1%9E%E6%80%A7%E8%AE%BE%E7%BD%AE" style="margin-left: 0.0001pt; text-align: justify">9.6.3边框属性设置</h3>
<p style="margin-left: 0.0001pt; text-align: justify">1、边框属性border-style属性</p>
<p style="margin-left: 0.0001pt; text-align: justify"><img alt="" height="570" src="https://img-blog.csdnimg.cn/a771747ec1694f9188c9563df8dac837.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5a6B6Z2ZX-iHtOi_nF8=,size_20,color_FFFFFF,t_70,g_se,x_16" width="1200"></p>
<p style="margin-left: 0.0001pt; text-align: justify"><img alt="" height="714" src="https://img-blog.csdnimg.cn/e31811bf19f84d63a7e5daf36a3b0255.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5a6B6Z2ZX-iHtOi_nF8=,size_20,color_FFFFFF,t_70,g_se,x_16" width="1200"></p>
<p style="margin-left: 0.0001pt; text-align: justify">2、边框宽度border-width属性</p>
<p style="margin-left: 0.0001pt; text-align: justify"><img alt="" height="691" src="https://img-blog.csdnimg.cn/9a288ae8d2544fa19261290b961d6693.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5a6B6Z2ZX-iHtOi_nF8=,size_20,color_FFFFFF,t_70,g_se,x_16" width="1200"></p>
<p style="margin-left: 0.0001pt; text-align: justify">3、边框颜色border-color属性</p>
<p style="margin-left: 0.0001pt; text-align: justify">border-color:color</p>
<p style="margin-left: 0.0001pt; text-align: justify"><img alt="" height="490" src="https://img-blog.csdnimg.cn/1e6d0e876dd44a2198cbebde44c45123.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5a6B6Z2ZX-iHtOi_nF8=,size_20,color_FFFFFF,t_70,g_se,x_16" width="1200"></p>
<p style="margin-left: 0.0001pt; text-align: justify">4、边框border复合属性</p>
<p style="margin-left: 0.0001pt; text-align: justify"><img alt="" height="338" src="https://img-blog.csdnimg.cn/d08fd5744aa94a0fa629f5f7c83d2965.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5a6B6Z2ZX-iHtOi_nF8=,size_20,color_FFFFFF,t_70,g_se,x_16" width="1200"></p>
<h3 id="9.6.4%E5%A1%AB%E5%85%85%E5%B1%9E%E6%80%A7%E8%AE%BE%E7%BD%AE" style="margin-left: 0.0001pt; text-align: justify">9.6.4填充属性设置</h3>
<p style="margin-left: 0.0001pt; text-align: justify"><img alt="" height="394" src="https://img-blog.csdnimg.cn/bdcf0f94975e4754a019873e84c28f5a.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5a6B6Z2ZX-iHtOi_nF8=,size_20,color_FFFFFF,t_70,g_se,x_16" width="616"></p>
</div>
<p></p>
<div>
<h1 id="%E7%AC%AC10%E7%AB%A0%20DIV%2BCSS%E9%A1%B5%E9%9D%A2%E5%B8%83%E5%B1%80" style="margin-left: 0.0001pt; text-align: center">第10章 DIV+CSS页面布局</h1>
<h2 id="10.1%E9%A1%B5%E9%9D%A2%E5%B8%83%E5%B1%80%E8%AE%BE%E8%AE%A1" style="margin-left: 0.0001pt; text-align: justify">10.1页面布局设计</h2>
<h3 id="10.1.1%E2%80%9C%E4%B8%89%E8%A1%8C%E6%A8%A1%E5%BC%8F%E2%80%9D%E6%88%96%E2%80%9C%E4%B8%89%E5%88%97%E6%A8%A1%E5%BC%8F%E2%80%9D" style="margin-left: 0.0001pt; text-align: justify">10.1.1“三行模式”或“三列模式”</h3>
<p style="margin-left: 0.0001pt; text-align: justify"><img alt="" height="842" src="https://img-blog.csdnimg.cn/01875abe789d49bcab8f437da88ee2a4.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5a6B6Z2ZX-iHtOi_nF8=,size_20,color_FFFFFF,t_70,g_se,x_16" width="1200"></p>
<h3 id="10.1.2%E2%80%9C%E4%B8%89%E8%A1%8C%E4%BA%8C%E5%88%97%E2%80%9D%E2%80%9C%E4%B8%89%E8%A1%8C%E4%B8%89%E5%88%97%E2%80%9D%E6%A8%A1%E5%BC%8F" style="margin-left: 0.0001pt; text-align: justify">10.1.2“三行二列”“三行三列”模式</h3>
<p style="margin-left: 0.0001pt; text-align: justify">先将整个页面水平分为三个区域，再将中间区域分为两列或三列</p>
<p style="margin-left: 0.0001pt; text-align: justify"><img alt="" height="203" src="https://img-blog.csdnimg.cn/187160392f50459fa44b29b624979401.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5a6B6Z2ZX-iHtOi_nF8=,size_20,color_FFFFFF,t_70,g_se,x_16" width="546"></p>
<p style="margin-left: 0.0001pt; text-align: justify"><img alt="" height="718" src="https://img-blog.csdnimg.cn/a0042e87fc7847ad93c9fbd448ceff2c.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5a6B6Z2ZX-iHtOi_nF8=,size_20,color_FFFFFF,t_70,g_se,x_16" width="584"></p>
<p style="margin-left: 0.0001pt; text-align: justify"><img alt="" height="406" src="https://img-blog.csdnimg.cn/fecb0c374f514ff2b38521c718af921d.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5a6B6Z2ZX-iHtOi_nF8=,size_20,color_FFFFFF,t_70,g_se,x_16" width="1200"></p>
<p style="margin-left: 0.0001pt; text-align: justify"></p>
<p style="margin-left: 0.0001pt; text-align: justify"><img alt="" height="576" src="https://img-blog.csdnimg.cn/1a973b45e057478ba2df8b2bd100d4e2.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5a6B6Z2ZX-iHtOi_nF8=,size_20,color_FFFFFF,t_70,g_se,x_16" width="1200"></p>
<h3 id="10.1.3%E5%A4%9A%E8%A1%8C%E5%A4%9A%E5%88%97%E5%A4%8D%E6%9D%82%E6%A8%A1%E5%BC%8F" style="margin-left: 0.0001pt; text-align: justify">10.1.3多行多列复杂模式</h3>
<p style="margin-left: 0.0001pt; text-align: justify"><img alt="" height="463" src="https://img-blog.csdnimg.cn/8a08ab5ba4ed4068a0413a34c4e3fa6c.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5a6B6Z2ZX-iHtOi_nF8=,size_20,color_FFFFFF,t_70,g_se,x_16" width="1200"></p>
<p style="margin-left: 0.0001pt; text-align: justify"><img alt="" height="1200" src="https://img-blog.csdnimg.cn/0ad198c8d8774b6eb8ad568f8e1835a7.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5a6B6Z2ZX-iHtOi_nF8=,size_20,color_FFFFFF,t_70,g_se,x_16" width="1200"></p>
<p style="margin-left: 0.0001pt; text-align: justify"></p>
<h2 id="10.2%E5%AF%BC%E8%88%AA%E8%8F%9C%E5%8D%95%E8%AE%BE%E8%AE%A1" style="margin-left: 0.0001pt; text-align: justify">10.2导航菜单设计</h2>
<h3 id="10.2.1%E4%B8%80%E7%BA%A7%E6%B0%B4%E5%B9%B3%E5%AF%BC%E8%88%AA%E8%8F%9C%E5%8D%95" style="margin-left: 0.0001pt; text-align: justify">10.2.1一级水平导航菜单</h3>
<p style="margin-left: 0.0001pt; text-align: justify">·1、采用“表格+超链接”来设计</p>
<p style="margin-left: 0.0001pt; text-align: justify"><img alt="" height="775" src="https://img-blog.csdnimg.cn/4b6f64ebcc5244bfb77f70c116060cc8.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5a6B6Z2ZX-iHtOi_nF8=,size_20,color_FFFFFF,t_70,g_se,x_16" width="1200"></p>
<p style="margin-left: 0.0001pt; text-align: justify">2、采用“无序列表+超链接”来设计</p>
<p style="margin-left: 0.0001pt; text-align: justify"><img alt="" height="1001" src="https://img-blog.csdnimg.cn/b91d30e1c9e940e4af0ee9c2b26b580e.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5a6B6Z2ZX-iHtOi_nF8=,size_20,color_FFFFFF,t_70,g_se,x_16" width="1200"></p>
<h3 id="10.2.2%E4%BA%8C%E7%BA%A7%E6%B0%B4%E5%B9%B3%E5%AF%BC%E8%88%AA%E8%8F%9C%E5%8D%95" style="margin-left: 0.0001pt; text-align: justify">10.2.2二级水平导航菜单</h3>
<p style="margin-left: 0.0001pt; text-align: justify">1、下拉导航菜单</p>
<p style="margin-left: 0.0001pt; text-align: justify"><img alt="" height="1200" src="https://img-blog.csdnimg.cn/af49c684718b4acaa45886fbfd923203.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5a6B6Z2ZX-iHtOi_nF8=,size_20,color_FFFFFF,t_70,g_se,x_16" width="1200"></p>
<p style="margin-left: 0.0001pt; text-align: justify"><img alt="" height="1200" src="https://img-blog.csdnimg.cn/d68ce126d7f340aa96e6f885cde83d23.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5a6B6Z2ZX-iHtOi_nF8=,size_20,color_FFFFFF,t_70,g_se,x_16" width="1200"></p>
<p style="margin-left: 0.0001pt; text-align: justify"><img alt="" height="1200" src="https://img-blog.csdnimg.cn/5fed1ca8ce6f46dba175319fbb7a285d.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5a6B6Z2ZX-iHtOi_nF8=,size_20,color_FFFFFF,t_70,g_se,x_16" width="1200"></p>
<p style="margin-left: 0.0001pt; text-align: justify">2、横向二级导航菜单</p>
<p style="margin-left: 0.0001pt; text-align: justify"><img alt="" height="662" src="https://img-blog.csdnimg.cn/6303849cb0dc4cd086449c71b663de92.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5a6B6Z2ZX-iHtOi_nF8=,size_20,color_FFFFFF,t_70,g_se,x_16" width="1200"></p>
<p style="margin-left: 0.0001pt; text-align: justify"><img alt="" height="1200" src="https://img-blog.csdnimg.cn/16d1395820984032a82650e2fca8d180.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5a6B6Z2ZX-iHtOi_nF8=,size_20,color_FFFFFF,t_70,g_se,x_16" width="1200"></p>
<p style="margin-left: 0.0001pt; text-align: justify"><img alt="" height="1200" src="https://img-blog.csdnimg.cn/17594d5ccc104ec784129af8469157a3.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5a6B6Z2ZX-iHtOi_nF8=,size_20,color_FFFFFF,t_70,g_se,x_16" width="1200"></p>
<p style="margin-left: 0.0001pt; text-align: justify"></p>
<h2 id="10.3%E5%AF%B9%E8%B1%A1%E7%9A%84%E6%98%BE%E7%A4%BA%E4%B8%8E%E9%9A%90%E8%97%8FCSS%E8%A7%84%E5%88%99%E8%AE%BE%E8%AE%A1" style="margin-left: 0.0001pt; text-align: justify">10.3对象的显示与隐藏CSS规则设计</h2>
<p style="margin-left: 0.0001pt; text-align: justify"><img alt="" height="618" src="https://img-blog.csdnimg.cn/61a52aaee8bc4f788e7c381d04c4de78.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5a6B6Z2ZX-iHtOi_nF8=,size_20,color_FFFFFF,t_70,g_se,x_16" width="1200"></p>
<p style="margin-left: 0.0001pt; text-align: justify"><img alt="" height="721" src="https://img-blog.csdnimg.cn/ab3f75ad6ed44c1ca38c8eb8ad8b1c6a.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5a6B6Z2ZX-iHtOi_nF8=,size_20,color_FFFFFF,t_70,g_se,x_16" width="1200"></p>
</div>
<p></p>
<div>
<h1 id="%E7%AC%AC11%E7%AB%A0%20%E8%A1%A8%E6%A0%BC" style="margin-left: 0.0001pt; text-align: center">第11章 表格</h1>
<h2 id="11.2%E8%A1%A8%E6%A0%BC%E6%A0%87%E8%AE%B0" style="margin-left: 0.0001pt; text-align: justify">11.2表格标记</h2>
<p style="margin-left: 0.0001pt; text-align: justify"><img alt="" height="304" src="https://img-blog.csdnimg.cn/76ced7e4c91141f3bafe166a6510d483.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5a6B6Z2ZX-iHtOi_nF8=,size_20,color_FFFFFF,t_70,g_se,x_16" width="370"></p>
<p style="margin-left: 0.0001pt; text-align: justify"><img alt="" height="767" src="https://img-blog.csdnimg.cn/1c3826e1bffe490584b3bb151fcbc976.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5a6B6Z2ZX-iHtOi_nF8=,size_20,color_FFFFFF,t_70,g_se,x_16" width="1200"></p>
<p style="margin-left: 0.0001pt; text-align: justify"></p>
<h2 id="11.3%E8%A1%A8%E6%A0%BC%E5%B1%9E%E6%80%A7%E8%AE%BE%E7%BD%AE" style="margin-left: 0.0001pt; text-align: justify">11.3表格属性设置</h2>
<h3 id="11.3.1%E8%A1%A8%E6%A0%BC%E8%BE%B9%E6%A1%86%E5%B1%9E%E6%80%A7" style="margin-left: 0.0001pt; text-align: justify">11.3.1表格边框属性</h3>
<p style="margin-left: 0.0001pt; text-align: justify"><img alt="" height="423" src="https://img-blog.csdnimg.cn/0b61d9c08a5141f4bce6a3ccea56dc1f.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5a6B6Z2ZX-iHtOi_nF8=,size_20,color_FFFFFF,t_70,g_se,x_16" width="1200"></p>
<h3 id="11.3.2%E8%A1%A8%E6%A0%BC%E7%9A%84%E5%AE%BD%E5%BA%A6%E5%92%8C%E9%AB%98%E5%BA%A6%E5%B1%9E%E6%80%A7" style="margin-left: 0.0001pt; text-align: justify">11.3.2表格的宽度和高度属性</h3>
<p style="margin-left: 0.0001pt; text-align: justify"><img alt="" height="329" src="https://img-blog.csdnimg.cn/677533223cc940b2923d05dde1e76efb.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5a6B6Z2ZX-iHtOi_nF8=,size_20,color_FFFFFF,t_70,g_se,x_16" width="1200"></p>
<h3 id="11.3.3%E8%A1%A8%E6%A0%BC%E8%83%8C%E6%99%AF%E9%A2%9C%E8%89%B2%E4%B8%8E%E8%83%8C%E6%99%AF%E5%9B%BE%E5%83%8F%E5%B1%9E%E6%80%A7" style="margin-left: 0.0001pt; text-align: justify">11.3.3表格背景颜色与背景图像属性</h3>
<p style="margin-left: 0.0001pt; text-align: justify"><img alt="" height="352" src="https://img-blog.csdnimg.cn/e421d94757e846f68c9f918da1b98c02.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5a6B6Z2ZX-iHtOi_nF8=,size_20,color_FFFFFF,t_70,g_se,x_16" width="1200"></p>
<h3 id="11.3.4%E8%A1%A8%E6%A0%BC%E8%BE%B9%E6%A1%86%E6%A0%B7%E5%BC%8F%E5%B1%9E%E6%80%A7" style="margin-left: 0.0001pt; text-align: justify">11.3.4表格边框样式属性</h3>
<p style="margin-left: 0.0001pt; text-align: justify"><img alt="" height="716" src="https://img-blog.csdnimg.cn/00f81dca86e5432899b15c3b92af8057.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5a6B6Z2ZX-iHtOi_nF8=,size_20,color_FFFFFF,t_70,g_se,x_16" width="1200"></p>
<h3 id="11.3.5%E8%A1%A8%E6%A0%BC%E5%8D%95%E5%85%83%E6%A0%BC%E9%97%B4%E8%B7%9D%E3%80%81%E5%8D%95%E5%85%83%E6%A0%BC%E8%BE%B9%E8%B7%9D%E5%B1%9E%E6%80%A7" style="margin-left: 0.0001pt; text-align: justify">11.3.5表格单元格间距、单元格边距属性</h3>
<p style="margin-left: 0.0001pt; text-align: justify"><img alt="" height="429" src="https://img-blog.csdnimg.cn/1045f45cf9e1415ea597ee5c98f598b8.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5a6B6Z2ZX-iHtOi_nF8=,size_20,color_FFFFFF,t_70,g_se,x_16" width="1200"></p>
<h3 id="11.3.6%E8%A1%A8%E6%A0%BC%E6%B0%B4%E5%B9%B3%E5%AF%B9%E9%BD%90%E5%B1%9E%E6%80%A7" style="margin-left: 0.0001pt; text-align: justify">11.3.6表格水平对齐属性</h3>
<p style="margin-left: 0.0001pt; text-align: justify"><img alt="" height="296" src="https://img-blog.csdnimg.cn/a98867f0745f4db886b5c1f399058efd.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5a6B6Z2ZX-iHtOi_nF8=,size_20,color_FFFFFF,t_70,g_se,x_16" width="1200"></p>
<p style="margin-left: 0.0001pt; text-align: justify"></p>
<h2 id="11.4%E8%AE%BE%E7%BD%AE%E8%A1%A8%E6%A0%BC%E8%A1%8C%E7%9A%84%E5%B1%9E%E6%80%A7" style="margin-left: 0.0001pt; text-align: justify">11.4设置表格行的属性</h2>
<p style="margin-left: 0.0001pt; text-align: justify"><img alt="" height="882" src="https://img-blog.csdnimg.cn/eef90b1b7253412ba3a4184fc24400b3.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5a6B6Z2ZX-iHtOi_nF8=,size_20,color_FFFFFF,t_70,g_se,x_16" width="1200"></p>
<p style="margin-left: 0.0001pt; text-align: justify"></p>
<h2 id="11.5%E8%AE%BE%E7%BD%AE%E5%8D%95%E5%85%83%E6%A0%BC%E7%9A%84%E5%B1%9E%E6%80%A7" style="margin-left: 0.0001pt; text-align: justify">11.5设置单元格的属性</h2>
<p style="margin-left: 0.0001pt; text-align: justify"><img alt="" height="471" src="https://img-blog.csdnimg.cn/fd93839f859d4fe7821285916d36a559.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5a6B6Z2ZX-iHtOi_nF8=,size_20,color_FFFFFF,t_70,g_se,x_16" width="1200"></p>
<h3 id="11.5.1%E8%A1%A8%E6%A0%BC%E5%8D%95%E5%85%83%E6%A0%BC%E8%B7%A8%E8%A1%8C%E5%B1%9E%E6%80%A7" style="margin-left: 0.0001pt; text-align: justify">11.5.1表格单元格跨行属性</h3>
<p style="margin-left: 0.0001pt; text-align: justify"><img alt="" height="280" src="https://img-blog.csdnimg.cn/e9ab07dde71c453d9468c5209a03b55d.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5a6B6Z2ZX-iHtOi_nF8=,size_20,color_FFFFFF,t_70,g_se,x_16" width="1200"></p>
<h3 id="11.5.2%E8%A1%A8%E6%A0%BC%E5%8D%95%E5%85%83%E6%A0%BC%E8%B7%A8%E5%88%97%E5%B1%9E%E6%80%A7" style="margin-left: 0.0001pt; text-align: justify">11.5.2表格单元格跨列属性</h3>
<p style="margin-left: 0.0001pt; text-align: justify"><img alt="" height="265" src="https://img-blog.csdnimg.cn/933e8f37220e4374be1bb0b8219c7158.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5a6B6Z2ZX-iHtOi_nF8=,size_20,color_FFFFFF,t_70,g_se,x_16" width="1200"></p>
<p style="margin-left: 0.0001pt; text-align: justify"></p>
<h2 id="11.6%E8%A1%A8%E6%A0%BC%E5%B5%8C%E5%A5%97" style="margin-left: 0.0001pt; text-align: justify">11.6表格嵌套</h2>
<p style="margin-left: 0.0001pt; text-align: left"><img alt="" height="453" src="https://img-blog.csdnimg.cn/0eb744397a3441cda8437dabbdcf3c74.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5a6B6Z2ZX-iHtOi_nF8=,size_20,color_FFFFFF,t_70,g_se,x_16" width="460"></p>
</div>
<p></p>
<div>
<h1 id="%E7%AC%AC12%E7%AB%A0%20%E8%A1%A8%E5%8D%95" style="margin-left: 0.0001pt; text-align: center">第12章 表单</h1>
<h2 id="12.1%E8%A1%A8%E5%8D%95%E6%A6%82%E8%BF%B0" style="margin-left: 0.0001pt; text-align: justify">12.1表单概述</h2>
<h3 id="12.1.1%E8%A1%A8%E5%8D%95%E6%A0%87%E8%AE%B0" style="margin-left: 0.0001pt; text-align: justify">12.1.1表单标记</h3>
<p style="margin-left: 0.0001pt; text-align: justify"><img alt="" height="441" src="https://img-blog.csdnimg.cn/0b22c271cb7f431581aab2cadbea5daf.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5a6B6Z2ZX-iHtOi_nF8=,size_20,color_FFFFFF,t_70,g_se,x_16" width="1200"></p>
<p style="margin-left: 0.0001pt; text-align: justify"><img alt="" height="641" src="https://img-blog.csdnimg.cn/ebaec5bfc1c1454c8f2a8e137e65a914.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5a6B6Z2ZX-iHtOi_nF8=,size_20,color_FFFFFF,t_70,g_se,x_16" width="1200"></p>
<p style="margin-left: 0.0001pt; text-align: justify"></p>
<h2 id="12.2%E5%AE%9A%E4%B9%89%E5%9F%9F%E5%92%8C%E5%9F%9F%E6%A0%87%E9%A2%98" style="margin-left: 0.0001pt; text-align: justify">12.2定义域和域标题</h2>
<p style="margin-left: 0.0001pt; text-align: justify"><img alt="" height="408" src="https://img-blog.csdnimg.cn/36232a27d49740bb97b01a4e022b31b5.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5a6B6Z2ZX-iHtOi_nF8=,size_20,color_FFFFFF,t_70,g_se,x_16" width="1200"></p>
<p style="margin-left: 0.0001pt; text-align: justify"></p>
<h2 id="12.3%E8%A1%A8%E5%8D%95%E4%BF%A1%E6%81%AF%E8%BE%93%E5%85%A5" style="margin-left: 0.0001pt; text-align: justify">12.3表单信息输入</h2>
<p style="margin-left: 0.0001pt; text-align: justify"><img alt="" height="617" src="https://img-blog.csdnimg.cn/0a799401c4f247fd991c4b10109cb517.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5a6B6Z2ZX-iHtOi_nF8=,size_20,color_FFFFFF,t_70,g_se,x_16" width="1200"></p>
<h3 id="12.3.1%E5%8D%95%E8%A1%8C%E6%96%87%E6%9C%AC%E8%BE%93%E5%85%A5%E6%A1%86" style="margin-left: 0.0001pt; text-align: justify">12.3.1单行文本输入框</h3>
<p style="margin-left: 0.0001pt; text-align: justify"><img alt="" height="217" src="https://img-blog.csdnimg.cn/dcd1920b74f94ddfac5ebe44a87597ad.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5a6B6Z2ZX-iHtOi_nF8=,size_20,color_FFFFFF,t_70,g_se,x_16" width="1200"></p>
<p style="margin-left: 0.0001pt; text-align: justify"><img alt="" height="329" src="https://img-blog.csdnimg.cn/ce75dfc070bb41e0bda14f0b28f75dda.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5a6B6Z2ZX-iHtOi_nF8=,size_20,color_FFFFFF,t_70,g_se,x_16" width="1200"></p>
<h3 id="12.3.2%E5%AF%86%E7%A0%81%E8%BE%93%E5%85%A5%E6%A1%86" style="margin-left: 0.0001pt; text-align: justify">12.3.2密码输入框</h3>
<p style="margin-left: 0.0001pt; text-align: justify"><img alt="" height="511" src="https://img-blog.csdnimg.cn/e0bca74141104ed98d79db6e68cba4e9.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5a6B6Z2ZX-iHtOi_nF8=,size_20,color_FFFFFF,t_70,g_se,x_16" width="1200"></p>
<h3 id="12.3.3%E5%A4%8D%E9%80%89%E6%A1%86" style="margin-left: 0.0001pt; text-align: justify">12.3.3复选框</h3>
<p style="margin-left: 0.0001pt; text-align: justify"><img alt="" height="545" src="https://img-blog.csdnimg.cn/6c834d91c8374a80becc909db61f0e59.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5a6B6Z2ZX-iHtOi_nF8=,size_20,color_FFFFFF,t_70,g_se,x_16" width="1200"></p>
<h3 id="12.3.4%E5%8D%95%E9%80%89%E6%8C%89%E9%92%AE" style="margin-left: 0.0001pt; text-align: justify">12.3.4单选按钮</h3>
<p style="margin-left: 0.0001pt; text-align: justify"><img alt="" height="208" src="https://img-blog.csdnimg.cn/a784c8fb21584cfb854453b25841cfb4.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5a6B6Z2ZX-iHtOi_nF8=,size_20,color_FFFFFF,t_70,g_se,x_16" width="1200"></p>
<p style="margin-left: 0.0001pt; text-align: justify"><img alt="" height="464" src="https://img-blog.csdnimg.cn/2afb3db0376e41628c29851b9ccc81e6.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5a6B6Z2ZX-iHtOi_nF8=,size_20,color_FFFFFF,t_70,g_se,x_16" width="1200"></p>
<h3 id="12.3.5%E5%9B%BE%E5%83%8F%E6%8C%89%E9%92%AE" style="margin-left: 0.0001pt; text-align: justify">12.3.5图像按钮</h3>
<p style="margin-left: 0.0001pt; text-align: justify"><img alt="" height="601" src="https://img-blog.csdnimg.cn/c71e816dbd584b56bd3eea45deda24ae.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5a6B6Z2ZX-iHtOi_nF8=,size_20,color_FFFFFF,t_70,g_se,x_16" width="1200"></p>
<h3 id="12.3.6%E6%8F%90%E4%BA%A4%E6%8C%89%E9%92%AE" style="margin-left: 0.0001pt; text-align: justify">12.3.6提交按钮</h3>
<p style="margin-left: 0.0001pt; text-align: justify"><img alt="" height="565" src="https://img-blog.csdnimg.cn/165feaa00f7e48abb6b904365066362c.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5a6B6Z2ZX-iHtOi_nF8=,size_20,color_FFFFFF,t_70,g_se,x_16" width="1200"></p>
<h3 id="12.3.7%E9%87%8D%E7%BD%AE%E6%8C%89%E9%92%AE" style="margin-left: 0.0001pt; text-align: justify">12.3.7重置按钮</h3>
<p style="margin-left: 0.0001pt; text-align: justify"><img alt="" height="211" src="https://img-blog.csdnimg.cn/059fa3df2fc6446e8f0e249c0d648046.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5a6B6Z2ZX-iHtOi_nF8=,size_20,color_FFFFFF,t_70,g_se,x_16" width="1200"></p>
<p style="margin-left: 0.0001pt; text-align: justify"><img alt="" height="347" src="https://img-blog.csdnimg.cn/013d44846d964337aed53b2e2511cbf5.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5a6B6Z2ZX-iHtOi_nF8=,size_20,color_FFFFFF,t_70,g_se,x_16" width="1200"></p>
<h3 id="12.3.8%E6%99%AE%E9%80%9A%E6%8C%89%E9%92%AE" style="margin-left: 0.0001pt; text-align: justify">12.3.8普通按钮</h3>
<p style="margin-left: 0.0001pt; text-align: justify"><img alt="" height="501" src="https://img-blog.csdnimg.cn/b5d893fe2270493db9a1be11f24f6b2f.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5a6B6Z2ZX-iHtOi_nF8=,size_20,color_FFFFFF,t_70,g_se,x_16" width="1200"></p>
<h3 id="12.3.9%E6%96%87%E4%BB%B6%E9%80%89%E6%8B%A9%E6%A1%86" style="margin-left: 0.0001pt; text-align: justify">12.3.9文件选择框</h3>
<p style="margin-left: 0.0001pt; text-align: justify"><img alt="" height="309" src="https://img-blog.csdnimg.cn/abd837a2882549fcafc4c0577c0ff5a3.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5a6B6Z2ZX-iHtOi_nF8=,size_20,color_FFFFFF,t_70,g_se,x_16" width="1200"></p>
<h3 id="12.3.10%E9%9A%90%E8%97%8F%E6%A1%86" style="margin-left: 0.0001pt; text-align: justify">12.3.10隐藏框</h3>
<p style="margin-left: 0.0001pt; text-align: justify"><img alt="" height="222" src="https://img-blog.csdnimg.cn/f2cc3be4da0e49ecb88da937190c2c57.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5a6B6Z2ZX-iHtOi_nF8=,size_20,color_FFFFFF,t_70,g_se,x_16" width="1200"></p>
<p style="margin-left: 0.0001pt; text-align: justify"><img alt="" height="254" src="https://img-blog.csdnimg.cn/41d5ef272cc44588a21f7fc713006b2c.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5a6B6Z2ZX-iHtOi_nF8=,size_20,color_FFFFFF,t_70,g_se,x_16" width="1200"></p>
<p style="margin-left: 0.0001pt; text-align: justify"></p>
<h2 id="12.4%E5%A4%9A%E8%A1%8C%E6%96%87%E6%9C%AC%E8%BE%93%E5%85%A5%E6%A1%86" style="margin-left: 0.0001pt; text-align: justify">12.4多行文本输入框</h2>
<p style="margin-left: 0.0001pt; text-align: justify"><img alt="" height="917" src="https://img-blog.csdnimg.cn/08efe9cbd04946d18ab28307a054c95a.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5a6B6Z2ZX-iHtOi_nF8=,size_20,color_FFFFFF,t_70,g_se,x_16" width="1200"></p>
<p style="margin-left: 0.0001pt; text-align: justify"></p>
<h2 id="12.5%E4%B8%8B%E6%8B%89%E5%88%97%E8%A1%A8%E6%A1%86" style="margin-left: 0.0001pt; text-align: justify">12.5下拉列表框</h2>
<p style="margin-left: 0.0001pt; text-align: justify"><img alt="" height="806" src="https://img-blog.csdnimg.cn/e2e9c0c488614678995c9470979f92c8.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5a6B6Z2ZX-iHtOi_nF8=,size_20,color_FFFFFF,t_70,g_se,x_16" width="1200"></p>
</div>
<p></p>
<h1 id="%E7%AC%AC13%E7%AB%A0%20HTML5%E5%9F%BA%E7%A1%80%E4%B8%8ECSS3%E5%BA%94%E7%94%A8" style="margin-left: 0.0001pt; text-align: center">第13章 HTML5基础与CSS3应用</h1>
<h2 id="13.1%20HTML5%E6%A6%82%E8%BF%B0" style="margin-left: 0.0001pt; text-align: justify">13.1 HTML5概述</h2>
<h3 id="13.1.1%20HTML5%E7%9A%84%E5%85%AB%E4%B8%AA%E7%89%B9%E6%80%A7" style="margin-left: 0.0001pt; text-align: justify">13.1.1 HTML5的八个特性</h3>
<p style="margin-left: 0.0001pt; text-align: justify">1、语义特性</p>
<p style="margin-left: 0.0001pt; text-align: justify">2、离线与存储特性</p>
<p style="margin-left: 0.0001pt; text-align: justify">3、设备访问特性</p>
<p style="margin-left: 0.0001pt; text-align: justify">4、多媒体特性</p>
<p style="margin-left: 0.0001pt; text-align: justify">5、三维、图形与特效特性</p>
<p style="margin-left: 0.0001pt; text-align: justify">6、性能与集成特性</p>
<p style="margin-left: 0.0001pt; text-align: justify">7、连接特性</p>
<p style="margin-left: 0.0001pt; text-align: justify">8、CSS3特性</p>
<h3 id="13.1.2%20HTML5%E7%9A%84%E4%BC%98%E5%8A%BF" style="margin-left: 0.0001pt; text-align: justify">13.1.2 HTML5的优势</h3>
<p style="margin-left: 0.0001pt; text-align: justify">1、摆脱对平台的依赖</p>
<p style="margin-left: 0.0001pt; text-align: justify">2、实时更新</p>
<p style="margin-left: 0.0001pt; text-align: justify">3、离线使用</p>
<p style="margin-left: 0.0001pt; text-align: justify">4、代码更安全</p>
<p style="margin-left: 0.0001pt; text-align: justify">5、跨平台</p>
<p style="margin-left: 0.0001pt; text-align: justify">6、可以充分利用Native</p>
<p style="margin-left: 0.0001pt; text-align: justify"></p>
<h2 id="13.2%20HTML5%E6%96%87%E6%A1%A3%E7%BB%93%E6%9E%84" style="margin-left: 0.0001pt; text-align: justify">13.2 HTML5文档结构</h2>
<h3 id="13.2.1%20HTML5%E9%A1%B5%E9%9D%A2%E7%BB%93%E6%9E%84" style="margin-left: 0.0001pt; text-align: justify">13.2.1 HTML5页面结构</h3>
<p style="margin-left: 0.0001pt; text-align: justify"><img alt="" height="1135" src="https://img-blog.csdnimg.cn/6e2ed97bafd74360af8f874411bc9d0f.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5a6B6Z2ZX-iHtOi_nF8=,size_20,color_FFFFFF,t_70,g_se,x_16" width="1200"></p>
<h3 id="13.2.2%20HTML5%E6%96%B0%E5%A2%9E%E7%BB%93%E6%9E%84%E5%85%83%E7%B4%A0" style="margin-left: 0.0001pt; text-align: justify">13.2.2 HTML5新增结构元素</h3>
<p style="margin-left: 0.0001pt; text-align: justify"><img alt="" height="201" src="https://img-blog.csdnimg.cn/22f0bc44b7584fcb8c449642bcc60445.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5a6B6Z2ZX-iHtOi_nF8=,size_20,color_FFFFFF,t_70,g_se,x_16" width="1200"></p>
<p style="margin-left: 0.0001pt; text-align: justify"><img alt="" height="216" src="https://img-blog.csdnimg.cn/21924880aaa14f4cb13a66ced0e47c2a.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5a6B6Z2ZX-iHtOi_nF8=,size_20,color_FFFFFF,t_70,g_se,x_16" width="1200"></p>
<p style="margin-left: 0.0001pt; text-align: justify"><img alt="" height="251" src="https://img-blog.csdnimg.cn/9700ffa59c7f4dd38302507a245c1372.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5a6B6Z2ZX-iHtOi_nF8=,size_20,color_FFFFFF,t_70,g_se,x_16" width="1200"></p>
<p style="margin-left: 0.0001pt; text-align: justify"><img alt="" height="332" src="https://img-blog.csdnimg.cn/c4af58f2aff1434da9d5572f24ba163d.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5a6B6Z2ZX-iHtOi_nF8=,size_20,color_FFFFFF,t_70,g_se,x_16" width="1200"></p>
<p style="margin-left: 0.0001pt; text-align: justify"><img alt="" height="201" src="https://img-blog.csdnimg.cn/5ee9a5f7d8a94279b7d3a76a80bebf4c.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5a6B6Z2ZX-iHtOi_nF8=,size_20,color_FFFFFF,t_70,g_se,x_16" width="1200"></p>
<p style="margin-left: 0.0001pt; text-align: justify"><img alt="" height="239" src="https://img-blog.csdnimg.cn/1f5d6da05f4d4d8ca90929aecf5ccc18.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5a6B6Z2ZX-iHtOi_nF8=,size_20,color_FFFFFF,t_70,g_se,x_16" width="1200"></p>
<p style="margin-left: 0.0001pt; text-align: justify"></p>
<h2 id="13.3%20HTML5%E6%96%B0%E5%A2%9E%E9%A1%B5%E9%9D%A2%E5%85%83%E7%B4%A0" style="margin-left: 0.0001pt; text-align: justify">13.3 HTML5新增页面元素</h2>
<h3 id="13.3.1%20hgroup%E6%A0%87%E8%AE%B0" style="margin-left: 0.0001pt; text-align: justify">13.3.1 hgroup标记</h3>
<p style="margin-left: 0.0001pt; text-align: justify">对标题进行组合，可连续设置多个标题标记</p>
<p style="margin-left: 0.0001pt; text-align: justify"><img alt="" height="291" src="https://img-blog.csdnimg.cn/9c486725dcca4a54b9cff94d433f5521.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5a6B6Z2ZX-iHtOi_nF8=,size_20,color_FFFFFF,t_70,g_se,x_16" width="1200"></p>
<h3 id="13.3.2%20figure%E6%A0%87%E8%AE%B0%E4%B8%8Efigcaption%E6%A0%87%E8%AE%B0" style="margin-left: 0.0001pt; text-align: justify">13.3.2 figure标记与figcaption标记</h3>
<p style="margin-left: 0.0001pt; text-align: justify"><img alt="" height="196" src="https://img-blog.csdnimg.cn/2e5ecfd474044c0eb713d2d17a3a0d8c.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5a6B6Z2ZX-iHtOi_nF8=,size_20,color_FFFFFF,t_70,g_se,x_16" width="1200"></p>
<p style="margin-left: 0.0001pt; text-align: justify"><img alt="" height="459" src="https://img-blog.csdnimg.cn/2fba80e2b71948f2913f14d71fad18a7.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5a6B6Z2ZX-iHtOi_nF8=,size_20,color_FFFFFF,t_70,g_se,x_16" width="1200"></p>
<h3 id="13.3.3%20mark%E6%A0%87%E8%AE%B0%E4%B8%8Etime%E6%A0%87%E8%AE%B0" style="margin-left: 0.0001pt; text-align: justify">13.3.3 mark标记与time标记</h3>
<p style="margin-left: 0.0001pt; text-align: justify"><img alt="" height="394" src="https://img-blog.csdnimg.cn/9d293c97d7fb45eda9e7f6a9839e9beb.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5a6B6Z2ZX-iHtOi_nF8=,size_20,color_FFFFFF,t_70,g_se,x_16" width="1200"></p>
<h3 id="13.3.4%20details%E6%A0%87%E8%AE%B0%E4%B8%8Esummary%E6%A0%87%E8%AE%B0" style="margin-left: 0.0001pt; text-align: justify">13.3.4 details标记与summary标记</h3>
<p style="margin-left: 0.0001pt; text-align: justify"><img alt="" height="450" src="https://img-blog.csdnimg.cn/e3dfd0fbae2d4c0aaeaf104d6afdb7ef.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5a6B6Z2ZX-iHtOi_nF8=,size_20,color_FFFFFF,t_70,g_se,x_16" width="1200"></p>
<h3 id="13.3.5%20progress%E6%A0%87%E8%AE%B0%E4%B8%8Emeter%E6%A0%87%E8%AE%B0" style="margin-left: 0.0001pt; text-align: justify">13.3.5 progress标记与meter标记</h3>
<p style="margin-left: 0.0001pt; text-align: justify"><img alt="" height="589" src="https://img-blog.csdnimg.cn/816b4c93ffa546ed82b540de98b2fc38.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5a6B6Z2ZX-iHtOi_nF8=,size_20,color_FFFFFF,t_70,g_se,x_16" width="1200"></p>
<p style="margin-left: 0.0001pt; text-align: justify"><img alt="" height="186" src="https://img-blog.csdnimg.cn/5cafd6e461a240ca8c86a399f6b6eba0.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5a6B6Z2ZX-iHtOi_nF8=,size_20,color_FFFFFF,t_70,g_se,x_16" width="1200"></p>
<h3 id="13.3.6%20input%E6%A0%87%E8%AE%B0%E4%B8%8Edatalist%E6%A0%87%E8%AE%B0" style="margin-left: 0.0001pt; text-align: justify">13.3.6 input标记与datalist标记</h3>
<p style="margin-left: 0.0001pt; text-align: justify"><img alt="" height="318" src="https://img-blog.csdnimg.cn/34efb70409e24cb68bc53ec6fd9b964d.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5a6B6Z2ZX-iHtOi_nF8=,size_20,color_FFFFFF,t_70,g_se,x_16" width="1200"></p>
<p style="margin-left: 0.0001pt; text-align: justify"></p>
<h2 id="13.4%20HTML5%E8%A1%A8%E5%8D%95" style="margin-left: 0.0001pt; text-align: justify">13.4 HTML5表单</h2>
<h3 id="13.4.1%20HTML5%E6%96%B0%E5%A2%9E%E7%9A%84%E8%A1%A8%E5%8D%95%E5%B1%9E%E6%80%A7" style="margin-left: 0.0001pt; text-align: justify">13.4.1 HTML5新增的表单属性</h3>
<p style="margin-left: 0.0001pt; text-align: justify"><img alt="" height="373" src="https://img-blog.csdnimg.cn/d7bea54e60fe482c949c001f8c8ec4fe.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5a6B6Z2ZX-iHtOi_nF8=,size_20,color_FFFFFF,t_70,g_se,x_16" width="1200"></p>
<p style="margin-left: 0.0001pt; text-align: justify"><img alt="" height="868" src="https://img-blog.csdnimg.cn/0a87a668669a46928f7d8f7d2d67061a.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5a6B6Z2ZX-iHtOi_nF8=,size_20,color_FFFFFF,t_70,g_se,x_16" width="1200"></p>
<p style="margin-left: 0.0001pt; text-align: justify"><img alt="" height="754" src="https://img-blog.csdnimg.cn/30cead8432524e458fb40d9e08bca8e0.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5a6B6Z2ZX-iHtOi_nF8=,size_20,color_FFFFFF,t_70,g_se,x_16" width="1200"></p>
<p style="margin-left: 0.0001pt; text-align: justify"><img alt="" height="193" src="https://img-blog.csdnimg.cn/6640d7c14d8648ca95089e6474118f51.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5a6B6Z2ZX-iHtOi_nF8=,size_20,color_FFFFFF,t_70,g_se,x_16" width="1200"></p>
<h3 id="13.4.2%20HTML5%E6%96%B0%E5%A2%9E%E7%9A%84%E8%A1%A8%E5%8D%95%E5%85%83%E7%B4%A0" style="margin-left: 0.0001pt; text-align: justify">13.4.2 HTML5新增的表单元素</h3>
<p style="margin-left: 0.0001pt; text-align: justify"><img alt="" height="266" src="https://img-blog.csdnimg.cn/c06610f7dd3c4e66828954120a42d0a7.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5a6B6Z2ZX-iHtOi_nF8=,size_20,color_FFFFFF,t_70,g_se,x_16" width="1200"></p>
<p style="margin-left: 0.0001pt; text-align: justify"><img alt="" height="250" src="https://img-blog.csdnimg.cn/f7852f6735374be793607c89a5f7a46c.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5a6B6Z2ZX-iHtOi_nF8=,size_20,color_FFFFFF,t_70,g_se,x_16" width="1200"></p>
<p style="margin-left: 0.0001pt; text-align: justify"><img alt="" height="264" src="https://img-blog.csdnimg.cn/e4c14ae42f2843f5bea1496c7b134ac2.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5a6B6Z2ZX-iHtOi_nF8=,size_20,color_FFFFFF,t_70,g_se,x_16" width="1200"></p>
<h3 id="13.4.3%20HTML%E6%96%B0%E5%A2%9E%E7%9A%84input%E7%B1%BB%E5%9E%8B" style="margin-left: 0.0001pt; text-align: justify">13.4.3 HTML新增的input类型</h3>
<p style="margin-left: 0.0001pt; text-align: justify"><img alt="" height="189" src="https://img-blog.csdnimg.cn/b718613f8ece42059361635c614e0210.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5a6B6Z2ZX-iHtOi_nF8=,size_20,color_FFFFFF,t_70,g_se,x_16" width="441"></p>
<p style="margin-left: 0.0001pt; text-align: justify"><img alt="" height="1200" src="https://img-blog.csdnimg.cn/b3827688fa154463945656c2086c94bf.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5a6B6Z2ZX-iHtOi_nF8=,size_20,color_FFFFFF,t_70,g_se,x_16" width="1200"></p>
<p style="margin-left: 0.0001pt; text-align: justify"></p>
<h2 id="13.5%20HTML5%E8%A7%86%E9%A2%91%E4%B8%8E%E9%9F%B3%E9%A2%91" style="margin-left: 0.0001pt; text-align: justify">13.5 HTML5视频与音频</h2>
<h3 id="13.5.1%20video%E6%A0%87%E8%AE%B0%E5%8F%8A%E5%B1%9E%E6%80%A7" style="margin-left: 0.0001pt; text-align: justify">13.5.1 video标记及属性</h3>
<p style="margin-left: 0.0001pt; text-align: justify"><img alt="" height="853" src="https://img-blog.csdnimg.cn/5df4ee54bcd441c3a6c0a289487e5561.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5a6B6Z2ZX-iHtOi_nF8=,size_20,color_FFFFFF,t_70,g_se,x_16" width="1200"></p>
<p style="margin-left: 0.0001pt; text-align: justify"><img alt="" height="797" src="https://img-blog.csdnimg.cn/c70f1578363e437f8272a02c2ef536a8.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5a6B6Z2ZX-iHtOi_nF8=,size_20,color_FFFFFF,t_70,g_se,x_16" width="1200"></p>
<h3 id="13.5.2%20audio%E6%A0%87%E8%AE%B0%E5%8F%8A%E5%B1%9E%E6%80%A7" style="margin-left: 0.0001pt; text-align: justify">13.5.2 audio标记及属性</h3>
<p style="margin-left: 0.0001pt; text-align: justify"><img alt="" height="201" src="https://img-blog.csdnimg.cn/cc0fb3227dd34d61861cd43e21255e9d.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5a6B6Z2ZX-iHtOi_nF8=,size_20,color_FFFFFF,t_70,g_se,x_16" width="1200"></p>
<p style="margin-left: 0.0001pt; text-align: justify"></p>
<h2 id="13.6%20CSS3%E5%9F%BA%E7%A1%80%E5%BA%94%E7%94%A8" style="margin-left: 0.0001pt; text-align: justify">13.6 CSS3基础应用</h2>
<h3 id="13.6.2%20CSS3%E6%B5%8F%E8%A7%88%E5%99%A8%E5%85%BC%E5%AE%B9%E6%80%A7" style="margin-left: 0.0001pt; text-align: justify">13.6.2 CSS3浏览器兼容性</h3>
<p style="margin-left: 0.0001pt; text-align: justify">1、常用的浏览器属性前缀</p>
<p style="margin-left: 0.0001pt; text-align: justify"><img alt="" height="354" src="https://img-blog.csdnimg.cn/4bf5a68e97fb416ea5c571926609294c.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5a6B6Z2ZX-iHtOi_nF8=,size_20,color_FFFFFF,t_70,g_se,x_16" width="1200"></p>
<p style="margin-left: 0.0001pt; text-align: justify">2、CSS3前缀解决方案</p>
<p style="margin-left: 0.0001pt; text-align: justify"><img alt="" height="327" src="https://img-blog.csdnimg.cn/31e46ac5002c4853a6370a9e47278b53.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5a6B6Z2ZX-iHtOi_nF8=,size_20,color_FFFFFF,t_70,g_se,x_16" width="1200"></p>
<p style="margin-left: 0.0001pt; text-align: justify">3、CSS样式重置方案</p>
<p style="margin-left: 0.0001pt; text-align: justify"><img alt="" height="154" src="https://img-blog.csdnimg.cn/5ce0a256b0f246d0afe60fbe2f87dc66.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5a6B6Z2ZX-iHtOi_nF8=,size_20,color_FFFFFF,t_70,g_se,x_16" width="1200"></p>
<h3 id="13.6.3%20CSS3%E8%BE%B9%E6%A1%86" style="margin-left: 0.0001pt; text-align: justify">13.6.3 CSS3边框</h3>
<p style="margin-left: 0.0001pt; text-align: justify"><img alt="" height="478" src="https://img-blog.csdnimg.cn/9f9e1f8b42724f0b9fa3e63855841e1e.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5a6B6Z2ZX-iHtOi_nF8=,size_20,color_FFFFFF,t_70,g_se,x_16" width="1200"></p>
<p style="margin-left: 0.0001pt; text-align: justify"><img alt="" height="920" src="https://img-blog.csdnimg.cn/c30b89d7814f44bf85f66019bd4e1b38.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5a6B6Z2ZX-iHtOi_nF8=,size_20,color_FFFFFF,t_70,g_se,x_16" width="1200"></p>
<p style="margin-left: 0.0001pt; text-align: justify"><img alt="" height="1058" src="https://img-blog.csdnimg.cn/a4ecfdd8604b4ba289219f95a5deea79.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5a6B6Z2ZX-iHtOi_nF8=,size_20,color_FFFFFF,t_70,g_se,x_16" width="1200"></p>
<p style="margin-left: 0.0001pt; text-align: justify"><img alt="" height="871" src="https://img-blog.csdnimg.cn/71a06a48c1c44bb9bc7ddb4e418edeb9.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5a6B6Z2ZX-iHtOi_nF8=,size_20,color_FFFFFF,t_70,g_se,x_16" width="1200"></p>
<p style="margin-left: 0.0001pt; text-align: justify"><img alt="" height="1200" src="https://img-blog.csdnimg.cn/346583ddcc2c4114b860a5e2a4e3ab01.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5a6B6Z2ZX-iHtOi_nF8=,size_20,color_FFFFFF,t_70,g_se,x_16" width="1200"></p>
<p style="margin-left: 0.0001pt; text-align: justify"><img alt="" height="1200" src="https://img-blog.csdnimg.cn/683c8d6ca3ce43f68bce954d226be71d.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5a6B6Z2ZX-iHtOi_nF8=,size_20,color_FFFFFF,t_70,g_se,x_16" width="1200"></p>
<h3 id="13.6.4%20CSS3%E8%BD%AC%E6%8D%A2transform%E5%B1%9E%E6%80%A7" style="margin-left: 0.0001pt; text-align: justify">13.6.4 CSS3转换transform属性</h3>
<p style="margin-left: 0.0001pt; text-align: justify"><img alt="" height="820" src="https://img-blog.csdnimg.cn/a941a3adf90c467d9403ba42e2830b64.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5a6B6Z2ZX-iHtOi_nF8=,size_20,color_FFFFFF,t_70,g_se,x_16" width="1200"></p>
<p style="margin-left: 0.0001pt; text-align: justify"><img alt="" height="917" src="https://img-blog.csdnimg.cn/0b30d26f60af478bac2a4ec7a347b2f2.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5a6B6Z2ZX-iHtOi_nF8=,size_20,color_FFFFFF,t_70,g_se,x_16" width="1200"></p>
<p style="margin-left: 0.0001pt; text-align: justify"><img alt="" height="548" src="https://img-blog.csdnimg.cn/19ed3f4025e841808ffe3b7812a1dd59.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5a6B6Z2ZX-iHtOi_nF8=,size_20,color_FFFFFF,t_70,g_se,x_16" width="1200"></p>
<p style="margin-left: 0.0001pt; text-align: justify"><img alt="" height="522" src="https://img-blog.csdnimg.cn/42649b0d1efd4c5babaa3e1db977b767.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5a6B6Z2ZX-iHtOi_nF8=,size_20,color_FFFFFF,t_70,g_se,x_16" width="1200"></p>
<h3 id="13.6.5%20CSS3%E8%BF%87%E6%B8%A1transition%E5%B1%9E%E6%80%A7" style="margin-left: 0.0001pt; text-align: justify">13.6.5 CSS3过渡transition属性</h3>
<p style="margin-left: 0.0001pt; text-align: justify"><img alt="" height="964" src="https://img-blog.csdnimg.cn/0f57979a09ee41ecbf13584904cafdda.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5a6B6Z2ZX-iHtOi_nF8=,size_20,color_FFFFFF,t_70,g_se,x_16" width="1200"></p>
<p style="margin-left: 0.0001pt; text-align: justify"><img alt="" height="868" src="https://img-blog.csdnimg.cn/bb7f5f965c094e23976f66c21f7883a1.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5a6B6Z2ZX-iHtOi_nF8=,size_20,color_FFFFFF,t_70,g_se,x_16" width="1200"></p>
<h3 id="13.6.6%20CSS3%E5%8A%A8%E7%94%BBanimation" style="margin-left: 0.0001pt; text-align: justify">13.6.6 CSS3动画animation</h3>
<p style="margin-left: 0.0001pt; text-align: justify"><img alt="" height="866" src="https://img-blog.csdnimg.cn/275eb0b2194949bcbe061b54470a2c13.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5a6B6Z2ZX-iHtOi_nF8=,size_20,color_FFFFFF,t_70,g_se,x_16" width="1200"></p>
<p style="margin-left: 0.0001pt; text-align: justify"><img alt="" height="1200" src="https://img-blog.csdnimg.cn/8becf3873a844d609e89c5e3cdea9e9e.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5a6B6Z2ZX-iHtOi_nF8=,size_20,color_FFFFFF,t_70,g_se,x_16" width="1200"></p>
<p style="margin-left: 0.0001pt; text-align: justify"><img alt="" height="406" src="https://img-blog.csdnimg.cn/5f9f84ce359347138f9b9b25532fe33c.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5a6B6Z2ZX-iHtOi_nF8=,size_20,color_FFFFFF,t_70,g_se,x_16" width="527"></p>
<h3 id="13.6.7%20CSS3%E5%A4%9A%E5%88%97%E5%B1%9E%E6%80%A7" style="margin-left: 0.0001pt; text-align: justify">13.6.7 CSS3多列属性</h3>
<p style="margin-left: 0.0001pt; text-align: justify"><img alt="" height="351" src="https://img-blog.csdnimg.cn/df374f0b0fb54fa697c282635e4bc3f5.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5a6B6Z2ZX-iHtOi_nF8=,size_20,color_FFFFFF,t_70,g_se,x_16" width="514"></p>
<p style="margin-left: 0.0001pt; text-align: justify"><img alt="" height="311" src="https://img-blog.csdnimg.cn/cd532986616d4c16a8181ce6a5fd3410.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5a6B6Z2ZX-iHtOi_nF8=,size_20,color_FFFFFF,t_70,g_se,x_16" width="1200"></p>
<h3 id="13.6.8%20CSS3%E6%96%87%E6%9C%AC%E6%95%88%E6%9E%9C" style="margin-left: 0.0001pt; text-align: justify">13.6.8 CSS3文本效果</h3>
<p style="margin-left: 0.0001pt; text-align: justify"><img alt="" height="1158" src="https://img-blog.csdnimg.cn/0ff5535d39fe44fe8038ae22a590e672.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5a6B6Z2ZX-iHtOi_nF8=,size_20,color_FFFFFF,t_70,g_se,x_16" width="1200"></p>
<p style="margin-left: 0.0001pt; text-align: justify"><img alt="" height="482" src="https://img-blog.csdnimg.cn/8ee796b8947444e0b4c308b2cf9525ab.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5a6B6Z2ZX-iHtOi_nF8=,size_20,color_FFFFFF,t_70,g_se,x_16" width="1200"></p>
<p style="margin-left: 0.0001pt; text-align: justify"></p>
<p style="margin-left: 0.0001pt; text-align: justify"></p>
<p style="margin-left: 0.0001pt; text-align: justify"></p>
<p style="margin-left: 0.0001pt; text-align: justify">参考文献——《Web前端开发技术》 by 储久良</p><br><br>
来源：https://www.cnblogs.com/tiansz/p/16319603.html

查看完整版本: 《Web前端开发技术》笔记