HTML5基础

最新推荐文章于 2023-05-17 23:38:34 发布

原创

最新推荐文章于 2023-05-17 23:38:34 发布 · 1.1k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #html #前端

这篇博客详细介绍了HTML5的基础知识，包括概念、基本结构、VSCode的使用、注释、HTML语法规范、常用标签的使用，如具有语义和无语义的标签、表格、列表、表单等。特别强调了注释、基本语法、以及VSCode生成的基本框架代码的解释，并重点讲解了表单和具有语义的HTML标签的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html基础认知

概念

HTML（Hyper Text Markup Language）中文译为：超文本标记语言；

html专门用于网页开发的语言，主要通过HTML标签对网页中的文本、图片、音频、视频、超链接等内容进行描述，比如图片img，视频video、段落p等；

注意：html是超文本标记语言，不是编程语言；

html基本结构

一个完整的html页面是从一个固定的结构开始搭建的：

一对html标签表示整个html页面，里面嵌套了head和body两个标签：

head标签：表示网页的头部信息，一般是为浏览器提供对应的网站需要的相关信息，浏览器中是不会显示的；比如：标题title、引入css、字符编码等；但是title标题会在浏览器的标题栏显示；

body标签：里面的内容是浏览器最终解析给用户显示在浏览器里面的内容；

vscode软件使用（重点）

第一步：安装软件；

第二步：安装最基础的扩展插件

vscode生成的基本框架代码解释

<!-- 声明文档：规定浏览器是以哪一个版本的html去解析页面 -->
<!-- 以下是html5的语法规范 -->
<!DOCTYPE html>
<!-- 语言: en英文 -->
<!-- <html lang="en"> -->
<!-- 中文：zh-CN -->
<html lang="zh-CN">
<head>
    <!-- 字符编码：将页面中的代码翻译成对应的语言 -->
    <!-- UTF-8 万国码 -->
    <!-- gb2312,GBK  中文  -->
    <meta charset="UTF-8">
    <!-- 推荐使用IE的edge浏览器浏览 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- viewport视口，就是浏览器显示页面的区域大小，后期移动web详细的讲解 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网页的标题</title>
</head>
<body>
</body>
</html>

注释 ----- ctrl+？（重点）

是程序员用来备注代码的，方便后期的维护和查看，注释代码是不会被浏览器解析显示的，我们只能在源代码中查看；

注意：学习和实际工作中，代码中必须要书写注释，方便后期代码的维护和查看：

html基本语法规范（重点了解）

01、html标签必须要加在一对尖括号<>里面；

<html></html> 
<body></body>
<br >

02 、html标签分为两大类，双标签和单标签； 双标签：成对出现，由开始和结束标签组成，开始标签和结束标签直接可以放内容，一般里面主要嵌套文本、图片等内容；

<html></html>
<div></div>
<h2></h2>
<span></span>
<strong></strong>

单标签：只有开始没有结束标签，往往表示某一个功能；

<br>换行
<hr>水平线等

03、html标签关系分为嵌套和并列两种关系：

比如html的基本结构：

<html>
<head>
    <title>网站标题</title>
</head>
<body>
    网站主题
</body>
</html>

嵌套（父子级）关系：html嵌套了head和body两个标签，head里面又嵌套了title标签； 并列（兄弟）关系：head和body属于并列关系； 04、html标签属性，HTML 标签可以拥有属，属性提供了有关 HTML 元素的更多的信息。

<img src="" alt="" title="" width="">

以上代码中img表示图片标签,我们可以设置它的相关属性用来描述图片，比如：src用来查找图片路径，width设置图片的宽度大小；

注意：不同的属性和属性之间要用空格隔开，属性名和属性值之间要用等号（=）链接，属性值必须要书写在英文的引号里面（建议使用双引号）；

四、html常用标签（重点应用）

我们可以人为的将html常见的标签分为具有语义的html标签和没有语义html标签；

具有语义的html标签

作用：让我们的网页结构更加清晰简洁（比如标题标签、段落标签）

标题标签h

双标签，有 h1-h6六个级别组成；

    <h1>我是标题标签h1</h1>
    <h2>我是标题标签h2</h2>
    <h3>我是标题标签h3</h3>
    <h4>我是标题标签h4</h4>
    <h5>我是标题标签h5</h5>
    <h6>我是标题标签h6</h6>

特点：01、默认加粗，独自占一行 02、文字的大小依次减小，权重也依次减小；

注意事项： 01、h1标签一个页面建议只使用一次，而且里面主要放网站的标志或者logo； 02、h2标签一个页面建议最多使用2次，主要放一些重要的标题内容； 03、h3-h6可以随便使用的；

段落标签p

双标签p，设置网站中文字段落，段落里面只能嵌套文本和图片等内容；

<p>里面嵌套一段文字</p>

换行标签br

单标签，表示换行功能；浏览器在解析html代码的时候，对回车换行解析为一个空格实现不了换行效果；

 <br>
 <br />

水平线hr

可以设置一条水平线，基本不用，后期用css边框实现

<hr>

文本格式化标签

特点：一行可以放多个；

加粗 b标签和stro

最低0.47元/天解锁文章

200万优质内容无限畅学