首页 > 其他分享 >HTML 简介

HTML 简介

时间:2024-03-27 21:22:05浏览次数:22  
标签:网页 简介 元素 HTML 文档 标签 属性

 

HTML(HyperText Markup Language,中文:超文本标记语言)是一种用于创建网页结构和内容的标记语言。它由一系列标签组成,这些标签描述了网页中的各个元素和其它相关信息。通过使用HTML标签和属性,开发人员可以定义文本、图像、链接、表格、表单等元素,并控制它们的外观和行为。本文主要介绍HTML的基本概念、历史背景和用途。

参考文档:HTML 简介-CJavaPy

HTML实例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CJAVAPY编程之路(cjavapy.com)</title>
</head>
<body>
 
<h1>我的第一个标题</h1>
 
<p>我的第一个段落。</p>
 
</body>
</html>

HTML文档的后缀名可以是.html.htm,都可以使用,没有区别。

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

1、HTML的基本概念

1)标签(Tag)

HTML使用标签来定义网页中的各个元素。标签通常以尖括号< >的形式出现,如<p>表示段落,<img>表示图像等。标签可以包含属性,用于提供额外的信息或控制元素的行为。

2)元素(Element)

一个完整的HTML元素由开始标签、内容和结束标签组成。例如,<p>这是一个段落</p>就是一个完整的段落元素。

3)属性(Attribute)

HTML标签可以具有属性,用于提供元素的额外信息或控制元素的行为。属性以键值对的形式出现,例如<img src="image.jpg">中的src属性指定了图像的源文件。

4)文档结构

一个HTML文档由<html><head><body>等标签组成。其中,<html>标签用于定义整个HTML文档的根元素,<head>标签用于定义文档的头部信息,如标题和样式表链接,<body>标签用于定义文档的主体内容。

5)块级元素和内联元素

HTML元素可以被分类为块级元素和内联元素。块级元素以块的形式显示,独占一行或一块空间,如<p><div>等。内联元素以行内的方式显示,不会独占一行,如<span><a>等。

6)嵌套

HTML元素可以嵌套在其他元素内部,形成一个层次结构。例如,<div>元素可以包含<p>元素,<p>元素可以包含<span>元素。

7)<!DOCTYPE> 声明

HTML文档的开头通常会包含一个DOCTYPE声明,用于指定文档的HTML版本。

例如:

<!DOCTYPE html>
<!DOCTYPE HTML>
<!doctype html>
<!Doctype Html>

2、HTML与Web 浏览器

HTML(HyperText Markup Language)是一种用于创建网页结构和内容的标记语言,而Web浏览器(如谷歌浏览器,Internet Explorer,Firefox,Safari)是用于显示和解释HTML文档的应用程序。Web浏览器通过解析HTML文档,将其转换为可视化的网页。浏览器会读取HTML文档中的标签和内容,并根据这些标签和内容的定义,渲染出网页的结构和样式。HTML提供了各种标签和属性,用于定义文本、图像、链接、表格、表单等在网页中的展示和交互方式。浏览器在解析HTML时,会根据标签和属性的定义,将文本显示为段落、标题或其他格式,显示图像、链接,并响应用户的交互操作。

通过HTML和Web浏览器的结合,用户可以在浏览器中访问和浏览各种网页内容,包括网页文本、图像、视频、音频等多媒体元素,并与网页进行交互,如点击链接、填写表单、提交数据等。

大部分浏览器中,直接输出中文会出现中文乱码的情况,需要在头部将字符声明为 UTF-8 或 GBK。

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

3、HTML版本及历史背景

HTML有多个版本,每个版本都有不同的特性和改进。

版本

发布时间

HTML

1991

HTML+

1993

HTML 2.0

1995

HTML 3.2

1997

HTML 4.01

1999

XHTML 1.0

2000

HTML5

2014

1)HTML 1.0

HTML 1.0是最早的HTML版本,于1993年发布。它只包含一些基本的标签和属性,用于创建简单的文本和链接。HTML 1.0的目标是定义一种通用的超文本标记语言。

2)HTML 2.0

HTML 2.0于1995年发布,是对HTML 1.0的改进和扩展。它引入了一些新的标签和属性,如图像标签和表格标签,以支持更丰富的内容展示。

3)HTML 3.2

HTML 3.2于1997年发布,是对HTML 2.0的进一步改进。它引入了一些新的标签和属性,如表单标签和框架标签,以支持交互性和页面布局。

4)HTML 4.01

HTML 4.01于1999年发布,是对HTML 3.2的修订和扩展。它引入了更多的标签和属性,如层标签和样式表,以支持更灵活的页面设计和样式控制。

5)XHTML 1.0

