前端简单入门第一讲 HTML基础概念

最新推荐文章于 2024-08-15 15:54:59 发布

李阿昀

最新推荐文章于 2024-08-15 15:54:59 发布

阅读量489

点赞数 1

分类专栏：前端简单入门

本文链接：https://blog.csdn.net/yerenyuan_pku/article/details/85345779

版权

前端简单入门专栏收录该内容

25 篇文章 5 订阅

订阅专栏

HTML概述

HTML(Hyper Text Markup Language)是一种超文本标记语言。

超文本比普通文本功能更加强大，它可以添加各种样式；
标记语言是通过一组标签来对内容进行描述的，更通俗点理解，一大段文本内容，毫无重点，毫无结构，让人不好理解。所以，HTML就通过大伙约定俗成的规范，利用一些标签来指明，这一段文本是标题，这一段文本是个表格，这一段文本是个列表，这一段文本是导航菜单，这里需要分段，这里需要分行，这几个词是关键词，需要重点标记一下等等等等。每一份HTML文档都是由浏览器来解释执行的。

HTML标签的基本概念

<a class="ddd" href="index.html">点击跳转</a>

标签：<>带有这种符号的称为标签，一般分开始标签和结束标签。标签不区分大小写，官方建议使用小写；
内容：即文本内容，如上述的点击跳转四字；
属性：每个标签有自己的一些属性，另外，HTML有一些全局属性，比如上述的class，这个属性所有标签都可以用；
元素：标签 + 内容。

HTML的主要作用

HTML是设计网页的基础，它主要表示某个标签在页面中是什么角色。通俗的讲，HTML只负责文档的语义和结构，它描述了网页的内容和结构。

HTML的文档结构

我们可以使用HBuilder IDE编辑器来编写代码，下面的HTML文档就是用该编辑器来编写的。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>前端简单入门——HTML</title>
	</head>
	<body>
		Hello World！这是前端简单入门第一讲——HTML
	</body>
</html>

从上面的HTML文档中可以知道HTML大体上的文档结构如下：
在这里插入图片描述
以上这些标签用途基本就是用于构建一份基本的HTML文档，下面我再来具体介绍。

`<!DOCTYPE>`

准确的说，<!DOCTYPE>并不是HTML标签，它是声明web浏览器关于页面使用哪个HTML版本进行编写的指令。
在HTML 4.01中，<!DOCTYPE>声明引用DTD，因为HTML 4.01基于SGML。DTD规定了标记语言的规则，这样浏览器才能正确地呈现内容。HTML5不基于SGML，所以不需要引用DTD。

H5中用法：
```
<!DOCTYPE html>
```

HTML 4.01中用法：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

`<html>`

每一份HTML文档内容的根节点，表示文档内容的开始。文档内容包括两部分：

头部声明<head>；
文本内容<body>。

`<head>`

HTML文档的头部声明，用于声明该文档的一些属性以及一些元数据，<head>内部的内容是用于给浏览器看的，并不是用于给用户看的，浏览器通过<head>内的信息，知晓这份文档引用了哪些外部资源文件，使用了哪些属性。可在<head>中使用的标签并不多：

<head>
	<meta charset="UTF-8">             		  <!--声明文档所使用的编码-->
	<title>前端简单入门——HTML</title>      	  <!--声明文档的标题-->
	<base href="http://www.baidu.com" />	  <!--声明文档全局的基准URL-->
	<style type="text/css"></style>           <!--声明内嵌类型的css样式-->
	<link rel="stylesheet" href="cart.css" /> <!--引用外部css文件-->
	<script></script>                         <!--JavaScript脚本-->
	<noscript></noscript>                     <!--浏览器不支持JavaScript情况下的处理-->
</head>

`<meta>`

元数据标签，可用于声明文档所使用的一些元数据，用途蛮多，如下：

<meta charset="UTF-8">             		  		<!--声明文档所使用的编码-->
<meta http-equiv="refresh" content="5" /> 		<!--往http头部中增加key-value-->
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />

`<link>`

<link>标签用于指定HTML文档使用了哪些外部资源文件，可以是外部的CSS文件，或者网页图标，或者说明文档等等，如下：

<link rel="stylesheet" href="cart.css" /> 							<!--引用外部css文件-->
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" /> <!--引用外部网页图标-->
<link rel="prefetch" href="/readme.html" />                         <!--预先加载readme.html文件-->