HTML学习

  • 一、Web前端三大核心技术
    • 1.什么是 HTML
    • 2.什么是 CSS
    • 3.什么是 JavaScript
  • 二、HTML 语法
    • 1.HTML标签是怎样工作的
    • 2.属性
    • 3.注释
    • 4.HTML 页面的基本结构
    • 5. <title> 标签 与 <meta>标签
    • 6.语义化标记
  • 三、基本的 HTML 元素
    • 1.段落与标题
    • 2.有序列表、无序列表和定义列表
    • 3.引用块级文本
    • 4.文本修饰标签
    • 5.特殊符号
    • 6.对代码进行标记
  • 四、链接
    • 1.链接标记
    • 2.URL 的结构
    • 3.相对链接与绝对链接
    • 5.链接到页面上的特顶部分
    • 6.链接目标
  • 五、媒体
    • 1.嵌入图片
    • 2.嵌入视频
    • 3.嵌入音频

博客内容部分参考自乔·卡萨博纳·《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="data: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>

在网页中的效果：

HTML 学习——第一周相关推荐

  1. 201671010140. 2016-2017-2 《Java程序设计》java学习第一周

       java学习第一周        本周是新学期的开端,也是新的学习进程的开端,第一次接触java这门课程,首先书本的厚度就给我一种无形的压力,这注定了,这门课程不会是轻松的,同时一种全新的学习方 ...

  2. 掉进悬崖的小白，捡到python基础秘籍，学习第一周——语法基础，小游戏，无脑循环

    掉进悬崖的小白,捡到python基础秘籍,学习第一周--语法基础,小游戏,无脑循环 人生苦短,我用python 语言的种类: 语言的发展: 什么是python 搭建 Python开发环境: 集成开发环 ...

  3. Datacamp 学习第一周

    Datacamp 学习第一周总结 Intro to Python for Data Science 列表 numpy package 字典 pandas comparision operators l ...

  4. 我的JAVA学习第一周知识总结，个人感受小结

    JAVA学习第一周 1,了解三种开发模型 2,建包.建类的规范格式 3,了解不同数据类型 4,JAVA环境搭建 5,JVM.JRE.JDK是什么 6,if/else if语句的使用 7,各个语句swi ...

  5. 前端学习第一周-计算机基础，html标签的介绍，其中包括列表，表格以及表单的使用

    前端学习第一周-HTML基础 文章目录 前端学习第一周-HTML基础 前言 DAY 1 计算机组成 计算机网络 DAY 2 vscode快捷方式 HTML骨架 DAY 3 HTML属性 HTML标签 ...

  6. python学习第一周总结

    python学习第一周总结 一.Markdown语法 Markdown是一种轻量级标记语言,排版语法简洁,它使用易读易写的纯文本格式编写文档,可与HTML混编,可导出 HTML.PDF 以及本身的 . ...

  7. Java学习第一周总结

    201711671227<Java程序设计>第一周学习总结 教材学习内容总结 主要学习了如何下载及安装Java,如何调试环境变量,系统变量等,其次更为重要的是掌握了使用Java来编译运行程 ...

  8. PaddlePaddle课程学习第一周笔记

    人工智能.机器学习.深度学习的关系 机器学习的过程分为假设.评价和优化三个阶段: 假设:通过观察加速度a和作用力F的观测数据,假设aaa和FFF是 线性关系,即a=w∗Fa = w * Fa=w∗F. ...

  9. 数据挖掘学习——第一周周报

    理论学习: 因为此前没有上过梁上松老师的数据挖掘课,对如何开始入手.算法的选择等都没有思路,加之本周投入的时间不长, 为此第一周主要进行的是理论方面的学习.意在对数据挖掘比赛基本流程有个大致的认知,为 ...

  10. python项目策划书_Python实战计划学习第一周

    第二节练习项目:爬取商品信息 from bs4 import BeautifulSoup import re # 引入正则表达式 # 本地静态网页路径 path = './index.html' wi ...

最新文章

  1. json下linux64位版本,linux下正确安装jsoncpp(示例代码)
  2. ｃ＋＋面试题之标准模板库
  3. VUE搭建手机商城心得
  4. 701. 二叉搜索树中的插入操作
  5. ATL--创建简单的ATL之dll工程，添加“ATL简单对象”类的参数说明
  6. python函数名的应用、闭包和迭代器
  7. 在sqlserver sql语句中查找速度快
  8. 8个前端技术学习网站
  9. 大数据市场交易趋旺物联网平台争夺加剧
  10. eslint 保存自动修复_ESLint 自动修复问题之如何保留最后修改人信息
  11. hadoop菜鸟教程 Hadoop学习资料（云计算学习电子书）
  12. 微信小程序tabbar 小程序自定义 tabbar怎么做
  13. git报错would clobber existing tag
  14. 三、JavaSE_集合(Set)
  15. SSL-ZYC 旅行
  16. OpenCV参考手册之Mat类详解（一）
  17. 移动端h5 顶部菜单栏_手机界面设计中12种常用布局 - 轩枫阁
  18. 觉得tkinter界面不好看？Extkinter带你制作进阶版窗口(ExButton篇)
  19. 华三交换机检测堆叠分裂的三种方法（lacp mad，bfd-mad，arp-mad）
  20. 激光打标机使标记处理智能化

热门文章

  1. 正规方程法在矩阵不可逆的情况下解决办法
  2. Excel高效插入空行，2秒删除表格所有空行，实在太效率了
  3. python时间消耗统计
  4. PTA 星际探险 (25分)(Dijkstra改约束条件)
  5. Orange Pi Zero2 (全志H616) 开箱配置
  6. 试论软件的可靠性及其保证
  7. 如何修改.json文件的内容？
  8. 博文视点5周月庆典纪念专题
  9. 《Web安全之机器学习入门》笔记：第九章 9.4 支持向量机算法SVM 检测DGA域名
  10. 怎么把html图片改成jpg格式吗,怎样把照片变成JPG格式？