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

HTML5+CSS3-HTML5入门

news 2026/4/9 3:25:11

1.web标准

W3C为web标准化做出了以下事项，主要包括结构，表现和行为。

结构用于对网页的信息进行分类和整理，使用技术包括HTML,XML,XHTML

表现指网页的外在样式，一般包括网页的版式，颜色，字体，在网页制作中通常使用CSS 来设置网页样式。

行为是指网络模型的定义和交互效果的实现，包括JavaScript的ECMscrpit,BOM,DOM.

2.HTML5概述

HTML主要是通过标签对网页中的文本，图片，声音进行描述（然后在浏览器内核渲染）

，HTML提供了很多标签，如段落标签，标题标签，超链接标签，图片标签。

2.1 HTML的基本结构

<!DOCTYPE html>   
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>第一个HTML5页面</title>
</head>
<body></body>
</html>

<!DOCTYPE>称为文档类型说明，用于向浏览器说明当前文档使用的HTML版本。只有在文档开头处使用<！DOCTYPE>，浏览器才能将文档识别为有效的网页文档。

<html>称为根目录，根目录用于表示网页文档的开始与结束。<html>为开始，</html>为结束，它们之间的是网页的头部内容和主体内容。

<head> 用于定义文档的头部内容，称为头部标签。在<html>标签之后，头部标签主要是来容纳其他网页文档头部的标签，以描述网页文档的标题，作者以及该网页文档与其他网页文档的关系。例如：<title>,<meta>,<link>,<style>等，都属于头部标签可容纳的子标签。

<body>用于定义网页文档的内容，称为主体标签。在网页标签中所有的文本，图像，音频和视频等的代码只有放在<body>标签中。

2.2HTML语法格式

1.标签不区分大小写

2.允许属性值不使用引号包起来。

3.允许部分属性值省略属性值（没有设置属性值即为默认属性）

        HTML5标签的类型

1.单标签是一个标签即可完整描述某个功能的标签

格式：
<标签名/>

/可以省略

2.双标签

双标签即可以和结束的标签组成的标签，基本格式

<h2>内容</h2>

<h2>为开始，</h2>为结束

3.注释标签

即用于注释的标签

<!--注释语句-->

2.3标签的属性

为了使标签有更多的功能，H5提供了标签的属性以便获取到更多的功能。如：设置字体居中或设置字体为“微软雅黑”

格式：

<标签名 属性1="属性值" 属性2="属性值"...>内容</标签名>

2.4HTML文档头部相关标签

<title>用于定义一个HTML页面的标题，即给页面个名字。该标签必须在<head>之中，，一个HTML文档只能包含一个<title>标签，<title>开始标签和</title>结束标签的内容显示在浏览器的标题栏中。

</meta>标签

</meta>是一个单标签，用于定义网页上的元信息，可重复出现在<head>标签里面。

通过</meta>的标签的属性可以设置网页的相关参数。

</meta name="名称" content="值"/>

这里的name和content属性可以为搜索引擎提供相关信息。其中，name用于设置搜索信息的类型，content属性用于设置搜索的内容。

相关文章：

HTML5+CSS3-HTML5入门

1.web标准 W3C为web标准化做出了以下事项&#xff0c;主要包括结构&#xff0c;表现和行为。 结构用于对网页的信息进行分类和整理&#xff0c;使用技术包括HTML,XML,XHTML 表现指网页的外在样式&#xff0c;一般包括网页的版式&#xff0c;颜色&#xff0c;字体&#xff0c…...

编程日记 2024/8/7 14:26:43

谷粒商城实战笔记-138-商城业务-首页-渲染二级三级分类数据

本节的主要内容是在前一节的基础上&#xff0c;提供结构查询出所有的二级、三级分类数据。 一&#xff0c;构造响应体数据结构 后端返回给前端的数据结构是在开发详细设计中应该确定的内容。 分析前端需要的数据结构&#xff0c;后端要将所有一级分类包含的二级和三级分类信…...

编程日记 2024/8/7 14:24:40

git的基础用法

文章目录 前言关联仓库提交代码分支操作账号免密 前言 记录一下git的一些基础用法。 关联仓库 # 初始化 git init# 关联仓库 git remote add origin <仓库地址># 查看当前关联的仓库 git remote -v# 一次只能remote一个&#xff0c;要换需要先删原来的 git remote rem…...

