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

[HTML]Web前端开发技术18（HTML5、CSS3、JavaScript ）HTML5 基础与CSS3 应用——喵喵画网页

news 2025/7/6 14:54:39

希望你开心，希望你健康，希望你幸福，希望你点赞！

最后的最后，关注喵，关注喵，关注喵，佬佬会看到更多有趣的博客哦！！！

喵喵喵，你对我真的很重要！

前言

HTML5 概述

HTML5 的八个特性

HTML5 的优势

HTML5 新增结构元素及页面元素

HTML5 废除的元素与属性

浏览器支持与选择

课后练习

html5页面布局设计

总结

前言

熟悉掌握 HTML5 新特性。

HTML5 概述

WHATWG（Web Hypertext Application Technology Working Group，Web 超文本应用技术工作组），WHATWG组织专门致力于Web 表单和应用程序，当时W3C 专注于XHTML 2.0 标准的制定。2006年10月，W3C决定与WHATWG合作共同研制HTML5 相关技术标准。

HTML5 的八个特性

1.语义特性（Semantic）。HTML5赋予网页更好的意义和结构。

2.离线与存储特性（Offline & Storage）。HTML5开发的网页APP，启动时间更短，联网速度更快。由于有HTML5 APP Cache、本地存储功能、Indexed DB和File API说明文档。

3.设备访问特性 (Device Access)。HTML5提供了前所未有的数据与应用接入开放接口。使外部应用可以直接与浏览器内部的数据直接相连，例如视频影音可直接与麦克风及摄像头相联。

4. 多媒体特性(Multimedia)。支持网页端的Audio、Video等多媒体功能，与网站自带的APPS、摄像头、影音功能相得益彰。

5. 三维、图形与特效特性（3D、Graphics & Effects）。基于SVG、Canvas、WebGL及CSS3的3D功能，用户会惊叹于在浏览器中，所呈现的惊人视觉效果。

6. 性能与集成特性（Performance & Integration）。 HTML5会通过Web Workers和XMLHttpRequest2等技术，帮助您的Web应用和网站在多样化的环境中更快速的工作。

7. 连接特性（Connectivity）。HTML5拥有更有效的服务器推送技术(Server-Sent Event和WebSockets)，能够帮助我们实现服务器将数据“推送”到客户端的功能。

8. CSS3特性(CSS3)。CSS3中提供了更多的风格和更强的效果。

HTML5 的优势

1.摆脱对平台的依赖。打开浏览器，直接就可以访自己的应用。

2.实时更新。

3.离线使用。用户可以离线使用，更新下载量及少。

4.代码更安全。HTML5可以将Web代码全部加密，本地应用解密后再运行，大大的提供了代码的安全性。

5.跨平台。JavaScript的代码可以在许多地方使用，包括移动应用、移动网站、PC网站、各种浏览器插件，甚至可以用WebKit封装作为跨平台的应用程序。

6.可以充分利用Native。HTML5可以通过浏览器作为中介充分利用Native的好处(使用GPS、照相机、本地相册、读取本地联系人等）。某些Web无法实现的功能，可以利用Native来实现。

HTML5 新增结构元素及页面元素

1. HTML5中新增加结构元素。

例如Header页眉、nav导航、section节、article文章、aside侧栏、footer页脚。

2. HTML5 中新增页面元素。

例如video、audio、embed、progress、time、mark、ruby、rt 、rp 、canvas 、command、datalist、output、wbr 、source、menu、details等

HTML5 废除的元素与属性

HTML4.01之前有些标记被不赞成使用，HTML5已经淘汰了，建议使用CSS来替代。还有些标记HTML5已经不再支持，所以也需要淘汰。

(1) 纯表现的元素。如font、basefont、center、big、s、u、strike、tt。

(2) 对可用性产生负面影响的元素。如frameset、frame、noframes等元素。HTML5只支持浮动框架（内联框架）iframe元素。

(3) 易产生混淆的元素。如acronym、applet、isindex、dir等元素。

(4) 废除只有部分浏览器支持的元素。如blink、bgsound、marquee等元素。

(5) 其它被废除的元素。如废除rb，使用ruby替代；废除listing使用pre替代；废除xmp使用code替代；废除nextid使用guids替代；废除plaintex使用“text/plian”MIME类型替代。

浏览器支持与选择

一些低版本的浏览器并不支持HTML5，如IE6～IE8浏览器。所有新、旧浏览器，对无法识别的元素均会视作内联(inline)元素来自动处理。可以通过其它方法让这些浏览器能够处理“未知”的HTML元素。使用http://html5test.com来测试浏览器的支持。

html5shiv是针对IE浏览器比较好的解决方案。html5shiv主要解决HTML5提出的不被IE6～IE8识别新的元素，不能作为父节点包裹子元素，不能应用CSS样式。从指定网站上直接下载并保存到本地项目目录中（https://github.com/aFarkas/html5shiv/）。

<head><!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]--></head>

