通俗易懂的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全局变量的定义
第一:如定义在类或者函数体外,在函数或者类中引用需要用到 global声明 temp_t = "ceshi" def tmp1(): global temp_t temp_t =1 ...
- python 正则表达式findall
re.findall("匹配规则", "要匹配的字符串") 以列表形式返回匹配到的字符串 https://www.cnblogs.com/gufengchen/ ...
- 低代码BPM平台
为了做出明智的决策并为客户提供服务,员工需要在正确的环境中使用正确的工具和访问关键信息的权限.但是,当业务关键信息分散在多个现成的和自定义编码的应用程序中时,员工效率会降低,客户体验也会受到影响. 低 ...
- iframe、SameSite与CEF
iframe.SameSite与CEF 背景 本人使用CEF(或是Chrome)来加载开发的前端页面,其中使用iframe嵌入了第三方页面,在第三方页面中需要发送cookie到后端,然而加载会报错,第 ...
- 从零入门 Serverless | 函数计算的开发与配置
导读:在本篇文章中,"基本概念"部分主要对函数计算最核心的概念进行详细介绍,包括服务.函数.触发器.版本.别名以及相关的配置:"开发流程"部分介绍了基于函数计算 ...
- .Net Core with 微服务 - 使用 AgileDT 快速实现基于可靠消息的分布式事务
前面对于分布式事务也讲了好几篇了(可靠消息最终一致性 分布式事务 - TCC 分布式事务 - 2PC.3PC),但是还没有实战过.那么本篇我们就来演示下如何在 .NET 环境下实现一个基于可靠消息的分 ...
- 小白自制Linux开发板 番外篇 一 modprobe加载驱动问题（转载整理）
使用modprobe加载驱动 转载地址:https://blog.csdn.net/qq_39101111/article/details/78773362 前面我们提到,modprobe并不需要指定 ...
- MySQL ENGINES 引擎
引擎 存储引擎是数据库底层软件组织. 数据库管理系统(DBMS)使用数据引擎进行创建.查询.更新和删除数据. 不同的存储引擎提供不同的存储机制.索引技巧.锁定水平等功能. MySQL的核心就是存储引擎 ...
- HttpServletResponse 入门
继承体系 功能: 设置响应消息 1. 设置响应行 格式:HTTP/1.1 200 ok 设置状态码:setStatus(int sc) 2. 设置响应头:setHeader(String name, ...
- mysql select语句查询流程是怎么样的
select查询流程是怎么样的 mysql select查询的数据是查询内存里面,如果没有查询的数据没有在内存,就需要mysql的innodb引擎读取磁盘,将数据加载的内存后在读取.这就体现了,mys ...