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

HTML5的介绍和基本框架

news 2025/5/28 2:03:42

目录

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

SQL中count()的不同用法

1.count(*)&#xff1a;统计所有列的行数&#xff0c;包括均为null值的行&#xff1b; 2.count(1)&#xff1a;统计所有列的行数&#xff0c;包括均为null值的行&#xff1b; 3.count(列名)&#xff1a;统计指定列的行数&#xff0c;不包括null值&#xff1b; 实例&#xff1a;…...

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

go_细节注意

go细节 一、使用指针接受者和不使用指针接受者1&#xff0c;不使用指针接受者&#xff1a;2&#xff0c;使用指针接受者3&#xff0c;区别与优劣势 一、使用指针接受者和不使用指针接受者 1&#xff0c;不使用指针接受者&#xff1a; func (d dog) move() {fmt.Println("…...

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

屏蔽恶意域名的DNS查询

因为有一些恶意域名, 已经在防火墙上做了封禁了, 但是如果收到中毒主机的请求, 还是要去做一次DNS查询, 因此被上级单位通告, 因此想把恶意域名的DNS查询封禁做到防火墙下联的AC上面, 一方面因为防火墙的策略优先级DNS代理比较靠后, 另一方面也是为了减小防火墙压力, 简化配置:…...

编程日记 2023/8/16 21:43:42

SQL-每日一题【1251. 平均售价】

题目 Table: Prices Table: UnitsSold 编写SQL查询以查找每种产品的平均售价。average_price 应该四舍五入到小数点后两位。 查询结果格式如下例所示&#xff1a; 解题思路 1.题目要求查询每种产品的平均售价。给出了两个表&#xff0c;我们用聚合查询来解决此问题。 2.首先我…...

编程日记 2023/8/16 21:42:40

Win11中使用pip或者Cython报错 —— error: Microsoft Visual C++ 14.0 is required.

第一步&#xff1a;下载Visual Studio 2019 下载地址&#xff1a; https://learn.microsoft.com/zh-cn/visualstudio/releases/2019/release-notes 第二步&#xff1a;安装组件 选择单个组件&#xff0c;勾选以下两个组件 其他错误&#xff1a; 无法打开文件“python37.li…...

编程日记 2023/8/16 21:41:38

Spring学习笔记之Bean的“出生入死”

文章目录 什么是Bean的生命周期为什么要知道Bean的生命周期Bean的生命周期之五个阶段Bean生命周期之七个阶段Bean生命周期的十个阶段Bean的作用域不同&#xff0c;管理方式不同自己new的对象如何让Spring管理 什么是Bean的生命周期 Spring其实就是一个管理Bean对象的工厂。它负…...

编程日记 2023/8/16 21:40:36

hbase 报错 Master passed us a different hostname to use； was=

原因 wsl2的 /etc/hosts 配置的不兼容,我这里是ubuntu22 命令行输入hostname 看输出什么,比如输出 aaa 那么替换/etc/hosts 127.0.0.1 aaa...

编程日记 2023/8/16 21:39:34

Aspera替代方案：探索这些安全且可靠的文件传输工具

科技的发展日新月异&#xff0c;文件的传输方式也在不断地更新换代。传统的邮件附件、FTP等方式已经难以满足人们对于传输速度和安全性的需求了。近年来&#xff0c;一些新兴的文件传输工具受到了人们的关注&#xff0c;其中除了知名的Aspera之外&#xff0c;还有许多可靠安全的…...

编程日记 2023/8/16 21:38:32

你真的了解数据结构与算法吗？

数据结构与算法&#xff0c;是理论和实践必须紧密结合的一门学科&#xff0c;有关数据结构和算法同类的课程或书籍&#xff0c;有些只是名为“数据结构”&#xff0c;而非“数据结构与算法”&#xff0c;它们在内容上并无很大区别。 实际上&#xff0c;数据结构和算法&#xf…...

编程日记 2023/8/16 21:37:31

kafka使用心得（一）

kafka入门 一种分布式的、基于发布/订阅的消息系统&#xff0c;scala编写&#xff0c;具备快速、可扩展、可持久化的特点。 基本概念 topic 主题 partition 分区&#xff0c;一个topic下可以有多个partition&#xff0c;消息是分散到多个partition里存储的&#xff0c;part…...

编程日记 2023/8/16 21:36:28