HTML 入门--1_html ?-文章教程-杰人编程网

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="entry-details"> <details> <summary>原文链接：<a href="http://www.jieren365.com/post/3824.html" rel="author">HTML 入门--1_html ?</a>，转发请注明来源！</summary> </details> </div> </div> <div class="entry-footer clearfix"> <span> <a href="http://www.jieren365.com/" title="杰人编程网"> <span>杰人编程网</span></a> </span>› <span> <a href="http://www.jieren365.com/category-1.html" title="文章教程"> <span>文章教程</span></a> </span>› <span> <a href="http://www.jieren365.com/post/3824.html" title="HTML 入门--1_html ?"> <span>HTML 入门--1_html ?</span></a> </span> </div> </div> <nav class="pager"> <ol> <li class="previous"> <a href="http://www.jieren365.com/post/3823.html" rel="prev"> <span class="text-muted">上一篇：</span> <span>C#中使用HtmlAgilityPack提取网站的图片并下载</span></a> </li> <li class="next"> <a href="http://www.jieren365.com/post/3825.html" rel="next"> <span class="text-muted">下一篇：</span> <span>从零开始搭建第一个网页:HTML基础入门</span></a> </li> </ol> </nav> </article> <div id="sidebar" class="col-lg-4 col-md-4"> <aside id="recent-posts-1" class="panel panel-default widget clearfix widget_recent_entries"> <h3 class="panel-heading widget-title">最新文章</h3> <ul> <li> <a href="http://www.jieren365.com/post/6359.html">python编程:配置文件xml的读取写入</a></li> <li> <a href="http://www.jieren365.com/post/6358.html">C语言进阶教程:进阶教程:调试技巧:GDB/LLDB 的使用</a></li> <li> <a href="http://www.jieren365.com/post/6357.html">Qt开发-文件的读写操作（qt读入文件）</a></li> <li> <a href="http://www.jieren365.com/post/6356.html">C 语言程序的编译过程（c语言编译方式）</a></li> <li> <a href="http://www.jieren365.com/post/6355.html">C语言进阶教程:嵌入式系统中的C语言:硬件访问与寄存器操作</a></li> <li> <a href="http://www.jieren365.com/post/6354.html">C语言—基础知识（“c语言”）</a></li> <li> <a href="http://www.jieren365.com/post/6353.html">C#读写ini文件（c读写ini文件）</a></li> <li> <a href="http://www.jieren365.com/post/6352.html">C语言的include没你想的那么简单（c语言中include ）</a></li> <li> <a href="http://www.jieren365.com/post/6351.html">C语言编程入门（C语言编程入门教程PDF）</a></li> <li> <a href="http://www.jieren365.com/post/6350.html">一文读懂C程序的编译过程（c程序的编译和执行过程）</a></li> </ul> </aside> <aside id="tag_cloud-2" class="panel panel-default widget clearfix widget_tag_cloud"> <h3 class="panel-heading widget-title">标签云</h3> <div class="tagcloud"> <a href="http://www.jieren365.com/tags-7.html" class="tag-cloud-link tag-link-6533 tag-link-position-45" style="font-size: 8pt;" aria-label="arrays.copyof">arrays.copyof <span class="tag-link-count">(67)</span> </a><a href="http://www.jieren365.com/tags-10.html" class="tag-cloud-link tag-link-6533 tag-link-position-45" style="font-size: 8pt;" aria-label="socketbind">socketbind <span class="tag-link-count">(67)</span> </a><a href="http://www.jieren365.com/tags-38.html" class="tag-cloud-link tag-link-6533 tag-link-position-45" style="font-size: 8pt;" aria-label="strdup">strdup <span class="tag-link-count">(60)</span> </a><a href="http://www.jieren365.com/tags-16.html" class="tag-cloud-link tag-link-6533 tag-link-position-45" style="font-size: 8pt;" aria-label="css resize">css resize <span class="tag-link-count">(58)</span> </a><a href="http://www.jieren365.com/tags-23.html" class="tag-cloud-link tag-link-6533 tag-link-position-45" style="font-size: 8pt;" aria-label="流水灯代码">流水灯代码 <span class="tag-link-count">(58)</span> </a><a href="http://www.jieren365.com/tags-46.html" class="tag-cloud-link tag-link-6533 tag-link-position-45" style="font-size: 8pt;" aria-label="c++ cout">c++ cout <span class="tag-link-count">(57)</span> </a><a href="http://www.jieren365.com/tags-1.html" class="tag-cloud-link tag-link-6533 tag-link-position-45" style="font-size: 8pt;" aria-label="css动画">css动画 <span class="tag-link-count">(56)</span> </a><a href="http://www.jieren365.com/tags-12.html" class="tag-cloud-link tag-link-6533 tag-link-position-45" style="font-size: 8pt;" aria-label="html frame">html frame <span class="tag-link-count">(54)</span> </a><a href="http://www.jieren365.com/tags-20.html" class="tag-cloud-link tag-link-6533 tag-link-position-45" style="font-size: 8pt;" aria-label="css 鼠标手">css 鼠标手 <span class="tag-link-count">(51)</span> </a><a href="http://www.jieren365.com/tags-2.html" class="tag-cloud-link tag-link-6533 tag-link-position-45" style="font-size: 8pt;" aria-label="css transition">css transition <span class="tag-link-count">(47)</span> </a><a href="http://www.jieren365.com/tags-39.html" class="tag-cloud-link tag-link-6533 tag-link-position-45" style="font-size: 8pt;" aria-label="eclipse使用">eclipse使用 <span class="tag-link-count">(46)</span> </a><a href="http://www.jieren365.com/tags-34.html" class="tag-cloud-link tag-link-6533 tag-link-position-45" style="font-size: 8pt;" aria-label="border-radius属性">border-radius属性 <span class="tag-link-count">(44)</span> </a><a href="http://www.jieren365.com/tags-27.html" class="tag-cloud-link tag-link-6533 tag-link-position-45" style="font-size: 8pt;" aria-label="opacity css">opacity css <span class="tag-link-count">(40)</span> </a><a href="http://www.jieren365.com/tags-5.html" class="tag-cloud-link tag-link-6533 tag-link-position-45" style="font-size: 8pt;" aria-label="css cursor">css cursor <span class="tag-link-count">(37)</span> </a><a href="http://www.jieren365.com/tags-140.html" class="tag-cloud-link tag-link-6533 tag-link-position-45" style="font-size: 8pt;" aria-label="navicat for mysql安装">navicat for mysql安装 <span class="tag-link-count">(36)</span> </a><a href="http://www.jieren365.com/tags-180.html" class="tag-cloud-link tag-link-6533 tag-link-position-45" style="font-size: 8pt;" aria-label="c++ 与或非">c++ 与或非 <span class="tag-link-count">(36)</span> </a><a href="http://www.jieren365.com/tags-181.html" class="tag-cloud-link tag-link-6533 tag-link-position-45" style="font-size: 8pt;" aria-label="java选择排序">java选择排序 <span class="tag-link-count">(36)</span> </a><a href="http://www.jieren365.com/tags-202.html" class="tag-cloud-link tag-link-6533 tag-link-position-45" style="font-size: 8pt;" aria-label="shutdown 重启">shutdown 重启 <span class="tag-link-count">(36)</span> </a><a href="http://www.jieren365.com/tags-11.html" class="tag-cloud-link tag-link-6533 tag-link-position-45" style="font-size: 8pt;" aria-label="copyofrange">copyofrange <span class="tag-link-count">(35)</span> </a><a href="http://www.jieren365.com/tags-13.html" class="tag-cloud-link tag-link-6533 tag-link-position-45" style="font-size: 8pt;" aria-label="html框架">html框架 <span class="tag-link-count">(35)</span> </a> </div> </aside> </div>  </div> </div>  <footer id="colophon" class="container"> <div class="panel panel-default text-muted"> <div class="panel-footer clearfix"> </div> <div class="panel-footer clearfix text-center"> Theme by <a href="http://www.jieren365.com/" target="_blank">jieren365</a>. </div> </div> </footer> </body> </html>