使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
下载
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
块级元素可以包含行内元素（如、、），但行内元素绝对不可包含块级元素；等仅允许“短语内容”的块级元素更严格，禁止嵌套等块级标签，否则浏览器会自动纠错导致dom结构错乱。
块级元素里不能直接放 <span></span> 以外的行内元素？
不是不能，而是有明确限制：块级元素可以包含行内元素，但反过来绝对不行——行内元素（如 <span></span>、<a></a>、<strong></strong>）不能直接包含块级元素（如 <div>、<code><p></p>、<h1></h1>）。浏览器会自动纠错，比如把 <a><div>xxx</div></a> 拆成两个独立节点，导致样式错乱或事件绑定失效。
-
<p><span>text</span></p>✅ 合法 -
<span><p>text</p></span>❌ 非法，HTML 解析器会把它变成<span></span><p>text</p> <span></span> -
<div><a><img></a></div>✅<a></a>是行内但允许嵌套<img>（被定义为“可替换行内元素”）
<p></p> 里面能放 <div> 吗？
<p>不能。HTML5 明确规定 <code><p></p> 的内容模型是“phrasing content”，即只接受文本、<em></em>、<time></time>、<span></span> 等行内级内容。一旦写 <p></p>
<div>hello</div>，解析器会提前闭合 <p></p>，实际 DOM 变成：<p></p>
<div>hello</div>
<p></p>。
- 常见现象：CSS 的
margin 或 padding 在 <p></p> 上失效，其实是 <p></p> 已被拆断
- 替代方案：用
<div> 替代 <code><p></p>，或改用语义更合适的 <section></section>/<article></article>
- 验证方式：用浏览器开发者工具看 Elements 面板，观察是否出现意外的闭合标签
哪些行内元素“看起来像块级”却仍是行内？
<img>、<input>、<textarea></textarea>、<canvas></canvas> 都是行内元素（display 默认为 inline），但它们是“可替换元素”（replaced elements），渲染行为接近块级——能设宽高、支持 vertical-align，却不遵守行内换行规则。这点常被误判为“可以随便嵌套”。
-
<span><img src="x"></span> ✅ 合法，且 <img> 不会破坏 <span></span> 的行内流
-
<span><div>x</div></span> ❌ 即使 <div> 加了 <code>display: inline，HTML 结构仍非法
- 注意
<button></button>：它默认是行内级，但可安全包含文本和 <span></span>，不能含 <p></p> 或 <div>
<h3>想让行内元素“撑开容器”，该用 CSS 还是改结构？</h3>
<p>别硬靠 <code>display: block 或 inline-block 掩盖嵌套错误。如果一个 <span></span> 里需要多行内容、内边距、垂直居中，说明它本就不该是 <span></span> —— 该换用 <div> 或语义化块级标签。
<ul>
<li>典型反例：用 <code><span class="card">...</span> 包裹标题+段落+按钮，再靠 CSS 强转 block —— 结构语义丢失，屏幕阅读器无法正确识别
- 正确做法：外层用
<article></article> 或 <section></section>，内部用 <h3></h3>、<p></p>、<button></button> 等天然匹配的元素
- 小技巧：用
<div> 时加 <code>role="group" 或 ARIA label，弥补语义缺失
嵌套规则不是浏览器的“脾气”，而是 HTML 规范对文档结构的强制约束。越早按规范组织元素，后期改版、无障碍支持、SEO 适配就越少踩坑。
margin 或 padding 在 <p></p> 上失效，其实是 <p></p> 已被拆断<div> 替代 <code><p></p>，或改用语义更合适的 <section></section>/<article></article>
哪些行内元素“看起来像块级”却仍是行内？
<img>、<input>、<textarea></textarea>、<canvas></canvas> 都是行内元素（display 默认为 inline），但它们是“可替换元素”（replaced elements），渲染行为接近块级——能设宽高、支持 vertical-align，却不遵守行内换行规则。这点常被误判为“可以随便嵌套”。
-
<span><img src="x"></span>✅ 合法，且<img>不会破坏<span></span>的行内流 -
<span><div>x</div></span>❌ 即使<div> 加了 <code>display: inline，HTML 结构仍非法 - 注意
<button></button>：它默认是行内级，但可安全包含文本和<span></span>，不能含<p></p>或<div> <h3>想让行内元素“撑开容器”，该用 CSS 还是改结构？</h3> <p>别硬靠 <code>display: block或inline-block掩盖嵌套错误。如果一个<span></span>里需要多行内容、内边距、垂直居中，说明它本就不该是<span></span>—— 该换用<div> 或语义化块级标签。 <ul> <li>典型反例：用 <code><span class="card">...</span>包裹标题+段落+按钮，再靠 CSS 强转block—— 结构语义丢失，屏幕阅读器无法正确识别 - 正确做法：外层用
<article></article>或<section></section>，内部用<h3></h3>、<p></p>、<button></button>等天然匹配的元素 - 小技巧：用
<div> 时加 <code>role="group"或 ARIA label，弥补语义缺失嵌套规则不是浏览器的“脾气”，而是 HTML 规范对文档结构的强制约束。越早按规范组织元素，后期改版、无障碍支持、SEO 适配就越少踩坑。