课后练习

html5页面布局设计

网页标题：html5页面布局设计
网页的框架结构如下图所示，body中的html代码可参照如下所示代码结构：

<header></header>

<nav>

             <ul>

                         <li><a href="#">首页</a></li>

                         ……

             </ul>

</nav>

<div id="main">

             <article>

                         <section><img src="img/html5_logo.png"></section>

                         ……

             </article>

             <aside>

                         <figure>

                                     <img src="img/html5.png">

                                     <figcaption>HTML5结构元素侧边aside</figcaption>

                         </figure>

             </aside>

</div>

<footer>

             <p>……</p>

</footer>

在CSS文件夹中新建样式表文件style1.css，使用外部样式表实现如下图所示的网页效果，要求：
整体框架样式：
全局样式：内外边距清0
header的样式：背景颜色#4B5B6B，背景图片logo.png，背景图片不重复显示在左上角,宽100%，高60px
nav的样式：宽100%，高80px
main的样式：宽100%，高500px，背景颜色#fefefe
footer的样式：清空两侧浮动，宽100%，高80px，背景颜色#eaeada，上下内边距为20px，左右内边距为自动，文本居中对齐。
设置导航条nav下的具体样式：
ul的样式：不显示项目符号，宽100%，高80px，背景颜色#d0c0b0，文本居中对齐，相对于父元素居中显示。
li的样式：字体大小28px，上下内边距20px，左右内边距10px，显示为inline-block类型，宽160px，高40px。
鼠标单击超链接之前，之后，及正在单击时的样式：无下划线
鼠标悬停在超链接上时的样式：背景颜色#cf9，高80px，宽160px，上下内边距为20px，左右内边距为10px。
设置主体部分main下的具体样式：
article的样式：宽75%，高500px，背景颜色#dbdaca，向左浮动
section的样式：宽30%，高420px，向左浮动，边框线为1px 虚线 #060，文本居中对齐，垂直居中(vertical-align: middle;)，上下外边距为35px，左右外边距为10px
img的样式：宽95%，高400px，外边距10px
aside的样式：宽25%，高500px，背景颜色#9F9F9A，向右浮动，文本居中对齐，垂直方向居中对齐(vertical-align: middle;)。
figure的样式：上下外边距20px，左右外边距自动。
设置脚部footer下的具体样式：
设置footer下的p的样式：字体大小20px，上内边距25px，高26px
网页的效果图参照下图所示：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>html5页面布局设计</title>
<link rel="stylesheet" href="CSS/style1.css">
</head><body><header></header><nav><ul><li><a href="#">首页</a></li><li><a href="#">HTML5</a></li><li><a href="#">CSS3</a></li><li><a href="#" >JavaScript</a></li><li><a href="#">DOM</a></li><li><a href="#">BOM</a></li></ul></nav><div id="main"><article><section><img src="images/html5_logo.png"></section><section><img src="images/css3_logo.png"></section><section><img src="images/javascript_logo.png"/></section></article><aside><figure><img src="images/html5.png"><figcaption>HTML5结构元素侧边aside</figcaption></figure></aside></div><footer><p>Copyright &copy; 2017-2020 Web前端开发工作室 - 业务开发部 - 网站建设</p></footer>
</body>
</html>

style1.css

