HTML 入门--1-前端教程-前军教程网

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> <p class="post-tags">标签：<a href="http://www.whsf66.com/tags-561.html" target="_blank">css设置行高</a> </p> <p class="post-footer"> 作者:whsf66 , 分类:前端教程 , 浏览:4 , 评论:0 </p> </div> <label id="AjaxCommentBegin"></label>   <div class="pagebar commentpagebar"> </div> <label id="AjaxCommentEnd"></label>  <div class="post" id="divCommentPost"> <p><a name="comment">发表评论:</a><a rel="nofollow" id="cancel-reply" href="#divCommentPost" style="display:none;"><small>取消回复</small></a></p> <form id="frmSumbit" target="_self" method="post" action="http://www.whsf66.com/zb_system/cmd.php?act=cmt&postid=7367&key=544b9f76c93e29aed156d977bb3f2c8f" > <input type="hidden" name="inpId" id="inpId" value="7367" /> <input type="hidden" name="inpRevID" id="inpRevID" value="0" /> <p><label for="inpName"><input type="text" name="inpName" id="inpName" class="text" value="访客" size="28" tabindex="1" /> 名称(*)</label></p> <p><label for="inpEmail"><input type="text" name="inpEmail" id="inpEmail" class="text" value="" size="28" tabindex="2" /> 邮箱</label></p> <p><label for="inpHomePage"><input type="text" name="inpHomePage" id="inpHomePage" class="text" value="" size="28" tabindex="3" /> 网址</label></p> <p><textarea name="txaArticle" id="txaArticle" class="text" cols="50" rows="4" tabindex="5" ></textarea></p> <p><input name="sumbit" type="submit" tabindex="6" value="提交" onclick="return zbp.comment.post()" class="button" /></p> </form> </div> </div> <div id="divSidebar"> <dl class="function" id="divContorPanel"> <dt class="function_t">控制面板</dt><dd class="function_c"> <div><span class="cp-hello">您好，欢迎到访网站！</span><br/><span class="cp-login"><a href="http://www.whsf66.com/zb_system/cmd.php?act=login">登录后台</a></span> <span class="cp-vrs"><a href="http://www.whsf66.com/zb_system/cmd.php?act=misc&type=vrs">查看权限</a></span></div> </dd> </dl> <dl class="function" id="divCatalog"> <dt class="function_t">网站分类</dt><dd class="function_c"> <ul><li><a title="前端教程" href="http://www.whsf66.com/category-1.html">前端教程</a></li> </ul> </dd> </dl> <dl class="function" id="divComments"> <dt class="function_t">最新留言</dt><dd class="function_c"> <ul></ul> </dd> </dl> </div> <div id="divBottom">  <p id="BlogCopyRight"></p> </div><div class="clear"></div> </div><div class="clear"></div> </div><div class="clear"></div> </div> </body> </html>

前军教程网

中小站长与DIV+CSS网页布局开发技术人员的首选CSS学习平台

HTML 入门--1