准备工作

1. 安装编辑软件和 Chrome 浏览器

2、创建指定目录存放代码文件

一、概述

• 是什么：HTML 是超文本标记语言，是网页开发的标准语言。
• 为什么：浏览器展示图文信息需要容器 / 骨架承载，HTML 用于搭建网页结构、划分页面结构。

二、HTML 基础模板及使用要点

 
 
 
     
     
    


    
     
hello world!
     
5

三、元素分类

• 无语义标签

  • div：块标签。
  • span：行内标签。

• 含语义标签

  • h1 – h6：标题标签，默认字体加粗，一个网页通常一个 h1 标签，属于块标签。
  • p：段落标签，形容一段文本或字符，可嵌套文本、行内元素，不能直接嵌套块元素，是块标签。
  • ul li：无序列表标签。
  • ol li：有序列表标签。
  • dl dt dd：自定义列表。
  • img：图片标签，单标签，行内块标签，可在同一行显示且能直接设宽度高度。
  • table thead tr th tbody td：表格标签。
  • a：链接标签。
  • u：带下划线标签。
  • i：斜体字标签。
  • del：带删除线标签。
  • b：加粗标签。
  • strong：字体加粗标签。
  • form：表单标签。
  • input：输入框标签等多种作用。
  • button：按钮标签。
  • select option：下拉标签。

四、元素显示特点

• 块级元素：默认display: block，独占一行显示，可直接设宽度高度。
• 行内元素：默认display: inline，在同一行显示，不能直接设宽度高度，用于修饰页面细节。
• 行内块元素 ：默认display: inline - block，可在同一行显示且能直接设宽度高度，用于布局页面细节、小的区块，但可能出现文本空白，可通过嵌套标签并设font - size 为 0 解决。

五、常见标签详解

• 标题标签

  • 从 h1 到h6，字体默认加粗，一个网页通常一个 h1 标签，且都是块标签。

• 段落标签

  • 用于表示一段文本，不能嵌套块元素，可嵌套文本和行内元素，是块标签。

• 列表标签

  • 无序列表 ul 与li、有序列表 ol 与li、自定义列表 dl 与dt和dd，都可独占一行且直接设宽度高度，视为块级元素。

• 图片标签

  • img是单标签，行内块标签，通过 src 属性填写图片路径，alt属性描述图片，title可添加标题。
  • 路径问题
    • 本地相对路径（推荐）：./表示当前路径，../表示上一级目录路径，../../表示上上一级目录路径。
    • http 环境下相对路径。
    • 绝对路径（客户端不推荐使用）：带电脑盘符，如 E:...，需在文件传输协议file:/// 下访问。

六、作业练习

 文本素材：

1. 新华全媒 +│辞旧迎新活力勃发

2. 2024-01-01 22:16 来源: 新华社 发布于：北京市

3. 原标题：新华全媒 +|辞旧迎新 活力勃发

4. 辞别旧岁，万象更新。

5. 时光叩开 2024 年的大门，与我们相拥。

6. 在神州大地上，人们正以不同的方式，书写崭新的 2024。

7. 新的一年，奋斗不息，前进不止。

8. 2024，继续出发！

9. 记者：张智敏、黄国保、邓瑞璇、陈思汗、丁怡全、丁汀、贾远琨、狄春、杨静、熊轩昂、王怿文、李涛、范培珅、马莎、张睿、马希平、冯媛媛、王松、鞠焕宗、王修楠、田晨旭

10. 摄制：姚巍

11. 报道员：吴菲、陈思瑾、许津铭、杨坤明、叶刘琦、王扬、李春雷、孙文然、杨代迎、安丽、李申圣、王钊