HTML 学习——第一周

已于 2022-10-19 21:08:24 修改
阅读量1.1k 收藏
点赞数
文章标签： html 学习
于 2022-10-19 16:22:12 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_73401506/article/details/127378262
版权

HTML学习


博客内容部分参考自乔·卡萨博纳·《HTML5与CSS3基础教程:第9版》·人民邮电出版社·2021-10

一、Web前端三大核心技术

1.什么是 HTML

HTML 是超文本标记语言 (hypertext markup language) 的简称，主要负责处理两件事情：描述网站是什么样的，以及定义这些页面的语义。

2.什么是 CSS

CSS用于描述网页的外观——规定颜色、字体、间距等。

3.什么是 JavaScript

JavaScript 用于完成同用户交互的功能。



二、HTML 语法

HTML是一组文本标签。这些标签将被插入到构建网页的HTML文件的内容之中，他们定义了浏览器中显示的内容的类型。

1.HTML标签是怎样工作的

下面是一个段落标签：

<P>This is a paragraph.</p>

在浏览器中显示的样子：在浏览器中的样子

<p>是标准 HTML 标签。第一个 p 标签和第二个 p 标签的区别是，在包围第二个 p 标签的左尖括号多了一个正斜杠 ( / )。这表示这是一个结束标签，整条语句构成了一个 HTML 元素：开始标签、内容和结束标签。

尖括号之间的 p 告诉浏览器这个内容是什么。在这个例子中，”p“ 代表 ”paragraph"（段落），这样浏览器便知道要将标签里面的内容显示为一个文本块。

2.属性

属性是为标签所应用的文本提供额外信息的。下面是也一个段落标签，不过这次带有一个属性：

<p lang="en">This is a paragraph.</p>

属性应该位于开始标签的字符后面。属性分为两个部分：名称（ 此处为 lang ) 和值 （ 此处为 en ）。这个属性告诉浏览器：”这个段落的语言是英文。“

关于属性，还有两个要点：
  • 一个元素可以有任意数量的属性；
  • 某些元素（ 如图像标签 <img>、链接标签 <a> ）一定要带有一些规定的属性。

3.注释

添加注释可以为代码的各个部分做标记，也可以解释一段代码的用途。

还可以”注释掉“一段代码以查看暂时屏蔽它在浏览器里的效果，而无需将其从代码文件中删除。

下面是两条注释：

<!-- 这是一条注释 -->
<!-- <p>这些内容不会显示，因为被注释掉了。</p> -->

注： 在 vscode 中可以按 ctrl + / 键对所在行或选中的内容进行注释。


4.HTML 页面的基本结构

<!DOCTYPE html>
<html>
	<head>
	···
	</head>
	···
	<body>
	···
	</body>
</html>

上面为 HTML 页面的基本结构。

第一行是 DOCTYPE 声明，它告诉浏览器我们使用的 HTML 是什么版本。

在 DOCTYPE 以外，有三个不同的标签定义了网页的整体结构。

<html>、<head> 和 <body> 标签

  • <html> 标签标记的是整个文档的开始和结束。除 DOCTYPE 外，其他所有标签都应该位于这组标签之内。
  • <head> 元素里面的内容都是关于此页面的信息。在大多数情况下，这些信息不会直接显示在浏览器窗口中。
  • <body> 元素里面包含的是页面上的所有内容。如果 <body> 和 </body> 标签之间有一些文本，那么这些文本就会显示在用户的浏览器中。

上述规则也有例外情况，如 <title>元素。


5. <title> 标签 与 <meta>标签

<title> 标签和 <meta> 标签都属于文档的 <head> 标签。<title> 标签里的信息会展示给用户， 而 <meta> 标签里的则不会。

  • <title> 标签用于在浏览器的标签页显示文本。如:
<title>This is a title.</title>

在这里插入图片描述

  • <meta> 标签用于为搜索引擎这样的程序提供一些信息。他最常见的两个属性是 name 和 content, 这两个属性构成了一个个键值对 (name-value pair)。例如，要提供网页的描述，可以写作： 
<meta name="description" content="A basic Html boilerplate file.">
  • 常见的 name 属性的值包括以下几种:
  • author ( 作者 )：指定文档作者的姓名。
  • description ( 描述 )：对应于在搜索引擎结果中显示的一小块用于描述网页的文本。
  • color-scheme ( 颜色模式 )：指定页面是否支持深色模式。
  • viewport ( 视区 )：提供有关文档初始大小的信息。这一项仅针对移动设备。
  • robots ( 机器人 )：指定文档是否应该包括在搜索引擎的搜索结果里面。
注： <meta> 标签不需要结束标签，也不需要在结尾处包含正斜杠 ( / )。

