初识HTML

最新推荐文章于 2024-10-29 14:54:04 发布
最新推荐文章于 2024-10-29 14:54:04 发布
阅读量146 收藏
点赞数
分类专栏： 前端HTML 文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42260493/article/details/107909703
版权

什么是HTML？

  • HTML 指的是超文本标记语言: HyperText Markup Language
  • HTML 不是一种编程语言，而是一种标记语言
  • 标记语言是一套标记标签 (markup tag)
  • HTML 使用标记标签来描述网页
  • HTML 文档包含了HTML 标签及文本内容
  • HTML文档也叫做 web 页面

HTML 标签

  • HTML 标签是由尖括号包围的关键词，比如
  • HTML 标签通常是成对出现的，比如 和
  • 标签对中的第一个标签是开始标签，第二个标签是结束标签
  • 开始和结束标签也被称为开放标签和闭合标签

HTML 元素

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

HTML 文档 = 网页

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

Web 浏览器

  • Web浏览器（如谷歌浏览器，Internet Explorer，Firefox，Safari）是用于读取HTML文件，并将其作为网页显示。
  • 浏览器并不是直接显示的HTML标签，但可以使用标签来决定如何展现HTML页面的内容给用户

HTML网页结构

<html>
	<head>
		<title></title>
	</head>
	<body>
		<h1>这是一个标题</h1>
		<p>这是第一个段落</p>
		<p>这是第二个段落</p>
	</body>
</html>

只有 < body >区域 才会在浏览器中显示，如下：
初识HTML

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

HTML版本

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

版本发布时间
HTML1991
HTML+1993
HTML 2.01995
HTML 3.21997
HTML 4.011999
XHTML 1.02000
HTML52012
XHTML52013

<!DOCTYPE> 声明

  • 声明有助于浏览器中正确显示网页, < !DOCTYPE>标签没有结束标签
  • 声明位于文档中的最前面的位置，处于 < html > 标签之前
  • 声明不是一个 HTML 标签；它是用来告知 Web 浏览器页面使用了哪种 HTML 版本。
  • 在 HTML 4.01 中，<!DOCTYPE> 声明需引用 DTD （文档类型声明），因为 HTML 4.01 是基于 SGML （Standard Generalized Markup Language 标准通用标记语言）。DTD 指定了标记语言的规则，确保了浏览器能够正确的渲染内容
  • HTML5 不是基于 SGML，因此不要求引用 DTD
  • 提示：总是给您的 HTML 文档添加 <!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 编辑器

   系统自带的文本编辑器

  • 每一种操作系统都带有简单的文本编辑器，只需要把文件后缀名改为.html即可
  • Windows 用户可以使用记事本
  • Linux 用户可以选择几种不同的文本编辑器，如 vi、vim 或者 emacs
  • Mac 用户可以使用 OS X 预装的 TextEdit

   专业的 HTML 编辑器

   可以使用专业的 HTML 编辑器来编辑 HTML，为大家推荐几款常用的编辑器

你可以从以上软件的官网中下载对应的软件，按步骤安装即可，以下我们介绍VS Code

VS Code

VS Code（全称 Visual Studio Code）是一个由微软开发，同时支持 Windows 、 Linux 和 macOS 等操作系统且开放源代码的代码编辑器，编辑器中内置了扩展程序管理的功能

**1.安装好并打开VS Code **
打开VS Code
2. 新建 HTML 文件
选择" 文件(F)->新建文件(N) "，在新建的文件中输入以下代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>页面标题</title>
    </head>
    <body>
        <h1>我的第一个标题</h1>
        <p>我的第一个段落。</p>
    </body>
</html>

新建文件

3. 另存为 HTML 文件
然后选择" 文件(F)->另存为(A) "，文件名为 runoob.html:
另存为1
另存为2
在这里插入图片描述

4.在浏览器中运行这个 HTML 文件
鼠标右击编辑器上的文件名，选择在资源管理器中显示
在资源管理器中显示1
双击HTML文件在浏览器中打开
在资源管理器中显示1
在浏览器中的效果
在资源管理器中显示2

HTML基础

HTML 标题
  • HTML 标题（Heading）是通过<h1> - <h6> 标签来定义的
<h1>这是一个标题</h1>
<h2>这是一个标题</h2>
<h3>这是一个标题</h3>

标题

HTML 段落
<p>这是一个段落。</p>
<p>这是另外一个段落。</p>

段落

HTML 链接
<a href="https://www.baidu.com">这是一个链接,单击我会跳转到百度</a>

超链接

HTML 图像
<img src="/img/w3clogo.jpg" width="258" height="39" />

w3clogo

