前端入门学习笔记（二）HTML入门（一）文档基本结构、标题、段落、水平线及注释

最新推荐文章于 2023-10-15 10:40:50 发布

TUTsmile

最新推荐文章于 2023-10-15 10:40:50 发布

阅读量414

点赞数 1

分类专栏： HTML 文章标签： HTML入门 HTML基础

本文链接：https://blog.csdn.net/TUTsmile/article/details/81457269

版权

HTML 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

我们可以使用 HTML 来建立自己的 WEB 站点，获取此技能是学习如何创建站点的出发点。

网页主要由3个部分组成：

HTML：结构（Structure）
CSS：表现（Presentation）
JavaScript：行为（Behavior）（以后简称js）

HTML 是基础，CSS 负责展现，js 负责功能。
可以将 HTML 理解为英雄模型，CSS 理解为英雄皮肤，js 为英雄技能。
没玩游戏的可以理解为 html 是骨架 css 是皮肤 js 是肌肉。
此章节用于了解学习HTML，可先把CSS，js抛之脑后

1.基本结构

<!DOCTYPE html> 
<html> 
	<head> 
		<meta charset="UTF-8"> 
		<title>页面标题</title> 
	</head> 
	<body> 
		<h1>这是我的第一个标题</h1> 
		<p>这是我的第一个段落。</p> 
	</body> 
</html>

这是我的第一个标题

这是我的第一个段落。

2. 解析

<!DOCTYPE html> 声明了文档的类型
<head> HTML 头部元素包含关于文档的概要信息，其中<meta charset=“UTF-8”>定义网页编码格式为utf-8
<html>标签是HTML页面的根元素，该标签的结束标志为 </html>
<title>标签定义文档的标题，即我们浏览器中标签所显示的内容
<body>标签定义文档的主体，即网页可见的页面内容，该标签的结束标志为 </body>
<h1> 标签作为一个标题使用，该标签的结束标志为 </h1>

顺便一提，我在写解析时，用MarkDwon要写出<!DOCTYPE html>时遇到了问题，因为MarkDown兼容HTML，因此若直接输出<!DOCTYPE html>会被视为代码而不被显示，此处则需要写为

<!DOCTYPE html>

来代替<!DOCTYPE html>的输入。

3. HTML标题

像word一样，HTML同样可以设置多个标题，段落使用h1-h6 的标签来进行定义的，h1-h6大小依次递减。且均会另起一行。

<h1>这是一个标题</h1>
<h2>这是一个标题</h2>
<h3>这是一个标题</h3>

这是一个标题

这是一个标题

这是一个标题

4. HTML段落、水平线及注释

段落也会另起一行。水平线独立一行。为注释，文字或许看不太清除“–”为两个‘-’组成

    <p>这是一个段落。</p>
    <hr><!-- 这是水平线 -->
    <p>这是另外一个段落。</p>
    <hr/><!-- 这是水平线 -->
    <!-- 这是一段注释 -->

这是一个段落。

这是另外一个段落。

为什么会有<hr>与<hr/>两种形式呢？因为在HTML中，都有<开始标签>内容<结束标签/>，“/”是作为结束标签的标志存在的。而<hr>作为水平线，没有内容，则<hr>与<hr/>都可以使用。不过推荐大家使用<hr/>，即闭合的hr，以免在不同浏览器上造成兼容问题。

刚开始学习前端三件套的时候，就需要养成好的习惯，之后会学习到有些标签可不闭合（即可忽略结束标志），但是遇到这类标签推荐大家均将其闭合，以免产生兼容问题。

TUTsmile

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
前端入门学习笔记（二）HTML入门（一）文档基本结构、标题、段落、水平线及注释

我们可以使用 HTML 来建立自己的 WEB 站点，获取此技能是学习如何创建站点的出发点。网页主要由3个部分组成：HTML：结构（Structure）CSS：表现（Presentation）JavaScript：行为（Behavior）（以后简称js）HTML 是基础，CSS 负责展现，js 负责功能。可以将 HTML 理解为英雄模型，CSS 理解为英雄皮肤，js 为英雄...
复制链接

扫一扫