6.语义化标记

通过选用恰当的标签，不仅可以向用户描述我们的内容，还会像浏览器、搜索引擎以及其他任何基于计算机的处理系统描述我们的内容。这就让上述的每个对象都能按照适合自己的方式来解读信息。这可能意味着以某种颜色显示某些内容，或者在特定的搜索结果中突出显示某些内容。

例如对网站的导航使用了适当的语义化标签，浏览器就会直接在搜索结果中将导航显示出来：

在这里插入图片描述

三、基本的 HTML 元素

1.段落与标题

前面介绍了段落。段落是由一个或多个句子组成的阐述某个想法的一个文本块。 下面是一个段落标签：

<p>This is a paragraph.</p>

标题略有不同。HTML有六个级别的标题，其中一级标题 ( <h1> ) 的重要性最高而六级标题 ( <h6> ) 的重要性最低。

下面是一组标题标签以及在浏览器中的样子：
在这里插入图片描述


2.有序列表、无序列表和定义列表

可以使用 HTML创建三种列表：有序列表、无序列表和定义列表。默认情况下，有序列表以数字为前缀，无序列表以项目符号 ( · )为前缀。
如果要用有序列表，就使用 <ol> 标签；如果要使用无序列表，就使用 <ul> 标签。在列表的开始标签和结束标签之间，列表的每个项目豆包在 <li> 标签里。

下面是一组无序列表和有序列表：

<ul>					  				<ol>
<li>高等数学</li>          				<li>高等数学</li>
<li>线性代数</li>          				<li>线性代数</li>
<li>C语言程序设计</li>     				<li>C语言程序设计</li>
</ul>   				  				</ol>

在这里插入图片描述
下面是一组定义列表：

<dl>
<dt>HTML</dt>
<dd>HYypertext Markup Language</dd>
<dt>CSS</dt>
<dd>cascading style sheet</dd>
</dl>

在这里插入图片描述
列表之间还可以互相嵌套形成多层级的列表，如：
在这里插入图片描述

3.引用块级文本

在HTML中，可以用 <blockquote>元素将一段文本与其他内容区隔离开。默认情况下，<blockquote> 元素会形成一定的缩进，但可以用 CSS 进行修改。

如果要提供引用的来源，可以使用 cite 属性，其值为来源的 URL。还可以使用 <cite> 元素以文本的形式给出来源的标题。

如：在这里插入图片描述

4.文本修饰标签

可以使用文本修饰标签修饰文本，改变其在浏览器中的显示效果。例如 <strong> 标签：

<p>We use strong tag to <strong>draw attenstion</strong> to text by bolding it.</p>

下面列举了一下常见的文本修饰标签：

  • <b> 用于将文本加粗。与 <strong> 的效果相同。
  • <em> 用于强调。其内文本默认显示为斜体。
  • <u> 用于为文本加下划线。它显示为下方带有一条线的文本。
  • <s> 用于表示某些内容是错误的，需要划掉。它显示为中间穿过一条线的文本。
  • <mark> 用于突出显示文本。它将为文本添加黄色背景。
  • <small> 会让文本的字号小于默认大小，它用于注释、旁注、脚注等。
  • <sup> 是上标，它会让文本变小一号并抬高到基线之上，通常用于指数以及引用编号。
  • <sub> 是下标。像 <sup> 一样，它会减小文本的大小，不过位置是在普通文本的基线以下。
  • <abbr> 代表缩写，通常用虚线下划线表示。可以为它添加 title 属性，以包含完整的缩写名称，当鼠标指针悬停在缩写上时，会显示出完整的名称。
  • <br> 会创建换行符。

5.特殊符号

编写一些文本时，经常会遇到输入法无法输入的字符，如 ® (注册商标)、© (版权符) 等，还有往一段文字中加入多个空格时，页面并不会解析出多个空格。这些无法输入的字符和空格字符都是特殊字符。在 HTML 中，为这些特殊字符准备了专门的代码：
在这里插入图片描述

6.对代码进行标记

有两个 HTML 标签是转每用于标记代码的：

  • <code> 用于表示一小段程序代码，以等宽字体显示；
  • <pre> 代表与格式化的文本，也以等宽字体显示。预格式化意味着任何文本（包括空格）的显示都与输入时完全相同。如果想显示多行代码，需将 <code> 元素放在 <pre> 元素里面。



四、链接

链接用于将以一个网页连接到另一个网页。链接也可以让用户跳转到网页的某个部分，还可以让用户下载文件。

1.链接标记