叶子上的考拉
关注
专栏目录
HTML5初识
weixin_48152652的博客
04-07 1304
初识HTML HTML（Hyper Text Markup Language）俗称超文本标记语言 HTML发展史：目前已经发展到HTML5版本 HTML5，提供了一些新的元素和一些有趣的新特性，同时也建立了一些新的规则。这些元素，特性和规则的建立，提供了许多新的网页功能，如使用网页实现动态渲染图形，图表，图像和动画，以及不需要安装任何插件直接使用网页播放视频等。 W3C World Wide Web Consortium(万维网联盟) 成立于1994年，Web技术领域最权威和具影响力的国际中立
初识HTML5，认识html
03-05
【初识HTML5，认识HTML】 HTML5是超文本标记语言（HyperText Markup Language）的第五个版本，是用于创建网页的标准标记语言。自2014年正式发布以来，HTML5已经成为现代网页开发的核心，它极大地提升了用户体验，...
初识HTML（详细版）
wrrtx的博客
07-24 1625
尽可能讲述html的基本知识以及演示代码
初识html
m0_50843980的博客
04-12 756
html基础
HTML之初识HTML
manong3041的博客
10-18 544
一、初识HTML 目录：初识HTML、网页基本信息、网页基本标签 1.初识HTML 1）什么是HTML? Hyper Text Markup Language（超文本标记语言） 超文本包括：文字、图片、音频、视频、动画等。 2）HTML的发展史 HTML的发展历程 HTML在1993年6月互联网工程工作小组工作案发布（并非标准）。 HTML2.0—1995年11月作为RFC1866发布，在RFC2854于2000年6月发布之后被宣布过时。 HTML3.2—1996年1月14日，W3C推荐标准。 HTML
[HTML]初识html
qq_43587354的博客
07-16 760
文章目录1.初识HTML超文本的含义1.1骨架标签1.2标签元素分类1.3标签之间的关系1.4HTML常用标签1.4.1 排版标签1）标题标签h2）段落标签p3）水平线标签hr4）换行标签br5）div 和 span标签(重点)排版标签总结1.4.2文本格式化标签1.4.3图像标签img1.4.4链接标签1.4.5注释标签 1.初识HTML HTML 指的是超文本标记语言 (Hyper Text Markup Language)是用来描述网页的一种语言。 HTML 不是一种编程语言，而是一种标记语言 (
初识html 表格
thisisbigbai的博客
09-05 163
html 学习笔记
初识HTML5（通俗易懂）
知足上进，不负野心。
09-18 3484
文章目录一、HTML5文档基本格式二、HTML5语法三、HTML标记1.单标记2.双标记3.注释标记4.案例分析四、标记的属性五、HTML文档头部相关标记1.标题标记2.元信息标记3.外部文件标记4.内嵌样式标记5.案例六、使用步骤1.引入库1.引入库1.引入库 一、HTML5文档基本格式 1.<!doctype>标记 <!doctype html> <!doctype>标记位于文档最前面，用于向浏览器说明当前文档使用哪种HTML标准规范。 2.<html>
初识HTML技术
buhuisuanfa的博客
03-05 2182
我们的html元素包含了其他所有所有也称为根元素，我们的head元素包含的是不用展示内容的元素，如title,link,meta,有点头文件的感觉，body元素包含了我们为用户展现内容的元素，例如我们即将学习的文本，图片，视频，音频，超链接等元素。所以我们要想搭建一个网站，仅仅能够搭建后端服务器，也要搭建前端页面，这里虽然不用我们写很复杂的前端内容，但基本的内容要会写，大概的能够看懂前端代码。这样我们的第一个网页就完成了，但是我们这个html的代码不太合法，因为我们的HTML是一个。
初识html总结
weixin_57110607的博客
12-14 264
html 网页制作基本语法 CSS
《初识HTML5—当当网图书分类页面》上机作业.rar_html作业当当_当当htmlcss_当当网_当当网html_当当网图书
07-15
这是一个当当网主页的HTML+CSS代码实现，希望对大家有用
【HTML5】->初识HTML->HTML简单介绍&HTML5基本元素讲解
01-08
HTML边缘探索Ⅰ HTML简介Ⅱ HTML到HTML5—-HTML发展历史Ⅲ HTML5简介Ⅳ HTML5环境Ⅴ HTML5基本元素介绍Ⅵ 写一个最简单的HTML程序 Ⅰ HTML简介 超文本标记语言（Hyper Text Markup Language），缩写为HTML，标准通用...
第2章---初识HTML5ppt课件(全).ppt
06-08
第2章---初识HTML5ppt课件(全).ppt
HTML入门教程4：HTML属性
软考鸭
10-29 871
HTML属性是附加在HTML标签上的额外信息，它们以键值对的形式出现，并放置在标签的起始部分内。这些属性为浏览器提供了额外的指令，以更准确地渲染网页内容。通过本文的介绍，相信大家对HTML属性有了更深入的了解。HTML属性是网页开发中的基础且重要的部分，它们能够极大地增强网页的功能和表现力。在实际开发中，我们应该灵活运用HTML属性，结合CSS和JavaScript等技术，创造出更加丰富和动态的网页内容。同时，也希望大家能够在开发过程中不断学习和探索新的HTML属性，以提升自己的网页开发技能。
HTML入门教程18：HTML类
软考鸭
10-29 296
在HTML中，你使用class属性来为元素分配类名。类名可以是任何你选择的名称，但最好使用能够描述元素用途或样式的名称。类名前面用一个点（.）表示，但在HTML中给元素分配类名时不需要这个点。< div class = " my-class " > 这是一个具有类的div元素 < div class = " my-class " > 这是一个具有类的div元素 < div class = " my-class " > 这是一个具有类的div元素
炫酷的登录框!(附源码)
最新发布
m0_50864141的博客
10-29 1790
【代码】炫酷的登录框!(附源码)
HTML 约束验证
liuxiaoqi_123的博客
10-28 802
HTML5引入了表单相关的一些新机制：它为<input>元素和约束验证增加了一些新的语义类型，使得客户端检查表单内容变得容易。基本上，通过设置一些新的属性，常用的约束条件可以无需 JavaScript 代码而检测到；对于更复杂的约束条件的校验可以尝试使用约束验证 API。
HTML5+CSS3前端开发教程：从零基础到初识HTML
为了帮助学习者巩固知识点，本章节提供了相应的源码文件名为“初识HTML”，学习者可以通过这些源码来查看HTML的基本结构，并进行实践操作。通过实际的代码编写和查看结果，学习者可以更直观地理解HTML的基本元素和...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值