我的HTML笔记

用户3406991923558
175 阅读5分钟

HTML 简介

  HTML 最早是由蒂姆-伯纳斯-李在一篇名为HTML Tags的文章提及发明的。HTML 的全名是"HyperText Markup Language"，即“超文本标记语言”，它的最大特点就是支持超链接，可以跳转到其他网页，从而构成了整个互联网。HTML 从上个世纪90年代出生，逐渐发展到1999年，HTML 4.01发布，再到2014年，HTML 5发布，HTML 5是当前正在使用的版本。

HTML 起手

下面是一个通常的HTML 起手代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

</body>
</html>
复制代码

  HTML 代码由许多标签构成，标签用来告诉浏览器，如何处理这段代码。标签里面的内容就是浏览器所要渲染、展示在网页上面的东西。比如<title>Document</title>就是一对标签，标签放在尖括号里，分成开始标签和结束标签。"Document"就是这对标签的内容，它会显示在网页窗口的标题里。
上述的起手代码中第一个标签是<!DOCTYOE>，它表示文档类型，告诉浏览器如何解析代码。<html>标签是网页的顶层容器，一个网页只能有一个<html>标签，它里面有一个lang属性，表示网页内容默认的语言，如果要改成中文则是"zh-CN"。
继续接着的是<head>标签，它是一个容器标签，里面放置的内容不会出现在网页上，通常都是为了网页的渲染做准备的。比如里面的<meta>标签，用于设置说明网页的元数据，charset="UTF-8"，指定了网页的编码方式，它与网页的实际编码方式应当保持一致，即声明了什么编码格式，就用什么编码格式编写网页，否则会造成乱码，浏览器无法解析网页内容。
<meta name="viewport" content="width=device-width, initial-scale=1.0">用于针对移动端网页的优化，width=device-width指定了viewport 的大小为设备的宽度，initial-scale=1.0则指定了页面在初始状态下禁止缩放，刚好可以占满整个屏幕。

HTML 中常用的表示文章或页面层级的标签

  • h1~h6

  表示网页上的标题，从最大的<h1>到最小的<h6>

  • section

  <section>表示一个包含在HTML文档中的独立部分，一般来说可以用来包含一个独立的章节内容，表示这块内容是一个整体。

  • article

  <article>表示文档、页面、应用或网站中的独立结构，它可以用来表示一段文章，可以用来包含多个<section>。

  • p

  <p>表示文本的一个段落，通常表现为一整块与相邻文本分离的文本，它是一个块级元素。

  • header

  <header>用于展示介绍性内容，放在网页的顶部，通常包含一组介绍性的或是辅助导航的实用元素。

  • footer

  <footer>页脚，置于网页底部，通常用来放置作者、版权或者其他链接等信息。

  • main

  <main>主要内容，呈现文档或应用的主体部分。

  • aside

  <aside>表示旁支内容，用来展示和其余页面内容几乎无关的部分。

  • div

  <div>是一个通用型的流内容容器，可以用来划分网页的内容。

div，永远滴神！

HTML中常见的全局属性

  HTML 中所有标签的都有的属性，称为全局属性。

  • class

  CSS 和 JavaScript 可以分别通过类选择器、DOM方法来选择和访问具有该属性的特定元素。

  • contenteditable

  表示一个元素是否可以被用户编辑。

  • hidden

  可以被用来隐藏一个页面元素。

  • id

  定义了一个全文档唯一的标识符。但是即便出现相同的ID，HTML也是允许执行不报错的。

  • style

  包含应用到元素的 CSS 样式声明，这种CSS样式是内联样式，优先级最高。

  • tabindex

  指示其元素是否可以聚焦，以及它是否/在何处参与顺序键盘导航，通常是用tab键。表示正数时，tab键会按照升序"123456"这样的顺序来进行聚焦访问；表示0时，会最后访问；表示负数时，通常是"-1"，表示不能通过键盘导航访问。

  • title

  包含了表示咨询信息文本，和它属于的元素相关。鼠标悬停在该元素时，会展示信息。

常用的内容标签

  下面列举了一些较为常用的内容标签。

  • ol + li

  <ol>即ordered list，表示有序的列表，与<li>组合使用，包含一个或多个有序列表。

  • ul + li

  <ul>与上面相反，为unordered list，表示无序列表，与<li>组合使用，可表示一个或多个无序列表。

  • dl + dt + dd

  是一个包含术语定义以及描述的列表（discrition list + term + data）。比如这样子的：

<dl>
    <dt>美女</dt>
    <dd>蒙娜丽莎</dd>
    <dd>白居易</dd>
    <dt>猛男</dt>
    <dd>杜甫</dd>
    <dd>爱丽丝</dd>
</dl>
复制代码
  • pre

  preview的缩写，<pre>表示表示预定义格式文本。在该元素中的文本通常按照原文件中的编排，像空格回车等都会照常显示，而不会是HTML 中默认的多个空格会合成一个空格。

  • hr

  一条水平线，但现在MDN上最新的解释是被定义为语义上的了，表示段落级元素之间的主题转换。如果要画水平线，用CSS来画。

  • br

  在文本中生成一个换行（回车）符号。

  • a

  (anchor的缩写，也成为锚元素)可以创建通向其他网页、文件、同一页面内的位置、电子邮件地址或任何其他 URL 的超链接。

  • em

  （emphasis）标记出需要用户着重阅读的内容，表示语气上的强调。

  • strong

  表示文本十分重要，一般用粗体显示，强调内容上的重要。

  • code

  呈现一段计算机代码，默认情况下，它以浏览器的默认等宽字体显示。

  • q

  （quote的缩写）表示一个封闭的并且是短的行内引用的文本。

  • blockquote

  块级引用，代表其中的文字是引用内容。

avatar
文章
阅读
粉丝