从发展历程到基础语法规则,一文读懂HTML技术!

简介: 从发展历程到基础语法规则,一文读懂HTML技术!

当今互联网时代,HTML(Hypertext Markup Language)成为了设计网页的标准语言。无论是个人博客、企业官网还是电商平台,HTML都是构建网页的必备技术。本篇博客将深入探讨HTML技术的发展历程、基本语法规则以及常用标签和属性。

一、HTML技术的发展历程

HTML首次出现于1989年,由英国物理学家蒂姆·伯纳斯-李(Tim Berners-Lee)创造。当时他在瑞士的欧洲核子研究组织(CERN)工作,他想要创建一个方便科学家之间交流信息的系统。这个系统是基于互联网的,而HTML就是其中最重要的技术之一。

随着万维网的快速发展,HTML技术也得到了迅猛的发展。1996年,第一个HTML版本(HTML 2.0)正式发布,此后HTML的更新版本不断推出,目前最新版本为HTML5,已经成为设计网页的主流技术。HTML5的特点是兼容性好、可扩展性强、语义化清晰、多媒体支持等。

二、HTML的基本语法规则

HTML是由标签(Tag)和内容组成的,标签是用于描述文档内容结构和格式的元素,内容则是标签所描述的信息。一个完整的HTML文档由以下三部分组成:

<!DOCTYPE html> <html> <head> <title>网页标题</title> </head> <body> 网页正文 </body> </html>

其中,声明这个文件是HTML5文件;<html>表示文档开始;<head>标签里面放置了网页的头部信息,比如网页标题、关键字等;<body>标签里面则放置网页的主体内容。

HTML中每个标签都有自己的作用,下面是一些常用的标签及其作用:

  1. 标题标签(h1~h6):用于定义文章或页面的标题,共有六级标题,依次递减;
  2. 段落标签(p):用于定义文章或页面的段落;
  3. 图片标签(img):用于显示图片,需要指定图片的路径和名称;
  4. 超链接标签(a):用于创建超链接,可以跳转到其他页面或者在当前页面内跳转到锚点;
  5. 列表标签(ul、ol、li):用于创建无序列表和有序列表;
  6. 表格标签(table、tr、td):用于创建表格,table表示表格,tr表示行,td表示单元格。

三、常用标签和属性

除了以上介绍的基本标签外,HTML还有一些常用的标签和属性:

  1. 表单标签(form、input):用于创建表单,可以用来收集用户信息。其中,表示表单开始,表示输入框,有多种类型,如文本框、密码框、复选框等;
  2. 元数据标签(meta):用于描述网页的元数据,比如关键字、页面描述、编码格式等;
  3. 样式标签(style):用于定义CSS样式,可以直接写在HTML文件中;
  4. CSS连接标签(link):将CSS样式单独存储在一个文件中,用标签引入到HTML文件中;
  5. JavaScript标签(script):用于添加JavaScript代码,可以实现网页的交互效果。
目录
相关文章
|
8天前
|
前端开发 JavaScript 数据安全/隐私保护
【海贼王航海日志:前端技术探索】HTML你学会了吗?(二)
【海贼王航海日志:前端技术探索】HTML你学会了吗?(二)
17 1
|
8天前
|
编解码 移动开发 前端开发
【海贼王航海日志:前端技术探索】HTML你学会了吗?(一)
【海贼王航海日志:前端技术探索】HTML你学会了吗?(一)
8 1
|
1月前
|
自然语言处理 开发者 Python
Markdown 是一种轻量级标记语言,它允许人们使用易读易写的纯文本格式编写文档,然后转换成格式丰富的 HTML 内容。Markdown 的语法简洁明了、学习容易,而且功能比纯文本更强。
Markdown 是一种轻量级标记语言,它允许人们使用易读易写的纯文本格式编写文档,然后转换成格式丰富的 HTML 内容。Markdown 的语法简洁明了、学习容易,而且功能比纯文本更强。
|
1月前
|
开发者
HTML 链接语法
【7月更文挑战第1天】HTML 链接语法。
26 1
|
2月前
|
前端开发
技术经验分享:html生成印章
技术经验分享:html生成印章
41 1
|
2月前
|
移动开发 前端开发 JavaScript
html语法基础
【6月更文挑战第28天】html语法基础
24 1
|
2月前
|
JavaScript 前端开发 API
探讨JavaScript动态添加HTML文件的技术
探讨JavaScript动态添加HTML文件的技术
29 1
|
2月前
|
缓存 移动开发 前端开发
在PWA的开发中,HTML与CSS作为前端技术的基础,发挥着至关重要的作用
【6月更文挑战第14天】PWA(渐进式网页应用)借助HTML和CSS,提供接近原生应用的体验。HTML构建页面结构和内容,响应式设计适应各种设备,语义化标签提升可访问性,Manifest文件配置应用元数据,离线页面保证无网时体验。CSS则用于定制主题样式,创建动画效果,实现响应式布局,并管理字体和图标。两者协同工作,确保PWA在不同环境下的优秀性能和用户体验。随着前端技术进步,HTML与CSS在PWA中的应用将更加深入。
38 2
|
1月前
|
移动开发 前端开发 JavaScript
HTML:认识HTML及基本语法
HTML:认识HTML及基本语法
|
2月前
|
前端开发 JavaScript 容器
技术经验解读:个人练习:使用HTML+CSS3制作图片轮播功能(不使用JavaScript)
技术经验解读:个人练习:使用HTML+CSS3制作图片轮播功能(不使用JavaScript)
45 0