提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  Javascript

当前栏目

HTML 核心篇：第一个网页

地址 下载 HTML 插件
2023-03-07 09:08:23 时间

扩展： 推荐使用的编辑器：VS code (Visual Studio Code)，关于这款编辑器的好处以及下载地址已经在概述一篇简要提过了，如果有想要详细了解的请去vscode官网查看详细信息，这里提供下载地址和官网地址下载地址：https://code.visualstudio.com/，点击Download即可下载 详细介绍地址：https://code.visualstudio.com/docs 使用vscode时暂时推荐下载的插件：element插件 -> 打开vscode后点击左侧侧边栏的扩展，然后搜索下载 HTML、CSS插件 -> 直接搜索HTML或者CSS下载

image.png
image.png
image.png
w
image.png
了解其他插件的同学，可以自己先去搜一下有助于开发使用的插件，后期我会出一篇关于介绍好用的vscode插件的文章。 推荐使用的浏览器：Google Chrome (谷歌浏览器)，这里提供下载地址和开发工具介绍地址下载地址：https://www.google.com/intl/zh-CN/chrome/ 开发工具介绍：https://developer.chrome.com/docs/devtools/

好了，做完准备工作，我们就正式开始快乐的编程吧。?

第一个网页

<!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>

扩展： 这里可以通过使用vscode的快捷键 ！+回车键或者在文件中打出 html:5 + 回车，快速生成基本的HTML页面结构 注意⚠️：html文件的文件结束名是.html，就像你使用电脑的文本编辑器创建一个文本文件的结束名是.txt

image.png
的文件前加上对应的icon图标，除了美观、使项目结构更清晰外，没有任何用处，后期我会在介绍vscode插件时更详细的介绍这个Icon图标插件。
image.png

注释

注释为代码的阅读者提供帮助，注释不参与运行

在HTML中，注释使用如下格式书写：

<!-- 注释内容 -->

元素

扩展：其他叫法：标签、标记

<!-- a 标签 -->
<a href = "https://www.taobao.com"></a> 
<!-- title 标签 -->
<title>标题</title>

标签整体：element （元素）

元素 = 起始标记（begin tag） + 结束标记（end tag） + 元素内容 + 元素属性

属性 = 属性名 + 属性值

属性的分类：

  • 局部属性：某些元素特有的属性
  • 全局属性：所有元素通用

<meta charset="UTF-8">

有些元素没有结束标记，这样的元素叫做：空元素

空元素的两种写法：

  1. <meta charset="UTF-8">
  2. <meta charset="UTF-8" />

元素不能相互嵌套

例：

<div>
  <span></span>
  <a></a>
</div>
<!-- 可以✅ -->
<div>
  <span>
</div>
</span>
<!-- 不可以❌ -->

衍生出以下叫法：

父元素、子元素、祖先元素、后代元素、兄弟元素（拥有同一个父元素的两个元素）标准的文档结构HTML：页面、HTML文档

<!DOCTYPE html>

文档声明，告诉浏览器，当前文档使用的HTML标准是HTML5。不写文档声明，将导致浏览器进入怪异渲染模式。

<html lang="en"></html>

根元素，一个页面最多只能一个，并且该元素是所有其他元素的父元素或祖先元素。HTML5版本中没有强制要求书写该元素。

lang属性：language，全局属性，表示该元素内部使用的文字是使用哪一种自然语言书写而成的。

<head></head>

文档头，文档头内部的内容，不会显示到页面上。

<meta>

文档的元数据：附加信息。

charset：指定网页内容编码。

简要介绍下计算机方面的知识：

计算机怎么识别二进制：计算机中，低压电（0~2 V）0，高压电（2~5 V）1，表示2，使用10，计算机中，只能存储数字。所以需要设计一种标准，让文字和数字进行对应，间接的让计算机可以识别文字。

比如：a —— 97， A —— 64，可以理解为计算机中有一部字典大全，这部字典大全做字符编码表，GB2312，GBK

UTF-8 是 Unicode 编码的一个版本

<title>Document</title>

网页标题

<body></body>

文档体，页面上所有要参与显示的元素，都应该放置到文档体中。

<!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>小明的网购之旅</title>
</head>

<body>
    <h1>买个东西吧</h1>
    <a href="https://www.taobao.com">淘一下?</a>
    <!-- 元素的嵌套 -->
    <div>
        <p>假货，拒绝退款?</p>
    </div>
    <h1>卸载</h1>
</body>

</html>

标题渲染：

image.png

网页渲染：

image.png

相关文章