01——初识HTML

企业开发 2023-04-09 06:23:24 阅读次数: 0

基础概念

认识网页

问题1：网页由哪些部分组成?

文字、图片、音频、视频、超链接

问题2：我们看到的网页背后本质是什么?

前端程序员写的代码

问题3：前端的代码是通过什么软件转换成用户眼中的页面的?

通过浏览器转化（解析和渲染）成用户看到的网页


五大浏览器

浏览器：是网页显示、运行的平台，是前端开发必备利器。用于读取HTML文件，并将其作为网页显示。

常见的五大浏览器：谷歌浏览器(Chrome)、IE浏览器、火狐浏览器（Firefox)、Safari浏览器、欧朋浏览器（Opera)

image-20230224011607055


渲染引擎

渲染引擎（浏览器内核)：浏览器中专门对代码进行解析渲染的部分。

浏览器出品的公司不同，内在的渲染引擎也是不同的。

  1. Chrome/Edge：Blink引擎

    Blink引擎是由Google发起并维护的，是WebKit引擎的分支，它采用多进程架构，能够更好地处理多标签页和多插件的情况，提高了浏览器的稳定性和安全性。

  2. Firefox：Gecko引擎

    Gecko引擎是由Mozilla基金会开发的，它具有强大的扩展性和灵活性，可以通过插件和样式表对浏览器的外观和功能进行自定义。

  3. Safari：WebKit引擎

    WebKit引擎最初是由苹果公司开发的，是基于KHTML引擎发展而来的，它具有较快的渲染速度和较好的性能表现，同时也支持HTML5和CSS3等新技术。

  4. Opera：Blink引擎

    Opera最初采用自主开发的Presto引擎，但在2013年后改为使用Blink引擎，与Chrome和Edge浏览器使用同一引擎，具有类似的渲染效果和性能。

  5. IE：Trident引擎（已停止更新）

    IE浏览器采用Trident引擎，这是微软自主开发的，早期版本的渲染引擎效率较低，对标准的支持也比较欠缺，但后期版本已经有所改善，例如IE11已经支持了大部分HTML5和CSS3标准。不过，IE浏览器的市场份额在逐步下降，微软也已经停止对它的更新和维护。

注意点：

  • 渲染引擎不同，导致解析相同代码时的速度、性能、效果也不同的。
  • 谷歌浏览器的渲染引擎速度快、性能高、效果好，所以更吸引用户的喜爱(前端工程师推荐使用)

Web标准

为什么需要Web标准?

  • 不同浏览器的渲染引擎不同，对于相同代码解析的效果会存在差异
    • 如果用户想看一个网页，结果用不同浏览器打开效果不同，用户体验极差!
  • Web标准：让不同的浏览器按照相同的标准显示结果，让展示的效果统一!

image-20230224011630126


Web标准的主要构成

构成 语言 说明
结构 HTML（Hypertext Markup Language） 页面元素和内容
表现 CSS（Cascading Style Sheets） 网页元素的外观和位置等页面样式（颜色、大小等）
行为 JavaScript 网页模型的定义与页面交互（动态效果）
DOM（Document Object Model） 定义了 Web 页面的结构和元素之间的关系。
XML（Extensible Markup Language） 种通用的标记语言，可以用于 Web 数据传输和存储。
XHTML（Extensible Hypertext Markup Language） 一种基于 XML 的 HTML，它强制实施了更严格的语法规则，以提高 Web 页面的可访问性和可维护性。
HTTP（Hypertext Transfer Protocol） 定义了 Web 服务器和客户端之间的通信协议。
  1. Web 服务标准：包括 SOAP、WSDL 和 UDDI 等，用于支持 Web 应用程序之间的互操作性。
  2. Web 访问性标准：包括 WCAG（Web Content Accessibility Guidelines）等，用于确保 Web 页面对残障人士和老年人等特殊用户群体的可访问性。
  3. Web 安全标准：包括 SSL/TLS、OAuth 和 OpenID 等，用于保护 Web 应用程序和用户数据的安全性。

Web标准的记忆方法

Web标准要求页面实现：结构、表现、行为三层分离。

image-20230224012928208


HTML认知

什么是HTML？

