首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >HTML 核心篇:第一个网页

HTML 核心篇:第一个网页

原创
作者头像
qishilong
修改于 2023-02-10 15:50:55
修改于 2023-02-10 15:50:55
7060
举报

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

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

第一个网页

代码语言:html
AI代码解释
复制
<!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
image.png
的文件前加上对应的icon图标,除了美观、使项目结构更清晰外,没有任何用处,后期我会在介绍vscode插件时更详细的介绍这个Icon图标插件。
image.png
image.png

注释

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

在HTML中,注释使用如下格式书写:

<!-- 注释内容 -->

元素

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

代码语言:html
AI代码解释
复制
<!-- 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" />

元素不能相互嵌套

例:

代码语言:html
AI代码解释
复制
<div>
  <span></span>
  <a></a>
</div>
<!-- 可以✅ -->
代码语言:html
AI代码解释
复制
<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>

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

代码语言:html
AI代码解释
复制
<!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

网页渲染:

image.png
image.png

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
HTML
浏览器(browser application)是用来访问和浏览万维网页面的客户端软件,是显示、运行网页的平台。
用户9615083
2022/12/25
4K0
HTML
HTML标签(一)
每个网页都会有一个基本的结构标签(也称为骨架标签),页面内容也是在这些基本标签上书写。 HTML页面也称为 HTML 文档.
P_M_P
2024/01/18
6770
HTML标签(一)
HTML:相关概念以及标签
网页就是网站的一页,网页就是一个后缀为html的文件,通过浏览器读取然后就是我们所看到的各中有画面的网页了;不信?我们在一个网页中右键点击打开网页源代码,你就会发现源代码就是就是使用的html语言写的;
啊QQQQQ
2024/11/19
1030
HTML:相关概念以及标签
HTML零基础入门教学
下面我们来看看一个基本的HTML文件结构式什么样的。打开记事本,新建一个文件,写上下面的代码:
小灵蛇
2024/12/18
4841
HTML零基础入门教学
HTML入门完全指南:从零开始构建你的第一个网页
每个网页都会有一个基本的结构标签(也称为骨架标签),页面内容也是在这些基本标签上写
IsLand1314
2025/03/08
8650
HTML入门完全指南:从零开始构建你的第一个网页
【Web前端技术】第二节—HTML标签(上)
2. HTML 标签 通常是成对出现的 ,例如 <html> 和 </html> ,我们称为 双标签。 标签对中的第一个标签是开始标签,第二个标签是结束标签。
云边有个稻草人
2025/04/18
1630
【Web前端技术】第二节—HTML标签(上)
HTML 笔记
超文本标记语言(HyperText Markup Language)浏览器能够识别和解析的语言,通过标签的形式构建页面结构和填充内容
杨丝儿
2022/02/24
2.3K0
HTML 笔记
【前端基础篇】HTML零基础速通
在 IDEA 中创建文件 xxx.html , 直接输入 ! , 按 tab 键, 此时能自动生成代码的主体框架.
半截诗
2024/10/09
2370
【前端基础篇】HTML零基础速通
【HTML】解锁 HTML :从零开始打造网页世界
从GPT到多模态AI-自然语言处理(NLP)技术突破:https://cloud.tencent.com/developer/article/2474495
Yui_
2024/12/07
2060
【HTML】解锁 HTML :从零开始打造网页世界
HTML结构
在 IDEA 中创建文件 xxx.html , 直接输入 ! , 按 tab 键, 此时能自动生成代码的主体框架.
半截诗
2025/03/08
2850
如何制作一个简单的网页(二)_简单的个人网页
HTML负责描述了网页的整体骨架 CSS负责描述了页面样式 利用其完成一个简单的个人建立网页。
全栈程序员站长
2022/11/07
2K0
如何制作一个简单的网页(二)_简单的个人网页
HTML基础02-HTML标签(上)
每个网页都有一个基本的结构标签(也称骨架标签),页面内容也是在这些基本标签上书写。HTML页面也称为HTML文档。
yangjiao
2021/03/04
9860
web前端入门
8 = html + css +javascript(jQuery和vue就是js封装的函数而已)
小闫同学啊
2019/07/18
1.3K0
前端 — HTML
标签之间的结构关系, 构成了一个 DOM 树 D: Document 文档 O: Object 对象 M: Model 模型
全栈程序员站长
2022/08/22
2.8K0
前端 — HTML
【Web世界探险家】HTML5 探索与实践
学习任何一门语言,首先要掌握它的基本格式,就像写信需要符合书信的格式要求一样。学习 HTML ,同样需要掌握 HTML 的基本格式。
爱敲代码的小杨.
2024/05/07
2000
【Web世界探险家】HTML5 探索与实践
前端基础:HTML
HTML 是一种描述网页语言, 指的是超文本标记语言 (Hyper Text Markup Language)。其中,超文本指的是网页上可以包含图片,视频,连接信息。标记也叫做标签,所以标签书写的是<内容>。语言就是一种交流工具,HTML 是用户与浏览器之间交互工具。
RendaZhang
2020/09/08
2K0
【HTML】HTML 标签总结 ★★★ ( 标签类型 | 排版标签 | 文本格式化标签 | 标签属性 | 图像标签 | 链接标签 | 注释标签 | 锚点定位 | 预格式化文本标签 | 特殊符号 )
HTML 英文全称 " HyperText Mark-up Language " , 中文名称是 " 超文本标记语言 " ;
韩曙亮
2023/03/30
7.5K0
【HTML】HTML 标签总结 ★★★ ( 标签类型 | 排版标签 | 文本格式化标签 | 标签属性 | 图像标签 | 链接标签 | 注释标签 | 锚点定位 | 预格式化文本标签 | 特殊符号 )
2篇搞定CSS基础知识----第一篇
CSS层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML或者XML等文件样式的计算机语言。其扩展名为.css。CSS不仅可以静态的修饰网页,还可以配合各种脚本语言动态的对各网页元素进行格式化。
Lemon黄
2019/10/22
5200
2篇搞定CSS基础知识----第一篇
HTML 快速入门
HTML 是一种定义内容结构的标记语言。HTML由一系列元素组成,您可以使用这些元素来包含或包装内容的不同部分,以使其以某种方式显示或以某种方式执行。封闭的标签可以使单词或图像超链接到其他位置,可以斜体化单词,可以使字体变大或变小,等等;
HammerZe
2022/03/25
3.1K0
HTML 快速入门
创建第一个HTML网页
打开一个你喜欢的编辑器,这里的话,我用的是VScode,那么接下来我们就要开始写我们的第一个前端demo了。
守护最温柔的金木
2020/07/03
2.2K0
创建第一个HTML网页
相关推荐
HTML
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档