目录
一、HTML是什么?
示例:HTML的全称为超文本标记语言,是一种标记语言。它包括一系列标签,通过这些标签可以将网络上的文档格式统一,使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本,HTML命令可以说明文字,图形、动画、声音、表格、链接等。
二、HTML代码学习
1.模板理解
代码如下(示例):
<!DOCTYPE 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>
逐行分析:
1:<!DOCTYPE html>
<!DOCTYPE html>
是HTML中的文档类型声明(Document Type Declaration)。它出现在HTML文档的开头,用于告诉浏览器该文档使用哪个HTML版本进行解析和渲染。
<!DOCTYPE html>
是HTML5的文档类型声明。HTML5 是最新的HTML标准,它引入了很多新特性和语法,可以提供更好的网页设计和开发体验。
在HTML5中,<!DOCTYPE html>
是一个简单的文档类型声明,不需要指定任何版本号或DTD(文档类型定义)。它告诉浏览器使用HTML5规范进行文档解析。
2:<html lang="en">
这个标签是指定网页语言,默认为en英语,当然也可以是其他语言,ZH-ch这个就是汉语。
lang
属性用于指定网页内容的语言,以帮助搜索引擎和浏览器正确解析和处理文本内容。语言代码通常遵循ISO 639-1标准,用于表示特定语言的缩写。
3:<head>...</head>
此为HTML的头部里面的内容:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>学习</title>
</head>
<head>...</head>
是HTML中的一个重要的元素,它位于<html>
标签的内部,用于定义文档的头部信息和元数据。
<head>
元素通常包含以下内容:
<title>
标签:用于定义网页的标题,显示在浏览器标签栏或书签中。<meta>
标签:用于定义文档的元数据,如字符集编码、关键词、描述等。
<head>
标签中的内容并不直接显示在网页上,而是提供关于网页的配置和元数据信息,以及引入外部资源和脚本,做一些与文档结构和显示无关的工作。
### 4:<body>...</body>
见名知意,身体也就是需要我们描绘的地方,代码大部分都写在这个标签里面。
2.HTML中的标签
标签分为单标签和双标签,大多数为双标签,很少一部分是单标签,我会在下面的介绍里面标头会标明。
1:<h></h> 双标签
在HTML中,<h>
标签是用于定义标题的标签,它应该采用以下格式:<h1>...</h1>
到<h6>...</h6>
。
<h1>
表示页面的最高级标题,而<h6>
表示最低级标题。标签内的内容将被浏览器显示为标题,并根据级别的不同进行适当的样式处理。这个处理就是从大到小排,也可以说是重要性,<h1></h1>是最大的也是最重要的。大小从前往后以此递减,范围只有1-6,超过了就失效了。
2:<p></p>双标签
<p></p>
是HTML中用于定义段落的标签。<p>
标签用于将一段文本标记为段落,并在页面中显示为一个换行区块。<p></p>
是HTML中用于定义段落的标签。<p>
标签用于将一段文本标记为段落,并在页面中显示为一个换行区块。
3:<br />单标签
<br>
是HTML中用于换行的标签。它在不创建新段落的情况下,在文本中插入一个换行符。
在HTML中,<br>
标签是一个自闭合标签,不需要闭合标签,但你可以使用<br />
的形式来进行表示,这是为了与XML语法保持一致。
<!DOCTYPE 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>
<!DOCTYPE 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>
我是单标签<br />
我是单标签
</body>
</html>
今天写到这,下一篇更插入,和超链接。
总结
个人感觉,前端比后端有意思,我是一名Java后端,后端给我的感觉就是枯燥,但是我还行坐的住。通过浅学前端,我感觉就像小学时的手抄报,很有意思,以后我自学前端,学习的成果通过发博客的形式呈现出来,望大家指教。