编程日记 2024/8/7 14:23:38

常见中间件漏洞（四、Apache合集）

目录 四、Apache 4.1 CVE-2021-41773 漏洞简介 影响版本 环境搭建 漏洞复现 四、Apache 4.1 CVE-2021-41773 Apache HTTP Server 路径穿越漏洞 漏洞简介 该漏洞是由于Apache HTTP Server 2.4.49版本存在目录穿越漏洞,在路径穿越目录<Directory/>Require all gra…...

编程日记 2024/8/7 14:22:37

HCIE-学习笔记

动态授权加入的成员优先级高于静态绑定的成员&#xff1b; any组&#xff08;缺省&#xff09;&#xff1a;所有用户或资源&#xff0c;通常用来配置默认规则。any组只能做目的组&#xff0c;不支持配置为源组。 同一个安全组既可以与多条授权规则绑定来表示动态用户&#xff0…...

编程日记 2024/8/7 14:21:34

【计算机网络】性能指标-带宽和时延(MB、GB、KB、B、byte、bit、Mb/s、Gb/s、b/s等)学习

文章目录 1、单位换算MB、b/s1.1 在计算机领域&#xff0c;大写的B、K、M、G表示1.2 在通信领域&#xff0c;小写的k代表的是1000,不是1024&#xff0c;转换的时候要注意区分 2、带宽3、时延&#xff08;时间消耗&#xff09;4、时延带宽积5、往返时延RTT 1、单位换算MB、b/s …...

编程日记 2024/8/7 14:20:32

ANN（Approximate Nearest Neighbor）搜索和索引库到底是什么？

&#x1f349; CSDN 叶庭云&#xff1a;https://yetingyun.blog.csdn.net/ ANN&#xff08;Approximate Nearest Neighbor&#xff09;搜索&#xff1a;最近邻搜索是一种在大规模数据集中快速找到与给定查询数据点距离最近的点的算法。与传统的精确最近邻搜索算法相比&#xff…...

编程日记 2024/8/7 14:17:24

勒索软件、供应链攻击等带来的思考！

2023年勒索软件、供应链攻击、地缘政治冲突与黑客活动主义、国家黑客间谍与APT组织活动成为网络安全的热点话题&#xff0c;生成式人工智能技术的武器化更是给动荡的全球网络安全威胁态势增加了不确定性、不对称性和复杂性。 即将到来的2024年&#xff0c;随着网络犯罪的规模化…...

编程日记 2024/8/7 14:15:18

【Nuxt】自定义插件和生命周期

自定义插件 方式一&#xff1a; app.vue // 创建插件(在app.vue中创建全局可以使用 而在某个页面中创建只有该页面可以使用) // 方式一&#xff1a; const nuxtApp useNuxtApp(); nuxtApp.provide("formDate", () > {return "2023-12-12"; }) nuxtAp…...

编程日记 2024/8/7 14:14:16

MySQL的简单介绍

文章目录 数据库关系型数据库非关系型数据”数据库的概念和用途MySQL数据库服务器、数据库和表的关系数据库的创建和删除表创建表修改常见的数据类型和约束字符串类型日期和时间类型PRIMARY KEY使用AUTO_INCREMENT使用UNIQUE使用FOREIGN KEY使用 SQL语言基础SQL语言简介SQL分类…...

编程日记 2024/8/7 14:13:13

leetcode 116.填充每个节点的下一个右侧结点指针

1.题目要求: 给定一个二叉树&#xff1a;struct Node {int val;Node *left;Node *right;Node *next; } 填充它的每个 next 指针&#xff0c;让这个指针指向其下一个右侧节点。如果找不到下一个右侧节点&#xff0c;则将 next 指针设置为 NULL 。初始状态下&#xff0c;所有 ne…...

编程日记 2024/8/7 14:12:10

『 Linux 』网络基础

文章目录 协议分层OSI 七层模型TCP/IP 四层(五层)模型网络协议栈与操作系统的联系报文TCP/IP 通讯过程以太网通信的过程以太网的数据碰撞 协议分层 协议分层是计算机网络中奖网络协议进行组织和管理的方法; 通过将网络通信过程分成多个层次,每个层次负责特定的功能从而简化网络…...

编程日记 2024/8/7 14:10:06

Python酷库之旅-第三方库Pandas(070)

