HTML学习笔记及案例（第四周第2次）-CSDN博客

本文链接：https://blog.csdn.net/wsgjm1314/article/details/104803189

本文详细介绍了HTML5的基本概念、文档结构和常用标签，包括换行、段落、标题、列表、图像、注释、实体字符等。此外，还深入讲解了超链接的使用，如基本用法、锚链接、功能性链接和URL的理解。通过对HTML5的学习，读者能够掌握网页制作的基础知识和实践技巧。

摘要由CSDN通过智能技术生成

文章目录

一、HTML简介

####1. HTML是什么？

HTML：Hyper Text Markup Language超文本**标记（标签）**语言

由多种标签组成，用来制作网页，告浏览器该如何显示页面

2. HTML语言作用？

制作网页，控制网页和内容的显示
插入图片、音乐、视频、动画等多媒体
通过链接检索信息
使用表单获取用户信息，实现交互

3. 版本

W3C:World wide web consortium万维网联盟，制定WEB技术相关标准和规范的组织，HTML就是由W3C制定的标准

常用两个版本：HTML4.0和HTML5.0，通常我们使用的是HTML5.0

官网：https://www.w3school.com.cn/

4. HTML后缀名----拓展名

HTML文件的拓展名是以.html或.htm来结尾

二、HTML文档结构

1. 基本结构

1.1 简介

HTML标签是由尖括号括起来的关键词，如<html>,通常都是成对出现的，如<html></html>
以<html>为根标签，包含：<head>头部和<body>主体部分
头部提供关于网页的相关信息，如标题、字符编码、文档类型、关键词等摘要信息
主体部分提供网页的具体内容，真正显示在页面中
合理的进行缩进
标签名不区分大小写，但一般习惯用小写

######1.1.1案例：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IdmKCX4E-1583315636323)(C:\Users\asus\Desktop\1902090409 郭俊敏\案例\1.png)]$

#####1.2 开发工具

记事本notepad、sublime、notepad++、Dreamweaver、VScode、Webstorm等

使用步骤：

新建文件(ctrl+N),然后保存(ctrl+S),指定扩展名为.hmtl (代码无颜色提示)
编写HTML文件
在浏览器中打开文件

使用技巧：

先保存再编写代码，否则没有颜色提示
建议创建一个文件夹，用于保存所有的网页内容，将文件夹拖拽到到sublime中打开，便于管理

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JvvUEeq2-1583315636324)(C:\Users\asus\Desktop\1902090409 郭俊敏\案例\5.png)]$

显示/隐藏侧边栏

方式1：查看–>侧边栏–>显示/隐藏侧边栏

方式2：ctrl+K再按B
显示多栏

方式1：查看–>布局–>列数：2列

方式2：alt+shift+2

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sHhDx2ym-1583315636325)(C:\Users\asus\Desktop\1902090409 郭俊敏\案例\6.png)]$
#####1.3 浏览器

常见浏览器：IE浏览器、Chrome谷歌（IT工作者常用）、ﬁrefox火狐、safari （苹果电脑浏览器）

浏览器的作用就是来读取html文件，并以网页的形式进行显示

浏览器不会直接显示html标签，而是使用标签来解释网页的内容

2. 标签

#####2.1 标签的组成

一个完整的html标签的组成：

<标签名属性名=“属性值”>内容</标签名>

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>标签</title>
	</head>
	<body bgcolor="red" text="blue">
		从入门到精通！
	</body>
</html>

属性值要用引导引起来，一般用双引号

2.2 标签的分类

根据标签是否关闭，分为：关闭型、非关闭型

关闭型标签：有开始标签也有结束标签，即标签成对出现

<title></title>
<body></body>
<h1></h1>
<head></head>
<html></html>

<html>
 	<head>
 		<title>标签的组成</title>
 		<meta charset = "utf-8"> 
 	</head>
	<body bgcolor="red" text="blue">
		标签的组成
		<h1>主讲</h1