前端学习

原创

已于 2025-11-17 14:27:53 修改 · 633 阅读

标签

#前端 #笔记

于 2024-02-26 22:38:59 首次发布

本文详细介绍了HTML5的基础语法，包括标签用法（如div、标题、段落）、字符集设置、SEO优化中的title和meta标签，以及W3C相关知识和div的常见类名，为初学者提供了一个全面的入门指南。

一、HTML5基础语法与标签

1.1、 HTML5基础语法与基础标签

1.1.1、HTML特性-空白折叠现象

文字和文字之间的多个空格、换行会被折叠成一个空格。
标签“内壁”和文字之间的空格会被忽略。

1.1.2、div标签

div是英语division(分割)的缩写，<div></div>标签对用来将相关的内容组合到一起，已和其他内容分割，是文档结构更清晰。比如，网页的头部要放在一个<div></div>标签对中，轮播图也要放在一个<div></div>标签对中，文章内容也要放在一个<div></div>标签对中。
<div></div>是最常见的HTML标签，因为它可以结合CSS使用，实现网页的布局，这种布局形式叫做“DIV+CSS”。
<div></div>像是一个容器，什么都可以容纳，因此工程师也习惯称呼<div></div>为“盒子”。

1.1.3、标题标签

h系列标签标识“标题”语义，h是headline的意思。
h1（一级标签）、h2（二级标签）、h3（三级标签）、h4（四级标签）、h5（五级标签）、h6（六级标签），逐次递减。
搜索引擎非常看重<h1></h1>标签的内容，应该将重要的内容放到<h1></h1>中，比如网页的logo、名称等等。
<h1></h1>标签一般只能放置一个，否则会被搜索引擎视为作弊（实际开发中，也会出现多个<h1>标签的情况，只是不推荐）。

1.1.4、段落标签

<p></p>标签标识段落标签，p的英语paragraph的意思。
任何段落都要放在<p></p>标签中，因为HTML中即使代码换行了，页面显示效果也不会换行，必须写到<p></p>标签中。
<p></p>标签中不能嵌套h系列标签和其他p标签。

1.1.5、标签

A、什么是标签

HTML叫做“超文本标记语言”,超文本标记就是标签。
每个标签都有不同的功能

B、什么是标签对儿

标签通常成对儿出现。比如：<p>不负昭华，只争朝夕</p>，<p>是起始标签，</p>为结束标签。
不同功能的标签有不同的功能，比如：<p>不负昭华，只争朝夕</p>，p标签表示段落，<h1>不负昭华，只争朝夕</h1>，h1标签表示一级标题。
标签可以给文字设置不同的“语义”。

C、单标签

有的标签不是成对儿的，而是只有起始标签，称为单标签。比如：<mate charset="UTF-8">
在HTML4代，单标签必须写一个结尾的反斜杠，HTML5不用写。比如：<mate charset="UTF-8"/>

1.1.6、title、关键词及页面描述

A、title设置方式

<!DOCTYPE html>
<html lang="en">
<head>
    <!--  网页的标题  -->
    <title>网页的标题</title>
</head>
<body>

</body>
</html>

B、title的用途

title标签用来设置网页的标题，文字会显示在浏览器的标签栏上。例如：<title>网页的标题</title>
title也是搜索引擎收录网站时显示的标题，为了吸引用户点击，合理设置title是必要的。比如：搜索百度

1.1.7、网页关键词和页面描述

合理设置网页的网页关键词和页面描述，也是SEO的重要手段
SEO(Search Engine Optimization,搜索引擎优化)利用搜索引擎的规则提高网站在有关搜索引擎内的自然排名，让网站在搜索引擎的结果中内占据领先地位，获得品牌收益。

使用meta标签设置网页关键词和描述，name属性非常关键，用来设置meta的具体功能。

<!DOCTYPE html>
<html lang="en">
<head>
    <!--    关键词-->
    <meta name="Keywords" content="JAVA,前端,Python,大数据">
    <!--    页面描述-->
    <meta name="Description" content="页面描述">
</head>
<body>

</body>
</html>

1.1.8、字符集

A、字符集设置的方式

<!DOCTYPE html>
<html lang="en">
<head>
    <!--  设置网页的字符集  -->
    <meta charset="UTF-8">
</head>
<body>

</body>
</html>

B、字符集

UTF-8:涵盖全球所有国家、民族的文字和大量图形字符。一个汉字占用3个字节数，适合制作有非汉字文字的网页。
GBK(gb2312):收录所有汉字字符（包括简体，繁体）和英语、少量韩文、日语和少量的图形字符，一个汉字占用2个字节数，适合制作只有汉字和英语的网页，由于一个汉字仅占2个字节，网页文件尺寸明显减少。

c、更改网页的字符集

无论使用哪种字符集，一定要在VScode编辑器中将文件也设置为相同的字符集，否则会出现乱码，然后更改meta标签。例如：<meta charset="UTF-8">、<meta charset="gb2312">、<meta charset="gbk">
Live Server插件不支持gb2312(gbk)字符集，只支持UTF-8字符集。

1.1.9、认识HTML5骨架

<!DOCTYPE html>
<html lang="en">
<head>
    <!--  设置网页的字符集  -->
    <meta charset="UTF-8">
    <!--  视口设置，在移动网页开发课程中将介绍  -->
    <meta name="viewport" content="......">
    <!--    关键词-->
    <meta name="Keywords" content="JAVA,前端,Python,大数据">
    <!--    页面描述-->
    <meta name="Description" content="页面描述">
    <meta name="viewport" content="......">
    <!--  网页的标题  -->
    <title>网页的标题</title>
</head>
<body>
你好！
</body>
</html>