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

HTML5的介绍和基本框架

news 2026/2/11 1:15:22

目录

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

接口测试中缓存处理策略

在接口测试中&#xff0c;缓存处理策略是一个关键环节&#xff0c;直接影响测试结果的准确性和可靠性。合理的缓存处理策略能够确保测试环境的一致性&#xff0c;避免因缓存数据导致的测试偏差。以下是接口测试中常见的缓存处理策略及其详细说明&#xff1a; 一、缓存处理的核…...

编程新知 2026/2/10 23:39:55

linux之kylin系统nginx的安装

一、nginx的作用 1.可做高性能的web服务器 直接处理静态资源&#xff08;HTML/CSS/图片等&#xff09;&#xff0c;响应速度远超传统服务器类似apache支持高并发连接 2.反向代理服务器 隐藏后端服务器IP地址&#xff0c;提高安全性 3.负载均衡服务器 支持多种策略分发流量…...

编程新知 2026/2/8 20:42:56

stm32G473的flash模式是单bank还是双bank？

今天突然有人stm32G473的flash模式是单bank还是双bank&#xff1f;由于时间太久&#xff0c;我真忘记了。搜搜发现&#xff0c;还真有人和我一样。见下面的链接&#xff1a;https://shequ.stmicroelectronics.cn/forum.php?modviewthread&tid644563 根据STM32G4系列参考手…...

编程新知 2026/2/8 20:41:51

＜6＞-MySQL表的增删查改

目录 一&#xff0c;create&#xff08;创建表&#xff09; 二&#xff0c;retrieve&#xff08;查询表&#xff09; 1&#xff0c;select列 2&#xff0c;where条件 三&#xff0c;update&#xff08;更新表&#xff09; 四&#xff0c;delete&#xff08;删除表&#xf…...

编程新知 2025/12/11 18:28:17

脑机新手指南（八）：OpenBCI_GUI：从环境搭建到数据可视化（下）

一、数据处理与分析实战 &#xff08;一&#xff09;实时滤波与参数调整 基础滤波操作 60Hz 工频滤波&#xff1a;勾选界面右侧 “60Hz” 复选框&#xff0c;可有效抑制电网干扰&#xff08;适用于北美地区&#xff0c;欧洲用户可调整为 50Hz&#xff09;。 平滑处理&…...

编程新知 2025/11/19 22:56:53

【入坑系列】TiDB 强制索引在不同库下不生效问题

文章目录 背景SQL 优化情况线上SQL运行情况分析怀疑1：执行计划绑定问题？尝试：SHOW WARNINGS 查看警告探索 TiDB 的 USE_INDEX 写法Hint 不生效问题排查解决参考背景 项目中使用 TiDB 数据库，并对 SQL 进行优化了，添加了强制索引。 UAT 环境已经生效，但 PROD 环境强制索…...

编程新知 2026/1/31 21:56:58

使用van-uploader 的UI组件，结合vue2如何实现图片上传组件的封装

以下是基于 vant-ui&#xff08;适配 Vue2 版本 &#xff09;实现截图中照片上传预览、删除功能&#xff0c;并封装成可复用组件的完整代码&#xff0c;包含样式和逻辑实现&#xff0c;可直接在 Vue2 项目中使用&#xff1a; 1. 封装的图片上传组件 ImageUploader.vue <te…...

编程新知 2026/1/31 2:37:22

【Zephyr 系列 10】实战项目：打造一个蓝牙传感器终端 + 网关系统（完整架构与全栈实现）

🧠关键词：Zephyr、BLE、终端、网关、广播、连接、传感器、数据采集、低功耗、系统集成 📌目标读者：希望基于 Zephyr 构建 BLE 系统架构、实现终端与网关协作、具备产品交付能力的开发者 📊篇幅字数：约 5200 字 ✨ 项目总览 在物联网实际项目中，**“终端 + 网关”**是…...

编程新知 2026/1/31 6:12:22

2025季度云服务器排行榜

在全球云服务器市场&#xff0c;各厂商的排名和地位并非一成不变&#xff0c;而是由其独特的优势、战略布局和市场适应性共同决定的。以下是根据2025年市场趋势&#xff0c;对主要云服务器厂商在排行榜中占据重要位置的原因和优势进行深度分析&#xff1a; 一、全球“三巨头”…...

编程新知 2026/2/10 10:23:55

CSS设置元素的宽度根据其内容自动调整

width: fit-content 是 CSS 中的一个属性值&#xff0c;用于设置元素的宽度根据其内容自动调整&#xff0c;确保宽度刚好容纳内容而不会超出。 效果对比 默认情况&#xff08;width: auto&#xff09;&#xff1a; 块级元素&#xff08;如 <div>&#xff09;会占满父容器…...

编程新知 2025/10/16 16:03:09