Head First HTML与CSS、XHTML（中文版）

本网站不提供下载链接，喜欢看书的朋友请关注公众号：【lennylee的碎碎念】(lennyleede)，首页回复：授人以渔，自动获取搜索资源的方法。

内容简介:

{内容简介}

在你成为一名行家之后，阅读HTML书籍给你的唯一感受就是厌烦吗？那么现在就是你拿起《深入浅出HTML与CSS、XHTML》来真正学习HTML的时候了。这本书展示了学习创建符合工业标准的Web页面的完整历程——然而，除了阅读，你还会玩游戏、拼图、解谜题以及以你从未想象过的方式创建Web页面。并且，你还将学习HTML如何与CSS一起工作。哦，如果你从未听说过CSS，没关系——我们不会告诉其他人你仍然停留在上个世纪末，但是，如果你要创建本世纪的Web页面，那么，你应该了解和熟悉CSS。 .

《深入浅出HTML与CSS、XHTML》能让你避免认为Web-safe颜色还是紧要问题的尴尬，以及不明智地把标记放入你的页面。最大的好处是，你将毫无睡意地学习HTML、XHTML 和CSS。如果你曾经读过深入浅出（Head First）系列图书中的任一本，就会知道书中展现的是什么：一个按人脑思维方式设计的丰富的可视化学习模式。本书的编写采用了许多最新的研究，包括神经生物学、认知科学以及学习理论，这使得本书能让HTML和CSS深深地烙印在你的脑海里。 ..

学会创建Web页面的真正诀窍，并认识到为什么你的老板所说的关于HTML表格的一切都有可能是错误的（以及做什么来代替）。最重要的是，在鸡尾酒会上当你的同事随口提及他的HTML现在如何完整以及他的CSS是在外部样式表里时，你表示认同，这会给酒会客人留下深刻的印象。…

作者简介:

作者: Elisabeth Freeman

Eric Freeman和Elisabeth Freeman是作家、讲师，以及技术顾问。原本在迪士尼公司领导了四年的数字媒体，以及Internet的开发，后来，他们将这些经验应用在他们自己的媒体中，包括本书。Eric具有耶鲁大学的计算机科学博士学位，Elisabeth具有耶鲁大学的计算机科学硕土学位。

作者: Eric Freeman

引子
谁适合读这本书？
我们知道你的大脑在想什么
元认知
让你的大脑就范
技术审校
致谢
1 Web语言：开始了解HTML
Web击败了video明星
web服务器能干些什么？
让我们（用HTML）来写些什么吧……
浏览器创建了什么……
你在Starbuzz咖啡馆走了好运
建立Starbuzz网页
创建一个HTML文件（使用MAC系统）
创建一个HTML文件（使用Windows系统）
现在，让我们回到Starbuzz的工作上来……
用浏览器打开你的网页
调试你的网页……
解剖标记……
认识样式元素
给Starbuzz添加样式……
谁做了什么？
围炉夜话
要点
习题解答
2 认识HTML中的“HT”：深入理解超文本
崭新且改进过的Head First休闲室
创建新的休闲室
我们做了些什么？
浏览器要做什么？
了解属性
技术难点
计划好你的路径……
修复损坏的图像……
习题解答
3 创建网页：构建模块
以每小时12公里的速度启动网站之旅
粗略的设计草图
从草图到略图
从略图到网页
测试Tony的网页
认识元素
很长很长的引用
添加
和
奇案背后的真相
用
元素来做一个列表……
简单的两步创建HTML列表
把一个元素放进另一个元素，叫做“嵌套”
用图示来了解嵌套的关系
使用嵌套来确保你的标记匹配
内联元素还是块元素？
习题解答
4 Web镇之旅：开始链接
发布Starbuzz（或者你自己的）主页到web上
寻找主机代理商
如何获得一个域名？
搬迁
把你的文件复制到根目录
尽量在两页中介绍你可能用到的FTP
返回休闲室主页……
关键的URL
什么是HTTP协议？
什么是绝对路径？
默认网页如何工作
怎样链接到其他网页？
链接至lJCaffeine Buzz
网页修饰并完成
链接到一个页面
使用元素创建目的地
如何链接到目标锚
链接到一个新窗口
使用target（对象）打开一个新窗口
习题解答
5 认识媒体：给网页添加图像
浏览器如何处理图像
图像是如何工作的
现在正式介绍：认识元素
总是提供可选项
创建最后的fan网站：myPod
哇！图像太大了
修改myPod HTML
使用缩略图重新修改网站
让缩略图变成链接
怎么创建图像的链接呢？用images？
我们应该用哪种格式？
透明还是不透明？这是个问题……
等等，什么是网页的背景颜色？
用蒙版做logo
添加logo到myPod网页
习题解答
6 严格的HTML：遵循标准，合乎规范
办公室隔间对话
HTML简史
我不会让你的网页引导浏览器进入转换显示模式
添加文件类型定义
接触W3C校验器
校验Head First休闲室
Houston，我们遇到问题了……
添加标记说明内容的类型
让校验器更容易识别内容标记……
第三次尝试的魅力
把DOCTYPE改为严格版本
是否被认可了？
解决嵌套问题
再次测试是否严格了……
严格的HTML 4.01，紧扣手册
围炉夜话
HTML考古
习题解答
7 添加一个“X”到HTML：转到XHTML
什么是XML？
如何将HTML改为xHTML？
为什么要使用XHTML？
规范xHTML的校验表
严格的HTML转化为XHTML1.0
旧版的HTML4.01
新的改进了的HTML4.01
校验：不只适用于HTML
围炉夜话
HTML还是XHTML？决定权在于你
习题解答
8 添加一些样式：开始学习CSS
9 扩大你的词汇量：字体和颜色样式
10 与元素亲密接触：盒模式
11 高级网站构建：div和 span
12 布置元素：布局和排版
13 开始制作表格：表格和列表
14 交互活动：XHTML 表单
附录A：排名前十的主题（本书未涉及）：剩余部分
· · · · · · (收起)

