准备工作
- 安装编辑软件和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,继续出发!
记者:张智敏、黄国保、邓瑞璇、陈思汗、丁怡全、丁汀、贾远琨、狄春、杨静、熊轩昂、王怿文、李涛、范培珅、马莎、张睿、马希平、冯媛媛、王松、鞠焕宗、王修楠、田晨旭
摄制:姚巍
报道员:吴菲、陈思瑾、许津铭、杨坤明、叶刘琦、王扬、李春雷、孙文然、杨代迎、安丽、李申圣、王钊