Web前端——HTML概述

已于 2022-02-11 15:51:34 修改
阅读量2k 收藏 7
点赞数
分类专栏： Web前端 文章标签： html html5
于 2020-07-02 18:05:53 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44853882/article/details/107007842
版权

文章目录

一. HTML简介

超文本标记语言（英语：Hyper Text Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。

您可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。
在这里插入图片描述

  • 网页本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器显示其中的内容（如：文字如何处理，画中画如何安排，图片如何显示）

1. 为什么要学习HTML5

在这里插入图片描述

2. 什么是HTML

HTML 是用来描述网页的一种语言。

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

3. HTML标签

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

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

例如：<标签>内容<标签>

4. HTML 元素

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

HTML 元素实例：<p>这是一个段落</p>

5. Web 浏览器

Web浏览器（如谷歌浏览器，Internet Explorer，Firefox，Safari）是用于读取HTML文件，并将其作为网页显示。

浏览器并不是直接显示的HTML标签，但可以使用标签来决定如何展现HTML页面的内容给用户

6. HTML 网页结构

在这里插入图片描述

在这里插入图片描述
只有<body>区域才会在浏览器中显示

3. HTML版本

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

(1). HTML5新特性

在这里插入图片描述

4. 编写一些简单的例子

在这里插入图片描述

第一个网页的例子：一首诗

```html
<html>
	<head>
		<title>哈哈，走一个</title>
	</head>
	<body>
		<h1>回乡偶书（二首）</h1>
		<h2>其一</h2>
		<h2>贺知章</h2>
		<p>少小离家老大回</p>
		<p>乡音无改鬓毛衰</p>
		<p>儿童相见不相识</p>
		<p>笑问客从何处来</p>
	</body>
</html>
```
结果：

在这里插入图片描述

第二个网页的例子：自结束标签和注释的解释

```html
<html>
	<head>
		<title>这是我的第二个网页</title>
	</head>
	<body>
		
		<!-- 这个东西很重要-->
		<h1>这是我的第二个网页</h1>
		
		<!--
		HTML的注释，注释中的内容会被浏览器所忽略，不会在网页中直接显示，
			但是可以在源码中查看注释，注释用来对代码进行解释说明的。
			开发中一定要养成良好的编写注释的习惯，注释要求简单明了
			
		注释还可以将一些不希望显示的内容隐藏
		
		注释不能嵌套
			
		标签一般成对出现，但是也存在一些自结束标签
		
		以下是自结束标签：自己把自己结束了，只有开始标签
		<img>或者写成<img />
		
		<input>或者写成<input />
		
		-->
		
	</body>
</html>
```


结果：

在这里插入图片描述

第三个网页中例子：标签中的属性

```html
<html>
	<head>
		<title>标签的属性</title>
	</head>
	<body>
	
	<!--
		属性，在标签中（开始标签或自结束标签）还可以设置属性
			属性是一个名值对（x=y）
			属性用来设置标签中的内容如何显示
			
			属性和标签名或其他属性应该使用空格隔开
			
			属性不能瞎写，应该根据文档中的规定编写
				有些属性有属性值，有些没有。如果有属性值，属性值应该使用引号括起来
	-->
	
		<h1>这是我的<font color="red" size='10'>第三个</font>网页！</h1>
	</body>
</html>
```
结果：

在这里插入图片描述

网页的第四个例子：文档声明+进制解释+字符编码解释+设置网页字符集

