查看更多学习笔记:GitHub:LoveEmiliaForever
MDN中文官网
MDN 文档引用:
就其核心而言,HTML 是一种相当简单的、由不同元素组成的标记语言,它可以被应用于文本片段,使文本在文档中具有不同的含义(它是段落吗?它是项目列表吗?它是表格吗?),将文档结构化为逻辑块(文档是否有头部?有三列内容?有一个导航菜单?),并且可以将图片,影像等内容嵌入到页面中。
HTML 的主要特性总结
HTML 构建的文章总体由各种元素组成,元素之间可以嵌套,且由于不同元素含有不同意义,元素之间可以拥有逻辑和排版上的结构
HTML 文章与元素之间的关系大致可以表述如下图所示
块级元素
在页面中以块的形式展现
独占一行
,通常是页面的结构元素
内联元素
通常嵌套在块级元素内
❕元素的类型与 CSS 中
display:类型
并不一样,尽管 CSS 可以改变元素的显示,但不能够改变元素的类型,也改变不了元素间包含和被包含的关系
❕HTML5 重新定义了元素的分类,原因如上所示,害怕混淆
有一些元素没有结束标签
,它不包含文章片段,而是用来执行一些额外行为
例如或
就是用来在文章中插入图片所使用的元素
这些元素称为空元素
,如上所示在空元素标签的末尾添加/
也是可行的,此时XML
也可以识别该元素
元素的属性通常是定义元素行为
或为元素添加额外信息
=
相连" "
包裹 <a href="github.com" title="点击前往GitHub" target="_blank">前往GitHuba>
示例元素的属性声明了元素的额外行为,与额外信息
href
属性声明了跳转目的地
这个额外信息title
声明了链接描述
这个额外信息target
声明了跳转方式
这个额外行为有些属性可以不用写它的属性值,因为它只有一个和它属性名相同的属性值
这种属性称为布尔属性
,通常是用于声明某种行为
如表单元素的disable
属性就是布尔属性,它表示禁用此表单元素
当元素中只有一个属性时可以不使用" "
包裹属性值
但当属性不止一个时,不使用" "
包裹属性值则很可能产生错误结果
可以使用" "
也可以使用' '
包裹属性值,可以嵌套,不能混用
HTML 页面的一般结构
DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<title>我的测试站点title>
head>
<body>
<p>这是我的页面p>
body>
html>
是一个历史遗留问题,现在只需把它加入 HTML 页面文档开头即可
包含了页面的所有内容,称为根元素
包含了一些有关 HTML 页面的信息,其中内容并不显示在页面
用于设置一些独特的信息,如字符集
、关键字
等等
设置了页面的标题信息
包含了所有显示在页面上的信息❕在 HTML 文档中连续的空格或换行在渲染时都仅被当成一个空格
实体引用类似于转义,是用来表示特殊字符的代码
常用实体引用如下表
所表示字符 | 实体引用代码 | 所表示字符 | 实体引用代码 |
---|---|---|---|
< | < |
> | > |
" | " |
’ | &apos |
& | & |
空格 |   |
只需要用包裹起来注释内容即可创建一行 HTML 注释
元素的使用
是用来给 HTML 文档添加标题的标签,但是和不同
添加的是整个文档文件的标题
是为文档包含的内容添加标题
元素元数据
是用来描述数据的数据,HTML 中可以使用来添加元数据
有许多不同种类,常见的有如下一些
<meta charset="字符集">
不同的字符编码会将同一字符数据解释为不同的字符,为了兼容性考虑,使用utf-8
是最好的
虽然某些浏览器会尝试修正错误编码,但这显然不稳妥,应该要指定字符编码
<meta name="author" content="LoveEmiliaForever">
name
属性用于指定
的类型content
属性则包含了想要写入的数据 <meta name="description" content="网页描述">
给网页添加描述能够让使用者快速了解网页,并且搜索引擎也会使用该元数据
❕ 许多的
特性以及被弃用了,如
某些网站是有自己的元数据协议的,也就是说某些元数据类型是专门使用在特定网站上的
如 Facebook、Twitter 都有一些特有的元数据协议,用于提供扩展服务
可以在中指定特定图片作为站点的图标(通常是
.ico
格式)
可以使用下列语法指定站点图标
<link rel="icon" href="图标路径" type="image/x-icon">
可以在内通过
和
分别引入外部 css 文件、 js 文件
<link rel="stylesheet" href="css文件路径">
<script src="js文件路径" defer>script>
给添加属性
defer
即意味着告诉浏览器 “在解析完 HTML 文件后再加载 js 文件”。这样可以防止 js 在运行环境尚未完成时运行,避免出现错误
可以通过使用lang
属性给元素设定主语言,该属性通常是被放置在内,以规定该页面的主语言
<html lang="zh-CN">
页面内容
html>
通过将内容包裹在中可以标记一个段落
通过将标题内容包裹在到
内,可以定义六个等级的标题
,这是顶级标题语义化标签可以元素赋予对应的含义,使得元素之间能够进行视觉、逻辑、结构上的统一
这样做的好处有很多
无序列表是没有顺序标签的,也就是说使用该列表时顺序应该要是无关紧要的事情
如下所示,
用于声明无需列表,用于声明列表项
<ul>
<li>吃饭li>
<li>睡觉li>
<li>喝水li>
ul>
和无序列表相反,有序列表是有顺序标签的
它们的结构相似
用于声明有序列表,用于声明列表项
<ol>
<li>步骤一li>
<li>步骤二li>
<li>步骤三li>
ol>
列表之间是可以嵌套的,只需要在内部插入
或
即可
<ol>
<li>步骤一li>
<li>步骤二li>
<li>步骤三
<ul>
<li>材料Ali>
<li>材料Bli>
<li>材料Cli>
ul>
li>
ol>
HTML 中提供了一些标签用于标记文字,使得文字具有特殊效果,以达到强调文字内容的作用
可以使用标记文本以获得斜体字,但是它是具有语义的元素
如果仅仅只是想要斜体字,且没有代表什么含义那么就不应该使用,可以使用
或是
或
+ CSS
<p><em>《哈姆雷特》em>是一本经典的书p>
<p>我<i>今天i>想吃水饺p>
语义化的粗体标签是,普通的粗体标签是
由于超链接
一般会拥有下划线,所以如果要给文字添加下划线,最好定义一些独特的格式
可以使用定义下划线,但最好使用
或
+ css给下划线一个明确的语义,然后使用下划线
HTML 中的大部分标签都是具有语义的,但有一些标签没有什么含义
例如、
、
这些标签定义的元素叫做表象元素
,应该减少这些标签的使用
超链接是一个地址
,指向其它资源
或是文档内容
点击超链接后就可访问地址
,以进行跳转或获取资源
在 HTML 中可以使用定义一个超链接,在其中还包含有一些属性以定义超链接
<a href="地址" title="页面描述" target="打开方式">描述文字a>
可以包含
块级元素
,这基本意味着它可以把任何东西作为超链接而不单单是文字
url
全名Uniform Resource Locator
,它是代表了一个网络位置的字符串
如https://www.baidu.com
就是一个url
path
一般指本地的文件路径,是访问本地文件的一个路径,代表着文件的逻辑存放位置
路径分为相对路径
和绝对路径
根目录
开始定位文件位置的./
../
定义 超链接 访问文章锚点
download
属性指定一个默认的下载文件名可以更改地址
为mailto:邮件地址
来指向一个电子邮箱
甚至可以提前指定好邮件题目subject
、收件人cc
、邮件内容body
<a href="
mailto:邮件地址&cc=address1&cc=address2&subject=xxx&body=xxx">
发送一个邮件
a>
❗️
cc
、subject
、body
中包含的信息应该要被转义过
除了无序列表
和有序列表
外,还存在着描述列表
这种列表的每一项包括目标文本
和描述文本
,其中描述文本
可以有多个
它的定义和其它列表也不太一样
<dl>
<dt>被描述的东西dt>
<dd>相关的一些描述,解释,介绍等等dd>
<dt>被描述的东西dt>
<dd>相关的一些描述,解释,介绍等等dd>
<dt>被描述的东西dt>
<dd>相关的一些描述,解释,介绍等等dd>
<dd>相关的一些描述,解释,介绍等等dd>
dl>
HTML 有用于标记引用的标签,并且有块引用
和行内引用
浏览器会分别给它们添加默认的样式
<blockquote cite="引用地址">
<p>引用一个 HTML 块p>
blockquote>
<p>
有一句很著名的话,
<q cite="引用地址">一千个读者有一千个哈姆雷特q>
广为人知
p>
使用和
标签虽然为文本添加引用样式,但是不能充分利用
cite
属性的内容
因此,使用这样的结构更能够体现引用地址
<a href="寂静的春天">
<cite>
《寂静的春天》
cite>
a>
描述了一个悲惨的世界
在编辑文档时经常遇到缩略语
的编写,为了防止有人不知道缩略语的意思,编写者通常会解释一遍缩略语
如果使用标签,那么当鼠标移到缩略语上时,缩略语会自动浮现出全名
<p>
<abbr title="Hyper Text Markup Language">HTMLabbr>
是一个非常重要的标记语言
p>
其中title
属性应该填写有关缩略语的全称
❕曾经有一个
也是缩略语,但它已经废弃
可以使用标记联系地址
<address>
<p>123大街123号p>
<a href="mailto:123456@gamil.com">我的邮箱a>
address>
❕联系方式标记的位置要小心,不要搞错了
标记的联系方式应该是离它最近的
所属
或是当它放在时,它应该是整个页面的联系方式
上标的标签是,下标的标签是
用来标记计算机通用代码
将文本包裹在其中,空白字符
和换行符
将以原样展示
标记变量名
标记输入
标记输出 <p>下面是一段 Python 代码p>
<pre>
<code>
<var>BATvar>="比亚迪,埃安,特斯拉"
<var>STRvar>=input()
print(BAT,STR)
code>
pre>
<p>当我们输入<kbd>我爱kbd>后,程序会输出<samp>比亚迪,埃安,特斯拉我爱samp>p>
因为文本表示时间的格式太多了,因此可以把时间插入到中
并为它设置一个机器时间
,以此统一时间格式
<time datetime="2016-06-26">2023年 6月 26日time>
❕注意如果时间的位数不够,要用零填补其它位置
利用datetime
设置一个机器时间
HTML 不仅能够定义一些细分的结构,也可以使用块级元素定义网页的整体架构,从而使得网页规划整齐
、可读性高
、语义化强
HTML 可根据功能来为区段添加标记,使用元素来无歧义地表示内容区段
标签 | 名字 | 介绍 |
---|---|---|
|
页眉 | 如果是 的子元素那么就是网页的页眉如果是 、 的子元素那么就是它们独有的页眉 |
|
导航栏 | 包含页眉的导航功能,但不应该包含二级链接等等 |
|
主内容 | 存放每个页面独有的内容,每个页面仅有一个 |
|
文章 | 包裹着一篇文章这类的,与其它部分无关 |
|
大分区 | 组织页面的分块 |
|
侧边栏 | 包含有一些间接信息,辅助功能等等 |
|
页脚 | 放置页面的页脚,内含一些通用信息 |
|
块级无语义标签 | 配合id、class使用 |
|
内联无语义标签 | 配合id、class使用 |
|
换行 | 适当的换行能够优化结构 |
|
水平线 | 使用水平线可以分隔不同部分 |
❗️不要滥用
div
标签,能不用就不用
通常的代码错误分为下列两种
因为浏览器是以宽松模式
运行的,HTML并不容易出现导致程序停止的错误
但正因如此,浏览器在修复语法错误时很可能给出非预期的结果
在不规则语法时,可以手动查找
但更好的方法是使用标记验证服务网站,让机器帮助你找到语法错误
HTML-语义化-信件
HTML-语义化-观鸟者网
❗️不要滥用
div
标签,能不用就不用
通常的代码错误分为下列两种
因为浏览器是以宽松模式
运行的,HTML并不容易出现导致程序停止的错误
但正因如此,浏览器在修复语法错误时很可能给出非预期的结果
在不规则语法时,可以手动查找
但更好的方法是使用标记验证服务网站,让机器帮助你找到语法错误