HTML 的全称为 HyperText Markup Language,即超文本标记语言,最初是用于描述文档而设计。从定义可以看出 HTML 的一些组成部分
元素是 HTML 的基本要素,元素有两种写法,一种是带内容的,一种是不带内容的
属性则为元素提供了更多的相关信息
前端10K面试准备,最完整面试真题分享(含答案)!
元素可分为块级元素和行内元素。
块级元素 div 示例
内联元素 span 示例
语义
HTML 的每个元素或者属性都有特定的含义,我们称之为语义。例如,ol 元素代表有序列表,lang 属性则代表内容的语言。
这些定义好的元素,可以让文档在不同的上下文中(比如浏览器和搜索引擎处理文档时)呈现出一致性。同时,也为文档处理器提供一些额外的信息,这对于一些辅助设备而言 (比如电子阅读器)是非常有用的。
具有良好语义的文档
<header> <img src="logo.png" alt="Favorite books logo"> </header> <main> <h1>Favorite books</h1> <p>These are a few of my favorite books.</p> <h2>The Belgariad</h2> <p>Five books by David and Leigh Eddings.</p> <h2>The Hitchhiker’s Guide to the Galaxy</h2> <p>A trilogy of five books by Douglas Adams.</p> </main>
使用类可以实现同样的展示效果,但是对于文档处理器而言,将捕获不到任何有关语义的信息。
<div class="header"> <img src="logo.png" alt="Favorite books logo"> </div> <div class="main"> <span class="largeHeading">Favorite books</span> <p>These are a few of my favorite books.</p> <span class="smallHeading">The Belgariad</span> <p>Five books by David and Leigh Eddings.</p> <span class="smallHeading">The Hitchhiker’s Guide to the Galaxy</span> <p>A trilogy of five books by Douglas Adams.</p> </div>
扩展机制
此外,HTML 还存在大量的扩展机制,可以安全的添加语义
使用 class 属性来扩展元素
使用 data-*= 属性来包含数据,这些数据不会被浏览器处理,同时可被脚本处理
使用 meta 标签来扩展页面的元数据
使用 rel='' 指定当前文档与被链接文档的关系
使用 <script type=""> 来嵌入原始的数据,以便被服务端脚本进一步处理
使用 JavaScript 原型来扩展 Api
文档对象
每个 HTML 文档都可以对应一个 Document 对象。
可以通过 document 来访问该对象
console.log(window.document); console.log(document); console.log(document.head) console.log(document.body)
访问文档的一些元数据
document.referrer // 返回载入当前文档的文档的 URL document.referrer // 设置或返回与当前文档有关的所有 cookie document.domain // 返回当前文档的域 ducument.lastModified // 返回文档被最后修改的日期和时间 document.title // 返回当前文档的标题 document.url // 返回当前文档的 URL
无障碍网页应用技术
HTML 5 的可访问性还没有达到残疾人士可以进行无障碍阅读的地步。因此,WAI-ARIA,Web Accessibility Initiative-Accessible Rich Internet Applications,致力于解决残疾用户的可访问性功能。
根据 ARIA 的规范描述,可在 HTML 元素中使用 ARIA role 属性以及 aria-* 属性。
例如,视觉上不显示用户名三个字,但是读屏软件会在焦点落到该输入框时读出
<input type="text" aria-label="用户名"/>