benw
一、HTML 的基本概述
- 定义与作用 ：HTML 即超文本标记语言，是构成万维网基础的重要元素，主要定义网页内容的含义和结构，其他技术（如 CSS 用于表现与展示效果，JavaScript 用于功能与行为）则作为补充。超文本指的是连接单个或多个网站间网页的链接，它是网络的关键组成部分。
- 标记与元素 ：HTML 利用 “标记” 来标注文本、图片等各类内容，以便在浏览器中呈现，包含多种元素如 、
、<body>、<header>、<footer>、<article>、<section>、<p>、<div>、<span>、<img>、<aside>、<audio>、<canvas>、<datalist>、<details>、<embed>、<nav>、<output>、<progress>、<video>、<ul>、<ol>、<li> 等。</li><li data-track="183"><strong>标签特点</strong> ：通过 “标签” 将文本从文档中引出，由 “<”“>” 包裹元素名构成，HTML 标签里的元素名不区分大小写，一般推荐使用全部小写。</li></ul><p data-track="184"><strong>二、主要资源介绍</strong></p><ul><li data-track="185"><strong>HTML 介绍</strong> ：为新手提供基础文章，讲解 HTML 概念及使用方法。</li><li data-track="186"><strong>HTML 教程</strong> ：涵盖使用 HTML 的文章、教程和完整示例，可在 HTML 学习区查看。</li><li data-track="187"><strong>HTML 参考</strong> ：包含了 HTML 每个元素和属性的详细信息，资源丰富。</li><li data-track="188"><strong>初学者教程</strong> ：在 HTML 学习区有许多特色模块，可让学习者从零开始，无需先前经验掌握 HTML。</li></ul><p data-track="189"><strong>三、HTML 相关学习模块</strong></p><ul><li data-track="190"><strong>HTML 介绍模块</strong> ：帮助学习者打下基础，掌握核心概念和语法，学会将 HTML 应用于文本、创建超链接及构建网页。</li><li data-track="191"><strong>多媒体与嵌入内容模块</strong> ：探索在网页中包含多媒体内容的方式，如嵌入图片、视频、音频及其他网页。</li><li data-track="192"><strong>HTML 表格模块</strong> ：教授如何以可理解且易于访问的形式在网页展示表格化数据，涵盖基本表格标记及一些复杂特性。</li><li data-track="193"><strong>HTML 表单模块</strong> ：引导建立客户端 / 前端部分的表单，表单在网页交互中起到关键作用，如注册、登录、发送评论反馈等。</li></ul><p data-track="194"><strong>四、用 HTML 解决常见问题</strong></p><ul><li data-track="195">提供了常见问题解决方法的链接，涉及如何处理网页标题、添加图片或视频、强调内容、建立基本表单等在构建网页过程中的常见问题。</li></ul><p data-track="196"><strong>五、高级主题</strong></p><ul><li data-track="197"><strong>CORS 处理跨域图片</strong> ：通过设置 crossorigin 属性和合适 CORS 标头，可以让 <img> 元素从外部来源加载并在 <canvas> 元素中如本地源一样使用图片。</li><li data-track="198"><strong>CORS 设置属性</strong> ：支持 CORS 的 HTML 元素（如 <img> 或 <video>）具有 crossorigin 元素属性（或 crossOrigin 对象属性），用于配置其跨域获取资源的请求。</li><li data-track="199"><strong>使用 rel="preload" 预加载页面内容</strong> ：通过设置 <link> 元素 rel 属性的值为 preload，在 HTML 的 <head> 部分声明需要在页面加载后即刻使用的资源，预加载资源，提升性能。</li></ul><p data-track="200"><strong>六、参考内容</strong></p><ul><li data-track="201"><strong>HTML 参考</strong> ：HTML 由元素组成，每个元素可被多个属性修饰，文档通过链接相互连接。</li><li data-track="202"><strong>HTML 元素参考</strong> ：提供了完整的 HTML 元素列表。</li><li data-track="203"><strong>HTML 属性参考</strong> ：说明了 HTML 元素的属性，这些属性可以配置或调整元素行为。</li><li data-track="204"><strong>全局属性</strong> ：可在所有 HTML 元素设置，即使元素不符合 HTML5 标准也允许这些属性存在。</li><li data-track="205"><strong>行级元素和块级元素</strong> ：介绍了 HTML 元素的行级和块级特性，行级元素只占用被标签包裹的空间，块级元素占用父元素全部空间。</li><li data-track="206"><strong>链接类型</strong> ：阐述了在 HTML 中用于确立文档间关系的各种链接类型，涉及的链接元素包括 <a>、<area> 和 <link>。</li><li data-track="207"><strong>Web 媒体类型和格式指南</strong> ：指出了 <audio> 和 <video> 元素可原生播放音频和视频媒体，无需外部软件支持。</li><li data-track="208"><strong>HTML 内容种类</strong> ：讲解了 HTML 包含的不同内容，以及它们在特定情景下有效的条件，还有可包含的类别和元素使用规则。</li><li data-track="209"><strong>怪异模式和标准模式</strong> ：提供了关于这两种模式的历史信息。</li></ul></div> <div class="clearfix mb10"> <div class="share fr"> <div class="social-share mb20 ta-c" data-initialized="true"> <a href="#" class="social-share-icon iconfont icon-weibo"></a> <a href="#" class="social-share-icon iconfont icon-qq"></a> <a href="#" class="social-share-icon iconfont icon-wechat"></a> <a href="#" class="social-share-icon iconfont icon-qzone"></a> </div> <script src="http://zhezhongyun.com/zb_users/theme/tx_hao/script/social-share.min.js"></script> </div> <div class="info-tag"> <a href="http://zhezhongyun.com/tags-135.html" title="查看更多HTML5 标签内容" rel="tag" target="_blank">HTML5 标签</a> </div> </div> <div class="info-next"> <ul class="row"> <li class="col-12 col-m-24 mb10">上一篇：<a href="http://zhezhongyun.com/post/1950.html" title="以后好好学习天天向上">以后好好学习天天向上</a></li> <li class="col-12 col-m-24 ta-r mb10">下一篇：<a href="http://zhezhongyun.com/post/1952.html" title="保护用户Web隐私 HTTP referrer header是如何做到的?">保护用户Web隐私 HTTP referrer header是如何做到的?</a></li> </ul> </div> </div> <h2 class="tx-title">相关推荐</h2> <div class="home-news"> <dl class="news-box clearfix pd20 "> <dt class="f-18 mb10"><a href="http://zhezhongyun.com/post/5406.html" title="Python入门学习记录之一:变量_python怎么用变量" class="f-black" target="_blank">Python入门学习记录之一:变量_python怎么用变量</a></dt> <dd class="news-txt"> <p class="f-gray f-13">写这个，主要是对自己学习python知识的一个总结，也是加深自己的印象。变量（英文：variable），也叫标识符。在python中，变量的命名规则有以下三点：>变量名只能包含字母、数字和下划线...</p> </dd> </dl> <dl class="news-box clearfix pd20 "> <dt class="f-18 mb10"><a href="http://zhezhongyun.com/post/5405.html" title="python变量命名规则——来自小白的总结" class="f-black" target="_blank">python变量命名规则——来自小白的总结</a></dt> <dd class="news-txt"> <p class="f-gray f-13">python是一个动态编译类编程语言，所以程序在运行前不需要如C语言的先行编译动作，因此也只有在程序运行过程中才能发现程序的问题。基于此，python的变量就有一定的命名规范。python作为当前热门...</p> </dd> </dl> <dl class="news-box clearfix pd20 "> <dt class="f-18 mb10"><a href="http://zhezhongyun.com/post/5404.html" title="Python入门学习教程:第 2 章 变量与数据类型" class="f-black" target="_blank">Python入门学习教程:第 2 章 变量与数据类型</a></dt> <dd class="news-txt"> <p class="f-gray f-13">2.1什么是变量？在编程中，变量就像一个存放数据的容器，它可以存储各种信息，并且这些信息可以被读取和修改。想象一下，变量就如同我们生活中的盒子，你可以把东西放进去，也可以随时拿出来看看，甚至可以换成...</p> </dd> </dl> <dl class="news-box clearfix pd20 "> <dt class="f-18 mb10"><a href="http://zhezhongyun.com/post/5403.html" title="绘制学术论文中的“三线表”具体指导" class="f-black" target="_blank">绘制学术论文中的“三线表”具体指导</a></dt> <dd class="news-txt"> <p class="f-gray f-13">在科研过程中，大家用到最多的可能就是“三线表”。“三线表”，一般主要由三条横线构成，当然在变量名栏里也可以拆分单元格，出现更多的线。更重要的是，“三线表”也是一种数据记录规范，以“三线表”形式记录的数...</p> </dd> </dl> <dl class="news-box clearfix pd20 "> <dt class="f-18 mb10"><a href="http://zhezhongyun.com/post/5402.html" title="Python基础语法知识--变量和数据类型" class="f-black" target="_blank">Python基础语法知识--变量和数据类型</a></dt> <dd class="news-txt"> <p class="f-gray f-13">学习Python中的变量和数据类型至关重要，因为它们构成了Python编程的基石。以下是帮助您了解Python中的变量和数据类型的分步指南：1.变量：变量在Python中用于存储数据值。它们充...</p> </dd> </dl> <dl class="news-box clearfix pd20 "> <dt class="f-18 mb10"><a href="http://zhezhongyun.com/post/5401.html" title="一文搞懂 Python 中的所有标点符号" class="f-black" target="_blank">一文搞懂 Python 中的所有标点符号</a></dt> <dd class="news-txt"> <p class="f-gray f-13">反引号`无任何作用。传说Python3中它被移除是因为和单引号字符'太相似。波浪号~（按位取反符号）~被称为取反或补码运算符。它放在我们想要取反的对象前面。如果放在一个整数n...</p> </dd> </dl> <dl class="news-box clearfix pd20 "> <dt class="f-18 mb10"><a href="http://zhezhongyun.com/post/5400.html" title="Python变量类型和运算符_python中变量的含义" class="f-black" target="_blank">Python变量类型和运算符_python中变量的含义</a></dt> <dd class="news-txt"> <p class="f-gray f-13">别再被小名词坑哭了：Python新手常犯的那些隐蔽错误，我用同事的真实bug拆给你看我记得有一次和同事张姐一起追查一个看似随机崩溃的脚本，最后发现罪魁祸首竟然是她把变量命名成了list。说实话...</p> </dd> </dl> <dl class="news-box clearfix pd20 "> <dt class="f-18 mb10"><a href="http://zhezhongyun.com/post/5399.html" title="从零开始:深入剖析 Spring Boot3 中配置文件的加载顺序" class="f-black" target="_blank">从零开始:深入剖析 Spring Boot3 中配置文件的加载顺序</a></dt> <dd class="news-txt"> <p class="f-gray f-13">在当今的互联网软件开发领域，SpringBoot无疑是最为热门和广泛应用的框架之一。它以其强大的功能、便捷的开发体验，极大地提升了开发效率，成为众多开发者构建Web应用程序的首选。而在Spr...</p> </dd> </dl> <dl class="news-box clearfix pd20 "> <dt class="f-18 mb10"><a href="http://zhezhongyun.com/post/5398.html" title="Python中下划线 ‘_’ 的用法，你知道几种" class="f-black" target="_blank">Python中下划线 ‘_’ 的用法，你知道几种</a></dt> <dd class="news-txt"> <p class="f-gray f-13">Python中下划线()是一个有特殊含义和用途的符号，它可以用来表示以下几种情况：1在解释器中，下划线(_)表示上一个表达式的值，可以用来进行快速计算或测试。例如：>>>2+...</p> </dd> </dl> <dl class="news-box clearfix pd20 "> <dt class="f-18 mb10"><a href="http://zhezhongyun.com/post/5397.html" title="解锁Shell编程:变量_shell $变量" class="f-black" target="_blank">解锁Shell编程:变量_shell $变量</a></dt> <dd class="news-txt"> <p class="f-gray f-13">引言：开启Shell编程大门Shell作为用户与Linux内核之间的桥梁，为我们提供了强大的命令行交互方式。它不仅能执行简单的文件操作、进程管理，还能通过编写脚本实现复杂的自动化任务。无论是...</p> </dd> </dl> <dl class="news-box clearfix pd20 "> <dt class="f-18 mb10"><a href="http://zhezhongyun.com/post/5396.html" title="一文学会Python的变量命名规则!_python的变量命名有哪些要求" class="f-black" target="_blank">一文学会Python的变量命名规则!_python的变量命名有哪些要求</a></dt> <dd class="news-txt"> <p class="f-gray f-13">目录1.变量的命名原则3.内置函数尽量不要做变量4.删除变量和垃圾回收机制5.结语1.变量的命名原则①由英文字母、_(下划线)、或中文开头②变量名称只能由英文字母、数字、下画线或中文字所组成。③英文字...</p> </dd> </dl> <dl class="news-box clearfix pd20 "> <dt class="f-18 mb10"><a href="http://zhezhongyun.com/post/5395.html" title="更可靠的Rust-语法篇-区分语句/表达式，略览if/loop/while/for" class="f-black" target="_blank">更可靠的Rust-语法篇-区分语句/表达式，略览if/loop/while/for</a></dt> <dd class="news-txt"> <p class="f-gray f-13">src/main.rs://函数定义fnadd(a:i32,b:i32)->i32{a+b//末尾表达式}fnmain(){leta:i3...</p> </dd> </dl> <dl class="news-box clearfix pd20 "> <dt class="f-18 mb10"><a href="http://zhezhongyun.com/post/5394.html" title="C++第五课:变量的命名规则_c++中变量的命名规则" class="f-black" target="_blank">C++第五课:变量的命名规则_c++中变量的命名规则</a></dt> <dd class="news-txt"> <p class="f-gray f-13">变量的命名不是想怎么起就怎么起的，而是有一套固定的规则的。具体规则：1.名字要合法：变量名必须是由字母、数字或下划线组成。例如：a，a1，a_1。2.开头不能是数字。例如：可以a1，但不能起1a。3....</p> </dd> </dl> <dl class="news-box clearfix pd20 "> <dt class="f-18 mb10"><a href="http://zhezhongyun.com/post/5393.html" title="Rust编程-核心篇-不安全编程_rust安全性" class="f-black" target="_blank">Rust编程-核心篇-不安全编程_rust安全性</a></dt> <dd class="news-txt"> <p class="f-gray f-13">Unsafe的必要性Rust的所有权系统和类型系统为我们提供了强大的安全保障，但在某些情况下，我们需要突破这些限制来：与C代码交互实现底层系统编程优化性能关键代码实现某些编译器无法验证的安全操作Rus...</p> </dd> </dl> <dl class="news-box clearfix pd20 "> <dt class="f-18 mb10"><a href="http://zhezhongyun.com/post/5392.html" title="探秘 Python 内存管理:背后的神奇机制" class="f-black" target="_blank">探秘 Python 内存管理:背后的神奇机制</a></dt> <dd class="news-txt"> <p class="f-gray f-13">在编程的世界里，内存管理就如同幕后的精密操控者，确保程序的高效运行。Python作为一种广泛使用的编程语言，其内存管理机制既巧妙又复杂，为开发者们提供了便利的同时，也展现了强大的底层控制能力。一、P...</p> </dd> </dl> </div> </div> <div class="side-box col-6 col-m-24 col2-"> <dl class="side-hot"> <dt>一周热门</dt> <dd> <ul> <li> <a href="http://zhezhongyun.com/post/2348.html" title="HTML标签速查手册?别死记硬背了，带你从原理上掌握它!" target="_blank"> <h2 class="f-15">HTML标签速查手册?别死记硬背了，带你从原理上掌握它!</h2> </a> </li> <li> <a href="http://zhezhongyun.com/post/3005.html" title="用node.js实现一个网页爬虫（nodejs爬虫模拟浏览器）" target="_blank"> <h2 class="f-15">用node.js实现一个网页爬虫（nodejs爬虫模拟浏览器）</h2> </a> </li> <li> <a href="http://zhezhongyun.com/post/3469.html" title="旧手机新玩法，MacroDeck进阶指南" target="_blank"> <h2 class="f-15">旧手机新玩法，MacroDeck进阶指南</h2> </a> </li> <li> <a href="http://zhezhongyun.com/post/2527.html" title="推荐36种免费React模板和主题「干货」" target="_blank"> <h2 class="f-15">推荐36种免费React模板和主题「干货」</h2> </a> </li> <li> <a href="http://zhezhongyun.com/post/3027.html" title="免费领取→可编辑危废标签模板首发!" target="_blank"> <h2 class="f-15">免费领取→可编辑危废标签模板首发!</h2> </a> </li> <li> <a href="http://zhezhongyun.com/post/3061.html" title="业余无线电UV段几种常见天线（uv段最强天线）" target="_blank"> <h2 class="f-15">业余无线电UV段几种常见天线（uv段最强天线）</h2> </a> </li> <li> <a href="http://zhezhongyun.com/post/2058.html" title="今年最常见的前端面试题，你会做几道?" target="_blank"> <h2 class="f-15">今年最常见的前端面试题，你会做几道?</h2> </a> </li> <li> <a href="http://zhezhongyun.com/post/2334.html" title="GitHub和码云上，7个h5页面制作工具推荐" target="_blank"> <h2 class="f-15">GitHub和码云上，7个h5页面制作工具推荐</h2> </a> </li> <li> <a href="http://zhezhongyun.com/post/3023.html" title="BarTender10.1条码软件如何制作模板标签" target="_blank"> <h2 class="f-15">BarTender10.1条码软件如何制作模板标签</h2> </a> </li> <li> <a href="http://zhezhongyun.com/post/2538.html" title="顶级Javaer，常用的 14 个类库" target="_blank"> <h2 class="f-15">顶级Javaer，常用的 14 个类库</h2> </a> </li> </ul> </dd> </dl> <dl class="function" id="divPrevious"> <dt class="function_t">最近发表</dt><dd class="function_c"> <ul><li><a title="网吧烟雾头怎么调最清楚（网吧咋调烟雾头）" href="http://zhezhongyun.com/post/6455.html">网吧烟雾头怎么调最清楚（网吧咋调烟雾头）</a></li> <li><a title="下载并安装app（安逸花下载并安装app）" href="http://zhezhongyun.com/post/6454.html">下载并安装app（安逸花下载并安装app）</a></li> <li><a title="win7无线适配器或访问点（win7无线适配器或访问点有问题）" href="http://zhezhongyun.com/post/6453.html">win7无线适配器或访问点（win7无线适配器或访问点有问题）</a></li> <li><a title="pe官方网站下载（pe软件下载教程）" href="http://zhezhongyun.com/post/6452.html">pe官方网站下载（pe软件下载教程）</a></li> <li><a title="2013版office激活密钥（2013office激活密钥win10）" href="http://zhezhongyun.com/post/6451.html">2013版office激活密钥（2013office激活密钥win10）</a></li> <li><a title="华硕高级模式还原系统（华硕笔记本高级选项中的系统还原）" href="http://zhezhongyun.com/post/6450.html">华硕高级模式还原系统（华硕笔记本高级选项中的系统还原）</a></li> <li><a title="usb连接手机如何设置（手机在哪设置usb）" href="http://zhezhongyun.com/post/6449.html">usb连接手机如何设置（手机在哪设置usb）</a></li> <li><a title="bios调乱了怎样恢复（调了bios开机屏幕没反应怎么办）" href="http://zhezhongyun.com/post/6448.html">bios调乱了怎样恢复（调了bios开机屏幕没反应怎么办）</a></li> <li><a title="怎么去官网下载驱动（怎样从官网下载驱动程序）" href="http://zhezhongyun.com/post/6447.html">怎么去官网下载驱动（怎样从官网下载驱动程序）</a></li> <li><a title="怎样登录路由器设置界面（怎么登录路由器的设置界面192.168.2.254）" href="http://zhezhongyun.com/post/6446.html">怎样登录路由器设置界面（怎么登录路由器的设置界面192.168.2.254）</a></li> </ul> </dd> </dl> <dl class="function" id="divTags"> <dt class="function_t">标签列表</dt><dd class="function_c"> <ul><li><a title="HTML 教程" href="http://zhezhongyun.com/tags-1.html">HTML 教程<span class="tag-count"> (33)</span></a></li> <li><a title="HTML 简介" href="http://zhezhongyun.com/tags-3.html">HTML 简介<span class="tag-count"> (35)</span></a></li> <li><a title="HTML 实例/测验" href="http://zhezhongyun.com/tags-46.html">HTML 实例/测验<span class="tag-count"> (32)</span></a></li> <li><a title="HTML 测验" href="http://zhezhongyun.com/tags-47.html">HTML 测验<span class="tag-count"> (32)</span></a></li> <li><a title="JavaScript 和 HTML DOM 参考手册" href="http://zhezhongyun.com/tags-54.html">JavaScript 和 HTML DOM 参考手册<span class="tag-count"> (32)</span></a></li> <li><a title="HTML 拓展阅读" href="http://zhezhongyun.com/tags-55.html">HTML 拓展阅读<span class="tag-count"> (30)</span></a></li> <li><a title="HTML文本框样式" href="http://zhezhongyun.com/tags-60.html">HTML文本框样式<span class="tag-count"> (31)</span></a></li> <li><a title="HTML滚动条样式" href="http://zhezhongyun.com/tags-61.html">HTML滚动条样式<span class="tag-count"> (34)</span></a></li> <li><a title="HTML5 浏览器支持" href="http://zhezhongyun.com/tags-113.html">HTML5 浏览器支持<span class="tag-count"> (33)</span></a></li> <li><a title="HTML5 新元素" href="http://zhezhongyun.com/tags-114.html">HTML5 新元素<span class="tag-count"> (33)</span></a></li> <li><a title="HTML5 WebSocket" href="http://zhezhongyun.com/tags-131.html">HTML5 WebSocket<span class="tag-count"> (30)</span></a></li> <li><a title="HTML5 代码规范" href="http://zhezhongyun.com/tags-132.html">HTML5 代码规范<span class="tag-count"> (32)</span></a></li> <li><a title="HTML5 标签" href="http://zhezhongyun.com/tags-135.html">HTML5 标签<span class="tag-count"> (717)</span></a></li> <li><a title="HTML5 标签 (已废弃)" href="http://zhezhongyun.com/tags-137.html">HTML5 标签 (已废弃)<span class="tag-count"> (75)</span></a></li> <li><a title="HTML5电子书" href="http://zhezhongyun.com/tags-141.html">HTML5电子书<span class="tag-count"> (32)</span></a></li> <li><a title="HTML5开发工具" href="http://zhezhongyun.com/tags-142.html">HTML5开发工具<span class="tag-count"> (34)</span></a></li> <li><a title="HTML5小游戏源码" href="http://zhezhongyun.com/tags-143.html">HTML5小游戏源码<span class="tag-count"> (34)</span></a></li> <li><a title="HTML5模板下载" href="http://zhezhongyun.com/tags-144.html">HTML5模板下载<span class="tag-count"> (30)</span></a></li> <li><a title="HTTP 状态消息" href="http://zhezhongyun.com/tags-159.html">HTTP 状态消息<span class="tag-count"> (33)</span></a></li> <li><a title="HTTP 方法：GET 对比 POST" href="http://zhezhongyun.com/tags-160.html">HTTP 方法：GET 对比 POST<span class="tag-count"> (33)</span></a></li> <li><a title="键盘快捷键" href="http://zhezhongyun.com/tags-168.html">键盘快捷键<span class="tag-count"> (35)</span></a></li> <li><a title="标签" href="http://zhezhongyun.com/tags-171.html">标签<span class="tag-count"> (226)</span></a></li> <li><a title="opacity 属性" href="http://zhezhongyun.com/tags-319.html">opacity 属性<span class="tag-count"> (32)</span></a></li> <li><a title="transition 属性" href="http://zhezhongyun.com/tags-360.html">transition 属性<span class="tag-count"> (33)</span></a></li> <li><a title="1-1. 变量声明" href="http://zhezhongyun.com/tags-415.html">1-1. 变量声明<span class="tag-count"> (31)</span></a></li> </ul> </dd> </dl> </div> </div> </div> </div> <div class="footer"> <div class="wide ta-c f-12"> </div> </div> <div class="fixed-box "> <ul> <li class="pchide wapflex"><a href="http://zhezhongyun.com/"><i class="fa fa-home"></i> 首页</a></li> <li><a href="http://zhezhongyun.com/shoulu.html" title="收录申请" target="_blank"><i class="fa fa-chain-broken mr5"></i>收录</a></li> <li><span class="gotop"><i class="fa fa-caret-up mr5"></i> 顶部</span></li> </ul> </div> <script src="http://zhezhongyun.com/zb_users/theme/tx_hao/script/txcstx.min.js?v=2025-07-27"></script> </body> </html><!--107.68 ms , 13 queries , 3572kb memory , 0 error-->