目录 一、用法精讲 281、pandas.Series.dt.daysinmonth属性 281-1、语法 281-2、参数 281-3、功能 281-4、返回值 281-5、说明 281-6、用法 281-6-1、数据准备 281-6-2、代码示例 281-6-3、结果输出 282、pandas.Series.dt.tz属性 282-1、语法 282-2、参数 282-…...

编程日记 2024/8/7 14:09:05

第一篇Linux介绍

目录 1、操作系统 2、Windows和Linux操作系统的区别 3、 Linux 的发行版本 4、 linux 分支 5、 Linux 的含义 6、Linux 特点 1、操作系统 常见操作系统有&#xff1a;Windows、MacOS、Unix/Linux。 类 UNIX Windows&#xff1a;其是微软公司研发的收费操作系统&#xff…...

编程日记 2024/8/7 14:06:58

在Windows编程中，MFC\C++中OnCopyData如何传递基础类型数据？

在C中&#xff0c;OnCopyData 并不是一个标准的C库或框架中的成员函数&#xff0c;它更常见于Windows编程中&#xff0c;特别是使用Win32 API或MFC&#xff08;Microsoft Foundation Classes&#xff09;时。OnCopyData 是一个在MFC应用程序中常用于处理来自其他应用程序的WM_C…...

编程日记 2024/8/7 14:03:53

10款超好用的图纸加密软件推荐，2024企业常用图纸加密软件分享

在现代企业中&#xff0c;设计图纸和敏感数据的安全性至关重要。一旦图纸泄露&#xff0c;可能会对企业造成不可估量的损失。因此&#xff0c;选择一款高效、可靠的图纸加密软件显得尤为重要。 1. 安秉图纸加密软件 安秉图纸加密软件是一款专为保护工程图纸和设计文件安全的软…...

编程日记 2024/8/7 14:01:50

BUUCTF [安洵杯 2019]easy_serialize_php 1

打开题目&#xff0c;看到一串php代码&#xff0c;试着代码审计一下&#xff0c;看一下有用信息 可以看出是通过$_SESSION[img]来读取文件 extract可以将数组中的变量导入当前变量表 也就是说我们可以伪造$_SESSION 数组中的所有数据 这里传递一个参数fphpinfo 先用hackbar进…...

编程日记 2024/8/7 13:59:47

前端面试宝典【CSS篇】【5】

在前端开发的世界里，每一次面试都是一次机遇，也是一次挑战。 你是否曾因技术深度不够而错失良机？ 或是面对最新的技术趋势感到迷茫？ 我们的【前端面试宝典】正是为此而来。 由拥有多年一线实战经验的资深工程师亲自授课，结合最新的行业动态与实战案例，旨在全面提升你的技…...

编程日记 2024/8/7 13:58:45

stem32江科大自学笔记

江科大B站教程连接:【STM32入门教程-2023版 细致讲解 中文字幕】 系列文章目录 提示&#xff1a;收集stem32江科大自学笔记&#xff0c;方便自己和他人查看 视频对应目录STM32入门教程P1-3 [1-2]&[2-1]1.STM32简介、系统介绍、软件安装P4 [2-2]2.基于标准库&#xff08;库…...

编程日记 2024/8/7 13:57:44

C++-类与对象基础

一&#xff0c;类的定义 1.1类定义格式 class为定义类的关键字&#xff0c;Stack为类的名字&#xff0c;{}中为类的主体&#xff0c;注意类定义结束时后面分号不能省略。类体中内容称为mian类的成员&#xff1a;类中的变量称为类的属性或成员变量; 类中的函数称为类的方法或者…...

编程日记 2024/8/7 13:55:42

SolidWorks 扫掠实战：从零构建带倒角的方形螺旋管

1. 从零开始理解方形螺旋管建模 第一次用SolidWorks做方形螺旋管时&#xff0c;我盯着屏幕发呆了半小时——明明圆形螺旋管点几下就能搞定&#xff0c;换成方形截面怎么就报错连连&#xff1f;后来才发现&#xff0c;这种带倒角的异形螺旋管建模&#xff0c;关键不在于操作步骤…...

编程新知 2026/4/9 2:52:56

5. 你是怎么理解ES6中 Promise的？使用场景？