HTML (Hyper Text Markup Language）中文译为：超文本标记语言

  • HTML不是―种编程语言，而是一种标记语言

  • 标记语言是一套标记标签( markup tag )

  • HTML使用标记标签来描述网页

  • HTML文档包含了HTML标签及文本内容

  • HTML文档也叫做web页面

  • 是一种用于创建网页的标准标记语言，可以用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。

  • 专门用于网页开发的语言，主要通过HTML标签对网页中的文本、图片、音频、视频等内容进行描述。


HTML版本

从初期的网络诞生后，已经出现了许多HTML版本:

版本 发布时间
HTML 1991
HTML+ 1993
HTML 2.0 1995
HTML 3.2 1997
HTML 4.01 1999
XHTML 1.0 2000
HTML5 2012
XHTML5 2013

HTML文档的后缀名

  • .html
  • .htm

.html 和 .htm 都是文件扩展名，用于标识 HTML 文件。这两个扩展名在本质上没有任何区别，它们可以互相替代使用，没有任何功能或性能方面的区别。

历史上，早期版本的操作系统和网络服务器可能对文件名长度有限制，因此 .htm 成为了一些系统中的首选扩展名。然而，现代的操作系统和网络服务器没有这个限制，因此 .html 成为更为普遍的扩展名，而 .htm 则变得相对不太常见。

因此，无论你选择使用 .html 还是 .htm 扩展名，它们都可以正常使用，并且在现代的操作系统和网络服务器上都不会有任何区别。推荐统一使用 .html


HTML 标签

HTML 标记标签通常被称为 HTML 标签 (HTML tag)。

格式： 双标签： <标签>内容</标签>

​    单标签： <标签 />

  • HTML 标签是由 尖括号 包围的关键词，比如 <html>
  • HTML 标签通常是 成对出现 的，比如<b> 和 </b>
  • 标签对中的第一个标签是 开始标签（start tag），第二个标签是 结束标签（end tag）
  • 开始和结束标签也被称为 开放标签（opening tag）和 闭合标签（closing tag）
  • 注意：单标签的 / 在单词右边（<br />如、<hr />），双标签的 / 在结束符单词的左边（如<b> </b>）

标签的结构图

image-20230227234719123


结构说明

  1. 标签由<、>、/、英文单词或字母组成。并且把标签中<>包括起来的英文单词或字母称为标签名
  2. 常见标签由两部分组成，我们称之为：双标签。前部分叫开始标签，后部分叫结束标签，两部分之间包裹内容
  3. 少数标签由一部分组成，我们称之为：单标签。自成一体，无法包裹内容。
  4. 内容需要开始结束的就用双标签，不需要特别记忆！

不要忘记结束标签

即使您忘记了使用结束标签，大多数浏览器也会正确地显示 HTML：

<p>这是一个段落
<p>这是一个段落

以上实例在浏览器中也能正常显示，因为关闭标签是可选的。

但不要依赖这种做法，忘记使用结束标签会产生不可预料的结果或错误。


HTML 提示：使用小写标签

HTML 标签对大小写不敏感：<P> 等同于<p>。许多网站都使用大写的 HTML 标签。

W3School 使用的是小写标签，因为万维网联盟（W3C）在 HTML 4 中推荐使用小写，而在未来 (X)HTML 版本中强制使用小写。


标签之间的关系

image-20230227235221521


HTML 文档 = 网页

  • HTML 文档描述网页
  • HTML 文档包含 HTML 标签 和 纯文本
  • HTML 文档也被称为网页

Web 浏览器的作用是读取 HTML 文档，并以网页的形式显示出它们。浏览器不会显示 HTML 标签，而是使用标签来解释页面的内容：

<html>
<body>

	<h1>我的第一个标题</h1>

	<p>我的第一个段落。</p>

</body>
</html>

例子解释

  • <html> 与 </html> 之间的文本描述网页
  • <body> 与 </body> 之间的文本是可见的页面内容
  • <h1> 与 </h1> 之间的文本被显示为标题
  • <p> 与 </p> 之间的文本被显示为段落

HTML网页结构

  • 网页类似于一篇文章:
    • 每一页文章内容是有固定的结构的，如：开头、正文、落款等
    • 网页中也是存在固定的结构的，如：整体、头部、标题、主体
  • 网页中的固定结构是要通过特点的HTML标签进行描述的

实例：

<!DOCTYPE html>
<html>
  <head>
	  <meta charset="utf-8">
	  <title>第一个网页</title>
  </head>
  <body>

	  <h1>我的第一个标题</h1>
	  <p>我的第一个段落。</p>

  </body>
</html>

解析：

image-20230227164301029

  • <!DOCTYPE html> 声明为 HTML5 文档
  • <html> 元素是 HTML 页面的根元素
  • <head> 元素包含了文档的元（meta）数据，如 <meta charset="utf-8"> 定义网页编码格式为 utf-8，可解决中文乱码问题！
  • <title> 元素描述了文档的标题
  • <body> 元素包含了可见的页面内容
  • <h1> 元素定义一个大标题
  • <p> 元素定义一个段落

注：在浏览器的页面上使用键盘上的 F12 按键开启调试模式，就可以看到组成标签。


网页结构图

image-20230224020657355

只有 < body> 区域 (白色部分) 才会在浏览器中显示。


<!DOCTYPE> 声明

<!DOCTYPE>声明有助于浏览器中正确显示网页。

网络上有很多不同的文件，如果能够正确声明HTML的版本，浏览器就能正确显示网页内容。

doctype 声明是不区分大小写的，以下方式均可：

<!DOCTYPE html>

<!DOCTYPE HTML>

<!doctype html>

<!Doctype Html>

通用声明

HTML5
<!DOCTYPE html>
HTML 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
XHTML 1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
注意：

在HTML 4.01中，<!DOCTYPE> 声明需要引用DTD（文档类型声明），是因为DTD定义了HTML文档中可以使用的元素、属性、实体等内容的规范，而 <!DOCTYPE>声明则指定了使用的DTD版本 。这样可以确保在不同的浏览器和平台上，HTML文档能够以相同的方式被正确解析和显示。

DTD还可以帮助开发人员编写更具可读性、可维护性和可扩展性的HTML文档。通过使用DTD，开发人员可以确保他们的HTML文档遵循标准规范，从而避免了在不同浏览器和平台上出现不一致的显示和解析问题。

总之，HTML 4.01中<!DOCTYPE>声明引用DTD是为了确保HTML文档的正确解析和显示，并且促进编写高质量、可读性、可维护性和可扩展性的HTML文档。


HTML 元素

HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。

“HTML 标签” 和 “HTML 元素” 通常都是描述同样的意思。但是严格来讲, 一个 HTML 元素包含了开始标签与结束标签。

开始标签 元素内容 结束标签
<p> 这是一个段落 </p>
<a href="default.htm" > 这是一个链接 </a>
<br />

HTML 元素语法

  • HTML 元素以开始标签起始，结束标签终止
  • 元素的内容是开始标签与结束标签之间的内容
  • 某些 HTML 元素具有空内容（empty content）
  • 空元素在开始标签中进行关闭（以开始标签的结束而结束，如<br />）
  • 大多数 HTML 元素可拥有属性

提示：后续章节学习更多有关属性的内容。


嵌套的 HTML 元素

大多数 HTML 元素可以嵌套（可以包含其他 HTML 元素）。

HTML 文档由嵌套的 HTML 元素构成。


HTML 文档实例

<html>

<body>	
	<p>这是第一个段落</p>
</body>

</html>

上面的例子包含三个 HTML 元素。


HTML 实例解释

<p>元素：

<p>这是第一个段落</p>

这个<p> 元素定义了 HTML 文档中的一个段落。
这个元素拥有一个开始标签<p> 以及一个结束标签 </p>
元素内容是：这是第一个段落。


<body>元素：

<body>
	<p>这是第一个段落。</p>
</body>

<body> 元素定义了 HTML 文档的主体。
这个元素拥有一个开始标签<body> 以及一个结束标签 </body>。
元素内容是另一个 HTML 元素（p 元素）。


<html>元素：

<html>

<body>
	<p>这是第一个段落。</p>
</body>

</html>

<html> 元素定义了整个 HTML 文档。
这个元素拥有一个开始标签 <html> ，以及一个结束标签 </html>。
元素内容是另一个 HTML 元素（body 元素）。


HTML 空元素

没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。

<br> 就是没有关闭标签的空元素（<br> 标签定义换行）。

在 XHTML、XML 以及未来版本的 HTML 中，所有元素都必须被关闭。

在开始标签中添加斜杠，比如<br />，是关闭空元素的正确方法，HTML、XHTML 和 XML 都接受这种方式。

即使 <br> 在所有浏览器中都是有效的，但使用 <br /> 其实是更长远的保障。


HTML属性

HTML 标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。

属性总是以名称/值对的形式出现，比如：name=“value”。

属性总是在 HTML 元素的开始标签中规定，多个属性空格隔开。


属性实例1：

HTML 超链接由 <a> 标签定义。超链接的地址在 href 属性中指定，网页打开方式有target属性指定，多个属性以空格间隔：

<a href="http://www.w3school.com.cn" target="_blank">This is a link</a>

属性实例2：

<h1> 定义标题的开始。

<h1 align="center">拥有关于对齐方式的附加信息。

<h1 align="center">看看我是不是居中显示了</h1>

属性实例3：

<table> 定义 HTML 表格。

<table border="1"> 拥有关于表格边框的附加信息。


HTML 提示：使用小写属性

属性和属性值对大小写不敏感。

不过，万维网联盟在其 HTML 4 推荐标准中推荐小写的属性/属性值。

而新版本的 (X)HTML 要求使用小写属性。


始终为属性值加引号

属性值应该始终被包括在引号内。双引号是最常用的，不过使用单引号也没有问题。

在某些个别的情况下，比如属性值本身就含有双引号，那么您必须使用单引号，例如：

name='Bill "HelloWorld" Gates'

页面编码问题

中文编码

目前在大部分浏览器中，直接输出中文会出现中文乱码的情况，这时候我们就需要在头部将字符声明为 UTF-8 或 GBK。

对于中文网页需要使用< meta charset=“utf-8”>声明编码，否则会出现乱码。有些浏览器(如 360 浏览器)会设置 GBK 为默认编码，则你需要设置为 < meta charset=“gbk”> 。


UTF8与UTF-8的区别

在实际使用中，通常把 UTF-8 和 UTF8 视为相同的编码方式，它们的使用没有任何不同之处。

UTF-8 是一种变长编码方式，能够表示 Unicode 字符集中的所有字符，每个字符使用 1~4 个字节表示。在计算机中，UTF-8 编码通常以字节序列的形式存储，也就是以二进制的方式表示。UTF-8 通过特定的编码方式，将 Unicode 字符映射为二进制字节序列。

UTF8 也是一种变长编码方式，用于表示 Unicode 字符集中的所有字符。与 UTF-8 不同的是，UTF8 是一种纯文本格式，不会以字节序列的形式存储，而是以纯文本字符串的形式表示。

虽然 UTF-8 和 UTF8 本质上是相同的编码方式，但在实际使用中，不同的编程语言、框架和系统可能对它们的支持和解释存在一些细微的差异。因此，建议在使用 UTF-8/UTF8 编码时，应该遵循具体的标准和规范，以确保代码和数据的正确性和兼容性。


HTML 编辑器

文本编辑器

  • 系统自带的.txt文本编辑器
  • Notepad (PC)
  • TextEdit (Mac)
  • vi / vim（linux）

网页初体检：文字加粗

            这行文字没加粗
    <strong>这行文字加粗了</strong>
  1. 在代码文件夹中点击鼠标右击→新建文本文档→命名为：文字变粗案例.txt
  2. 双击这个文件，输入如上代码内容→记得保存！
  3. 在文件上点击鼠标右键→重命名→修改文件后缀名为文字变粗案例.html或.htm（建议使用.html后缀名）
  4. 双击文字变粗案例.html，浏览器会自动打开文件并显示之前输入的内容

image-20230224014320970

浏览器运行界面效果图：

image-20230224014345733


电脑文件显示后缀名

打开此电脑，点击上方查看按钮，勾选文件扩展名。

image-20230224014448019


VS Code

VSCode（Visual Studio Code）是一款由微软推出的轻量级代码编辑器，它支持多种编程语言，并提供了丰富的插件扩展功能，同时支持 Windows 、 Linux 和 macOS 等操作系统且开放源代码是广受程序员喜爱的一款编辑器。

VS Code下载地址：https://code.visualstudio.com/ ，选择对应操作系统的下载链接，下载并安装VSCode。

VS Code 安装教程参考：https://www.runoob.com/w3cnote/vscode-tutorial.html


注意：为了后期的稳定性，安装路径切勿使用中文路径，最后安装页面记得勾选全部选项

image-20230227230855631


安装汉化包

VScode 安装汉化包很简单，打开 VScode，点击安装扩展，在搜索框输入 Chinese，然后点 Install 就可以：

image-20230227231051172


界面说明

以下是 VScode 启动后的界面，简单说明如图：

image-20230227231113883


安装插件

  1. open in browser，安装该插件后 可使用快捷键 Alt+b 直接打开网页观看页面效果。

image-20230227231541575

  1. Bracket Pair Colorization Toggler，对括号进行着色，能更直观的观看代码。

image-20230227231948436

  1. CSS Peek，允许将 css ID 和类字符串作为从 html 文件到相应 CSS 的定义进行窥视。允许速览和转到定义。

image-20230227232121898

  1. Auto Rename Tag，自动重命名配对的 HTML/XML 标记，更快的智能的修改对应标签。

image-20230227232301936

可以根据自身喜好安装对应的插件，更多好用的插件等待你们的发现！！！


创建网页的步骤

  • 双击打开VS Code软件
  • 将代码文件夹用鼠标左键按住不放，拖拽到VS Code窗口中，文件夹会显示在左侧目录上
  • 点击目录上的+新建文件按钮创建页面，注意：文件后缀名需要是.html

image-20230227232756404


基本快捷键

  1. 快速生成标签： 标签对应的 英文 + Tab (或 回车)

  1. 保存文件: Ctrl + S

    注意1：写完文件之后务必需要保存文件，否则网页无变化

    注意2：可以设置自动保存省去每次保存的麻烦。

image-20230227233746189


  1. 快速查看网页效果：右击→Open in Default Brow:

​ 快捷键: Alt + b

​ 注意：必须安装了open in browser 插件

image-20230227233513493


  1. 快速生成结构标签：!+ Tab (或回车)

​ 注意1：!必须是英文的，中文！无效

​ 注意2：必须保证当前文件后缀名是 .html，否则无效。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

  1. 快速复制一整行：Ctrl + C
  2. 快速粘贴一整行：Ctrl + V
  3. 快速删除(剪切)一整行：Ctrl + X
  4. 打开/关闭侧边栏：Ctrl + B
  5. 打开命令面板：Ctrl + Shift + P
  6. 移动当前行上下：Alt + ↑ 或 Alt + ↓
  7. 格式化代码：Shift + Alt + F 或者自动保存会格式化代码
  8. Table 可以使代码后退，Shift + Table 可以前进

vs Code自动生成的骨架多了其他标签，之后会介绍


HTML注释

<!-- 在此处写注释 -->

注释：在开始标签中有一个惊叹号!，但是结束标签中没有。

浏览器不会显示注释，但是能够帮助记录您的 HTML 文档。

可以利用注释在 HTML 中放置通知和提醒信息。


注释的作用

为代码添加的具有解释性、描述性的信息，主要用来帮助开发人员理解代码

浏览器执行代码时会忽略所有的注释


条件注释

条件注释定义只有 Internet Explorer 执行的 HTML 标签。

<!--[if IE 8]>
    .... some HTML here ....
<![endif]-->

软件程序标签

各种 HTML 软件程序也能够生成 HTML 注释。

例如 标签会被包围在由 FrontPage 和 Expression Web 创建的 HTML 注释中。

作为一项规则，这些标签的存在，有助于对创建这些标签的软件的支持。


vs code快捷键

在VS Code中：Ctrl + /

再按一次快捷键，可以取消注释。

image-20230227234330134


css、JavaScript中的注释写法

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 在这里写对css的注释 */
    </style>
</head>

<body>
    <!-- HTML注释样式 （在这里写对html的注释） -->
</body>
    
<script>
        // 单行注释样式（在这里写对JavaScript的注释）

    /* 多行
       注释（在这里写对JavaScript的注释）*/
</script>

</html>

猜你喜欢

转载自blog.csdn.net/qq_53139964/article/details/129252976
今日推荐
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
周排行
rbac——界面、权限
Apache CXF + SpringMVC 整合发布WebService
so插件化
Vue.js实战系列---图标字体制作（svg格式）
PAT乙级 1007 素数对猜想(孪生素数对) (20分) ---（C语言 + 详细注释）
被IRM保护的文档，打开失败
Calendar和Date计算日期差的小问题
win10子系统ubuntu18.4安装docker
利用Wrap Shell Script定位Android Native内存泄漏
MySQL: Transaction (Part I - Basic Concept)
每日归档
更多
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022