HTML html5基础详细笔记第一个模块

最新推荐文章于 2024-07-12 09:35:17 发布

抹泪的知更鸟

最新推荐文章于 2024-07-12 09:35:17 发布

阅读量836

点赞数 1

分类专栏： HTML+CSS+JavaScript 文章标签： html html5 前端

本文链接：https://blog.csdn.net/qq_51596354/article/details/122351651

版权

本文详细介绍了HTML5的基础知识，包括HTML的定义、特点、网页结构、标签、元素、属性等内容。重点讲解了HTML的标题、段落、文本格式化、超链接、图片的使用，以及如何通过案例实现各元素的功能和效果。

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

第01章-前端核心技术-HTML5基础

学习目标

了解什么是HTML
掌握HTML标签、元素的概念 重点
掌握HTML常用头部元素的使用 重点
掌握HTML标题、段落、文本、图片等排版 重点 难点
掌握HTML超链接的使用 重点

HTML 是什么

HTML就是超文本标记语言（英语：HyperText Markup Language，简称：HTML），是一种用于创建网页的标准标记语言，主要功能就是控制网页显示的内容，而不关注内容样式的展示，样式的展示效果有css技术来实现

HTML 特点：

HTML 不是一种编程语言，而是一种简单的标记语言
HTML的文档也叫做 web页面（网页）
HTML文档只是一种简单的ASCII码[文本]，通过浏览器直接解释执行

一个网页的默认文件名是index.html，也就是说如果一个页面名叫index.html就可以在访问这个页面的时候忽略不写，如：

http://127.0.0.1:8888/demo/index.html  	->	  http://127.0.0.1:8888/demo/

案例01

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<h1>超文本标记语言</h1>
		<p>欢迎来到HTML的世界</p>
	</body>
</html>

效果展示

在这里插入图片描述

案例解析

<!DOCTYPE html> 声明为 HTML第5版本的文档
<html> 元素是 HTML 页面的根元素，所以内容都应该写在其内部
<head> 元素包含了文档的元（meta）数据，用来设置页面参数
<title> 元素设置整个页面的在浏览器中的标题
<body> 元素包含整个页面的可见区域显示的内容
<h1> 元素显示一个一级标题
<p> 元素显示普通文字的段落

HTML 网页结构

下面是一个可视化的HTML页面结构：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0Wdgh2uT-1641470243273)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20220106175134289.png)]$

说明

<head> 元素包含了文档的元（meta）数据，用来设置页面参数
<body> 元素包含整个页面的可见区域显示的内容
注意：只有 <body> 区域 (白色部分) 才会在浏览器中显示

HTML 标签（标记）

HTML标记通常被称为HTML标签 (HTML tag)。把由<>括起来的部分统称为标签

HTML 标签通常是成对出现的，比如<p> 和</p>标签对中的第一个标签是开始标签（开放标签），第二个标签是结束标签（闭合标签）

也有特殊的标签，只有开头没有结尾，在开头后面加上/表示结尾，这种表签叫做单标签或者空标签，如：<br>

标签格式

分为单标签和双标签

<标签>内容</标签>

HTML 元素

由开始标签和标签中的内容和結束标签共同组成的整体，叫做一个元素。

如：

<body>
    <h1>超文本标记语言</h1>
    <p>欢迎来到HTML的世界</p>
</body>

HTML 属性

把写在开始标签中**键值对（名称/值对）**称之为属性。

HTML 元素可以设置属性，就像长方形的长宽属性一样。属性必须写在开始标签中，比如：<p align="center">段落</p>，属性总是以名称/值对的形式出现，比如：name="value"。

HTML属性作用

给元素中添加附加信息（仅仅添加数据）
控制元素显示的风格（改变元素默认显示样式）

案例02

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>文档标题</title>
	</head>
	<body>
		<h1 align="center">居中对齐</h1>
		<p align="left">左对齐默认</p>
		<p align="center">居中对齐</p>
		<p align="right">右对齐</p>
	</body>
</html>

效果展示

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vbhPgojE-1641470243274)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20220106181558940.png)]$

HTML 标题

页面中文本标题（Heading）是通过 <h1> - <h6>标签进行定义的，从大到小:<h1> - <h6>。

标签	描述	案例
`<h1>`	一级标题	`<h1>标题H1</h1>`
`<h2>`	二级标题	`<h2>标题H2</h2>`
`<h3>`	三级标题	`<h3>标题H3</h3>`
`<h4>`	四级标题	`<h4>标题H4</h4>`
`<h5>`	五级标题	`<h5>标题H5</h5>`
`<h6>`	六级标题	`<h6>标题H6</h6>`

案例03

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>文档标题</title>
	</head>
	<body>
		<h1>标题H1</h1>
		<h2>标题H2</h2>
		<h3>标题H3</h3>
		<h4>标题H4</h4>
		<h5>标题H5