准备工作
- 安装编辑软件和Chrome浏览器
2、创建指定目录存放代码文件
一、概述
- 是什么：HTML 是超文本标记语言，是网页开发的标准语言。
- 为什么：浏览器展示图文信息需要容器 / 骨架承载，HTML 用于搭建网页结构、划分页面结构。
二、HTML 基础模板及使用要点
- 基础模板
<!DOCTYPE html> <!-- 声明文档类型 -->
<html lang="zh"> <!-- 根元素 -->
<head> <!-- 网页头部标签 (不可视化部分) -->
<meta charset="UTF-8"> <!-- 字符编码设置为 UTF - 8 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 移动端视口信息设置 -->
<title>网页标题</title><!-- 浏览器 topbar 显示标题 -->
</head>
<body>
<!-- 网页主体（可视化部分） -->
<h1>hello world!</h1>
<div class="text5">5</div>
</body>
</html>
-
使用标签要点
- 标签开闭原则：双标签符合开闭原则
<开始标签> </结束标签>，单标签<单标签>。 - 标签字母：标签字母小写。
- 标签属性：
<标签 标签属性 = “值”> </标签>。 - 类名和 ID 命名
- 字母开头，不能用数字或特殊字符开头。
- 不能用特殊符号（如 @!#%&*）命名。
- 可以数字结尾，如 text1、box1。
- 类名属性可驼峰命名（如 loginButton、indexHeader、indexList）或用短横线（如 login - button、index - header、index - list）。
- ID 名称建议驼峰命名。
- 不推荐但可以使用中文命名。
- 标签开闭原则：双标签符合开闭原则
-
注释：
<!-- 注释： 说明描述作用、不被浏览器解析 Ctrl + / 组合 -->
三、元素分类
-
无语义标签
- 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:///下访问。
- 本地相对路径（推荐）：
六 、作业练习
文本素材：
新华全媒+│辞旧迎新活力勃发
2024-01-01 22:16 来源: 新华社 发布于：北京市
原标题：新华全媒+｜辞旧迎新 活力勃发
辞别旧岁，万象更新。
时光叩开2024年的大门，与我们相拥。
在神州大地上，人们正以不同的方式，书写崭新的2024。
新的一年，奋斗不息，前进不止。
2024，继续出发！
记者：张智敏、黄国保、邓瑞璇、陈思汗、丁怡全、丁汀、贾远琨、狄春、杨静、熊轩昂、王怿文、李涛、范培珅、马莎、张睿、马希平、冯媛媛、王松、鞠焕宗、王修楠、田晨旭
摄制：姚巍
报道员：吴菲、陈思瑾、许津铭、杨坤明、叶刘琦、王扬、李春雷、孙文然、杨代迎、安丽、李申圣、王钊
