viewport元标签漏写或写错会导致页面无法响应式渲染，常见错误包括content值固定、name拼写错误、标签位置不当；语义化标签应按header/main/footer/aside规范使用；flexbox适合一维布局，grid需谨慎用于二维场景；媒体查询应采用移动优先策略。

viewport元标签漏写或写错，页面根本不会响应

很多新手写完HTML和CSS，发现小屏上内容挤成一团，第一反应是“CSS没写对”，其实大概率是

里缺了这行：<meta name="viewport" content="width=device-width, initial-scale=1.0">。它不是可选的装饰，而是浏览器渲染响应式行为的前提。

常见错误包括：

• 把content属性写成content="width=1200"这类固定值，导致手机强行按1200px宽渲染
• 拼错name，比如写成name="viewpoint"（少一个p）或name="ViewPort"（大小写敏感）
• 放在里，或放在外——必须在内且越靠前越好

用

搭骨架，别再全用

语义化标签不是“看起来高级”，而是让布局逻辑清晰、CSS好写、屏幕阅读器能读、搜索引擎能懂。新手最容易卡在“不知道哪该用什么标签”，其实就四块：

• <header></header>：放logo、主标题、主导航（<nav></nav>就该在里面）
• <main></main>：只放核心内容，比如文章列表、服务介绍、产品卡片——不能套<section></section>再套<main></main>
• <footer></footer>：版权、联系方式、备案号——别塞导航链接，那是<nav></nav>的事
• 侧边栏、作者简介这类辅助内容，用<aside></aside>，不是<div class="sidebar"> <p>写错的典型表现：多个<code><header></header>嵌套、<main></main>里塞页脚、用<div>包住整个导航却不用<code><nav></nav>——这些都会让后续Flexbox或媒体查询更难控制。

  Flexbox一维布局比float更稳，但别一上来就套grid

  新手想实现“导航横排”“三栏自适应”，直接用display: flex比折腾float加clear靠谱得多。但注意：grid适合二维（行列都需精确控制），而首页绝大多数区域是一维排列（比如导航项横向铺开、文章卡片竖向堆叠）。

  

  Doc To HTML

  使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。

  下载

  推荐起步写法：

  • 导航栏：.nav ul { display: flex; flex-wrap: wrap; }，再给li设flex: 1或固定min-width
  • 主内容区两栏（文章+侧边栏）：main { display: flex; gap: 20px; }，然后main > article { flex: 3; }、main > aside { flex: 1; }
  • 千万别在上直接写display: grid——没有明确grid-template-areas时，容易让所有子元素乱序

  媒体查询别等写完再加，从移动优先开始写CSS

  新手常犯的错误是：先在桌面尺寸下把样式调完美，最后加@media (max-width: 768px) { ... }去“修补”小屏。结果往往要推翻重写。正确做法是——默认CSS就按手机写，再用@media (min-width: 768px)往上增强。

  例如：

  • 导航链接默认垂直堆叠，flex-direction: column
  • 图片max-width: 100%、height: auto写在基础样式里，而不是媒体查询里
  • 只在min-width: 768px里把导航改成flex-direction: row，主内容区从单列变双列

  真正容易被忽略的是：字体大小、行高、padding/margin这些“看不见的间距”，在小屏上缩得太紧会严重影响可读性——它们比布局切换更早需要适配。