@charset "utf-8";
/* CSS Document */
* {padding: 0px;margin: 0px;}header {background:url(../images/logo.png) #4B5B6B no-repeat top left;width: 100%;height: 60px;}		
nav {/*background: #D9D9D9;*/width: 100%;height: 80px;}
ul {list-style-type: none;width: 100%;height: 80px;background: #D0C0B0;text-align: center;margin:0 auto;}			
li {font-size: 28px;padding:20px 10px;display:inline-block;width:160px;height:40px;}a:link,a:visited{text-decoration: none;}
a:hover{background: #CCFF99;height: 80px;width: 160px;padding: 20px 10px;}
a:active{text-decoration: none;}#main {width: 100%;height: 500px;background:#fefefe;}article {width:75%;height:500px;background: #DBDACA;float: left;}
section {width: 30%;height: 420px;float: left;border: 1px dashed #006600;text-align: center;vertical-align: middle;margin: 35px 10px;}
img {width: 95%;height: 400px;margin: 10px;}
aside {width: 25%;height: 500px;background: #9F9F9A;float: right;text-align: center;vertical-align: middle;}
figure{margin:20px auto;}
footer {clear: both;width: 100%;height: 80px;background: #EAEADA;padding: 20px auto;text-align: center;}
footer p {font-size: 20px;padding-top: 25px;height: 26px;}

总结

熟悉掌握HTML5 新特性。

希望你开心，希望你健康，希望你幸福，希望你点赞！

最后的最后，关注喵，关注喵，关注喵，佬佬会看到更多有趣的博客哦！！！

喵喵喵，你对我真的很重要！

[HTML]Web前端开发技术18（HTML5、CSS3、JavaScript ）HTML5 基础与CSS3 应用——喵喵画网页

希望你开心，希望你健康，希望你幸福，希望你点赞！ 最后的最后，关注喵，关注喵，关注喵，佬佬会看到更多有趣的博客哦！！！ 喵喵喵，你对我真的…...

编程日记 2024/1/27 15:05:42

Threejs 展示——obj 格式模型导入

文章目录需求分析1. HTML版本2. Vue 版本需求导入obj 格式的模型数据分析 .obj：Wavefront OBJ 格式，是一种广泛使用的三维模型文件格式。预览 .obj格式文件的软件可点此下载需要准备两种格式的数据，如下所示 1. HTML版本 html <!…...

编程日记 2024/1/27 15:04:41

深入浅出 diffusion(3)：pytorch 实现 diffusion 中的 U-Net

导入python包 import mathimport torch import torch.nn as nn import torch.nn.functional as F silu激活函数 class SiLU(nn.Module): # SiLU激活函数staticmethoddef forward(x):return x * torch.sigmoid(x) 归一化设置 def get_norm(norm, num_channels, num_groups)…...

编程日记 2024/1/27 15:01:39

C#使用RabbitMQ-2_详解工作队列模式

简介 🍀RabbitMQ中的工作队列模式是指将任务分配给多个消费者并行处理。在工作队列模式中，生产者将任务发送到RabbitMQ交换器，然后交换器将任务路由到一个或多个队列。消费者从队列中获取任务并进行处理。处理完成后，消费者可以向…...

编程日记 2024/1/27 15:00:38

Day37 56合并区间 738单调递增的数字 968监控二叉树

56 合并区间给出一个区间的集合，请合并所有重叠的区间。示例 1: 输入: intervals [[1,3],[2,6],[8,10],[15,18]]输出: [[1,6],[8,10],[15,18]]解释: 区间 [1,3] 和 [2,6] 重叠, 将它们合并为 [1,6]. class Solution { public:vector<vector<int>>…...

编程日记 2024/1/27 14:56:34

【Android】在WSA安卓子系统中进行新实验性功能试用与抓包（2311.4.5.0）

前言在根据几篇22和23的WSA抓包文章进行尝试时遇到了问题，同时发现新版Wsa的一些实验性功能能优化抓包配置时的一些步骤，因而写下此篇以作记录。 Wsa版本：2311.40000.5.0 本文出现的项目： MagiskOnWSALocal MagiskTrustUserCer…...

编程日记 2024/1/27 14:53:30

【服务器】服务器的管理口和网口

服务器通常会有两种不同类型的网络接口，即管理口（Management Port）和网口（Ethernet Port），它们的作用和用途不同。一、管理口管理口通常是用于服务器管理的网络接口，也被称为外带网卡或带外接…...

编程日记 2024/1/27 14:51:28

一个小例子，演示函数指针

结构体里经常看到函数指针的写法，函数指针其实就是函数的名字。但是结构体里你要是直接把一个函数摆上去，那就变成成员变量，就会发生混乱 1. 函数指针 #include <unistd.h> #include <stdio.h>struct Kiwia{void (*func)(int )…...

编程日记 2024/1/27 14:50:27

python12-Python的字符串之使用input获取用户输入

input()函数用于向用户生成一条提示，然后获取用户输入的内容。由于input0函数总会将用户输入的内容放入字符串中，因此用户可以输入任何内容，input()函数总是返回一个字符串。例如如下程序。 # !/usr/bin/env python# -*- coding: utf-8 -*-# @Time : 2024/01# @Author : Lao…...

编程日记 2024/1/27 14:49:26

【代码随想录-数组】移除元素

💝💝💝欢迎来到我的博客，很高兴能够在这里和您见面！希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。推荐:kwan 的首页,持续学习,不断总结,共同进步,活到老学到老导航檀越剑指大厂系列:全面总结 jav…...

编程日记 2024/1/27 14:47:24

springboot事务管理

/*spring事务管理注解:Transactional位置:业务(service)层的方法上、类上、接口上作用:将当前方法交给spring进行事务管理，方法执行前，开启事务:成功执行完毕，提交事务:出现常，回滚事务需要在配置文件是加上开启spring事务yml文件…...

编程日记 2024/1/27 14:42:20

数据结构——链式二叉树（2）

目录 🍁一、二叉树的销毁 🍁二、在二叉树中查找某个数，并返回该结点 🍁三、LeetCode——检查两棵二叉树是否相等 🌕（一）、题目链接：100. 相同的树 - 力扣（LeetCode&a…...

编程日记 2024/1/27 14:41:19

spring-boot-starter-validation常用注解

文章目录一、使用二、常用注解三、Valid or Validated ？四、分组校验1. 分组校验的基本概念2. 定义验证组3. 应用分组到模型4. 在控制器中使用分组5. 总结一、使用要使用这些注解，首先确保在你的 Spring Boot 应用的 pom.xml 文件中添加了 spring-bo…...

编程日记 2024/1/27 14:40:18

AF700 NHS 酯，AF 700 Succinimidyl Ester，一种明亮且具有光稳定性的近红外染料

AF700 NHS 酯，AF 700 Succinimidyl Ester，一种明亮且具有光稳定性的近红外染料，AF700-NHS-酯，具有水溶性和 pH 值不敏感性您好，欢迎来到新研之家文章关键词：AF700 NHS 酯，AF 700 Succinimid…...

编程日记 2024/1/27 14:35:14

C#常见内存泄漏

背景在开发中由于对语言特性不了解或经验不足或疏忽，往往会造成一些低级bug。而内存泄漏就是最常见的一个，这个问题在测试过程中，因为操作频次低，而不能完全被暴露出来；而在正式使用时，由于使用次数增加&…...

编程日记 2024/1/27 14:33:12

Xmind安装到指定目录

Xmind安装到指定目录默认情况下安装包自动引导安装在C盘（注册表默认位置） T1:修改注册表，比较麻烦 T2:安装时命令行指定安装位置，快捷省事 1）下载安装包（exe可执行文件） 2）安装…...

编程日记 2024/1/27 14:31:09

[GXYCTF2019]BabyUpload1

尝试各种文件，黑名单过滤后缀ph，content-type限制image/jpeg 内容过滤<?，木马改用<script languagephp>eval($_POST[cmdjs]);</script> 上传.htaccess将上传的文件当作php解析蚁剑连接得到flag...

编程日记 2024/1/27 14:30:09

SpringBoot之分页查询的使用

背景在业务中我们在前端总是需要展示数据，将后端得到的数据进行分页处理，通过pagehelper实现动态的分页查询，将查询页数和分页数通过前端发送到后端，后端使用pagehelper，底层是封装threadlocal得到页数和分页数并动态…...

编程日记 2024/1/27 14:29:08

【shell-10】shell实现的各种kafka脚本

kafka-shell工具背景日志 log一.启动kafka->(start-kafka)二.停止kafka->(stop-kafka)三.创建topic->(create-topic)四.删除topic->(delete-topic)五.获取topic列表->(list-topic)六. 将文件数据录入到kafka->(file-to-kafka)七.将kafka数据下载到文件-&g…...

编程日记 2024/1/27 14:24:04

【模型压缩】模型剪枝详解

参考链接：https://zhuanlan.zhihu.com/p/635454943 https 文章目录 1. 前言1.1 为什么要进行模型剪枝1.2 为什么可以进行模型剪枝2. 剪枝方式的几种分类2.1 结构化剪枝和非结构化剪枝2.1.1 结构化剪枝2.1.2 非结构化剪枝2.2 静态剪枝与动态剪枝2.2.1 静态剪枝2.2.2 动态剪枝…...

编程日记 2024/1/27 14:23:03

【kafka】Golang实现分布式Masscan任务调度系统

要求： 输出两个程序，一个命令行程序（命令行参数用flag）和一个服务端程序。命令行程序支持通过命令行参数配置下发IP或IP段、端口、扫描带宽，然后将消息推送到kafka里面。服务端程序： 从kafka消费者接收…...

编程新知 2025/7/5 22:57:52

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

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

编程新知 2025/6/28 11:42:05

Spring Boot 实现流式响应（兼容 2.7.x）

在实际开发中，我们可能会遇到一些流式数据处理的场景，比如接收来自上游接口的 Server-Sent Events（SSE） 或流式 JSON 内容，并将其原样中转给前端页面或客户端。这种情况下，传统的 RestTemplate 缓存机制会…...

编程新知 2025/6/21 9:48:10

循环冗余码校验CRC码算法步骤+详细实例计算

通信过程：（白话解释） 我们将原始待发送的消息称为 M M M，依据发送接收消息双方约定的生成多项式 G ( x ) G(x) G(x)（意思就是 G （ x ) G（x) G（x) 是已知的）&#xff0…...

编程新知 2025/7/5 12:50:23

macOS多出来了：Google云端硬盘、YouTube、表格、幻灯片、Gmail、Google文档等应用

文章目录问题现象问题原因解决办法问题现象 macOS启动台（Launchpad）多出来了：Google云端硬盘、YouTube、表格、幻灯片、Gmail、Google文档等应用。问题原因很明显，都是Google家的办公全家桶。这些应用并不是通过独立安装的…...

编程新知 2025/7/5 9:00:29

佰力博科技与您探讨热释电测量的几种方法

热释电的测量主要涉及热释电系数的测定，这是表征热释电材料性能的重要参数。热释电系数的测量方法主要包括静态法、动态法和积分电荷法。其中，积分电荷法最为常用，其原理是通过测量在电容器上积累的热释电电荷，从而确定热释电系数…...

编程新知 2025/7/6 7:52:17

【Go语言基础【13】】函数、闭包、方法

文章目录零、概述一、函数基础1、函数基础概念2、参数传递机制3、返回值特性3.1. 多返回值3.2. 命名返回值3.3. 错误处理二、函数类型与高阶函数1. 函数类型定义2. 高阶函数（函数作为参数、返回值） 三、匿名函数与闭包1. 匿名函数（Lambda函…...

编程新知 2025/6/16 16:17:22

HybridVLA——让单一LLM同时具备扩散和自回归动作预测能力：训练时既扩散也回归，但推理时则扩散

前言如上一篇文章《dexcap升级版之DexWild》中的前言部分所说，在叠衣服的过程中，我会带着团队对比各种模型、方法、策略，毕竟针对各个场景始终寻找更优的解决方案，是我个人和我司「七月在线」的职责之一且个人认为&#xff0c…...

编程新知 2025/7/4 14:07:57

高防服务器价格高原因分析

高防服务器的价格较高，主要是由于其特殊的防御机制、硬件配置、运营维护等多方面的综合成本。以下从技术、资源和服务三个维度详细解析高防服务器昂贵的原因： 一、硬件与技术投入大带宽需求 DDoS攻击通过占用大量带宽资源瘫痪目标服务器，因此…...

编程新知 2025/6/25 4:46:18

[USACO23FEB] Bakery S

题目描述 Bessie 开了一家面包店! 在她的面包店里，Bessie 有一个烤箱，可以在 t C t_C tC 的时间内生产一块饼干或在 t M t_M tM 单位时间内生产一块松糕。 ( 1 ≤ t C , t M ≤ 10 9 ) (1 \le t_C,t_M \le 10^9) (1≤tC,tM≤109)。由于空间…...

编程新知 2025/6/20 13:17:45

前言

HTML5 概述

HTML5 的八个特性

HTML5 的优势

HTML5 新增结构元素及页面元素

HTML5 废除的元素与属性

浏览器支持与选择

课后练习

html5页面布局设计

总结

相关文章：