当前位置：首页 > news >正文

HTML5的介绍和基本框架

news 2026/5/21 14:07:49

HTML5

HTML5介绍

HTML5的DOCTYPE声明

HTML5基本骨架

html标签

head标签

body标签

title标签

meta标签

在vscode中写出第一个小框架

HTML5

HTML5介绍

HTML5是用来描述网页的一种语言，被称为超文本标记语言。用HTML5编写的文件，后缀以.html结尾

HTML是一种标记语言，标记语言是一套标记标签。标签是由尖括号包围的关键字，例如：<html>

标签有两种表现形式：

双标签，例如：<html></html>
单标签，例如：<img>

HTML5的DOCTYPE声明

DOCTYPE是document type (文档类型) 的缩写。<!DOCTYPE html >是H5的声明位于文档的最前面，处于标签之前。他是网页必备的组成部分，避免浏览器的怪异模式。

<!DOCTYPE html>

HTML5基本骨架

html标签

定义 HTML 文档，这个元素我们浏览器看到后就明白这是个HTML文档了，所以你的其它元素要包裹在它里面，标签限定了文档的开始点和结束点。

<!DOCTYPE html>
<html>
</html>

head标签

head标签用于定义文档的头部。文档的头部描述了文档的各种属性和信息，包括文档的标题、在 Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。

<!DOCTYPE html>
<html><head></head>
</html>

body标签

body 元素定义文档的主体。

body 元素包含文档的所有内容（比如文本、超链接、图像、表格和列表等等。）

它会直接在页面中显示出来，也就是用户可以直观看到的内容

<!DOCTYPE html>
<html><head></head><body>我会显示在浏览器中</body>
</html>

title标签

可定义文档的标题。
它显示在浏览器窗口的标题栏或状态栏上。
<title> 标签是 <head> 标签中唯一必须要求包含的东西，就是说写head一定要写title
<title>的增加有利于SEO优化

SEO是搜索引擎优化的英文缩写。通过对网站内容调整，满足搜索引擎的排名需求

<!DOCTYPE html>
<html><head><title>第一个页面</title></head><body>我会显示在浏览器中</body>
</html>

meta标签

meta标签用来描述一个HTML网页文档的属性，关键词等，例如：charset="utf-8"是说当前使用的是utf-8编码格式，在开发中我们经常会看到utf-8，或是gbk，这些都是编码格式，通常使用utf-8。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>itbaizhan</title></head><body></body>
</html>

在vscode中写出第一个小框架

其实在vscode中框架不需要编写，只需要打出HTML就会自动生成一个基本的框架。

先创建一个html文件，后缀为.html

然后就会出现：

在body中输入的内容可以直接在网页中显示出来。

更详细的框架

<!DOCTYPE html> <!-- 文档类型声明，指定使用HTML5 -->
<html>
<head><meta charset="UTF-8"> <!-- 设置字符编码为UTF-8，支持多语言字符 --><meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 适应移动设备的视口设置 --><title>My Basic HTML5 Framework</title> <!-- 网页标题 --><link rel="stylesheet" href="styles.css"> <!-- 连接外部样式表 --><script src="scripts.js" defer></script> <!-- 连接外部JavaScript文件，并延迟执行 -->
</head>
<body><header><h1>Welcome to My Website</h1><nav><ul><li><a href="#">Home</a></li><li><a href="#">About</a></li><li><a href="#">Services</a></li><li><a href="#">Contact</a></li></ul></nav></header><main><section><h2>About Us</h2><p>We are a passionate team...</p></section><section><h2>Our Services</h2><ul><li>Web Design</li><li>Graphic Design</li><li>Development</li></ul></section></main><footer><p>&copy; 2023 My Company. All rights reserved.</p></footer>
</body>
</html>

<!DOCTYPE html>：这是文档类型声明，指定了你在使用HTML5。
<meta>标签：用于设置字符编码和视口设置，确保网页在不同设备上显示正常。
<title>标签：定义网页标题，显示在浏览器标签页上。
<link>和<script>标签：用于引入外部样式表和JavaScript文件，这样可以将样式和脚本与HTML内容分离，使代码更有组织性。
页面主体部分包括<header>、<main>和<footer>：这些标签用于组织网页的头部、主体内容和页脚。
在主体中的<header>包含网页标题和导航菜单。
<main>标签用于包含网页的主要内容，其中有两个<section>标签，每个标签包含一个标题和内容。
在页脚部分的<footer>标签中，显示版权信息。

在接下来的学习中，我们也将会以这个为模板对各个部分刨析学习。

HTML5的介绍和基本框架

目录 HTML5 HTML5介绍 HTML5的DOCTYPE声明 HTML5基本骨架 html标签 head标签 body标签 title标签 meta标签在vscode中写出第一个小框架 HTML5 HTML5介绍 HTML5是用来描述网页的一种语言，被称为超文本标记语言。用HTML5编写的文件，后缀以.ht…...

编程日记 2023/8/16 22:07:21

代码随想录算法训练营第58天｜动态规划part15｜392.判断子序列、115.不同的子序列