XHTML(eXtensible HyperText Markup Language)是基于XML的HTML版本。XHTML 1.0于2000年发布,它严格遵循XML的语法规则,要求所有标签和属性都要正确嵌套和闭合。

6)HTML5

HTML5是HTML的最新版本,于2014年正式发布。HTML5引入了许多新的特性和API,如语义化标签、多媒体支持、Canvas绘图、本地存储等。HTML5还支持响应式设计,以适应不同设备和屏幕尺寸。

4、HTML用途

HTML是构建网页结构和内容的基础语言,它提供了丰富的标签和属性,使得开发者可以创建各种类型的网页,并实现不同的功能和效果。HTML用于定义网页的整体结构,包括标题、段落、列表、标题、导航菜单等元素。通过使用不同的HTML标签和属性,可以将文本、图像、音频、视频等内容组织起来,并构建页面的层次结构。HTML可以用于展示文本内容和多媒体元素,如图像、音频和视频。通过使用适当的HTML标签和属性,可以插入和显示各种类型的媒体内容,从而使网页更加丰富和吸引人。HTML提供了创建表单的标签和元素,可以用于收集用户的输入数据。通过使用表单元素如文本框、复选框、单选按钮和下拉列表等,用户可以输入数据并提交给服务器进行处理。

 参考文档:HTML 简介-CJavaPy

标签:网页,简介,元素,HTML,文档,标签,属性
From: https://www.cnblogs.com/tinyblog/p/18100268

相关文章

  • python笔记(3)基本数据类型简介
    目录python3的六个标准数据类型Numbers(数字) 数值运算String(字符串)List(列表)Tuple(元组)Sets(集合)set()函数有两用方式使用set运算Dictionaries(字典)python3的六个标准数据类型Numbers(数字)String(字符串)List(列表)Tuple(元组)Dictionaries(字典)Set(集合)......
  • html消息滚动
    案例1<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>Document</title>......
  • 精准化测试原理简介
    小时候大家应该都玩过一个游戏,游戏很简单,就是找不同,在规定时间内两幅图直接的差异点找到就算赢,越快越好,就像下面这样:上面这个不同点想找很简单,那么下面这样的呢?这个,确实有的人会说"我可以!"。比如在综艺节目"最强大脑"中,这群"变态"的非人类确实可以反正我不行,我也不信你们看到......
  • 网页图像渐变的方法(HTML+CSS) (渐变与切换)
    网页图像渐变的方法(HTML+CSS)(渐变与切换)Date:2024.03.27参考色彩runoob-渐变色工具渐变-水平多图效果HTML<divclass="conBoxpubCon"><divclass="imgBox"><imgclass="img1"src=""/><imgclass="......
  • Vue学习笔记64--路由简介
    路由简介 路由就是一组key-value的对应关系多个路由,需经过路由器进行管理SPA应用:singlepagewebapplication(单页面web应用)Vue-router一:相关理解vue-router:vue的一个插件库(需安装--npminstallvue-router--save),专门用来实现SPA应用对SPA应用的理解singlepa......
  • HTML编程+函数的调用1
    原创:财院网站设计学习平台1.函数无参数<body><inputtype="submit"value="输入显示信息的次数:"onclick="showHello()"/><script>functionshowHello(){varcount=prompt("请输入显示信息的次数:");for(vari=1;i<=count;i++){......
  • HTML基础知识学习
    1.网页插入视频方法    我们先来上传一个简单的视频在网页上供大家练练手,以及展示给大家观看成果<!DOCTYPEhtml><html> <head>  <meta charset="utf-8">  <title></title>  </head> <body> <videowidth="320"height="24......
  • react零基础到精通-1|基础概念,主要特性,s6语法,react相关的开发环境和工具,react简介,箭头
    致力于解决复杂视图层开发我呢提,全新的ui组件的开发理念,1.1React简介前端UI的本质问题是如何将来源于服务器端的动态数据和用户的交互行为高效地反映到复杂的用户界面上。React另辟蹊径,通过引入虚拟DOM、状态、单向数据流等设计理念,形成以组件为核心,用组件搭建UI的开发......
  • 使用 HTML 标签给网页文本添加下划线的小技巧
    HTML中的 <u> 标签在细节上为我们的文本增添了额外的视觉效果。它就像是一位细心的编辑,用下划线为我们的文本穿上了一件新装,既突出重点又不失优雅。1.基础语法什么是<u>标签<u> 标签是HTML中用于为文本添加下划线的标签。它可以用来表示非超链接的下划线文本,虽然......
  • 精品单页个人导航HTML源码
    源码介绍简约大气精品单页导航-可自行修改其他页面,源码由HTML+CSS+JS组成,记事本打开源码文件可以进行内容文字之类的修改,双击html文件可以本地运行效果,也可以上传到服务器里面下载地址精品单页个人导航HTML源码......