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

HTML5的介绍和基本框架

news 2026/2/1 23:16:50

目录

HTML5

HTML5介绍

HTML5的DOCTYPE声明

HTML5基本骨架

html标签

head标签

body标签

title标签

meta标签

在vscode中写出第一个小框架

HTML5

HTML5介绍

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

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

标签有两种表现形式：

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

HTML5的DOCTYPE声明

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

<!DOCTYPE html>

image-20211014164839770

HTML5基本骨架

image-20211014164952540

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标签

  1. 可定义文档的标题。
  2. 它显示在浏览器窗口的标题栏或状态栏上。
  3. <title> 标签是 <head> 标签中唯一必须要求包含的东西，就是说写head一定要写title
  4. <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>

  1. <!DOCTYPE html>：这是文档类型声明，指定了你在使用HTML5。

  2. <meta>标签：用于设置字符编码和视口设置，确保网页在不同设备上显示正常。

  3. <title>标签：定义网页标题，显示在浏览器标签页上。

  4. <link>和<script>标签：用于引入外部样式表和JavaScript文件，这样可以将样式和脚本与HTML内容分离，使代码更有组织性。

  5. 页面主体部分包括<header>、<main>和<footer>：这些标签用于组织网页的头部、主体内容和页脚。

  6. 在主体中的<header>包含网页标题和导航菜单。

  7. <main>标签用于包含网页的主要内容，其中有两个<section>标签，每个标签包含一个标题和内容。

  8. 在页脚部分的<footer>标签中，显示版权信息。

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

相关文章：

HTML5的介绍和基本框架

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

【es6】函数柯里化（Currying）

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

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

线上多域名实战

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

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

【C语言】上手实验

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

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

设计HTML5表单

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

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

使用Kaptcha生成验证码

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Ubuntu安装Redis

首先要切换到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虚拟机的奥秘“

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

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

vim打开文件中文是乱码

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

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

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

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

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

iOS 26 携众系统重磅更新，但“苹果智能”仍与国行无缘

美国西海岸的夏天&#xff0c;再次被苹果点燃。一年一度的全球开发者大会 WWDC25 如期而至&#xff0c;这不仅是开发者的盛宴&#xff0c;更是全球数亿苹果用户翘首以盼的科技春晚。今年&#xff0c;苹果依旧为我们带来了全家桶式的系统更新&#xff0c;包括 iOS 26、iPadOS 26…...

编程新知 2026/1/29 18:19:59

React Native 开发环境搭建（全平台详解）

React Native 开发环境搭建&#xff08;全平台详解&#xff09; 在开始使用 React Native 开发移动应用之前&#xff0c;正确设置开发环境是至关重要的一步。本文将为你提供一份全面的指南&#xff0c;涵盖 macOS 和 Windows 平台的配置步骤&#xff0c;如何在 Android 和 iOS…...

编程新知 2025/10/7 2:47:54

屋顶变身“发电站” ，中天合创屋面分布式光伏发电项目顺利并网！

5月28日&#xff0c;中天合创屋面分布式光伏发电项目顺利并网发电&#xff0c;该项目位于内蒙古自治区鄂尔多斯市乌审旗&#xff0c;项目利用中天合创聚乙烯、聚丙烯仓库屋面作为场地建设光伏电站&#xff0c;总装机容量为9.96MWp。 项目投运后&#xff0c;每年可节约标煤3670…...

编程新知 2026/1/30 2:45:51

2025 后端自学UNIAPP【项目实战：旅游项目】6、我的收藏页面

代码框架视图 1、先添加一个获取收藏景点的列表请求 【在文件my_api.js文件中添加】 // 引入公共的请求封装 import http from ./my_http.js// 登录接口&#xff08;适配服务端返回 Token&#xff09; export const login async (code, avatar) > {const res await http…...

编程新知 2026/1/29 11:40:13

vue3 定时器-定义全局方法 vue+ts

1.创建ts文件 路径&#xff1a;src/utils/timer.ts 完整代码&#xff1a; import { onUnmounted } from vuetype TimerCallback (...args: any[]) > voidexport function useGlobalTimer() {const timers: Map<number, NodeJS.Timeout> new Map()// 创建定时器con…...

编程新知 2025/8/9 0:31:20

零基础设计模式——行为型模式 - 责任链模式

第四部分&#xff1a;行为型模式 - 责任链模式 (Chain of Responsibility Pattern) 欢迎来到行为型模式的学习&#xff01;行为型模式关注对象之间的职责分配、算法封装和对象间的交互。我们将学习的第一个行为型模式是责任链模式。 核心思想&#xff1a;使多个对象都有机会处…...

编程新知 2026/1/31 9:33:18

工业自动化时代的精准装配革新：迁移科技3D视觉系统如何重塑机器人定位装配

AI3D视觉的工业赋能者 迁移科技成立于2017年&#xff0c;作为行业领先的3D工业相机及视觉系统供应商&#xff0c;累计完成数亿元融资。其核心技术覆盖硬件设计、算法优化及软件集成&#xff0c;通过稳定、易用、高回报的AI3D视觉系统&#xff0c;为汽车、新能源、金属制造等行…...

编程新知 2025/11/25 4:59:47

实现弹窗随键盘上移居中

实现弹窗随键盘上移的核心思路 在Android中&#xff0c;可以通过监听键盘的显示和隐藏事件&#xff0c;动态调整弹窗的位置。关键点在于获取键盘高度&#xff0c;并计算剩余屏幕空间以重新定位弹窗。 // 在Activity或Fragment中设置键盘监听 val rootView findViewById<V…...

编程新知 2025/10/6 18:46:56

Maven 概述、安装、配置、仓库、私服详解

目录 1、Maven 概述 1.1 Maven 的定义 1.2 Maven 解决的问题 1.3 Maven 的核心特性与优势 2、Maven 安装 2.1 下载 Maven 2.2 安装配置 Maven 2.3 测试安装 2.4 修改 Maven 本地仓库的默认路径 3、Maven 配置 3.1 配置本地仓库 3.2 配置 JDK 3.3 IDEA 配置本地 Ma…...

编程新知 2026/1/26 9:46:22

使用 SymPy 进行向量和矩阵的高级操作

在科学计算和工程领域&#xff0c;向量和矩阵操作是解决问题的核心技能之一。Python 的 SymPy 库提供了强大的符号计算功能&#xff0c;能够高效地处理向量和矩阵的各种操作。本文将深入探讨如何使用 SymPy 进行向量和矩阵的创建、合并以及维度拓展等操作&#xff0c;并通过具体…...

编程新知 2026/1/31 12:47:41