一、先给面试官一个结论版如果面试官问 "你怎么理解 Promise&#xff1f;" &#xff0c;不要上来就背 API。 更好的开场是先说本质&#xff1a;Promise 是 ES6 引入的一种用于处理异步操作的解决方案。 它的核心价值是&#xff1a;把异步操作的最终结果&#xff08;成…...

编程新知 2026/4/9 2:22:30

避坑指南：天地图加载GeoJSON绘制省市区划时，你可能遇到的3个关键问题与解决方案

天地图加载GeoJSON绘制行政区划的三大核心难题与实战解决方案 当开发者尝试在天地图平台上叠加GeoJSON数据绘制行政区划时&#xff0c;往往会遇到一些意料之外的"坑"。这些问题不仅影响开发效率&#xff0c;更可能导致最终呈现效果与预期相差甚远。本文将聚焦三个最常…...

编程新知 2026/4/9 0:38:44

【无限视距】：R3nzSkin的MOBA视野增强技术原理与实战指南

【无限视距】&#xff1a;R3nzSkin的MOBA视野增强技术原理与实战指南 【免费下载链接】R3nzSkin Skin changer for League of Legends (LOL) 项目地址: https://gitcode.com/gh_mirrors/r3n/R3nzSkin 在MOBA游戏的对抗中&#xff0c;视野控制往往决定战局走向。R3nzSkin…...

编程新知 2026/4/8 23:58:19

1705.0亿元！企业互联网解决方案市场扩容，为产业升级筑牢数字底座

在数字化浪潮席卷全球的当下&#xff0c;企业对高效、安全且可扩展的互联网和云资源访问需求愈发迫切。企业互联网解决方案作为企业级连接服务和托管网络功能的关键载体&#xff0c;正成为企业数字化转型的重要支撑。据恒州诚思调研统计&#xff0c;2025年全球企业互联网解决方…...

编程新知 2026/4/8 23:15:28

深度解析WeChatMsg：个人数据主权时代的技术革命与架构设计

深度解析WeChatMsg&#xff1a;个人数据主权时代的技术革命与架构设计 【免费下载链接】WeChatMsg 提取微信聊天记录&#xff0c;将其导出成HTML、Word、CSV文档永久保存&#xff0c;对聊天记录进行分析生成年度聊天报告 项目地址: https://gitcode.com/GitHub_Trending/we/W…...

编程新知 2026/4/8 22:50:43

Figma中文界面革新：突破语言壁垒的全攻略

Figma中文界面革新&#xff1a;突破语言壁垒的全攻略 【免费下载链接】figmaCN 中文 Figma 插件&#xff0c;设计师人工翻译校验 项目地址: https://gitcode.com/gh_mirrors/fi/figmaCN Figma作为主流设计工具&#xff0c;其英文界面长期困扰中文用户。FigmaCN插件通过设…...

编程新知 2026/4/8 21:35:24

为什么92%的.NET团队在.NET 9发布30天内未启用低代码？揭秘微软未公开的Runtime沙箱限制与IL修剪兼容性断层

第一章&#xff1a;低代码在.NET 9生态中的战略定位与现实落差.NET 9 将“开发者生产力”列为首要设计目标&#xff0c;官方路线图明确将低代码能力纳入平台级支持范畴——包括对 Microsoft.Extensions.LowCode 命名空间的首次正式引入、Blazor Hybrid 中内建的可视化组件绑定引…...

编程新知 2026/4/8 20:18:36

记一次综合型流量分析 | 添柴不加火泛

核心摘要&#xff1a;这篇文章能帮你 ?? 1. 彻底搞懂条件分支与循环的适用场景&#xff0c;告别选择困难。 ?? 2. 掌握遍历DOM集合修改属性的标准姿势与性能窍门。 ?? 3. 识别流程控制中的常见“坑”&#xff0c;并学会如何优雅地绕过去。 ?? 主要内容脉络 ?? 一、痛…...

编程新知 2026/4/8 19:49:46

JointJS高亮器与工具系统：增强用户交互体验的终极指南

JointJS高亮器与工具系统&#xff1a;增强用户交互体验的终极指南 【免费下载链接】joint A proven SVG-based JavaScript diagramming library powering exceptional UIs 项目地址: https://gitcode.com/gh_mirrors/jo/joint JointJS作为一款强大的SVG图表库&#xff0…...

编程新知 2026/4/8 19:45:44