在 HTML 中，使用 <a> (即 anchor,"锚"的意思）标签表示链接。为链接到另一个网站的页面，需要使用 href 属性。 href 属性的值（链接到的页面）是目标的 URL。<a> 元素的内容一般是一些标签性质的文本，通常是连接到的页面名称。

下面是一个指向 bilibili 网站的链接：

<a href="https://www.bilibili.com">Visit Bilibili</a>

在网页中的效果：
在这里插入图片描述

2.URL 的结构

URL 由以下及部分组成。

  • 协议 ( protocol )，一般是 http 和 https 中的一种。
  • 子域名 ( subdomain )，这一项是可选的，一般是 www。
  • 网站名，也就是网站的名称，如taobao, baidu等.
  • 顶级域名 (top-level domain, TLD )，这一项也可称作扩展名 ( extension )。如：.com、.org等。
如果要链接到网站内的某个文件，还需要提供以下两项：
  • 文件所在的路径。
  • 文件名。

3.相对链接与绝对链接

绝对链接
绝对链接需要包含整个 URL，包括协议在内。如果 URL 中的某一项不存在或不完整，该链接就是无效的。 例如： https://www.bilibili.com/anime/?spm_id_from=333.1007.0.0
相对链接
相对链接不包含完整的 URL。链接标记的结构只需要基于所连接文件相对于当前文件的位置。
下面是不同类型的相对链接：
  • 同一文件夹：要链接的文件与当前文件位于同一文件夹中。（如 file.html）
  • 子文件夹：要链接的文件所在文件夹是当前文件所在文件夹的子文件夹。（如 /folder-name/file.html）
  • 父文件夹：要链接的文件所在文件夹是当前文件所在文件夹的父文件夹。（如../../file.html）

5.链接到页面上的特顶部分

要创建这种链接，需要完成两项工作。

  • 通过指定 id 属性，为需要连接的内容区域分配唯一的名称（如 <h3 id="content"></h3>）
  • 在一个 a 标签中指向该 id： <a href="#content"></a>

具体如下：

<a href="# content">Jump to content</a>
······
<h3 id="content">Content</h3>

还可以通过指定 name 属性创建这种链接。具体如下：

<a href="#content">Jump to content.</a>
······
<a name="content"></a>
<h3>Content</h3>

6.链接目标

链接还有一个属性——target（目标）。
使用 target 属性和 _blank属性值，可以在打开链接时让浏览器在新的标签页或窗口打开该链接指向的网页。
例如，要在新标签页中打开 bilibili，可以使用如下链接：

<a href="https://www.bilibili.com" target="_blank">在新标签页打开的内容</a>



五、媒体

通过使用特定的 HTML 标签，告诉浏览器要链接的媒体类型，直接在网页上显示媒体（图像、音频、视频等）。

1.嵌入图片

常见的图像格式：

  • JPG/JEPG：joint photographic experts group（联合图像专家组）
  • GIF：graphics interchange format（图形交换格式）
  • PNG：portable network graphic（便携式网络图形）
  • SVG：sealable vector graphic（可缩放矢量图形
<img> 标签
对于除 SVG 外的所有被浏览器支持的图像类型，都可以使用 <img> 标签来插入图像。下面是一段示例标记： 
<img src="images/picture.jpg" alt="A description of the picture" title="picture's title"/>

上述图像标签中含有三个图像属性： src、alt 和 title。

  • src 属性的值是图像文件所在的位置。
  • alt 属性的值是描述该图像的文本，它会在图像无法加载出来时显示。
  • title 属性也是一个包含文本的属性， 它与上述 alt 属性的区别，主要是将鼠标指针悬停在图像上时，浏览器会将标题属性里的文本显示出来，放在一个提示条中。如下所示：

在这里插入图片描述

<figure> 标签
可以使用包含可选题注元素的图像元素（ <ifigure> 标签）配合使用 <ifigcaption> 标签为图片添加题注和注解。其结构如下所示: 
<figure>
<img srcset="images/alps.jpg" alt="..."/>
<figcaption>阿尔卑斯山</figcaption>
</figure>

网页中的效果：
在这里插入图片描述

2.嵌入视频

可以使用 <video> 元素将视频签到网页里，还可以为它添加一些属性：width（宽度）、height（高度）和 controls（控制器）。controls 属性没有值，但是添加该属性会告诉浏览器在视频区域添加播放、暂停、音量调节等按钮。其结构如下所示：

<video width="800px" controls>
<source src="video.mp4" type="video/mp4">
</video>

网页中的效果：
在这里插入图片描述

3.嵌入音频

在网页中添加音频与添加视频放长相似。HTML 代码的格式完全相同，只是要将 <video> 标签替换成 <audio> 标签：

<audio controls>
<source src="audio.mp3" type="audio/mp3">
</audio>

在网页中的效果：
在这里插入图片描述

m0_73401506
关注
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值