html5基础代码-Linux大棚

admin 管理员组

文章数量: 1087139

2023年12月24日发(作者：源码客)

HTML5基础代码

什么是HTML5

HTML5是一种用于构建和呈现Web页面的标准技术。它是HTML（超文本标记语言）的第五个版本，是Web开发的重要组成部分。HTML5引入了许多新的特性和功能，使得开发者能够创建更加丰富、交互性更强的网页应用程序。

HTML5的主要目标是改进Web浏览器的处理能力，提供更多的语义化元素，支持多媒体内容，以及提供更好的用户体验。它还提供了新的API，使开发者能够创建更加强大和复杂的Web应用程序。

HTML5基础代码结构

在开始编写HTML5代码之前，我们需要了解HTML5的基本结构。一个典型的HTML5文档由以下几个部分组成：

页面标题

•

：这是HTML5的文档类型声明，告诉浏览器这是一个HTML5文档。

：这是HTML文档的根元素，包含了整个HTML页面的内容。

：这个元素用于定义文档的元信息，例如标题、样式表和脚本等。

：这个元素定义了页面的标题，将显示在浏览器的标题栏上。 </p><p style="text-indent: 2em;";><meta charset="UTF-8">：这个元素定义了文档的字符编码，通常使用UTF-8。 </p><p style="text-indent: 2em;";><link rel="stylesheet" href="">：这个元素用于引入外部样式表，定义了页面的样式。 </p><p style="text-indent: 2em;";><script src=""></script>：这个元素用于引入外部JavaScript文件，定义了页面的行为和交互。 </p><p style="text-indent: 2em;";><body>：这个元素包含了页面的实际内容，例如文本、图像、链接等。 </p><p style="text-indent: 2em;";>HTML5语义化元素 </p><p style="text-indent: 2em;";>HTML5引入了许多新的语义化元素，用于更好地描述文档的结构和内容。这些元素使得开发者能够更加清晰地定义页面的结构，提高可读性和可访问性。 </p><p style="text-indent: 2em;";>以下是一些常用的HTML5语义化元素： </p><p style="text-indent: 2em;";>• </p><p style="text-indent: 2em;";>• </p><p style="text-indent: 2em;";>• </p><p style="text-indent: 2em;";>• </p><p style="text-indent: 2em;";>• </p><p style="text-indent: 2em;";>• </p><p style="text-indent: 2em;";>• </p><p style="text-indent: 2em;";><header>：定义页面的页眉，通常包含网站的标志和导航菜单。 </p><p style="text-indent: 2em;";><nav>：定义页面的导航部分，包含页面的导航链接。 </p><p style="text-indent: 2em;";><main>：定义页面的主要内容，每个页面应该只有一个<main>元素。 </p><p style="text-indent: 2em;";><article>：定义一个独立的、完整的内容块，例如一篇新闻文章。 </p><p style="text-indent: 2em;";><section>：定义一个逻辑上的区块，通常包含相关的内容。 </p><p style="text-indent: 2em;";><aside>：定义页面的侧边栏，通常包含与主要内容相关的附加信息。 </p><p style="text-indent: 2em;";><footer>：定义页面的页脚，通常包含版权信息和联系方式。 </p><p style="text-indent: 2em;";>使用这些语义化元素可以使得页面的结构更加清晰明了，并且对搜索引擎和屏幕阅读器等工具也更加友好。 </p><p style="text-indent: 2em;";>HTML5表单 </p><p style="text-indent: 2em;";>HTML5引入了一些新的表单元素和属性，使得表单的创建和验证更加方便和灵活。 </p><p style="text-indent: 2em;";>以下是一些常用的HTML5表单元素和属性： </p><p style="text-indent: 2em;";>• </p><p style="text-indent: 2em;";>• </p><p style="text-indent: 2em;";>• </p><p style="text-indent: 2em;";>• </p><p style="text-indent: 2em;";>• </p><p style="text-indent: 2em;";>• </p><p style="text-indent: 2em;";>• </p><p style="text-indent: 2em;";><input type="email">：用于输入电子邮件地址，会自动验证输入是否符合电子邮件地址的格式。 </p><p style="text-indent: 2em;";><input type="url">：用于输入URL地址，会自动验证输入是否符合URL地址的格式。 </p><p style="text-indent: 2em;";><input type="number">：用于输入数值，可以设置最小值和最大值。 </p><p style="text-indent: 2em;";><input type="range">：用于输入范围值，可以通过滑块选择一个范围。 </p><p style="text-indent: 2em;";><input type="date">：用于输入日期，可以通过日历选择日期。 </p><p style="text-indent: 2em;";><input type="color">：用于选择颜色，可以通过颜色选择器选择颜色。 </p><p style="text-indent: 2em;";><input type="file">：用于上传文件，可以选择本地文件并上传到服务器。 </p><p style="text-indent: 2em;";>这些新的表单元素和属性使得开发者能够更加方便地创建各种类型的表单，并进行自动验证和格式化。 </p><p style="text-indent: 2em;";>HTML5多媒体 </p><p style="text-indent: 2em;";>HTML5提供了内置的多媒体支持，可以直接在网页中嵌入音频和视频，并通过JavaScript进行控制和交互。 </p><p style="text-indent: 2em;";>以下是一些常用的HTML5多媒体元素和属性： </p><p style="text-indent: 2em;";>• </p><p style="text-indent: 2em;";><audio>：用于嵌入音频，可以设置音频的源文件和控制按钮。 </p><p style="text-indent: 2em;";>• </p><p style="text-indent: 2em;";>• </p><p style="text-indent: 2em;";>• </p><p style="text-indent: 2em;";>• </p><p style="text-indent: 2em;";>• </p><p style="text-indent: 2em;";><video>：用于嵌入视频，可以设置视频的源文件、尺寸和控制按钮。 </p><p style="text-indent: 2em;";><source>：用于定义多个媒体源文件，浏览器会根据支持的格式选择其中一个进行播放。 </p><p style="text-indent: 2em;";><track>：用于定义视频的字幕或描述文件。 </p><p style="text-indent: 2em;";><canvas>：用于绘制图形和动画，可以通过JavaScript进行绘制和控制。 </p><p style="text-indent: 2em;";><svg>：用于绘制矢量图形，可以通过XML进行定义和控制。 </p><p style="text-indent: 2em;";>使用这些多媒体元素和属性，开发者可以更加灵活地在网页中嵌入音频和视频，并实现各种交互效果。 </p><p style="text-indent: 2em;";>HTML5本地存储 </p><p style="text-indent: 2em;";>HTML5引入了本地存储的机制，使得网页应用程序能够在客户端保存和访问数据，而不需要依赖服务器。 </p><p style="text-indent: 2em;";>以下是一些常用的HTML5本地存储技术： </p><p style="text-indent: 2em;";>• </p><p style="text-indent: 2em;";>• </p><p style="text-indent: 2em;";>• </p><p style="text-indent: 2em;";>Web Storage：使用localStorage和sessionStorage对象在客户端保存键值对数据。 </p><p style="text-indent: 2em;";>IndexedDB：使用IndexedDB API在客户端保存结构化数据。 </p><p style="text-indent: 2em;";>Web SQL Database：使用Web SQL Database API在客户端保存关系型数据库。 </p><p style="text-indent: 2em;";>这些本地存储技术使得网页应用程序能够更加高效地操作数据，并提供了离线访问和更好的用户体验。 </p><p style="text-indent: 2em;";>HTML5地理定位 </p><p style="text-indent: 2em;";>HTML5提供了地理定位的能力，使得网页应用程序能够获取用户的地理位置信息。 </p><p style="text-indent: 2em;";>以下是一些常用的HTML5地理定位API： </p><p style="text-indent: 2em;";>• </p><p style="text-indent: 2em;";>• </p><p style="text-indent: 2em;";>• </p><p style="text-indent: 2em;";>• </p><p style="text-indent: 2em;";>Geolocation API：通过ation对象获取用户的地理位置信息。 </p><p style="text-indent: 2em;";>osition()：实时监测用户的位置变化。 </p><p style="text-indent: 2em;";>rentPosition()：获取用户的当前位置。 </p><p style="text-indent: 2em;";>atch()：停止监测用户的位置变化。 </p><p style="text-indent: 2em;";>使用这些地理定位API，网页应用程序可以根据用户的位置提供个性化的服务和功能。 </p><p style="text-indent: 2em;";>HTML5的新特性和API </p><p style="text-indent: 2em;";>除了以上介绍的主要功能外，HTML5还引入了许多其他的新特性和API，用于增强Web开发的能力和体验。 </p><p style="text-indent: 2em;";>以下是一些常用的HTML5新特性和API： </p><p style="text-indent: 2em;";>• </p><p style="text-indent: 2em;";>• </p><p style="text-indent: 2em;";>• </p><p style="text-indent: 2em;";>• </p><p style="text-indent: 2em;";>• </p><p style="text-indent: 2em;";>• </p><p style="text-indent: 2em;";>Web Workers：允许在后台运行JavaScript代码，提高页面的响应速度。 </p><p style="text-indent: 2em;";>Web Sockets：提供了实时的双向通信，用于创建即时通讯和多人在线游戏等应用。 </p><p style="text-indent: 2em;";>WebRTC：提供了实时的音视频通信，用于创建视频会议和在线直播等应用。 </p><p style="text-indent: 2em;";>Web Animations：提供了强大的动画效果，用于创建复杂的动画和过渡效果。 </p><p style="text-indent: 2em;";>Drag and Drop：支持拖放操作，使得用户可以轻松地拖动和放置元素。 </p><p style="text-indent: 2em;";>CSS3：HTML5与CSS3一起使用，可以创建更加丰富和复杂的页面样式。 </p><p style="text-indent: 2em;";>通过使用这些新特性和API，开发者可以创造出更加丰富、交互性更强的Web应用程序。 </p><p style="text-indent: 2em;";>总结 </p><p style="text-indent: 2em;";>HTML5是一种用于构建和呈现Web页面的标准技术，提供了许多新的特性和功能。通过了解HTML5的基础代码结构、语义化元素、表单、多媒体、本地存储、地理定位以及其他新特性和API，开发者可以更加灵活地创建各种类型的网页应用程序，并提供更好的用户体验。 </p></div><br><p><h2></h2></p>  <p class="tag"> 本文标签： <a style="margin-right: 10px" href="/tag/379.html" target="_blank">用于</a> <a style="margin-right: 10px" href="/tag/266.html" target="_blank">页面</a> <a style="margin-right: 10px" href="/tag/772.html" target="_blank">定义</a> </p> <div class="roclinux-cn copyright"> <blockquote> <p> 版权声明：本文标题：html5基础代码内容由网友自发贡献，该文观点仅代表作者本人，转载请联系作者并注明出处：<a href="http://roclinux.cn/p/1703371904a448499.html">http://roclinux.cn/p/1703371904a448499.html</a>，本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。 </p> </blockquote> </div> </div> <div class="roclinux-cn block-wrap single-relative"> <h2 class="block-title"> 更多相关文章 </h2> <div class="roclinux-cn post-list"> <div class="roclinux-cn post-item">         <a href="/b/1738321706a1963249.html" class="post-item-title" title="html5 wifi登陆,miwifi.com登录页面入口"> <h3>html5 wifi登陆,miwifi.com登录页面入口</h3> <div class="roclinux-cn post-item-cover" style="display:inline-grid"> <ul class="post-categories"> <li> <a href="/b" target="_blank">编程</a> </li> </ul> </div> </a> <div class="roclinux-cn post-item-footer"> <div class="roclinux-cn tag-wrap"> </div> <div class="roclinux-cn post-item-meta">4月前</div> </div> <p class="post-item-summary">miwifi跟192.168.31.1作为小米(红米)路由器的登录地址，要怎么进入管理页面设置？ 第一步、路由器线路连接 1、小米路由器上的Internet接口(蓝色接口)，</p> </div> <div class="roclinux-cn post-item">         <a href="/b/1738322519a1963322.html" class="post-item-title" title="fw325r虚拟服务器,fw325r管理页面"> <h3>fw325r虚拟服务器,fw325r管理页面</h3> <div class="roclinux-cn post-item-cover" style="display:inline-grid"> <ul class="post-categories"> <li> <a href="/b" target="_blank">编程</a> </li> </ul> </div> </a> <div class="roclinux-cn post-item-footer"> <div class="roclinux-cn tag-wrap"> </div> <div class="roclinux-cn post-item-meta">4月前</div> </div> <p class="post-item-summary">迅捷fw325r路由器的管理页面地址是 falogin，电脑手机连接到你的迅捷fw325r路由器后，在浏览器中输入falogin，就能进入到它的管理页面了。用电脑或者手机</p> </div> <div class="roclinux-cn post-item">         <a href="/b/1740070760a2128718.html" class="post-item-title" title="jQuery判断当前页面是APP内打开还是浏览器打开"> <h3>jQuery判断当前页面是APP内打开还是浏览器打开</h3> <div class="roclinux-cn post-item-cover" style="display:inline-grid"> <ul class="post-categories"> <li> <a href="/b" target="_blank">编程</a> </li> </ul> </div> </a> <div class="roclinux-cn post-item-footer"> <div class="roclinux-cn tag-wrap"> </div> <div class="roclinux-cn post-item-meta">3月前</div> </div> <p class="post-item-summary">一、代码如下： function check_useragent(){var browser{versions: function() {var unavigator.userAgent, appnavig</p> </div> <div class="roclinux-cn post-item">         <a href="/b/1740070972a2128755.html" class="post-item-title" title="移动浏览器H5页面通过scheme打开本地应用"> <h3>移动浏览器H5页面通过scheme打开本地应用</h3> <div class="roclinux-cn post-item-cover" style="display:inline-grid"> <ul class="post-categories"> <li> <a href="/b" target="_blank">编程</a> </li> </ul> </div> </a> <div class="roclinux-cn post-item-footer"> <div class="roclinux-cn tag-wrap"> </div> <div class="roclinux-cn post-item-meta">3月前</div> </div> <p class="post-item-summary">需求： 在移动端浏览器H5页面中，点击按钮打开本地应用主要通过 scheme 协议。本文主要介绍如何在浏览器H5页面中通过 scheme 协议打开本地应用。 1、app支持网页打开&#</p> </div> <div class="roclinux-cn post-item">         <a href="/b/1740071148a2128786.html" class="post-item-title" title="vue项目如何控制页面只能在浏览器打开一个窗口，多个窗口时关闭当前新开的窗口"> <h3>vue项目如何控制页面只能在浏览器打开一个窗口，多个窗口时关闭当前新开的窗口</h3> <div class="roclinux-cn post-item-cover" style="display:inline-grid"> <ul class="post-categories"> <li> <a href="/b" target="_blank">编程</a> </li> </ul> </div> </a> <div class="roclinux-cn post-item-footer"> <div class="roclinux-cn tag-wrap"> </div> <div class="roclinux-cn post-item-meta">3月前</div> </div> <p class="post-item-summary">代码中的数字123，代表我写代码时候的思考思路，可以跟着数字去理解代码（菜鸟自研，代码虽烂，但功能齐全）</p> </div> <div class="roclinux-cn post-item">         <a href="/b/1740073826a2129260.html" class="post-item-title" title="浏览器通过Scheme协议启动APP中的页面"> <h3>浏览器通过Scheme协议启动APP中的页面</h3> <div class="roclinux-cn post-item-cover" style="display:inline-grid"> <ul class="post-categories"> <li> <a href="/b" target="_blank">编程</a> </li> </ul> </div> </a> <div class="roclinux-cn post-item-footer"> <div class="roclinux-cn tag-wrap"> </div> <div class="roclinux-cn post-item-meta">3月前</div> </div> <p class="post-item-summary">在APP开发过程中，通过外部浏览器调起APP页面的场景也很普遍使用。下面就介绍一下通过外部H5页面唤起APP中页面的通用方法。 1.首先需要在AndroidMainifest.xml中对你要启动的那个activity</p> </div> <div class="roclinux-cn post-item">         <a href="/b/1740118773a2137239.html" class="post-item-title" title="win10笔记本Alt+Tab键切换页面失灵怎么办？"> <h3>win10笔记本Alt+Tab键切换页面失灵怎么办？</h3> <div class="roclinux-cn post-item-cover" style="display:inline-grid"> <ul class="post-categories"> <li> <a href="/b" target="_blank">编程</a> </li> </ul> </div> </a> <div class="roclinux-cn post-item-footer"> <div class="roclinux-cn tag-wrap"> </div> <div class="roclinux-cn post-item-meta">3月前</div> </div> <p class="post-item-summary">win10笔记本AltTab键切换页面失灵！！！ 大家都知道，AltTab是一个非常实用的组合，可以上班划水&#xff0</p> </div> <div class="roclinux-cn post-item">         <a href="/b/1740120487a2137546.html" class="post-item-title" title="计算机打字无限长页面,Win10电脑键盘自动无限输入怎么办"> <h3>计算机打字无限长页面,Win10电脑键盘自动无限输入怎么办</h3> <div class="roclinux-cn post-item-cover" style="display:inline-grid"> <ul class="post-categories"> <li> <a href="/b" target="_blank">编程</a> </li> </ul> </div> </a> <div class="roclinux-cn post-item-footer"> <div class="roclinux-cn tag-wrap"> </div> <div class="roclinux-cn post-item-meta">3月前</div> </div> <p class="post-item-summary">最近有小伙伴遇见Win10突然可输入的地方全会无限自动输入*******，而且鼠标右击后再左击会出现“蹬”的提示音，检查发现系统和驱动都没有问题，Win10电脑键盘自动无限输</p> </div> <div class="roclinux-cn post-item">         <a href="/b/1741132600a2261381.html" class="post-item-title" title="Android 通过 “隐式意图” 打开系统的浏览器访问百度页面"> <h3>Android 通过 “隐式意图” 打开系统的浏览器访问百度页面</h3> <div class="roclinux-cn post-item-cover" style="display:inline-grid"> <ul class="post-categories"> <li> <a href="/b" target="_blank">编程</a> </li> </ul> </div> </a> <div class="roclinux-cn post-item-footer"> <div class="roclinux-cn tag-wrap"> </div> <div class="roclinux-cn post-item-meta">3月前</div> </div> <p class="post-item-summary">在MainActivity中，通过“隐式意图”打开系统的浏览器访问百度页面： MainActivity页面： package cn.lwx.openbrowser;impo</p> </div> <div class="roclinux-cn post-item">         <a href="/b/1741134001a2261625.html" class="post-item-title" title="浏览器上禁止用户用调试方式打开页面"> <h3>浏览器上禁止用户用调试方式打开页面</h3> <div class="roclinux-cn post-item-cover" style="display:inline-grid"> <ul class="post-categories"> <li> <a href="/b" target="_blank">编程</a> </li> </ul> </div> </a> <div class="roclinux-cn post-item-footer"> <div class="roclinux-cn tag-wrap"> </div> <div class="roclinux-cn post-item-meta">3月前</div> </div> <p class="post-item-summary">今天分享一个有趣的东西，我们浏览器可以通过F12或者鼠标右键的形式打开html页面，然后就可以看到页面的的信息，如dom结构，加载文件、请求信息等。那有</p> </div> <div class="roclinux-cn post-item">         <a href="/b/1741134527a2261716.html" class="post-item-title" title="Chrome浏览器中页面在新的标签页打开"> <h3>Chrome浏览器中页面在新的标签页打开</h3> <div class="roclinux-cn post-item-cover" style="display:inline-grid"> <ul class="post-categories"> <li> <a href="/b" target="_blank">编程</a> </li> </ul> </div> </a> <div class="roclinux-cn post-item-footer"> <div class="roclinux-cn tag-wrap"> </div> <div class="roclinux-cn post-item-meta">3月前</div> </div> <p class="post-item-summary">最近一直在使用谷歌浏览器（你还在百度？）发现Chrome默认是在本页面打开链接，这点我很不爽。在上网找了以下四种方法： 1.用鼠</p> </div> <div class="roclinux-cn post-item">         <a href="/b/1741135989a2261970.html" class="post-item-title" title="通过js判断打开页面的手机浏览器类型"> <h3>通过js判断打开页面的手机浏览器类型</h3> <div class="roclinux-cn post-item-cover" style="display:inline-grid"> <ul class="post-categories"> <li> <a href="/b" target="_blank">编程</a> </li> </ul> </div> </a> <div class="roclinux-cn post-item-footer"> <div class="roclinux-cn tag-wrap"> </div> <div class="roclinux-cn post-item-meta">3月前</div> </div> <p class="post-item-summary">转载的这篇文章很不错，主要是介绍通过js来判断访问页面的浏览器类型，可以做不同的处理。自己借鉴完之后，也再补充一点，现在项目中，还</p> </div> <div class="roclinux-cn post-item">         <a href="/b/1742567786a2409629.html" class="post-item-title" title="关于idea设置打开页面的默认浏览器"> <h3>关于idea设置打开页面的默认浏览器</h3> <div class="roclinux-cn post-item-cover" style="display:inline-grid"> <ul class="post-categories"> <li> <a href="/b" target="_blank">编程</a> </li> </ul> </div> </a> <div class="roclinux-cn post-item-footer"> <div class="roclinux-cn tag-wrap"> </div> <div class="roclinux-cn post-item-meta">2月前</div> </div> <p class="post-item-summary">关于idea设置打开页面的默认浏览器</p> </div> <div class="roclinux-cn post-item">         <a href="/b/1742571070a2410062.html" class="post-item-title" title="爬虫Selenium+Chrome 控制浏览器，打开百度网页，输入搜索关键词，点击回车，截取搜索页面"> <h3>爬虫Selenium+Chrome 控制浏览器，打开百度网页，输入搜索关键词，点击回车，截取搜索页面</h3> <div class="roclinux-cn post-item-cover" style="display:inline-grid"> <ul class="post-categories"> <li> <a href="/b" target="_blank">编程</a> </li> </ul> </div> </a> <div class="roclinux-cn post-item-footer"> <div class="roclinux-cn tag-wrap"> </div> <div class="roclinux-cn post-item-meta">2月前</div> </div> <p class="post-item-summary">输入关键词，百度搜索内容，生成搜索结果页面照片from selenium import webdriverfrom time import sleepfrom selenium.webdri</p> </div> <div class="roclinux-cn post-item">         <a href="/b/1743812617a2483897.html" class="post-item-title" title="android 使用浏览器打开指定页面"> <h3>android 使用浏览器打开指定页面</h3> <div class="roclinux-cn post-item-cover" style="display:inline-grid"> <ul class="post-categories"> <li> <a href="/b" target="_blank">编程</a> </li> </ul> </div> </a> <div class="roclinux-cn post-item-footer"> <div class="roclinux-cn tag-wrap"> </div> <div class="roclinux-cn post-item-meta">2月前</div> </div> <p class="post-item-summary">今天，简单讲讲android里如何使用浏览器打开指定的网页。之前，我做一个功能时，服务器返回一个url地址，我需要跳转到指定网页。却发现自己不知道怎么</p> </div> <div class="roclinux-cn post-item">         <a href="/b/1743812752a2483918.html" class="post-item-title" title="h5页面提示只能在微信浏览器中打开_Javascript限制网页只能在微信内置浏览器中访问..."> <h3>h5页面提示只能在微信浏览器中打开_Javascript限制网页只能在微信内置浏览器中访问...</h3> <div class="roclinux-cn post-item-cover" style="display:inline-grid"> <ul class="post-categories"> <li> <a href="/b" target="_blank">编程</a> </li> </ul> </div> </a> <div class="roclinux-cn post-item-footer"> <div class="roclinux-cn tag-wrap"> </div> <div class="roclinux-cn post-item-meta">2月前</div> </div> <p class="post-item-summary">那么问题就来了，这个网页首先涉及到了移动web前端开发，我优先选择了用HTML5bootstrap组合来实现页面的美观效果，前端其他的任务交给javascript解决(这里我</p> </div> <div class="roclinux-cn post-item">         <a href="/b/1743814478a2484208.html" class="post-item-title" title="设置vue运行npm run dev时候，项目在浏览器自动打开页面的方法"> <h3>设置vue运行npm run dev时候，项目在浏览器自动打开页面的方法</h3> <div class="roclinux-cn post-item-cover" style="display:inline-grid"> <ul class="post-categories"> <li> <a href="/b" target="_blank">编程</a> </li> </ul> </div> </a> <div class="roclinux-cn post-item-footer"> <div class="roclinux-cn tag-wrap"> </div> <div class="roclinux-cn post-item-meta">2月前</div> </div> <p class="post-item-summary">在configindex.js找到dev:{}里面的autoOpenBrowser: 设置为true，重新npm run dev一次就自动弹出浏览器页面啦！</p> </div> <div class="roclinux-cn post-item">         <a href="/b/1743814794a2484261.html" class="post-item-title" title="Window 10 系统EDGE浏览器使用IE模式加载页面"> <h3>Window 10 系统EDGE浏览器使用IE模式加载页面</h3> <div class="roclinux-cn post-item-cover" style="display:inline-grid"> <ul class="post-categories"> <li> <a href="/b" target="_blank">编程</a> </li> </ul> </div> </a> <div class="roclinux-cn post-item-footer"> <div class="roclinux-cn tag-wrap"> </div> <div class="roclinux-cn post-item-meta">2月前</div> </div> <p class="post-item-summary">1、在EDGE浏览器地址输入页面，直接打开页面 2、在浏览器右上角三个点，点击展开，点击使用IE模式下重新加载 3、在弹出的提示框中，勾选下次再IE模式</p> </div> <div class="roclinux-cn post-item">         <a href="/b/1743815023a2484305.html" class="post-item-title" title="HTML页面与浏览器自适应"> <h3>HTML页面与浏览器自适应</h3> <div class="roclinux-cn post-item-cover" style="display:inline-grid"> <ul class="post-categories"> <li> <a href="/b" target="_blank">编程</a> </li> </ul> </div> </a> <div class="roclinux-cn post-item-footer"> <div class="roclinux-cn tag-wrap"> </div> <div class="roclinux-cn post-item-meta">2月前</div> </div> <p class="post-item-summary">先看需求，打开了一个页面，正常打开没有问题，但是一旦把浏览器缩小，各种样式都发生了变化，还有一些页面有空余。碰到这种问题&</p> </div> <div class="roclinux-cn post-item">         <a href="/b/1743816029a2484479.html" class="post-item-title" title="HTML5页面如何在手机端浏览器调用相机、相册功能"> <h3>HTML5页面如何在手机端浏览器调用相机、相册功能</h3> <div class="roclinux-cn post-item-cover" style="display:inline-grid"> <ul class="post-categories"> <li> <a href="/b" target="_blank">编程</a> </li> </ul> </div> </a> <div class="roclinux-cn post-item-footer"> <div class="roclinux-cn tag-wrap"> </div> <div class="roclinux-cn post-item-meta">2月前</div> </div> <p class="post-item-summary">最近在做一个公司的保险信息处理系统项目，开发微信端浏览器访问的HTML5的页面，页面中有一个<input id"input" type"file"&</p> </div> </div> </div> <div class="roclinux-cn comments"> <div class="roclinux-cn postcomm block-wrap" id="divCommentPost"> <h2 class="block-title"> 发表评论 </h2> <form id="saypl" target="_self" method="post" name="saypl" action="/comment/create/448499.html?safe_token=ETLQ6jm1oqb3qQX42QlxSlZc3ZbCJmQiWytKY6E4M4wrEbWWN_2F1tA_2B7t87NtkjMS8YUN_2Fb82YVpbGoIzyd0_2Fuw_3D_3D"> <input type="hidden" name="doctype" value="1" /> <input type="hidden" name="quotepid" value="0" /> <div class="roclinux-cn comment-box comment-textarea"> <textarea name="message" id="txaArticle" class="text" cols="50" rows="4" tabindex="5" placeholder="评论内容"></textarea> </div> <input name="sumbit" type="submit" tabindex="6" value="发表评论" class="sub"> </form> </div> </div> <div class="sn-comments"> <div class="sn-comments__title">全部评论 0</div> <div class="sn-comments__body"> <div class="sn-empty">暂无评论</div> </div> </div> </div> </div> <div class="aside"> <div class="block-wrap" id="side-top-dxt"> <h2 class="block-title">推荐文章<i class="mcico mico-right"></i></h2> <div class="mcdas"> <a href="/p/1744039830a2523050.html" title="javascript - How to generate a unique 8 digit number using crypto in node js? - Stack Overflow" class="photo-item" target="_blank" style="background:#364cc6">  <div class="photo-item-inner"> <h3 class="photo-item-title"> javascript - How to generate a unique 8 digit number using crypto in node js? - Stack Overflow </h3> </div> </a> <a href="/p/1744058216a2526239.html" title=".net - Allow only two digits after decimal in javascript - Stack Overflow" class="photo-item" target="_blank" style="background:#364cc6">  <div class="photo-item-inner"> <h3 class="photo-item-title"> .net - Allow only two digits after decimal in javascript - Stack Overflow </h3> </div> </a> <a href="/p/1744091496a2532116.html" title="python - Issue with Loading Static Files and Images from Amazon S3 in Django - Stack Overflow" class="photo-item" target="_blank" style="background:#364cc6">  <div class="photo-item-inner"> <h3 class="photo-item-title"> python - Issue with Loading Static Files and Images from Amazon S3 in Django - Stack Overflow </h3> </div> </a> <a href="/p/1744099368a2533424.html" title="spring boot - Getting 500 Error When Trying to Submit a Thymeleaf Form - Stack Overflow" class="photo-item" target="_blank" style="background:#364cc6">  <div class="photo-item-inner"> <h3 class="photo-item-title"> spring boot - Getting 500 Error When Trying to Submit a Thymeleaf Form - Stack Overflow </h3> </div> </a> <a href="/b/1747595879a2558836.html" title="如何在Windows和centOS系统之间实现复制粘贴？步骤如下" class="photo-item" target="_blank" style="background:#364cc6">  <div class="photo-item-inner"> <h3 class="photo-item-title"> 如何在Windows和centOS系统之间实现复制粘贴？步骤如下 </h3> </div> </a> </div> </div> <div class="block-wrap" id="side-hot-view-item"> <h2 class="block-title">热门文章<i class="mcico mico-right"></i> </h2> <ul> <li class="mclas">      <div class="list-content"> <a title="机器学习—模型公平性" target="_blank" href="/b/1744021536a2519882.html"> <h3>机器学习—模型公平性</h3> </a> <span class="post-date">2月前</span> </div> </li> <li class="mclas">      <div class="list-content"> <a title="JavaScript sum all of the values in each object in an array? - Stack Overflow" target="_blank" href="/p/1744044708a2523905.html"> <h3>JavaScript sum all of the values in each object in an array? - Stack Overflow</h3> </a> <span class="post-date">2月前</span> </div> </li> <li class="mclas">      <div class="list-content"> <a title="Blazor Interactive Server on .NET 9 : InputRadioGroup rerender the page and not preserving selected option - Stack Overflow" target="_blank" href="/p/1744051179a2525046.html"> <h3>Blazor Interactive Server on .NET 9 : InputRadioGroup rerender the page and not preserving selected option - Stack Overflow</h3> </a> <span class="post-date">2月前</span> </div> </li> <li class="mclas">      <div class="list-content"> <a title="javascript - how to detect if browsers support custom elements - Stack Overflow" target="_blank" href="/p/1744064583a2527351.html"> <h3>javascript - how to detect if browsers support custom elements - Stack Overflow</h3> </a> <span class="post-date">2月前</span> </div> </li> <li class="mclas">      <div class="list-content"> <a title="Quarkus: How to run long-ish IO tasks during the SSL-handshake without blocking the event loop? - Stack Overflow" target="_blank" href="/p/1744086686a2531260.html"> <h3>Quarkus: How to run long-ish IO tasks during the SSL-handshake without blocking the event loop? - Stack Overflow</h3> </a> <span class="post-date">2月前</span> </div> </li> <li class="mclas">      <div class="list-content"> <a title="java - How to Render the same model multiple times - Stack Overflow" target="_blank" href="/p/1744088145a2531523.html"> <h3>java - How to Render the same model multiple times - Stack Overflow</h3> </a> <span class="post-date">2月前</span> </div> </li> <li class="mclas">      <div class="list-content"> <a title="Remove inline style from string element using javascriptjquery - Stack Overflow" target="_blank" href="/p/1744095444a2532813.html"> <h3>Remove inline style from string element using javascriptjquery - Stack Overflow</h3> </a> <span class="post-date">2月前</span> </div> </li> <li class="mclas">      <div class="list-content"> <a title="windows系统什么时候更新" target="_blank" href="/b/1747432437a2535936.html"> <h3>windows系统什么时候更新</h3> </a> <span class="post-date">22天前</span> </div> </li> <li class="mclas">      <div class="list-content"> <a title="Windows可执行脚本后台运行脚本" target="_blank" href="/b/1747556438a2544108.html"> <h3>Windows可执行脚本后台运行脚本</h3> </a> <span class="post-date">20天前</span> </div> </li> <li class="mclas">      <div class="list-content"> <a title="手把手教你制作U盘启动盘并完成Win10系统安装" target="_blank" href="/b/1747585884a2552019.html"> <h3>手把手教你制作U盘启动盘并完成Win10系统安装</h3> </a> <span class="post-date">20天前</span> </div> </li> </ul> </div> <div class="block-wrap" id="side-new-view-item"> <h2 class="block-title">最新文章<i class="mcico mico-right"></i> </h2> <ul> <li class="mclas">      <div class="list-content"> <a title="javascript - How do I toggle the readonly attribute of all child element with jquery - Stack Overflow" target="_blank" href="/p/1744100356a2533471.html"> <h3>javascript - How do I toggle the readonly attribute of all child element with jquery - Stack Overflow</h3> </a> <span class="post-date">2月前</span> </div> </li> <li class="mclas">      <div class="list-content"> <a title="javascript - Might it be possible to block an entire US state from accessing my site, using PHP? - Stack Overflow" target="_blank" href="/p/1744100331a2533470.html"> <h3>javascript - Might it be possible to block an entire US state from accessing my site, using PHP? - Stack Overflow</h3> </a> <span class="post-date">2月前</span> </div> </li> <li class="mclas">      <div class="list-content"> <a title="c++ - Is dereferencing std::span::end always undefined? - Stack Overflow" target="_blank" href="/p/1744100330a2533469.html"> <h3>c++ - Is dereferencing std::span::end always undefined? - Stack Overflow</h3> </a> <span class="post-date">2月前</span> </div> </li> <li class="mclas">      <div class="list-content"> <a title="javascript - Delay function execution if it has been called recently - Stack Overflow" target="_blank" href="/p/1744100302a2533468.html"> <h3>javascript - Delay function execution if it has been called recently - Stack Overflow</h3> </a> <span class="post-date">2月前</span> </div> </li> <li class="mclas">      <div class="list-content"> <a title="javascript - Google Maps Autocomplete List - Stack Overflow" target="_blank" href="/p/1744100275a2533467.html"> <h3>javascript - Google Maps Autocomplete List - Stack Overflow</h3> </a> <span class="post-date">2月前</span> </div> </li> <li class="mclas">      <div class="list-content"> <a title="Windows 安装和连接使用 PgSql数据库" target="_blank" href="/b/1749343656a2704355.html"> <h3>Windows 安装和连接使用 PgSql数据库</h3> </a> <span class="post-date">1小时前</span> </div> </li> <li class="mclas">      <div class="list-content"> <a title="cmd打开计算机D盘,Win7利用cmd命令进入d盘文件夹的操作方法" target="_blank" href="/b/1749343641a2704353.html"> <h3>cmd打开计算机D盘,Win7利用cmd命令进入d盘文件夹的操作方法</h3> </a> <span class="post-date">1小时前</span> </div> </li> <li class="mclas">      <div class="list-content"> <a title="如何在VMare中制作Windows Embedded Standard 7 (WES 7)" target="_blank" href="/b/1749343616a2704350.html"> <h3>如何在VMare中制作Windows Embedded Standard 7 (WES 7)</h3> </a> <span class="post-date">1小时前</span> </div> </li> <li class="mclas">      <div class="list-content"> <a title="开机、注销后自动登录Windows" target="_blank" href="/b/1749342928a2704263.html"> <h3>开机、注销后自动登录Windows</h3> </a> <span class="post-date">1小时前</span> </div> </li> <li class="mclas">      <div class="list-content"> <a title="【教程】Python Flask快速学习" target="_blank" href="/b/1749251520a2692895.html"> <h3>【教程】Python Flask快速学习</h3> </a> <span class="post-date">1天前</span> </div> </li> <li class="mclas">      <div class="list-content"> <a title="Exploring the Finest Accommodations: A Comprehensive Guide to Ruston LA Hotels" target="_blank" href="/lvyou/1736247036a1725023.html"> <h3>Exploring the Finest Accommodations: A Comprehensive Guide to Ruston LA Hotels</h3> </a> <span class="post-date">5月前</span> </div> </li> <li class="mclas">      <div class="list-content"> <a title="The Enchanting Experience of ScaliniTella NYC: A Culinary Gem in the Heart of Manhattan" target="_blank" href="/lvyou/1736246824a1724956.html"> <h3>The Enchanting Experience of ScaliniTella NYC: A Culinary Gem in the Heart of Manhattan</h3> </a> <span class="post-date">5月前</span> </div> </li> <li class="mclas">      <div class="list-content"> <a title="Exploring the Exquisite Aloft Chicago O'Hare: A Blend of Modern Luxury and Convenience" target="_blank" href="/lvyou/1736246607a1724902.html"> <h3>Exploring the Exquisite Aloft Chicago O'Hare: A Blend of Modern Luxury and Convenience</h3> </a> <span class="post-date">5月前</span> </div> </li> <li class="mclas">      <div class="list-content"> <a title="A Culinary Journey: Discovering the Finest Dining Experiences in Waco, TX" target="_blank" href="/lvyou/1736246384a1724842.html"> <h3>A Culinary Journey: Discovering the Finest Dining Experiences in Waco, TX</h3> </a> <span class="post-date">5月前</span> </div> </li> <li class="mclas">      <div class="list-content"> <a title="A Culinary Journey: Discovering the Finest Dining Experiences in Athens, GA" target="_blank" href="/lvyou/1736246169a1724784.html"> <h3>A Culinary Journey: Discovering the Finest Dining Experiences in Athens, GA</h3> </a> <span class="post-date">5月前</span> </div> </li> </ul> </div> </div> </div> <div class="footer"> CopyRight © 2022 All Rights Reserved. <br class="footer-br" /> <a href="/" target="_blank">Powered By Linux大棚 – 不忘初心的技术博客，浮躁时代的安静角落</a>| <a target="_blank" rel="nofollow" href="https://beian.miit.gov.cn/" style="font-size: 12px;">豫ICP备2022026798号-10</a> </div> <script src="/view/js/xiuno.js?2.3.0"></script> <script src="/view/template/quzhiwa/js/custom.js?2.3.0"></script> <script> $('.cat-tab-wrap li[data-active="fid-1"]').addClass('current-menu-item'); $('.menu-header-container li[data-active="fid-1"]').addClass('current-menu-item'); </script> </body> </html>