```html
<!doctype html>
<html>
	<head>
	<!-- 可以通过meta标签来设置网页的字符集，避免乱码问题 -->
		<meta charset="utf-8">
		<title>网页的基本结构</title>
	</head>
	<body>
	
	<!--
		迭代
			网页的版本
				HTML4
				XHTML2.0
				HTML5
				... 
			文档声明（doctype）
				-文档声明用来告诉浏览器当前网页的版本
				-HTML5的文档声明
				<!doctype html>
				<!Doctype HTML>
		
		进制
			十进制(日常使用)
				- 特点：满10进1
				- 计数：0 1 2 3 4 5 6 7 8 9 10 11 12 13 ... 19 20
				- 单位数字：10个（0-9）
				
			二进制（计算机底层的进制）
				- 特点：满2进1
				- 计数：0 1 10 11 100 101 110 111
				- 单位数字：2个（0-1）
				- 扩展
					- 所有数据在计算机底层都会以二进制的形式保存
					- 可以将内存想象为一个有多个小格子组成的容器，每一个小格子中可以存储一个1或一个0
						这一个小格子在内存中被称为一位（bit）
						
						8bit = 1byte（字节）
						1024byte = 1kb（千字节）
						1024kb = 1mb（兆字节）
						
			八进制（很少用）
				- 特点：满8进1
				- 计数：0 1 2 3 4 5 6 7 10 12 ... 17 20
				- 单位数字：8个（0-7）
			
			十六进制（一般显示一个二进制数字时，都会转换为十六进制）
				- 特点：满16进1
				- 计数：0 1 2 3 4 5 6 7 8 9 A B C D E F 10 11 12 ... 1A 1B 1C 1D 1E 1F 20...
				- 单位数字：16个（0-F）
		
		字符编码
			超哥 -> 111000110101
			111000110101 -> 超哥
			
			-所有的数据在计算机中存储时都是以二进制的形式存储的，文字也不例外。
				所以一段文字在存储到内存中时，都需要转换为二进制编码
				当我们读取这段文字时，计算机会将编码转换为字符，供我们阅读
				
			- 编码
				- 将字符转换为二进制码的过程称为编码
			-解码
				- 将二进制码转换为字符的过程称为解码
			- 字符集（charset）
				- 编码和解码所采用的规则称为字符集
			- 乱码问题
				- 如果编码和解码所采用的字符集不同就会出现乱码问题
			- 常见的字符集：
				ASCII(7位)
				ISO88591（8位）
				GB2312（中国）
				GBK（中国）
				UTF-8（万国码），在开发时我们使用的字符集都是UTF-8
	-->
	
	</body>
</html>
```

网页的第五个例子：网页的基本结构

```html
<!-- 文档声明，声明当前网页的版本 -->
<!doctype html>

<!-- html的根标签（元素），网页中的所有内容都要写到根元素里面 -->
<html>
	
	<!-- head是网页中的头部，head中的内容不会再网页中直接出现，主要用来帮助浏览器或搜素引擎来解析网页 -->
	<head>

		<!-- meta标签用来设置网页元数据，这里meat用来设置网页的字符集，避免出现乱码问题 -->
		<meta charset="utf-8">
		
		<!-- title的内容会显示在浏览器的标题栏，搜索引擎会主要根据title中的内容来判断网页的主要内容 -->
		<title>网页的标题</title>
		
	</head>
	
	<!-- body是html的子元素，表示网页的主体，网页中所有的可见内容都应该写在body里面 -->
	<body>
	
		<!-- h1是网页的一级标题 -->
		<h1>网页的大标题</h1>
	
	</body>
	
</html>

```

结果：
在这里插入图片描述

二. 详解一个HTML结构

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

1. <!DOCTYPE >声明

<!DOCTYPE html> 它是 HTML5 标准网页声明，全称为 Document Type HyperText Mark-up Language，是一条标示语言。支持 HTML5 标准的主流浏览器都认识这个声明。表示网页采用 HTML5， 声明位于文档中的最前面的位置，处于 标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。

注：声明中的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">

2. <html> </html>

<html>元素是 HTML 页面的根元素

<html>元素定义了整个 HTML 文档。
表示创建一个超文本标签语言文档

这个元素拥有一个开始标签 ，以及一个结束标签 .

3. <head> </head>

<head> 元素包含了文档的元（meta）数据
用来设置文档的标题和其他在网页中不显示的信息

如 <meta charset="utf-8"> 定义网页编码格式为 utf-8

下面这些标签可用在 head 部分

在这里插入图片描述

4. <body> </body>

<body>元素包含了可见的页面内容
表示网页的主体，即网页文档可见部分

5. 引入CSS样式文件

CSS（Cascading Style Sheets）翻译为层叠样式表

优点：使用CSS语言设计网页的优点能够真正做到将网页内容与表现形式进行分离

CSS语言能够支持全部字体风格与字号大小，能够对网页中的对象位置进行像素级别精确定位，对网页对象的样式进行动态编辑，能够进行简单的人机交互设计

