小白的it学习之路第一章 HTML5基础

最新推荐文章于 2024-09-08 18:31:44 发布

KingJ233

最新推荐文章于 2024-09-08 18:31:44 发布

阅读量196

点赞数

分类专栏：小白的IT学习之路文章标签： html 程序人生

本文链接：https://blog.csdn.net/KingJ233/article/details/112757055

版权

小白的IT学习之路专栏收录该内容

1 篇文章

订阅专栏

本文是小白的IT学习之路的第一章，介绍了HTML5的基础知识，包括HTML5页面的基本结构、HTML的概念和发展历程、其优势，以及W3C标准和常见网页编辑工具。文章详细讲解了标题、段落、换行、字体样式、图像和链接等基本标签的使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

小白的it学习之路

第一章 HTML5基础

第一次写自己的学习文章，还希望看这篇文章的人多多见谅

首先，学习HTML之前，先要了解一些HTML的基本知识

HTML5页面的基本结构是什么？

<DOCTYPE html>   （告诉浏览器使用规范）
<html>
  <head lang="en">（可以输出中文,只是会让你的浏览器提示你要不要翻译此页,如果改成zh-cn就没有翻译的选项了，head指头部标签）
  	<meta chraset="UTF-8">（推荐使用UTF-8，还可以设置为GB2312;）
    <title>（网页的标题）</title>（网页导航栏的名称）
  </head>
  <body>（网页的内容，全部写入body里面）
    （网页显示的内容）
  </body>
</html>

2. 什么是HTML？

简单来说，HTML（Hyper Text Markup Language）是一种超文本语言；它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。

3. HTML的发展史

在这里插入图片描述
1982年，Tim Berners-Lee 建立 HTML
1993年，大學生的 Marc Andreessen 在他的 Mosaic 浏览器加入标记，从此可以在Web頁面上浏览图片
1993年6月，HTML 由 IETF 工作小組发布草案
1994年10月，W3C 成立，网络应用发展的标准规范交由 W3C 协会制定及推广
1995年11月，HTML 2.0，2000年6月被宣布已经过时
1996年1月，HTML 3.2 由 W3C 推荐为标准规范
1997年11月，HTML 4.0
1999年12月，HTML 4.01 以 XML 语法重新构建，较为严格，W3C推荐标准
2000年1月，XHTML 1.0，W3C推荐标准
2001年5月，XHTML 1.1，W3C推荐标准
2004年，WHATWG小组成立，由各大浏览器开发商组成，重拾HTML 4规格，开发 HTML 5规格
2006年，W3C认输，承认 XHTML 2.0不会成功
2007年，W3C重新成立 HTML工作小组，参考 WHATWG 的规格发展期HTML规格
2009年，XHTML 2.0被放弃，全面投入 HTML 5 规格的发展
2011年6月，Google宣布全面采用 HTML 5 技术
2012年， HTML 5被选为候选标准
2014年10月28日，HTML 5.0，W3C正式发布HTML 5.0推荐标准

4. HTML的优势

1).世界知名浏览器厂商对HTML5的支持
2).多设备、跨平台
3).符合现在市场的需求
4).可以给站点带来更多的多媒体元素(视频和音频)
5).被大量应用于移动应用程序和游戏
。。。。。。(此处省略)

5. W3C标准以及网页编辑工具

W3C即万维网联盟：成立于1994年Web技术领域最权威和最具影响力的国际中立性技术标准结构。
通常使用的网页编辑工具如下：
在这里插入图片描述
当然以上软件并不意味着只能使用这几个，上面也说了，html的优势就是跨平台，多设备，应用于广大应用里面。博主目前在学习阶段使用了一下两种软件：

这两个软件都可以创建一个HTML文件进行编辑，初学者更推荐下面这款HB，可以方便编写代码，本身也是免费软件，还可以做到边改边看。

回到正文，上文也说了HTML的基本结构：
在这里插入图片描述
HTML的基本结构很简单，也很容易记忆，初学者稍微多敲敲，基本也可以记住内容，但是只要你了解基本结构，就可以熟练的掌握html的编写，大部分内容都需要写在…标签中。

以下将列举一些HTML中的基本标签：

标题标签

（下面是标题标签不同样式的大小区别）

<h1>一级标签</h1> 		
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>

在这里插入图片描述

段落标签

在这里插入图片描述

<h1>北京欢迎你</h1>
<p>北京欢迎你，有梦想谁都了不起！</p>
<p>有勇气就会有奇迹。</p>

换行标签以及水平线标签

<h1>北京欢迎你</h1>
<p> 北京欢迎你，有梦想谁都了不起！<br/>
	有勇气就会有奇迹。<br/>		
</p>
<hr/>

<br/>它的功能就是帮助我们换行;<hr/>就是在所写区域出现一条直线

常用的两种字体样式标签

在这里插入图片描述
分别可以使字体加粗和倾斜

还有一些注释和特殊符号

在这里插入图片描述

图像标签

在这里插入图片描述

链接标签

在这里插入图片描述
其中，超链接一般运用在三种场合：

1.页面间链接：就是从一个页面转到另外一个网页页面
2.锚链接：从同一页面跳转到指定位置；或者是跳转到另外一个页面的指定位置
3.功能性链接：一般用在网页中发送邮箱或者打开外部应用在这里插入图片描述

总结

在这里插入图片描述

PS：下面会列出一个很简单的示例

<!DOCTYPE html>
<html>
	<head lang="en">
		<meta charset="UTF-8"/>
		<title>李清照——清平乐</title>
	</head>
	<body>
		<h2>清平乐</h2>
		<hr/>
		<p>
			年年雪里，常插梅花醉，挼尽梅花无好意，赢得满衣清泪！<br/>
			今年海角天涯，萧萧两鬓生华。<br/>
			看取晚来风势，故应难看梅花。<br/>
		</p>
	</body>
</html>