【前端】——HTML5基础知识（小白教程）

一颗_豆芽菜

已于 2022-12-07 22:09:12 修改

阅读量731

点赞数 2

文章标签： html5 前端

于 2022-11-29 22:03:06 首次发布

本文链接：https://blog.csdn.net/beans_blog/article/details/128106077

版权

本文详细介绍了HTML5的基础知识，包括HTML的结构、字符集、元数据、语义标签、列表、超链接、图片、内联框架、音频、视频、表格和表单。重点讲解了字符实体、元数据的charset属性、语义标签的使用，以及表单的input控件和label标签。此外，还介绍了表格的创建和单元格合并，以及如何创建和使用表单。

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

什么是 HTML？

HTML 是用来描述网页的一种语言。
HTML 指的是超文本标记语言 (Hyper Text Markup Language)
HTML 不是一种编程语言，而是一种标记语言
标记语言是一套标记标签
HTML 使用标记标签来描述网页

一、HTML骨架

<!doctype html>
<html lang=“en”>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
    </body>
</html>

1.!doctype html（文档声明）

<!doctype html>

文档声明用来告诉浏览器当前网页的版本
<!doctype html>就是声明网页是HTML5版本的

2.html（超文本标记语言）

<html></html>

html的根标签（元素），网页中的所有内容都要写根元素的里边
lang表示语言：“en”表示英文“zh-CN”表示中文简体...等，哪种语言对内容没影响，但会告诉浏览器这是什么语言的网站，协助浏览器完成翻译等操作

3.head（头部）

<head></head>

head是网页的头部，head中的内容不会在网页中直接出现，主要用来帮助浏览器或搜索引擎来解析网页

4.body（主体）

<body></body>

body是htm1的子元素，表示网页的主体，网页中所有的可见内容都应该写在body里

5.charset（字符集）

字符编码

所有的数据在计算机中存储时都是以二进制形式存储的，文字也不例外。

所以一段文字在存储到内存中时，都需要转换为二进制编码当我们读取这段文字时，计算机会将编码转换为字符，供我们阅读

编码

将字符转换为二进制码的过程称为编码

解码

将二进制码转换为字符的过程称为解码

字符集

编码和解码所采用的规则称为字符集（相当于密码本）

乱码

如果编码和解码所采用的字符集不同就会出现乱码问题。

可以通过meta标签来设置网页的字符集，避免乱码问题

<meta charset="utf-8">

meta标签用来设置网页的元数据，这里meta用来设置网页的字符集，避免乱码问题

utf-8：万国码

6.title（网页标题）

<title></title>

title中的内容会显示在浏览器的标题栏，搜索引擎会主要根据title中的内容来判断网页的主要内容

二、字符实体与语义标签

1. 实体

语法：&实体的名字；

有些时候，在HTML中不能直接书写一些特殊符号，如：

多个连续的空格（在网页中编写的多个空格默认情况会自动被浏览器解析为一个空格）
比如字母两侧的大于小于号（可能会被认为是标签并解析）

如果我们需要在网页中书写这些特殊的符号，则需要使用html中的实体（转义字符）如：

实体名字	显示结果	描述
		空格
>	>	大于号
<	<	小于号
&copy	©	版权

更多实体:HTML 字符实体，HTML ISO-8859-1 参考手册

2.meta（元数据）

meta标签必须放在head标签中
meta主要用于设置网页中的一些元数据，元数据并不是给用户看的

属性：

1.charset

<meta charset="utf-8">

以上代码表示设置字符集

2.http-equiv（设置http首部）

equiv（等效）

<meta http-equiv="refresh"content="3;url=网页">

以上代码表示3秒后跳转到该网页

refresh（刷新）

content（内容）、“n；url=”（链接）

3.name

<meta name="description"content="腾讯网从2003年创立至今，已经成为集新闻信息，区域垂直生活服务、社会化媒体资讯和产品为一体的互联网媒体平台。腾讯网下设新闻、科技、财经、娱乐、体育、汽车、时尚等多个频道，充分满足用户对不同类型资讯的需求。同时专注不同领域内容，打造精品栏目，并顺应技术发展趋势，推出网络直播等创新形式，改变了用户获取资讯的方式和习惯。">