第二十七天

基于央视网新闻页面布局，独立完成一篇新闻页面的HTML结构搭建，重点练习语义化标签的使用和页面布局逻辑。

实践过程与核心知识点应用

1. 页面结构规划

参考央视网新闻页面的层级关系，将页面拆分为「头部导航栏」「新闻标题区」「新闻正文区」「相关新闻推荐区」「页脚信息区」五个核心模块，确保结构清晰、符合用户浏览习惯。

2. 语义化标签的深度应用

• 使用  
    包裹头部导航栏，包含网站LOGO、导航菜单（用  

    标签）和搜索框（ 

    标签）。
  ​
• 新闻标题区采用  

    标签定义主标题， 

    承载副标题和发布时间、作者等元信息，通过    标签标注发布时间，提升语义化。
  ​

• 新闻正文区用  
    标签包裹，段落内容使用  

    标签，关键数据和引用内容分别用    和  

    标签强化。
  ​

• 相关新闻推荐区使用  
    标签，内部通过  

     
  •   构建列表，每个推荐项用    标签实现跳转。
    ​
  • 页脚信息用  
      标签包裹，包含版权声明、联系方式等内容。

  3. 媒体元素与链接处理

  • 新闻配图使用    标签，通过  alt  属性添加图片描述，确保可访问性；设置  width  和  height  属性控制图片尺寸，避免页面布局错乱。
    ​
  • 导航菜单、相关新闻链接均使用    标签，通过  href  属性指定跳转地址，其中当前页面链接设置  class="active"  用于样式区分。

  遇到的问题及解决方案

  1. 问题1：导航菜单布局混乱

  • 原因：未合理规划导航项的排列方式，直接使用    标签导致垂直排列。
    ​
  • 解决方案：将导航项包裹在  
       
    •   标签中，通过设置  display: inline-block  实现水平排列，同时添加间距调整布局。
    2. 问题2：图片加载失败后页面出现空白
    • 原因：图片路径错误，且未设置备用显示内容。
      ​
    • 解决方案：检查图片路径是否正确（相对路径需与HTML文件位置匹配），为    标签添加  alt  属性，确保图片加载失败时显示文字描述。
    3. 问题3：新闻正文段落间距不一致
    • 原因：未统一设置  

        标签的样式，默认margin值导致间距混乱。
      ​

    • 解决方案：在