原文摘录:

元素：必不可少的元素之一。
记得使用和让你的网站更好
元素里一定会有有元素<br /> 只使用有用的块元素填充<br /> 所有的内联元素和文本都必须在块元素中才能运行。<br /> 让块元素远离内联元素。<br /> 只有文本和其他内联元素可以嵌入内联元素中。块元素在任何情况下都不允许包含在内联元素里。<br /> 块元素禁止包含在</p> <p>元素之中。<br /> 可以再段落里使用所有的内联元素（<em>,<a>,<strong>,<img>,<q>等）。<br /> 列表里只能包含列表项目。<br /> 只有</p> <li>元素允许放在 <ul>元素和</p> <ol>元素里。因此，只有列表项才能放在有序和无序列表里。<br /> 列表项可以是任何内容。</p> <blockquote><p>元素中要有一个和多个块元素。<br /> 内联元素相互嵌套要小心。<br /> 可以将任何内联元素嵌入到另一个元素中，但有两个情况另外。<a>元素决不能自我嵌套，因为那样用户不理解。另外，据规定空元素（如<img>)中不能嵌套其他内联元素。 (查看原文)</p> <p> 兰木清<br /> 2012-03-24 20:49:09</p> <p> —— 引自第253页</p> <p> <span>元素跟工作方式一样，用来把内联内容分成不同的逻辑部分，而则是把块级的内容分成不同的逻辑部分。 (查看原文)</p> <p> 熊爸爸<br /> 2012-10-20 13:52:23</p> <p> —— 引自第464页</p> </div> <footer class="entry-footer"> <span class="byline"><span class="author vcard"><img src="http://www.tiantianbooks.com/wp-content/uploads/2022/10/0-150x150.png" width="49" height="49" alt="头像" class="avatar avatar-49 wp-user-avatar wp-user-avatar-49 photo avatar-default" /><span class="screen-reader-text">作者 </span> <a class="url fn n" href="http://www.tiantianbooks.com/author/lennylee/">lennylee</a></span></span><span class="posted-on"><span class="screen-reader-text">发布于 </span><a href="http://www.tiantianbooks.com/2025/12/31/head-first-html%e4%b8%8ecss%e3%80%81xhtml%ef%bc%88%e4%b8%ad%e6%96%87%e7%89%88%ef%bc%89/" rel="bookmark"><time class="entry-date published updated" datetime="2025-12-31T19:51:24+08:00">2025年12月31日</time></a></span><span class="cat-links"><span class="screen-reader-text">分类 </span><a href="http://www.tiantianbooks.com/category/%e5%93%b2%e5%ad%a6%e5%8e%86%e5%8f%b2/" rel="category tag">哲学历史</a></span> </footer> </article> <nav class="navigation post-navigation" aria-label="文章"> <h2 class="screen-reader-text">文章导航</h2> <div class="nav-links"><div class="nav-previous"><a href="http://www.tiantianbooks.com/2025/12/31/%e8%a3%82%e5%8f%98%e5%bc%8f%e5%88%9b%e4%b8%9a/" rel="prev"><span class="meta-nav" aria-hidden="true">上一篇</span> <span class="screen-reader-text">上篇文章：</span> <span class="post-title">裂变式创业</span></a></div><div class="nav-next"><a href="http://www.tiantianbooks.com/2025/12/31/%e4%ba%92%e8%81%94%e7%bd%91%e8%bf%9b%e5%8c%96%e8%ae%ba/" rel="next"><span class="meta-nav" aria-hidden="true">下一篇</span> <span class="screen-reader-text">下篇文章：</span> <span class="post-title">互联网进化论</span></a></div></div> </nav> </main> </div> <aside id="secondary" class="sidebar widget-area"> <section id="block-2" class="widget widget_block widget_search"><form role="search" method="get" action="http://www.tiantianbooks.com/" class="wp-block-search__button-outside wp-block-search__text-button wp-block-search" ><label class="wp-block-search__label" for="wp-block-search__input-1" >搜索</label><div class="wp-block-search__inside-wrapper " ><input class="wp-block-search__input" id="wp-block-search__input-1" placeholder="" value="" type="search" name="s" required /><button aria-label="搜索" class="wp-block-search__button wp-element-button" type="submit" >搜索</button></div></form></section><section id="block-17" class="widget widget_block"> <div class="wp-block-group"><div class="wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow"> <p>扫码关注“lennylee的碎碎念”获得更多书讯 </p> <figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="430" height="430" src="http://47.103.99.188/wordpress/wp-content/uploads/2022/07/qrcode_for_gh_d77bd413d4c2_430.jpg" alt="" class="wp-image-43" srcset="http://www.tiantianbooks.com/wp-content/uploads/2022/07/qrcode_for_gh_d77bd413d4c2_430.jpg 430w, http://www.tiantianbooks.com/wp-content/uploads/2022/07/qrcode_for_gh_d77bd413d4c2_430-300x300.jpg 300w, http://www.tiantianbooks.com/wp-content/uploads/2022/07/qrcode_for_gh_d77bd413d4c2_430-150x150.jpg 150w" sizes="(max-width: 430px) 85vw, 430px" /><figcaption class="wp-element-caption">扫码关注“lennylee的碎碎念”获得更多书讯</figcaption></figure> </div></div> </section><section id="block-3" class="widget widget_block"> <div class="wp-block-group"><div class="wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow"> <h2 class="wp-block-heading">近期文章</h2> <ul class="wp-block-latest-posts__list wp-block-latest-posts"><li><a class="wp-block-latest-posts__post-title" href="http://www.tiantianbooks.com/2025/12/31/%e9%a3%9e%e5%be%97%e6%9b%b4%e9%ab%98/">飞得更高</a></li> <li><a class="wp-block-latest-posts__post-title" href="http://www.tiantianbooks.com/2025/12/31/%e7%96%af%e7%8b%82%e7%9a%84%e7%ab%99%e9%95%bf/">疯狂的站长</a></li> <li><a class="wp-block-latest-posts__post-title" href="http://www.tiantianbooks.com/2025/12/31/%e6%95%b0%e5%ad%97%e5%8c%96%e5%b4%87%e6%8b%9c/">数字化崇拜</a></li> <li><a class="wp-block-latest-posts__post-title" href="http://www.tiantianbooks.com/2025/12/31/%e7%8e%a9%e8%b5%9a%e4%bd%a0%e7%9a%84%e7%bd%91%e7%ab%99/">玩赚你的网站</a></li> <li><a class="wp-block-latest-posts__post-title" href="http://www.tiantianbooks.com/2025/12/31/%e5%95%86%e6%88%98%ef%bc%9a%e7%94%b5%e5%95%86%e6%97%b6%e4%bb%a3/">商战：电商时代</a></li> </ul></div></div> </section><section id="block-4" class="widget widget_block"> <div class="wp-block-group"><div class="wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow"> <h2 class="wp-block-heading">分类目录</h2> <ul class="wp-block-categories-list wp-block-categories"> <li class="cat-item cat-item-7"><a href="http://www.tiantianbooks.com/category/%e4%ba%ba%e6%96%87%e7%a4%be%e7%a7%91/">人文社科</a> </li> <li class="cat-item cat-item-10"><a href="http://www.tiantianbooks.com/category/%e5%8a%b1%e5%bf%97%e5%bf%83%e7%90%86/">励志心理</a> </li> <li class="cat-item cat-item-8"><a href="http://www.tiantianbooks.com/category/%e5%93%b2%e5%ad%a6%e5%8e%86%e5%8f%b2/">哲学历史</a> </li> <li class="cat-item cat-item-5"><a href="http://www.tiantianbooks.com/category/%e6%96%87%e5%ad%a6%e5%90%8d%e8%91%97/">文学名著</a> </li> <li class="cat-item cat-item-1"><a href="http://www.tiantianbooks.com/category/uncategorized/">未分类</a> </li> <li class="cat-item cat-item-11"><a href="http://www.tiantianbooks.com/category/%e7%a7%91%e6%99%ae%e6%8a%80%e6%9c%af/">科普技术</a> </li> <li class="cat-item cat-item-12"><a href="http://www.tiantianbooks.com/category/%e7%ae%a1%e7%90%86%e9%94%80%e5%94%ae/">管理销售</a> </li> <li class="cat-item cat-item-13"><a href="http://www.tiantianbooks.com/category/%e8%af%bb%e4%b9%a6%e5%bf%83%e5%be%97/">读书心得</a> </li> <li class="cat-item cat-item-9"><a href="http://www.tiantianbooks.com/category/%e9%87%91%e8%9e%8d%e7%bb%8f%e6%b5%8e%e6%8a%95%e8%b5%84/">金融经济投资</a> </li> </ul></div></div> </section><section id="block-27" class="widget widget_block"> <div class="wp-block-group"><div class="wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow"> <h2 class="wp-block-heading">文章归档</h2> <ul class="wp-block-archives-list wp-block-archives"> <li><a href='http://www.tiantianbooks.com/2025/12/'>2025 年 12 月</a></li> <li><a href='http://www.tiantianbooks.com/2025/11/'>2025 年 11 月</a></li> <li><a href='http://www.tiantianbooks.com/2025/10/'>2025 年 10 月</a></li> <li><a href='http://www.tiantianbooks.com/2025/09/'>2025 年 9 月</a></li> <li><a href='http://www.tiantianbooks.com/2025/08/'>2025 年 8 月</a></li> <li><a href='http://www.tiantianbooks.com/2025/07/'>2025 年 7 月</a></li> <li><a href='http://www.tiantianbooks.com/2025/06/'>2025 年 6 月</a></li> <li><a href='http://www.tiantianbooks.com/2025/03/'>2025 年 3 月</a></li> <li><a href='http://www.tiantianbooks.com/2025/02/'>2025 年 2 月</a></li> <li><a href='http://www.tiantianbooks.com/2024/01/'>2024 年 1 月</a></li> <li><a href='http://www.tiantianbooks.com/2023/11/'>2023 年 11 月</a></li> <li><a href='http://www.tiantianbooks.com/2023/10/'>2023 年 10 月</a></li> <li><a href='http://www.tiantianbooks.com/2023/09/'>2023 年 9 月</a></li> <li><a href='http://www.tiantianbooks.com/2023/08/'>2023 年 8 月</a></li> <li><a href='http://www.tiantianbooks.com/2023/07/'>2023 年 7 月</a></li> <li><a href='http://www.tiantianbooks.com/2023/06/'>2023 年 6 月</a></li> <li><a href='http://www.tiantianbooks.com/2023/05/'>2023 年 5 月</a></li> <li><a href='http://www.tiantianbooks.com/2023/04/'>2023 年 4 月</a></li> <li><a href='http://www.tiantianbooks.com/2023/03/'>2023 年 3 月</a></li> <li><a href='http://www.tiantianbooks.com/2023/02/'>2023 年 2 月</a></li> <li><a href='http://www.tiantianbooks.com/2023/01/'>2023 年 1 月</a></li> <li><a href='http://www.tiantianbooks.com/2022/12/'>2022 年 12 月</a></li> <li><a href='http://www.tiantianbooks.com/2022/11/'>2022 年 11 月</a></li> <li><a href='http://www.tiantianbooks.com/2022/10/'>2022 年 10 月</a></li> <li><a href='http://www.tiantianbooks.com/2022/09/'>2022 年 9 月</a></li> <li><a href='http://www.tiantianbooks.com/2022/08/'>2022 年 8 月</a></li> <li><a href='http://www.tiantianbooks.com/2022/07/'>2022 年 7 月</a></li> </ul></div></div> </section><section id="block-40" class="widget widget_block"> <div class="wp-block-group"><div class="wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow"> <div class="wp-block-group"><div class="wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow"> <h2 class="wp-block-heading">友情链接</h2> <ul> <li><a href="https://www.2slw.cn" target="_blank" rel="noreferrer noopener">爱收录</a></li> </ul> </div></div> </div></div> </section> </aside> </div> <footer id="colophon" class="site-footer"> <nav class="main-navigation" aria-label="页脚主菜单"> <div class="menu-%e4%b8%bb%e8%8f%9c%e5%8d%95-container"><ul id="menu-%e4%b8%bb%e8%8f%9c%e5%8d%95-2" class="primary-menu"><li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-14"><a href="http://47.103.99.188/wordpress">首页</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-24"><a href="http://www.tiantianbooks.com/category/%e6%96%87%e5%ad%a6%e5%90%8d%e8%91%97/">文学名著</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-33"><a href="http://www.tiantianbooks.com/category/%e4%ba%ba%e6%96%87%e7%a4%be%e7%a7%91/">人文社科</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category current-post-ancestor current-menu-parent current-post-parent menu-item-34"><a href="http://www.tiantianbooks.com/category/%e5%93%b2%e5%ad%a6%e5%8e%86%e5%8f%b2/">哲学历史</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-35"><a href="http://www.tiantianbooks.com/category/%e9%87%91%e8%9e%8d%e7%bb%8f%e6%b5%8e%e6%8a%95%e8%b5%84/">金融经济投资</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-36"><a href="http://www.tiantianbooks.com/category/%e5%8a%b1%e5%bf%97%e5%bf%83%e7%90%86/">励志心理</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-37"><a href="http://www.tiantianbooks.com/category/%e7%a7%91%e6%99%ae%e6%8a%80%e6%9c%af/">科普技术</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-38"><a href="http://www.tiantianbooks.com/category/%e7%ae%a1%e7%90%86%e9%94%80%e5%94%ae/">管理销售</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-39"><a href="http://www.tiantianbooks.com/category/%e8%af%bb%e4%b9%a6%e5%bf%83%e5%be%97/">读书心得</a></li> </ul></div> </nav> <nav class="social-navigation" aria-label="页脚社交链接菜单"> <div class="menu-%e4%b8%bb%e8%8f%9c%e5%8d%95-container"><ul id="menu-%e4%b8%bb%e8%8f%9c%e5%8d%95-3" class="social-links-menu"><li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-14"><a href="http://47.103.99.188/wordpress"><span class="screen-reader-text">首页</span></a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-24"><a href="http://www.tiantianbooks.com/category/%e6%96%87%e5%ad%a6%e5%90%8d%e8%91%97/"><span class="screen-reader-text">文学名著</span></a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-33"><a href="http://www.tiantianbooks.com/category/%e4%ba%ba%e6%96%87%e7%a4%be%e7%a7%91/"><span class="screen-reader-text">人文社科</span></a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category current-post-ancestor current-menu-parent current-post-parent menu-item-34"><a href="http://www.tiantianbooks.com/category/%e5%93%b2%e5%ad%a6%e5%8e%86%e5%8f%b2/"><span class="screen-reader-text">哲学历史</span></a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-35"><a href="http://www.tiantianbooks.com/category/%e9%87%91%e8%9e%8d%e7%bb%8f%e6%b5%8e%e6%8a%95%e8%b5%84/"><span class="screen-reader-text">金融经济投资</span></a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-36"><a href="http://www.tiantianbooks.com/category/%e5%8a%b1%e5%bf%97%e5%bf%83%e7%90%86/"><span class="screen-reader-text">励志心理</span></a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-37"><a href="http://www.tiantianbooks.com/category/%e7%a7%91%e6%99%ae%e6%8a%80%e6%9c%af/"><span class="screen-reader-text">科普技术</span></a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-38"><a href="http://www.tiantianbooks.com/category/%e7%ae%a1%e7%90%86%e9%94%80%e5%94%ae/"><span class="screen-reader-text">管理销售</span></a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-39"><a href="http://www.tiantianbooks.com/category/%e8%af%bb%e4%b9%a6%e5%bf%83%e5%be%97/"><span class="screen-reader-text">读书心得</span></a></li> </ul></div> </nav> <div class="site-info"> <span class="site-title"><a href="http://www.tiantianbooks.com/" rel="home">天天读书</a></span> <a href="https://cn.wordpress.org/" class="imprint"> 自豪地采用WordPress </a> </div> </footer> </div> </div> <script src="http://www.tiantianbooks.com/wp-content/themes/twentysixteen/js/skip-link-focus-fix.js?ver=20170530" id="twentysixteen-skip-link-focus-fix-js"></script> <script id="twentysixteen-script-js-extra"> var screenReaderText = {"expand":"\u5c55\u5f00\u5b50\u83dc\u5355","collapse":"\u6298\u53e0\u5b50\u83dc\u5355"}; </script> <script src="http://www.tiantianbooks.com/wp-content/themes/twentysixteen/js/functions.js?ver=20181217" id="twentysixteen-script-js"></script> </body> </html>