HTML——构建Web
开始学习HTML
-
通过使用标签
<em>
和</em>
(在前面放置<em>
打开元素,在后面放置</em>
关闭元素)——这使得行内容变成斜体强调! -
strong是加粗标记
-
块级元素和内联元素
-
空元素:
- 例如:src
- 不用以结尾
-
属性:
一个属性必须包含如下内容:
1.一个空格,在属性和元素名称之间(如果已经有一个或多个属性,就与前一个属性之间有一个空格)。
2.属性名称,后面跟着一个等于号。
3.一个属性值,由一对引号 (“”) 引起来。
-
元素的属性:
href
: 这个属性声明超链接的 web 地址,当这个链接被点击浏览器会跳转至 href 声明的 web 地址。title
: 标题title
属性为超链接声明额外的信息,比如你将链接至的那个页面。例如:title="The Mozilla homepage"
。当鼠标悬停在超链接上面时,这部分信息将以工具提示的形式显示。target
: 目标target
属性用于指定链接如何呈现出来。例如,target="_blank"
将在新标签页中显示链接。如果你希望在当前标签页显示链接,忽略这个属性即可。
-
布尔属性:
-
<!-- 使用 disabled 属性来防止终端用户输入文本到输入框中 --> <input type="text" disabled>
-
-
分析代码:
<!DOCTYPE html>
: 声明文档类型,<!DOCTYPE html>
是最短有效的文档声明。<html></html>
:<html>
元素。这个元素包裹了整个完整的页面,是一个根元素。<head></head>
:<head>
元素。这个元素是一个容器,它包含了所有你想包含在 HTML 页面中但不想在 HTML 页面中显示的内容。这些内容包括你想在搜索结果中出现的关键字和页面描述,CSS 样式,字符集声明等等。以后的章节能学到更多关于元素的内容。<head></head>
:<head>
元素。这个元素是一个容器,它包含了所有你想包含在 HTML 页面中但不想在 HTML 页面中显示的内容。这些内容包括你想在搜索结果中出现的关键字和页面描述,CSS 样式,字符集声明等等。以后的章节能学到更多关于元素的内容。<meta charset="utf-8">
: 这个元素设置文档使用 utf-8 字符集编码,utf-8 字符集包含了人类大部分的文字。基本上他能识别你放上去的所有文本内容。毫无疑问要使用它,并且它能在以后避免很多其他问题。<title></title>
: 设置页面标题,出现在浏览器标签上,当你标记/收藏页面时它可用来描述页面。<body></body>
:<body>
元素。包含了你访问页面时所有显示在页面上的内容,文本,图片,音频,游戏等等。
<head>
标签里有什么?Metadata-HTML 中的元数据
-
head元素和body元素不同,它的内容不会在浏览器中显示,它的作用是保存页面一些元素据。
-
title元素为文档添加标题,h1是为body添加标题(页面内容)的,h1也叫做网页标题,二者并不同
-
元数据:
<meta>
元素-
指定文档中字符的编码:
<meta charest = "utf-8">
-
元素包含了name和content属性:
name指定了meta元素的类型;说明该元素包含了什么类型的信息
content指定了实际的元数据内容
-
-
在HTML中应用CSS和JavaScript
-
分别使用和
-
<script src="my-js-file.js" defer></script>
-
为文档设置主语言
- 最后,值得一提的是可以(而且有必要)为站点设定语言,这个可以通过添加
lang
属性到 HTML 开始的标签中来实现(参考 meta-example.html),如下所示:
<html lang="zh-CN">
- 最后,值得一提的是可以(而且有必要)为站点设定语言,这个可以通过添加
HTML文本基础
-
标题和段落
-
每个段落是通过
元素标签来定义的
-
每个标题是通过“标签标题”进行定义的:
<h1>我是文章的标题</h1>
-
3.这里有六个标题元素标签 —— <h1>
、<h2>
、<h3>
、<h4>
、<h5>
、<h6>
。每个元素代表文档中不同级别的内容; <h1>
表示主标题(the main heading),<h2>
表示二级子标题(subheadings),<h3>
表示三级子标题(sub-subheadings),等等。
-
编辑结构层次
- 我们需要给我们的内容结构标记(也就是确定标题)
- 灵活应用
和
-
列表
-
有序
-
<ol> <li>豆浆</li> <li>油条</li> </ol>
-
-
无序
-
<ul> <li>豆浆</li> <li>油条</li> </ul>
-
-
-
嵌套列表Nesting lists
-
将一个列表嵌套到另外一个列表是完全可以的
<ol> <li>先用蛋白一个、盐半茶匙及淀粉两大匙搅拌均匀,调成“腌料”,鸡胸肉切成约一厘米见方的碎丁并用“腌料”搅拌均匀,腌渍半小时。</li> <li>用酱油一大匙、淀粉水一大匙、糖半茶匙、盐四分之一茶匙、白醋一茶匙、蒜末半茶匙调拌均匀,调成“综合调味料”。</li> <li>鸡丁腌好以后,色拉油下锅烧热,先将鸡丁倒入锅内,用大火快炸半分钟,炸到变色之后,捞出来沥干油汁备用。</li> <li>在锅里留下约两大匙油,烧热后将切好的干辣椒下锅,用小火炒香后,再放入花椒粒和葱段一起爆香。随后鸡丁重新下锅,用大火快炒片刻后,再倒入“综合调味料”继续快炒。</li> <li>如果你采用正宗川菜做法,最后只需加入花生米,炒拌几下就可以起锅了。</li> <li>如果你在北方,可加入黄瓜丁、胡萝卜丁和花生米,翻炒后起锅。</li> </ol>
-
-
起强调作用
- 斜体
- 加粗
-
斜体字、粗体字、下划线
- 被用来传达传统上用斜体表达的意义:外国文字,分类名称,技术术语,一种思想……
- 被用来传达传统上用粗体表达的意义:关键字,产品名称,引导句……
- 被用来传达传统上用下划线表达的意义:专有名词,拼写错误……
创建超链接
- 将文本的内容包裹在元素内,并给它一个href属性(它将包含一个网址)来创建一个基本链接
<p>我创建了一个指向
<a href="https://www.mozilla.org/zh-CN/">Mozilla 主页</a>的超链接。
</p>
结果如下所示:
我创建了一个指向 Mozilla 主页的超链接。
-
使用title属性添加支持信息,当鼠标悬停在链接上时,标题将作为提示信息出现
<a href="https://www.mozilla.org/zh-CN/" title="了解Mozilla 使命以及如何参与贡献的最佳站点">Mozilla 主页</a>的超链接。
-
块级链接
-
你可以将一个图像转换成链接,你只需要把引用图像文件的元素放到标签内
<a href="https://www.mozilla.org/zh-CN/"> <img src="mozilla-image.png" alt="链接至 Mozilla 主页的 Mozilla 标志"> </a>
-
-
统一资源定位符(URL)与路径(path)
-
统一资源定位符是一个定义了在网络上的位置的一个文本字符串。例如 Mozilla 的中文主页定位在
https://www.mozilla.org/zh-CN/
. -
URL 使用路径查找文件。路径指定文件系统中你感兴趣的文件所在的位置。
- 指向当前目录:
-
直接在href中输入文件名
-
<p>要联系某位工作人员,请访问我们的<a href="contacts.html">联系人页面</a>。</p>
-
指向子目录
-
要先进入子目录再指明要链接到的文件index.html
-
<p>请访问<a href="projects/index.html">项目页面</a>。</p>
-
-
指向上级目录
-
返回上一级目录级用两个英文点号表示“…”
-
<p>点击打开<a href="../pdfs/project-brief.pdf">项目简介</a>。</p>
-
-
-
文档片段
-
超链接除了可以链接到其他文档或网址外,还可以链接到HTML文档的特定部分(被称为文档片段),要做到这一点必须要给要链接的元素分配一个id属性
-
例如,如果你想链接到一个特定的标题,可以这样做:
<h2 id="Mailing_address">邮寄地址</h2>
然后链接到那个特定的
id
,你可以在 URL 的结尾使用一个井号指向它,例如:<p>要提供意见和建议,请将信件邮寄至<a href="contacts.html#Mailing_address">我们的地址</a>。</p>
你甚至可以在同一份文档下,通过链接文档片段,来链接到同一份文档的另一部分:
<p>本页面底部可以找到<a href="#Mailing_address">公司邮寄地址</a>。</p>
-
-
绝对URL和相对URL
- 绝对URL:
- 相对URL:
- 指向与你链接的文件相关的位置,如果 PDF 文件能够在
projects
的子目录pdfs
中访问到,相对路径就是pdfs/project-brief.pdf
(对应的绝对 URL 是http://www.example.com/projects/pdfs/project-brief.pdf
) project-brief.pdf
文件和pdfs
文件夹的位置会因为你移动了index.html
文件而突然发生变化——这将使你的链接指向错误的位置,因此如果单击它,它将无法工作。
- 指向与你链接的文件相关的位置,如果 PDF 文件能够在
-
电子邮件链接
-
当点击一个链接或按钮时,打开一个新的电子邮件发送信息而不是连接到一个资源或页面,这种情况是可能做到的。这样做是使用元素和
mailto
:URL 的方案。其最基本和最常用的使用形式为一个
mailto:
链接,链接指明收件人的电子邮件地址。例如:<a href="mailto:nowhere@mozilla.org">向 nowhere 发邮件</a>
这会创建一个链接,看起来像这样:向 nowhere 发邮件。
-
指定详细信息
-
其中最常用的是主题(subject)、抄送(cc)和主体(body)(这不是一个真正的标头字段,但允许你为新邮件指定一个简短的内容消息)。每个字段及其值被指定为查询项。
下面是一个包含 cc、bcc、主题和主体的示例:
<a href="mailto:nowhere@mozilla.org?cc=name2@rapidtables.com&bcc=name3@rapidtables.com&subject=The%20subject%20of%20the%20email&body=The%20body%20of%20the%20email"> Send mail with cc, bcc, subject and body </a>
-
-
高阶的文字排版
1. 描述列表
-
描述列表使用与其他列表类型不同的闭合标签—
(description term) 元素闭合。每个描述都用- (description definition) 元素闭合。让我们来完成下面的标记例子:
<dl> <dt>内心独白</dt> <dd>戏剧中,某个角色对自己的内心活动或感受进行念白表演,这些台词只面向观众,而其他角色不会听到。</dd> <dt>语言独白</dt> <dd>戏剧中,某个角色把自己的想法直接进行念白表演,观众和其他角色都可以听到。</dd> <dt>旁白</dt> <dd>戏剧中,为渲染幽默或戏剧性效果而进行的场景之外的补充注释念白,只面向观众,内容一般都是角色的感受、想法、以及一些背景信息等。</dd> </dl>
浏览器的默认样式会在描述列表的描述部分(description definition)和描述术语(description terms)之间产生缩进。MDN 非常严密地遵循这一惯例,同时也鼓励关于术语的其他更多的定义(but also embolden the terms for extra definition)。
下面是前述代码的显示结果:
内心独白
戏剧中,某个角色对自己的内心活动或感受进行念白表演,这些台词只面向观众,而其他角色不会听到。
语言独白
戏剧中,某个角色把自己的想法直接进行念白表演,观众和其他角色都可以听到。
旁白
戏剧中,为渲染幽默或戏剧性效果而进行的场景之外的补充注释念白,只面向观众,内容一般都是角色的感受、想法、以及一些背景信息等。
-
注意:一个术语
可以同时有多个描述
2. 引用
-
块引用
- 如果一个块级内容(一个段落、多个段落、一个列表等)从其他地方被引用,你应该把它用
元素包裹起来表示,并且在cite属性里用 URL 来指向引用的资源。
- 浏览器在渲染块引用时会默认增加缩进,作为引用的一个指示符
- blockquote 标签定义块引用。 blockquote 与 /blockquote 之间的所有文本都会从常规文本中分离出来,经常会在左、右两边进行缩进(增加外边距),而且有时会使用斜体。
- blockquote 元素中的 cite 属性指定了引用的来源
- 如果一个块级内容(一个段落、多个段落、一个列表等)从其他地方被引用,你应该把它用
-
行内引用
- 行内元素使用
元素来工作,工作方式一样
- 行内元素使用
-
引文
- cite属性内容不会被浏览器显示、屏幕阅读器阅读,需使用 JavaScript 或 CSS,浏览器才会显示
cite
的内容。如果你想要确保引用的来源在页面上是可显示的,更好的方法是为元素附上链接:
- cite属性内容不会被浏览器显示、屏幕阅读器阅读,需使用 JavaScript 或 CSS,浏览器才会显示
3. 缩略语
-
——它常被用来包裹一个缩略语或缩写,并且提供缩写的解释(包含在
title
属性中)。 -
title属性当光标移动到项目上会出现提示
-
<p>我们使用 <abbr title="超文本标记语言(Hyper text Markup Language)">HTML</abbr> 来组织网页文档。</p> <p>第 33 届 <abbr title="夏季奥林匹克运动会">奥运会</abbr> 将于 2024 年 8 月在法国巴黎举行。</p>
4. 标记联系方式
-
<address>
用于标记编写HTML文档的人的联系方式,而不是其他内容 -
<address> <p> Page written by <a href="../authors/chao/">chao</a>.</p> </address>
5. 上标和下标
-
<sub>
是下标,<sup>
是上标 -
<p>咖啡因的化学方程式是 C<sub>8</sub>H<sub>10</sub>N<sub>4</sub>O<sub>2</sub>。</p> <p>如果 x<sup>2</sup> 的值为 9,那么 x 的值必为 3 或 -3。</p>
这些代码输出的结果是:
咖啡因的化学方程式是 C8H10N4O2。
如果 x2 的值为 9,那么 x 的值必为 3 或 -3。
6. 展示计算机代码
<code>
用于标记计算机通用代码。<pre>
: 用于保留空白字符(通常用于代码块)——如果您在文本中使用缩进或多余的空白,浏览器将忽略它,您将不会在呈现的页面上看到它。但是,如果您将文本包含在标签中,那么空白将会以与你在文本编辑器中看到的相同的方式渲染出来。<var>
: 用于标记具体变量名。<kbd>
: 用于标记输入电脑的键盘(或其他类型)输入。<samp>
: 用于标记计算机程序的输出。
7. 标记时间和日期
- HTML支持将时间和日期标记为可供机器识别的格式的
<time datetime="2016-01-20">2016 年 1 月 20 日</time>
文档与网站架构
1.文档的基本组成部分
-
页眉
通常横跨于整个页面顶部有一个大标题 和/或 一个标志。这是网站的主要一般信息,通常存在于所有网页。
-
导航栏
指向网站各个主要区段的超链接。通常用菜单按钮、链接或标签页表示。类似于标题栏,导航栏通常应在所有网页之间保持一致,否则会让用户感到疑惑,甚至无所适从。许多 web 设计人员认为导航栏是标题栏的一部分,而不是独立的组件,但这并非绝对;还有人认为,两者独立可以提供更好的 无障碍访问特性,因为屏幕阅读器可以更清晰地分辨二者。
-
主内容
中心的大部分区域是当前网页大多数的独有内容,例如视频、文章、地图、新闻等。这些内容是网站的一部分,且会因页面而异。
-
侧边栏
一些外围信息、链接、引用、广告等。通常与主内容相关(例如一个新闻页面上,侧边栏可能包含作者信息或相关文章链接),还可能存在其他的重复元素,如辅助导航系统。
-
页脚
横跨页面底部的狭长区域。和标题一样,页脚是放置公共信息(比如版权声明或联系方式)的,一般使用较小字体,且通常为次要内容。还可以通过提供快速访问链接来进行 SEO。
2.用于构建内容的HTML
<head>
:页眉<nav>
:导航栏<main>
:主内容。<aside>
:侧边栏,经常嵌套在<main>
中<footer>
:页脚
3.HTML布局元素细节
- <
main
>存放每个页面独有的内容。每个页面上只能用一次<main>
,且直接位于<body
>中。最好不要把它嵌套进其它元素。 - <
article
>包围的内容即一篇文章,与页面其它部分无关(比如一篇博文)。 - <
section
>与<article>
类似,但<section>
更适用于组织页面使其按功能(比如迷你地图、一组文章标题和摘要)分块。一般的最佳用法是:以 标题 作为开头;也可以把一篇<article>
分成若干部分并分别置于不同的<section>
中,也可以把一个区段<section>
分成若干部分并分别置于不同的<article>
中,取决于上下文。 - <
aside
>包含一些间接信息(术语条目、作者简介、相关链接,等等)。 - <
header
>是简介形式的内容。如果它是<body
>的子元素,那么就是网站的全局页眉。如果它是 <article
>或<section
>的子元素,那么它是这些部分特有的页眉(此<header>
非彼 标题)。 - <
nav
>包含页面主导航功能。其中不应包含二级链接等内容。 - <
footer
>包含了页面的页脚部分。
4.无语义元素
<span
>是一个内联的(inline)无语义元素,最好只用于无法找到更好的语义元素来包含内容时,或者不想增加特定的含义时。例如:
<span>
标签本身并不产生任何视觉效果,它只是提供一种途径,令你可以对文档中的一部分进行引用。
这样,你便可以引用部分文本,并对它们设置样式,或用JavaScript对它们进行处理。
<p>国王喝得酩酊大醉,在凌晨 1 点时才回到自己的房间,踉跄地走过门口。<span class="editor-note">[编辑批注:此刻舞台灯光应变暗]</span>.</p>
<div>
是一个块级无语义元素,应仅用于找不到更好的块级元素时,或者不想增加特定的意义时。例如,一个电子商务网站页面上有一个一直显示的购物车组件。
警告:<div>
非常便利但容易被滥用。由于它们没有语义值,会使 HTML 代码变得混乱。要小心使用,只有在没有更好的语义方案时才选择它,而且要尽可能少用,否则文档的升级和维护工作会非常困难。
换行与水平分割线
- <
br
>可在段落中换行<br>
可在段落中进行换行;<br>
是唯一能够生成多个短行结构(例如邮寄地址或诗歌)的元素。
- <
hr
>在文档中生成一条水平分割线,表示文本中主题的变化(例如话题或场景的改变)。一般就是一条水平的直线。
HTML调试
1.HTML和调试
- 语法错误:由于拼写错误导致程序无法运行,就像上面的 Rust 示例。通常熟悉语法并理解错误信息后很容易修复。
- 逻辑错误:不存在语法错误,但代码无法按预期运行。通常逻辑错误比语法错误更难修复,因为无法得到指向错误源头的信息。
2.HTML验证
- 最好的方法就是让你的 HTML 页面通过 Markup Validation Service。由 W3C(制定 HTML、CSS 和其他网络技术标准的组织)创立并维护的标记验证服务。把一个 HTML 文档加载至本网页并运行,网页会返回一个错误报告。
- 网页可以接受网址、上传一个 HTML 文档,或者直接输入一些 HTML 代码。
总结
这几天还在学习HTML基础,希望把HTML、CSS、Javascript过一遍后再学习那个Angular框架,在疯狂赶进度,希望赶紧学完。