html学习历程（一）

最新推荐文章于 2024-08-16 10:43:14 发布

marwi_study

最新推荐文章于 2024-08-16 10:43:14 发布

阅读量1.4k

点赞数 3

分类专栏： HTML5 文章标签： HTML5学习

本文链接：https://blog.csdn.net/marwi_study/article/details/89739249

版权

HTML5 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

html全称超文本标记语言(Hyper Text Markup Language)，标准通用标记语言下的一个应用。HTML 不是一种编程语言，而是一种标记语言 (markup language)，是网页制作所必备的。“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。超文本标记语言的结构包括“头”部分（英语：Head）、和“主体”部分（英语：Body），其中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容。
html编辑器我使用的是Notepad++，主要是因为这个软件可以看很多种代码，用起来比较习惯。
首先在Notepad++中新建一个文件，然后开始可以编写代码
这里我先用一个例子来说一下html的代码的结构

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>	my first html</title>
	</head>
	<body>
		<h1>
			my first html file
		</h1>
		<a href="https://blog.csdn.net/marwi_study">我的博客</a>
		<br/>
		<p>
			hello world!
		</p>
		<img src="1.jpg" width=1200 height=900/>
		<!--注释（不显示）图片可以使用相对路径，这里是同一目录下，也可以用绝对路径-->
	</body>
</html>

<!DOCTYPE html>声明这个html文件是html5文档
由于是一门标记语言，所以html用到了很多标签，每个标签有一个开始标签和一个结束标签，开始标签就像<html>结束标签是在开始标签的基础上加一个/，即<html>的结束标签为</html>html的代码就是建立在标签之上的，每个标签叫做一个元素。其中<html>是html页面的根元素，超文本标记语言的结构包括“头”部分（英语：Head）、和“主体”部分（英语：Body），其中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容。所以在<html></html>之间有<head>和<body>这两个元素
<head></head>中是用来定义网页的信息的，我们这里的<meta charset="utf-8">是指定网页的编码方式是utf-8，也就是支持中文的网页，如果没有这一句，中文字符在编写出来的html中可能会出现乱码，<title> my first html</title>是定义网页标题的

<body></body>中是用来定义网页主体的，其中<h1>~<h6>是用来定义标题的，有六层标题，就像我们在写文档时会有一些小标题一样，主要是字体的大小不同，h1最大，然后依次递减。<a>标签是用来声明链接的，其中的href是链接的地址，在<a></a>之间的内容是显示在网页上带有链接的文字内容；<br/>是一个空元素，其作用是换行；<p>标签用来显示文章的段落；<img>用来显示图片，其中src是图片的路径，可以是相对路径也可以是绝对路径，我这里用的是相对路径，图片与该html文件同目录；html中的注释是用,在其中的内容不会显示在网页上，但是可以提高代码的可读性。为了可读性更强，最好在编写的时候多使用缩进，这样可以让层次结构更清晰。

在这里插入图片描述
然后另存为html格式

当保存为html文件后标签什么的会用不同颜色显示，这样看起来也比较方便

然后打开保存下来的html文件就可以看到下面的界面