代码随想录算法训练营第58天｜动态规划part15｜392.判断子序列、115.不同的子序列 392.判断子序列 392.判断子序列思路： （这道题也可以用双指针的思路来实现，时间复杂度也是O(n)） 这道题应该算是编辑距…...

编程日记 2023/8/16 22:06:20

日常BUG——普通页面跳转tabbar页面报错

😜作者：是江迪呀✒️本文关键词：日常BUG、BUG、问题分析☀️每日一言 ：存在错误说明你在进步！ 一、问题描述微信小程序页面跳转的时候出现下面的问题： wx.redirectTo({url: /pages/index/i…...

编程日记 2023/8/16 22:05:19

SpringBoot复习：（48）RedisAutoConfiguration自动配置类

RedisAutoConfiguration类代码如下： 可以看到在这个类中配置了2个bean: redisTemplate和stringRedisTemplate. 而它通过EnableConfigurationProperties(RedisProperties.class)注解，把配置文件中配置的Redis相关的信息引入进来了，RedisPrope…...

编程日记 2023/8/16 22:04:17

软硬件免费，服务收费：网络安全商业模式正在被颠覆

大数据产业创新服务媒体 ——聚焦数据改变商业从元宇宙到造汽车，重回国内A股市场五年的360一路苦追热点。一直到大模型横空出世，360才算真正找到感觉，经历一次战略上的回归。在8月9日的互联网安全大会上，一袭红衣的红衣教主周…...

编程日记 2023/8/16 22:03:15

变形金刚：从零开始【01/2】

一、说明在我们的日常生活中，无论你是否是数据科学家，你都在单向地使用变压器模型。例如。如果您使用的是 ChatGPT 或 GPT-4 或任何 GPT，那么在为您回答问题的框中是变压器的一部分。如果您是数据科学家或数据分析师，则可能正在使…...

编程日记 2023/8/16 22:01:09

Opencv特征检测之ORB算法原理及应用详解

Opencv特征检测之ORB算法原理及应用详解特征是图像信息的另一种数字表达形式。一组好的特征对于在指定任务上的最终表现至关重要。视觉里程（VO）的主要问题是如何根据图像特征来估计相机运动。但是，整幅图像用来计算分析通常比较耗时，故而转换为分析图像中的特征点的运动…...

编程日记 2023/8/16 22:00:08

【es6】函数柯里化（Currying）

柯里化（Currying）：把接受多个参数的函数变换成接受一个单一参数(最初函数的第一个参数)的函数，并且返回接受余下的参数且返回结果的新函数。柯里化由 Christopher Strachey 以逻辑学家 Haskell Curry 命名的，它是 Mos…...

编程日记 2023/8/16 21:59:08

线上多域名实战

本文博主给大家分享线上多域名实战，当线上主域名不可用的情况下，启用备用域名完成网站高可用保障。网站的高可用性一直是网站运维的重中之重。一旦网站宕机，不仅会造成巨大的经济损失，也会严重影响用户体验。备份域名就是一种实现…...

编程日记 2023/8/16 21:58:06

【C语言】上手实验

实验1 顺序、分支结构程序填空 1. 题目描述：输入三个整数存放在变量a、b、c中，找出三个数中的最大值放于max中，并将其输出。以下是完成此项工作的程序，请将未完成的部分填入，实现其功能，并在计算机上…...

编程日记 2023/8/16 21:57:05

设计HTML5表单

HTML5基于Web Forms 2.0标准对HTML4表单进行全面升级，在保持简便、易用的基础上，新增了很多控件和属性，从而减轻了开发人员的负担。表单为访问者提供了与网站进行互动的途径，完整的表单一般由控件和脚本两部分组成。 1、认识HTML…...

编程日记 2023/8/16 21:56:02

使用Kaptcha生成验证码

说明：验证码，是登录流程中必不可少的一环，一般企业级的系统，使用都是专门制作验证码、审核校验的第三方SDK（如极验）。本文介绍，使用谷歌提供的Kaptcha技术，制作一个简单的验证码。 …...

编程日记 2023/8/16 21:55:00

【vue】vue中的插槽以及使用方法

插槽普通插槽 1、在父组件中直接调用子组件的标签，是可以渲染出子组件的内容；如果在子组件标签中添加了内容，父组件就渲染不出来了； ParentComponent.vue： <template><div><h1>Parent Componen…...

编程日记 2023/8/16 21:53:58

javaScript:分支语句的理解与使用（附带案例）

目录前言补充另一种说法分支语句 1.if语句 a.单分支语句注意 b.双分支语句注意点 c.多分支语句（分支语句的联级语句） 补充 2.三元运算符三元运算符 ？ ： 使用场景 3.switch语句解释释义&#xff1a…...

编程日记 2023/8/16 21:52:57

MySQL高阶知识点(一)事务的并发问题和隔离级别

简单来说，事务就是要保证一组数据库操作，要么全部成功，要么全部失败。在 MySQL 中，事务支持是在引擎层实现的。 MySQL 是一个支持多引擎的系统，但并不是所有的引擎都支持事务。如 MySQL 原生的 MyISAM 引擎就不支持…...

编程日记 2023/8/16 21:51:54

医疗PACS源码，支持三维多平面重建、三维容积重建、三维表面重建、三维虚拟内窥镜

C/S架构的PACS系统源码，PACS主要进行病人信息和影像的获取、处理、存储、调阅、检索、管理，并通过网络向全院提供病人检查影像及诊断报告；各影像科室之间共享不同设备的病人检查影像及诊断报告;在诊断工作站上，调阅HIS中病人的其它…...

编程日记 2023/8/16 21:50:53

首先要切换到root用户 1.apt安装 apt install redis 2.⽀持远程连接修改 /etc/redis/redis.conf • 修改 bind 127.0.0.1 为 bind 0.0.0.0 • 修改 protected-mode yes 为 protected-mode no 3.控制 Redis 启动 1.启动 Redis 服务 service redis-server start 2.停⽌ Redis …...

编程日记 2023/8/16 21:49:51

“深入解析JVM内部机制：探索Java虚拟机的奥秘“

标题：深入解析JVM内部机制：探索Java虚拟机的奥秘 JVM（Java虚拟机）是Java程序的核心执行环境，它负责将Java字节码转换为机器码并执行。了解JVM的内部机制对于理解Java程序的执行过程和性能优化至关重要。本文将深入解析…...

编程日记 2023/8/16 21:48:50

vim打开文件中文是乱码

vim打开文件中文是乱码问题：在Linux系统下，使用cat查看含有中文的文本文件正常，但是使用vim打开却是乱码解决方法： 方法一： 在文件中设定在vim的退出模式下 :set encodingutf8 方法二： 直接写入/etc/…...

编程日记 2023/8/16 21:47:49

【正点原子STM32连载】第七章 Geehy标准库版本MDK工程创建摘自【正点原子】APM32F407最小系统板使用指南

1）实验平台：正点原子stm32f103战舰开发板V4 2）平台购买地址：https://detail.tmall.com/item.htm?id609294757420 3）全套实验源码手册视频下载地址： http://www.openedv.com/thread-340252-1-1.html# 第七…...

编程日记 2023/8/16 21:46:46

Rust 核心理论: 高并发与异步(三)

写在前面 Rust 凭借其独特的所有权机制和借用检查器，在不依赖垃圾回收的前提下，实现了内存安全与线程安全的编译期保证。然而，对于许多从 C/C、Java、Python 等背景转入 Rust 的开发者而言，所有权、生命周期、借用规则、内部可变…...

编程新知 2026/5/21 14:02:11

杰理之人声消除会有杂音问题修改方法【篇】

原因：消人声应该以立体声的音频数据来参考处理，由于DAC输出选择了左右差分方式，会在消人声的数据流节点前加了一个节点将右边声道进行反相处理，导致消原音的数据不是立体声数据，消除效果不好。...

编程新知 2026/5/21 13:21:19

PPTist免费在线演示文稿制作完全指南：从零到专业演示的终极教程

PPTist免费在线演示文稿制作完全指南：从零到专业演示的终极教程【免费下载链接】PPTist PowerPoint-ist（/pauəpɔintist/）, An online presentation application that replicates most of the commonly used features of MS PowerPoint, al…...

编程新知 2026/5/21 11:17:51

淘金币自动化脚本终极指南：每天节省20分钟，让淘宝任务自动完成

淘金币自动化脚本终极指南：每天节省20分钟，让淘宝任务自动完成【免费下载链接】taojinbi 淘宝淘金币自动执行脚本，包含蚂蚁森林收取能量，芭芭农场全任务，解放你的双手项目地址: https://gitcode.com/gh_mirrors/ta…...

编程新知 2026/5/21 11:01:50

告别C盘爆满！VSCode插件和用户数据迁移到D盘的保姆级教程（附注册表修改）

告别C盘爆满！VSCode插件和用户数据迁移到D盘的保姆级教程每次打开VSCode都看到C盘空间告急的红色警告？作为开发者，我们往往会在不知不觉中安装几十个甚至上百个插件，这些插件和用户数据默认都存储在C盘，日积月累就会…...

编程新知 2026/5/21 10:50:08

Hitboxer SOCD Cleaner：键盘输入仲裁系统的底层实现与技术架构分析

Hitboxer SOCD Cleaner：键盘输入仲裁系统的底层实现与技术架构分析【免费下载链接】socd Key remapper for epic gamers 项目地址: https://gitcode.com/gh_mirrors/so/socd 在竞技游戏领域，键盘输入精度直接影响玩家操作表现。传统键盘在处理同…...

编程新知 2026/5/21 10:21:12

ncmdumpGUI终极指南：3步轻松解锁网易云音乐NCM加密文件

ncmdumpGUI终极指南：3步轻松解锁网易云音乐NCM加密文件【免费下载链接】ncmdumpGUI C#版本网易云音乐ncm文件格式转换，Windows图形界面版本项目地址: https://gitcode.com/gh_mirrors/nc/ncmdumpGUI 你是否曾经遇到过这样的烦恼？在…...

编程新知 2026/5/21 9:22:26