通俗易懂的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网站。
最后，感谢大家的观看，夹杂着自己的理解，可能会有一些纰漏，敬请见谅。
通俗易懂的HTML全知识梳理笔记（第一部分）的更多相关文章
- Linux实战教学笔记19:Linux相关网络知识梳理
第十九节 Linux相关网络知识梳理 标签(空格分隔): Linux实战教学笔记-陈思齐 一,前言 一个运维有时也要和网络打交道,所以具备最基本的网络知识,对一个运维人员来说是必要的.但,对于我们的工 ...
- Linux基础知识梳理
Linux基础知识梳理 Linux内核最初只是由芬兰人林纳斯?托瓦兹(Linus Torvalds)在赫尔辛基大学上学时出于个人爱好而编写的.Linux是一套免费使用和自由传播的类Unix操作系统,是 ...
- jQuery知识梳理20190817
目录 jQuery知识梳理20190817 1. jQuery的特征 2. jQuery的两把利器 2.1 jQuery核心函数 2.2 jQuery核心对象 3. jQuery核心函数详解 4. j ...
- Python基础知识总结笔记（四）函数
Python基础知识总结笔记(四)函数python中的函数函数中的参数变量作用域偏函数PFA递归函数高阶函数BIFs中的高阶函数匿名函数lambda闭包Closure装饰器Decorator函数式编程 ...
- MySQL 基础知识梳理
MySQL 的安装方式有多种,但是对于不同场景,会有最适合该场景的 MySQL 安装方式,下面就介绍一下 MySQL 常见的安装方法,包括 rpm 安装,yum 安装,通用二进制安装以及源码编译安装, ...
- [SQL] SQL 基础知识梳理（二） - 查询基础
SQL 基础知识梳理(二) - 查询基础 [博主]反骨仔 [原文]http://www.cnblogs.com/liqingwen/p/5904824.html 序 这是<SQL 基础知识梳理( ...
- solr DIH 知识梳理
solr DIH 知识梳理 web.xml中listener配置 <listener> <listener-class>org.apache.solr.handler.data ...
- [C# 基础知识梳理系列]专题六:泛型基础篇——为什么引入泛型
引言: 前面专题主要介绍了C#1中的2个核心特性——委托和事件,然而在C# 2.0中又引入一个很重要的特性,它就是泛型,大家在平常的操作中肯定会经常碰到并使用它,如果你对于它的一些相关特性还不是很了解 ...
- C#基础知识梳理索引
C#基础知识梳理索引 一 引子 之前曾写了一篇随笔<.NET平台技术体系梳理+初学者学习路径推荐+我们的愿景与目标> 三个月过去了,目标使更多的编程初学者,轻松高效地掌握C#开发的基础,重 ...
随机推荐
- Python语句，表达式的区别？
参考了网上的文章,说 表达式的结果是值,对象 比如1+2, 是表达式 具体根据运算符不同有算术,逻辑,比较等等类型的表达式 语句是控制程序走向,不产生值 例如if/else等 参考: https:// ...
- 鸿蒙内核源码分析(线程概念篇) | 是谁在不停的折腾CPU? | 百篇博客分析OpenHarmony源码 | v21.06
百篇博客系列篇.本篇为: v21.xx 鸿蒙内核源码分析(线程概念篇) | 是谁在不断的折腾CPU | 51.c.h .o 任务管理相关篇为: v03.xx 鸿蒙内核源码分析(时钟任务篇) | 触发调 ...
- docker 安装 wordpress，通过nginx反向代理，绑定域名，配置https
假设docker已经安装好了,如果没有安装,可以照着 5分钟安装docker教程. 一. 下载镜像 默认下载最新版本,如果想指定对应版本,可以用冒号后加版本,像这样mysql:5.7: docker ...
- RAC使用auto rolling的方式打补丁
11.2.0.4 RAC 某系统主库使用auto rolling的方式打补丁在一节点执行1-5,结束后然后在二节点执行1-5,结束后最后再在某个节点执行6. 1.backup GI_HOME& ...
- IDEA Web渲染插件开发（一）— 使用JCEF
目前网上已经有了很多关于IDEA(IntelliJ平台)的插件开发教程了,本人觉得简书上这位作者秋水畏寒的关于插件开发的文章很不错,在我进行插件开发的过程中指导了我很多.但是综合下来看,在IDEA上加 ...
- hibernate不同条件查询结果集一样，主键@ID的原因
这一周在翻新公司的老项目,遇到了一些预想不到的事情. 其中一个是,使用hibernate查询,不同的查询条件,居然都查到同一条记录,感觉奇怪了,开始以为是session的原因: 后来发现是hibern ...
- Mydoom样本分析报告
文件检测 信息 值 文件名 1.virus 文件类型 WIN 32 EXE 文件大小 41664 bytes MD5 3d466b0f8ba9f3fe03e137a34d79f682 SHA-256 ...
- Android QMUI实战：沉浸式/适配状态栏
近期研究QMUI换肤的实现,顺便分析了下QMUI的沉浸式. 网上已有很多关于QMUI实现页面沉浸式的文章,简而言之:复杂了. 本期,我们仅通过几行代码,即可完美实现页面沉浸式效果,并轻松匹配换肤的色彩 ...
- 小甲鱼零基础学python第25讲课后习题动手练习--通讯录
小甲鱼零基础学python第25讲课后习题动手练习---通讯录 **************************通讯录要求******************************* 输入指令: ...
- 如何快速体验鸿蒙全新声明式UI框架ArkUI？
HDC2021将于10月22日在东莞松山湖正式开幕,大会将设立Codelab体验专区,超多好玩.有趣的Demo等你体验.想快速入门HarmonyOS?学习HarmonyOS新特性?以下几个Codela ...