通俗易懂的HTML全知识梳理笔记（第一部分）
文章目录
什么是HTML
HTML (HyperText Markup Language) 不是一门编程语言，而是一种用来告知浏览器如何组织页面的标记语言。给不同文段分配语义，使其具有结构化的特点。
块级元素和内联元素
- 块级元素在页面内以块的形式展现。一个以block形式展现的块级元素不会被嵌套进内联元素中，但可以嵌套在其它块级元素中。
- 内联元素通常出现在块级元素中并环绕文档内容的一小部分。
属性
属性包含元素的额外信息，这些信息不会出现在实际的内容中。
一个属性必须包含如下内容：
- 一个空格，在属性和元素名称之间。(如果已经有一个或多个属性，就与前一个属性之间有一个空格。)
- 属性名称，后面跟着一个等于号。
- 一个属性值，由一对引号
“ ”引起来。(一般数字的值并不需要引号)
如：
给a元素添加属性
常用属性如下：
href: 这个属性声明超链接的web地址，当这个链接被点击浏览器会跳转至href声明的web地址。例如：href="https://www.mozilla.org/"。title: 标题title属性为超链接声明额外的信息，比如你将链接至的那个页面。例如：title="The Mozilla homepage"。当鼠标悬停在超链接上面时，这部分信息将显示。target: 目标target属性用于指定链接如何呈现出来。例如，target="_blank"将在新标签页中显示链接。如果你希望在当前标签页显示链接，忽略这个属性即可。
布尔属性
有时你会看到没有值的属性，它是合法的。这些属性被称为布尔属性，他们只能有跟它的属性名一样的值（也可以没有）。例如disabled 属性，他们可以标记表单 （input）输入使之变为不可用(变灰色)，此时用户不能向他们输入任何数据。
HTML的空白
无论你在HTML元素的内容中使用多少空格( 包括空白字符，包括换行 )，当渲染这些代码的时候，HTML解释器会将连续出现的空白字符减少为一个单独的空格符。
实体引用： 在HTML中包含特殊字符
在HTML中，字符 <, >,",' 和 & 是特殊字符. 它们是HTML语法自身的一部分, 那么你如何将这些字符包含进你的文本中呢, 比如说如果你真的想要在文本中使用符号&或者小于号, 而不想让它们被浏览器视为代码并被解释?
我们必须使用字符引用 —— 表示字符的特殊编码, 它们可以在那些情况下使用. 每个字符引用以符号&开始, 以分号(;)结束.
| 原义字符 | 等价字符引用 |
|---|---|
| < | < |
| > | > |
| " | " |
| ’ | ' |
| & | & |
在下面的例子中你可以看到两个段落，它们在谈论web技术:
<p>HTML 中用 <p> 来定义段落元素。</p>
<p>HTML 中用 <p> 来定义段落元素</p>
在下面的实时输出中，你会看到第一段是错误的，因为浏览器会认为第二个
是开始一个新的段落！ 第二段是正确的，因为我们用字符引用来代替了角括号（’<‘和’>'符号）.
HTML 中用
来定义段落元素。
HTML 中用 <p> 来定义段落元素
head中的元数据
在页面加载完成的时候，标签里的内容，是不会在页面中显示出来的。它包含了像页面的(标题) ,<strong>CSS</strong>(如果你选择用 CSS 来为 HTML 内容添加样式)，指向<strong>自定义图标的链接</strong>和其他的元数据(描述HTML的数据，比如，<strong>作者，和描述文档的重要关键词</strong>)。
meta元素
元数据就是描述数据的数据，许多<meta> 元素包含了name 和 content 特性：
name指定了meta 元素的类型； 说明该元素包含了什么类型的信息。content指定了实际的元数据内容。
<meta charset="utf-8">
<meta name="author" content="Chris Mills">
<meta name="description" content="The MDN Learning Area aims to provide
complete beginners to the Web with all they need to know to get
started with developing web sites and applications.">
注：description是很有用的。利于SEO
在你的站点中增加自定义的图标
为了进一步丰富你的网站设计，你可以在元数据中添加对自定义图标的引用，这些将在特定的场合中显示。
这个不起眼的图标已经存在很多很多年了，16 x 16 像素是这种图标的第一种类型。你可以看见这些图标出现在浏览器每一个打开的页面中的标签页中以及在书签面板中的书签页面中。
页面添加图标的方式有：
将其保存在与网站的索引页面相同的目录中，以.ico格式保存（大多数浏览器将支持更通用的格式，如.gif或.png，但使用ICO格式将确保它能在如Internet Explorer 6一样久远的浏览器显示）
将以下行添加到HTML 中以引用它：
<link rel="shortcut icon" href="favicon.ico">
在HTML中应用CSS和JavaScript
如今，几乎你使用的所有网站都会使用 CSS让网页更加炫酷，使用JS让网页有交互功能，比如视频播放器，地图，游戏以及更多功能。这些应用在网页中很常见，它们分别使用元素以及
- 元素经常位于文档的头部。这个link元素有2个属性，`rel="stylesheet"`表明这是文档的样式表，而 `href`包含了样式表文件的路径：
<link rel="stylesheet" href="my-css-file.css">
<script>部分没必要非要放在文档头部；实际上，把它放在文档的尾部（在 标签之前）是一个更好的选择，这样可以确保在加载脚本之前浏览器已经解析了HTML内容（如果脚本加载某个不存在的元素，浏览器会报错）。<script src="my-js-file.js"></script>
注意：
<script>元素看起来像一个空元素，但它并不是，因此需要一个结束标记。您还可以选择将脚本放入<script>元素中，而不是指向外部脚本文件。
为文档设置主语言
最后，值得一提的是你可以（而且确实应该）为你的站点设定语言， 这个可以通过添加lang属性到HTML开始标签中来实现
<html lang="zh-cn">
这有利于SEO。
文字处理
对于标题的最佳实践如下：
- 您应该最好只对每个页面使用一次
<h1>— 这是顶级标题，所有其他标题位于层次结构中的下方。 - 请确保在层次结构中以正确的顺序使用标题。不要使用
<h3>来表示副标题，后面跟<h2>来表示副副标题 - 这是没有意义的，会导致奇怪的结果。 - 在可用的六个标题级别中，您应该旨在每页使用不超过三个，除非您认为有必要使用更多。具有许多级别的文档（即，较深的标题层次结构）变得难以操作并且难以导航。在这种情况下，如果可能，建议将内容分散在多个页面上。
超链接
除了我们上面讲到的<title>、<target>、<href>，我们再讲下href的细节。
尽可能的使用相对链接。而且使用../表示回到上一个目录。注：尽管在win10的文件管理器中，目录是反斜杠（\），但是我们在编写HTML时，仍使用正斜杠（/）。
文档片段
超链接除了可以链接到文档外，也可以链接到HTML文档的特定部分（被称为文档片段）。要做到这一点，你必须首先给要链接到的元素分配一个id属性。例如，如果你想链接到一个特定的标题，可以这样做：
<h2 id="Mailing_address">Mailing address</h2>
然后链接到那个特定的id，您可以在URL的结尾使用一个井（#）号指向它，例如：
<p>Want to write us a letter? Use our <a href="contacts.html#Mailing_address">mailing address</a>.</p>
你甚至可以在同一份文档下，通过链接文档片段，来链接到同一份文档的另一部分：
<p>The <a href="#Mailing_address">company mailing address</a> can be found at the bottom of this page.</p>
文档和网站架构
文档的基本组成部分
网页的外观多种多样，但是除了全屏视频或游戏，或艺术作品页面，或只是结构不当的页面以外，都倾向于使用类似的标准组件：
页眉
通常横跨于整个页面顶部有一个大标题 和/或 一个标志。 这是网站的主要一般信息，通常存在于所有网页。
导航栏
指向网站各个主要区段的超链接。通常用菜单按钮、链接或标签页表示。类似于标题栏，导航栏通常应在所有网页之间保持一致，否则会让用户感到疑惑，甚至无所适从。许多 web 设计人员认为导航栏是标题栏的一部分，而不是独立的组件，但这并非绝对。
主内容
中心的大部分区域是当前网页大多数的独有内容，例如视频、文章、地图、新闻等。这些内容是网站的一部分，且会因页面而异。
侧边栏
一些外围信息、链接、引用、广告等。通常与主内容相关（例如一个新闻页面上，侧边栏可能包含作者信息或相关文章链接），还可能存在其他的重复元素，如辅助导航系统。
页脚
横跨页面底部的狭长区域。和标题一样，页脚是放置公共信息（比如版权声明或联系方式）的，一般使用较小字体，且通常为次要内容。 还可以通过提供快速访问链接来进行 SEO。
为了实现语义化标记，HTML 提供了明确这些区段的专用标签，例如：
<header>：页眉。
<nav>：导航栏。
<main>：主内容。主内容中还可以有各种子内容区段，可用<article>、 <section> 和 <div> 等元素表示。
<aside>：侧边栏，经常嵌套在 <main> 中。
<footer>：页脚。
<hr> 水平分割线，<br>换行
上文来自于我在MDN网站上学习HTML的读书笔记。若要看官方教程请移步MDN网站。
最后，感谢大家的观看，夹杂着自己的理解，可能会有一些纰漏，敬请见谅。
最新文章
- 被逼着写的jquery工作日管理日历插件
- LeetCode 368
- 接口（Java）
- phpstorm 激活
- GPS坐标换算为百度坐标
- nodejs tools
- Scala List的排序函数sortWith
- C++ 过载，重写，隐藏
- [转载]C#.NET中Dns类的常用方法及说明
- oracle4
- 【排序】表插入排序算法(C语言版)
- HDU 1027 - Ignatius and the Princess II
- SGU 242 Student&#39;s Morning 网络流（水
- 【转】GitHub 优秀的 Android 开源项目
- OSPF相关知识与实例配置【第一部分】
- MySQL常见的三种存储引擎（InnoDB、MyISAM、MEMORY）
- Docker 查看镜像信息
- python rpyc 报错: AttributeError: cannot access 'new'
- [BZOJ2457][BeiJing2011]双端队列 (单调性)
- 前端如何生成条形码---JsBarcode