一个能被浏览器正确解析的html页面必须包含、、、、这5个基础标签，缺一可能导致怪异模式、seo失效、乱码或移动端异常。

HTML文档必须包含的5个基础标签

一个能被浏览器正确解析的HTML页面，至少得有 、<code>、、<title></title>、 这5个标签。少任何一个，都可能触发怪异模式（Quirks Mode）或导致SEO失效、字符乱码、移动端缩放异常。

常见错误现象：页面中文显示为方块、手机上文字挤成一团、标题不显示在浏览器标签页——往往就是漏了 <meta charset="UTF-8"> 或 <title></title>，或者把内容直接写在 外面。

• 必须在第一行，且不能带任何空格或注释前置
• 的 lang 属性建议加上，对屏幕阅读器和搜索引擎识别语言很关键
• 里至少要有 <meta charset="UTF-8"> 和 <meta name="viewport" content="width=device-width, initial-scale=1.0">
• <title></title> 不只是“网页标题”，它也是搜索引擎结果页的第一行文案
• 是唯一能放用户可见内容的地方；<script></script> 标签放这里末尾，避免阻塞渲染

语义化结构标签怎么选：header / main / section / article / aside / footer

这些标签不是“可有可无的装饰”，而是告诉浏览器和辅助设备“这一块内容是什么角色”。用错或滥用，会导致无障碍访问失败、爬虫抓取错乱、甚至某些RPA工具（如影刀）XPath定位失效。

典型误用场景：把所有卡片都套 <section></section>，却没配 <h2></h2>～<h6></h6>；用 <div> 模拟按钮但没加 <code>role="button"；把广告位硬塞进 <main></main> ——这会破坏“主内容唯一性”原则。

• <main></main> 在整个页面中只能出现一次，且不能嵌套在 <header></header>、<footer></footer>、<aside></aside> 内
• <article></article> 要求内容独立可复用（比如一篇博客、一条新闻），单独拿出来仍有完整意义
• <aside></aside> 不是“随便放边栏”，它必须和相邻的 <article></article> 或 <section></section> 有逻辑关联（如作者简介、相关推荐）
• <section></section> 必须有明确主题，且应以 <h2></h2>～<h6></h6> 开头，否则语义断裂
• 纯布局用途优先用 <div>，语义明确时才换用语义标签——别为了“看起来更现代”强行替换 <h3>文本与列表类标签的易错点：p / span / strong / ul / ol / li</h3> <p><code><p></p> 和 <span></span> 看似简单，但常被当成“万能容器”滥用；<strong></strong> 和 <b></b> 表现一样，语义却完全不同；列表项 <li> 必须嵌套在 <ul></ul> 或 <ol></ol> 里，否则HTML验证失败。

  性能影响：大量嵌套 <span></span> 做样式隔离，比用CSS类名控制更难维护；用 <ol></ol> 实现序号但又用CSS关掉默认数字，不如直接用 <ul></ul> + 自定义计数器。

  

  使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件

  如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Andr​​oid友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Andr​​oid应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

  下载
  • <p></p> 是块级元素，自带上下边距；连续多个 <p></p> 会产生额外空白，需用CSS重置 margin
  • <span></span> 是行内元素，不能直接设宽高，除非改成 display: inline-block 或类似
  • <strong></strong> 表示内容重要性提升（对SEO和读屏软件有意义），<b></b> 仅视觉加粗，无语义
  • <ul></ul> 默认圆点，<ol></ol> 默认阿拉伯数字；两者都不能直接包 <div>，必须通过 <code><li> 中转
  • 列表嵌套时，<li> 内可再放 <ul></ul> 或 <ol></ol>，但不要跨层混用（比如 <ul></ul> 直接子元素是 <ol></ol>）

  RPA和前端协作时最常卡住的HTML标签定位问题

  影刀、UiPath、Python Selenium 等工具依赖XPath或CSS选择器提取数据，但实际页面中，<div> 和 <code><span></span> 占比超70%，而真正带 id 或稳定 class 的标签极少。靠肉眼找标签容易漏掉动态生成内容、iframe隔离区、或伪元素遮挡。

  容易踩的坑：用 //div[text()='立即购买'] 匹配按钮，但真实DOM里可能是 <button>立即购买</button>；用 //img/@src 提取图片，却忘了有些图是CSS背景图，根本不在 <img> 标签里。

  • 优先按属性定位：//*[@id='submit-btn'] > //button[contains(@class,'btn-primary')] > //button[text()='登录']
  • <iframe></iframe> 内的内容必须先 switch_to.frame()，否则XPath永远查不到
  • 价格、SKU等动态字段常藏在 <span></span> 或 <div> 里，且 class 名含哈希（如 <code>price_abc123），要用 contains(@class,'price') 而非全匹配
  • <input> 和 <textarea></textarea> 的值不在标签内部，而是在 value 属性里，XPath要写成 //input[@name='username']/@value
  • 表格数据别只认 <table>，现在很多“表格”是用 <code><div> + CSS Grid 模拟的，得靠结构特征（如固定列数、重复class）定位 <p>语义标签不是越多越好，关键在“该用的时候不省，不该用的时候不凑”。很多问题其实不出在标签本身，而出在没看清它的约束条件——比如 <code><main></main> 只能有一个，<article></article> 必须自包含，<li> 必须有父列表。把这些边界记牢，比背一百个标签有用得多。