CSS语言基本有3种形式：外链式(linking)、嵌入式(embedding)、内联式(lnline)

在HTML头部标签中：

外链式(linking)：通过link标签
嵌入式(embedding)：通过style标签
内联式(lnline)：通过style标签

6. 引用JavaScript脚本文件

JavaScript是一种解释型编程语言，其解释器通常也称为JavaScript引擎，目前，业内主流浏览器均内置了JavaScript引擎，且该引擎的性能优劣直接影响到浏览器的性能，进而直观地体现到用户体验上

JavaScript作用：使信息和用户之间不仅只是一种显示浏览的关系，而是实现了一种实时的、动态的、可交互式的表达能力

JavaScript脚本使用HTML <script> 标签

JavaScript脚本语言使用方法：

  1. 内嵌式JavaScript脚本
  2. 引入外部JavaScript脚本

JavaScript脚本执行顺序原则：

按顺序载入
载入即执行
执行时会阻塞后续内容
巧克力code
关注
  • 0
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端——HTML
LiLiLiLaLa的博客
04-22 8094
1.前端三门技术 学习Web前端技术需要掌握三门基本技术：HTML，CSS，JavaScript： HTML：HTML是网页内容的载体。内容就是网页制作者放在页面上想要用户浏览的信息，可以包含文件、图片、视频等 CSS：CSS样式是表现，就像网页的外衣比字体、颜色变化等 JavaScript：JavaScript用来实现网页上的特效效果。比如鼠标滑过弹出下拉菜单、鼠标滑过北京颜色改变等 使用工...
关于HTML5与Web前端的关系介绍
xinyuerr的博客
11-02 77
在互联网的演化进程中，网页制作是Web1.0时代的产物，早期网站主要内容都是静态，以图片和文字为主，用户使用网站的行为也以浏览为主。从严格意义上来讲HTML5与Web前端技术他们是一种从属的关系，HTML5是属于前端Web开发的一部分，但Web开发所包含的技术就很广阔了。现在HTML5不再只是一种标记语言，它为下一代Web提供了全新的框架和平台，包括提供免插件的视频、图像动画、本体存储以及更多酷炫而且重要的功能，并使这些应用标准化，从而使Web能够轻松实现类似桌面的应用体验。
HTML的介绍
tianfen_auster的博客
12-03 5881
一、HTML的介绍 1、HTML的概述： html全称为HyperText Markup Language，译为超文本标记语言，不是一种编程语言，是一种描述性的标记语言，用于描述超文本中内容的显示方式。比如字体什么颜色，大小等。 超文本：音频，视频，图片称为超文本。 标记 ：<英文单词或者字母>称为标记，一个HTML页面都是由各种标记组成。 作用：HTML是负责描述文档语义的语言。 注意：HTML语言不是一个编程语言(有编译过程)，而是一个标记语言(没有编译过程)，HTML页面直接由浏览器解
web前端简单的HTML网页 、个人主页网页设计(HTML+CSS)
2301_77609931的博客
04-29 2220
网站模板采用DIV CSS布局制作，网页作品有多个页面，如 :个人介绍（文字页面）、我的作品（图片列表）、个人技能（图文页面）、在线留言（表单页面）CSS样式方面网页整体采用左右布局结构，制作了网页背景图片，导航区域每个导航背景色不同，导航背景色与页面背景呼应。# 一、👨‍🎓网站题目 🧑个人网页设计、🙋‍♂️个人简历制作、👨‍💼简单静态HTML个人网页作品、👨‍🏭个人介绍网站模板 、等网站的设计与制作。：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。
html5和html有什么区别？这篇文章告诉你
OTS_luo的博客
03-19 1万+
html5和html有什么区别？这篇文章告诉你HTML是什么？HTML版本html5和html的区别指代不同 很多伙伴在入门前端的时候会认识HTML和html5，那么HTML和html5是一个东西吗啊？有什么区别，下面小编带你了解HTML HTML是什么？ HTML称为超文本标记语言，是一种标识性的语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一...
Java初级——HTML
夏天的风清澈的酒
09-12 204
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SzN9n9WK-1599874343268)(Pictures\logo.png)] Author：Amy Version：9.0.2 文章目录一、引言1.1HTML概念二、HTML简介2.1 什么是HTML2.2 HTML能做什么2.3 HTML书写规范三、HTML基本标签3.1 结构标签3.2 排版标签3.3 块标签3.4 基本文字标签3.5 文本格式化标签3.6 标题标签3.7 列表标签(清单标签)3.8 图形标签3.
HTML简介
wada64的博客
07-25 4091
HTML全称为HyperTextMark-upLanguage，翻译为超文本标签语言，标签也称作标记或者元素。HTML是目前网络上应用最为广泛的技术之一，也是构成网页文档的主要基石之一。HTML文本是由HTML标签组成的描述性文本，HTML文本可以说明文字、图形、动画、声音、表格、链接等。HTML的特点简单灵活，可扩展性，平台无关性。.........
java web项目——企业门户网
04-23
【Java Web 企业门户网项目概述】 Java Web技术在企业级应用开发中占据着核心地位，尤其在构建企业门户网方面表现出强大的灵活性和可扩展性。企业门户网通常集成了多个业务系统，提供统一的登录入口，个性化信息...
web前端大作业 课程设计 React悦享小说 用于学习练习
最新发布
06-28
悦享小说——一个基于React技术栈构建的Web前端大作业项目，旨在为用户提供沉浸式的小说阅读体验。该项目不仅是一个学习与实践React及其生态体系的理想平台，更是对现代Web开发技术和设计理念的一次深度探索与应用。...
网页作业——大二下web程序设计课后作业.zip
12-31
MD文档与操作手册：为了方便他人理解和使用我的作品，我编写了详细的操作手册和使用说明，同时提供了一份Markdown格式的文档，概述了项目的主要功能和特点。 学习笔记：在项目开发过程中，我记录了大量的学习笔记和...
HTML 概述
Dailyblue的专栏
03-29 2633
HTML 的全称为超文本标记语言，是一种标记语言。它包括一系列标签，通过这些标签可以将网络上的文档格式统一，使分散的 Internet 资源连接为一个逻辑整体。HTML 文本是由 HTML 命令组成的描述性文本，HTML 命令可以说明文字，图形、动画、声音、表格、链接等。
HTML是什么？HTML简介
热门推荐
ccc369639963的博客
01-22 1万+
HTML是什么？HTML简介 HTML 英文全称是 Hyper Text Markup Language，中文译为“超文本标记语言”，专门用来设计和编辑网页。 使用 HTML 编写的文件称为“HTML 文档”，一般后缀为.html（也可以使用.htm，不过比较少见）。HTML 文档是一种纯文本文件，您可以使用 Windows 记事本、Linux Vim、Notepad++、Sublime Text、VS Code 等文本编辑来打开或者创建。 每个网页都是一个 HTML 文档，使用浏览器访问一个链接（URL）
HTML的简单介绍
学代码的咸鱼的博客
01-03 1640
简单讲解HTML基本标签！
HTML基本概述
IDApprentice的博客
11-02 1872
一.HTML (一).什么是HTML(Hyper Text Markup Language 即超文本标记语言) 1. 出现于1993 现在主流使用的是 2013年的版本HTLM5 注:HTML5,提供了新的元素与更多有趣的特性,同时建立了一些新的规则,这些元素,特性和规则的建立,提供了许多新的网页功能,如使用网页实现动态渲染图形,图表,图像和动画,以及不需要任何插件直接使用网页播放视频等(以前是需要Flash插件的) 同时世界的知名浏览器厂商都对HTML5有支持(微软,Google, 苹果等) ..
基于Web聊天系统的设计与实现_概要设计说明书资料.docx
07-03
基于Web聊天系统的设计与实现_概要设计说明书资料.docx基于Web聊天系统的设计与实现_概要设计说明书资料.docx基于Web聊天系统的设计与实现_概要设计说明书资料.docx基于Web聊天系统的设计与实现_概要设计说明书资料.docx基于Web聊天系统的设计与实现_概要设计说明书资料.docx基于Web聊天系统的设计与实现_概要设计说明书资料.docx基于Web聊天系统的设计与实现_概要设计说明书资料.docx基于Web聊天系统的设计与实现_概要设计说明书资料.docx

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值