HTML5简介以及基本标签

黑白土豆

已于 2023-12-16 21:45:08 修改

阅读量402

点赞数 12

文章标签： html5 前端 html

于 2023-12-14 19:31:33 首次发布

本文链接：https://blog.csdn.net/2201_75652268/article/details/135001827

版权

1.HTML简介以及发展史

HTML是一种用来描述网页的语言，即不是一种编程语言，而是一种标记语言。
HTML（超文本标记语言）的发展历程可以追溯到20世纪90年代初。以下是HTML的主要发展里程碑：

1. HTML 1.0：于1993年发布，是HTML的第一个正式规范。

2. HTML 2.0：于1995年发布，增加了一些新的元素和特性，如`<form>`和`<table>`元素。

3. HTML 3.2：于1997年发布，引入了一些新的元素和样式属性，如`<iframe>`和CSS（层叠样式表）。

4. HTML 4.01：于1999年发布，对HTML进行了一些改进，并添加了一些新的元素和属性，如`<div>`和`<span>`元素。

5. XHTML（可扩展超文本标记语言）：于2000年发布，基于XML（可扩展标记语言）的严格版本，强调语法的严格性和可扩展性。

6. HTML5：于2014年推出，是HTML的最新版本，引入了许多新的功能和API，如语义化标签（`<header>`、`<section>`等），音视频支持，本地存储，Canvas绘图等。

HTML5的推出标志着HTML的发展进入了一个新的阶段，它提供了更丰富的功能和更灵活的开发选项，使得构建现代化、交互性强的Web应用程序变得更加容易。随着时间的推移，HTML标准不断发展，以适应不断变化的互联网和Web技术环境的需求。

2.网页开发工具

HTML是一种轻量级的标记语言，可以使用简单的文本编辑器进行编写和编辑，例如记事本、Sublime Text、Notepad++等。

此外，还存在许多专业的HTML开发工具，这些工具通常提供更完善的编码和调试功能，如自动补全、语法高亮、错误检查等。以下是一些常用的HTML开发工具：

1. Visual Studio Code：一款免费且功能强大的代码编辑器，提供了HTML语法高亮、代码片段、自动完成和内置调试等功能，拥有大量的扩展程序，可通过扩展程序添加其他功能和工具。

2. Dreamweaver：Adobe开发的用于Web开发的集成开发环境（IDE），支持HTML、CSS、JavaScript等多种语言，具有可视化操作界面和代码编辑器，并提供了实时预览和内置FTP客户端等功能。

3. Sublime Text：一款轻量级的文本编辑器，支持HTML、CSS和JavaScript等多种编程语言，具有快速的搜索和替换功能、多行编辑、自定义快捷键等高效特性。

4. Atom：一款免费、开源的文本编辑器，由GitHub开发，支持HTML、CSS、JavaScript和Node.js等多种语言，拥有丰富的插件生态系统和可定制的界面。

5. Brackets：一款免费、开源的用于Web设计的文本编辑器，主要针对前端开发人员，具有代码片段、实时预览、自动重载和内置浏览器等优秀特性。

这些工具都具有特色和优势，开发者可以根据需要选择适合自己的工具。

3.HTML5的基本框架

<!DOCTYPE html><!--声明html-->
<html lang="en">
<!--头部：用于存放网页标题，样式表，脚本资源-->
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<!--主题部分：网页内容-->
<body>
    
</body>
</html>

4.网页的基本标签

（1）标题标签

标题标签用来定义页面文档的标题，分为6个等级：<h1>、<h2>、<h3>、<h4>、<h5>、<h6>，其中<h6>最小，<h1>最大。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>标题</title>
</head>
<body>
    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6>
</body>
</html>

运行结果：

标题标签最小为<h6>,如果高于<h6>则会按照普通格式输出。

（2）段落标签

在网站布局中，经常会使用分段换行，这时就可以用到<p>标签对。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>标题</title>
</head>
<body>
    <p>这是第一个p标签</p>
    <p>这是第二个p标签</p>
    <p>这是第三个p标签</p>
</body>
</html>

运行结果：

可以看到在每句话都进行了换行，同时两行之间还会有间隔。

（3）换行标签

在网页制作中如果需要手动换行，就可以使用<br>标签。这个标签是一个单标签，没有结束标签。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>标题</title>
</head>
<body>
    换行标签展示<br/>
    这是一个br标签<br/>
    <p>这是一个p标签</p>
</body>
</html>

运行结果：

可以看到<br/>标签可以手动换行，但是行之间是没有空隙的，但是<p>标签对有。

（4）水平线标签

当网页上同时出现了多个主题的时候，为了分割每个主题，可以在主题之间加一个<hr/>标签，这个也是一个单标签。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>标题</title>
</head>
<body>
    <p>主题1</p>
    <hr/>
    <p>主题2</p>
</body>
</html>

运行结果：

可以看到使用<hr/>之后两个主题中多出来了一条线，这条线可以更改它的大小和位置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>标题</title>
</head>
<body>
    <p>主题1</p>
    <!--width是控制水平线的长度，align是控制水平线的位置，size是控制水平线的大小，color是控制水平线的颜色-->
    <hr width="200px" align="left" size="2px" color="red"/>
    <p>主题2</p>
</body>
</html>

其中align包含了一些内置属性：left最左边，right最右边，center居中。

运行结果：

（5）字体样式标签

在网页中会出现一些加粗显示或者倾斜显示的文字，我们可以使用<em>标签对使文本倾斜，使用<strong>标签对让字体加粗。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>标题</title>
</head>
<body>
    正常字体<br/>
    <em>倾斜字体</em><br/>
    <strong>加粗字体</strong>
</body>
</html>

运行结果：

（6）注释

编写代码的时候为了便于阅读和维护代码，会给代码添加注释。使用插入注释

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>标题</title>
</head>
<body>
    <em>倾斜字体</em><br/>
    <strong>加粗字体</strong><!--这是注释-->
</body>
</html>

运行结果：

可以看到加了的文字并没有运行出来。

黑白土豆

关注

12
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
HTML5简介以及基本标签

HTML是一种用来描述网页的语言，即不是一种编程语言，而是一种标记语言。HTML（超文本标记语言）的发展历程可以追溯到20世纪90年代初。以下是HTML的主要发展里程碑：1. HTML 1.0：于1993年发布，是HTML的第一个正式规范。2. HTML 2.0：于1995年发布，增加了一些新的元素和特性，如``和``元素。3. HTML 3.2：于1997年发布，引入了一些新的元素和样式属性，如``和CSS（层叠样式表）。
复制链接

扫一扫