前端从零单排HTML系列（1）

最新推荐文章于 2025-08-09 21:35:33 发布

转载最新推荐文章于 2025-08-09 21:35:33 发布 · 101 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5ad747845188252ea31a8403

文章标签：

#前端 #xhtml #ViewUI

本文为前端初学者介绍了HTML的基础知识，包括HTML文档结构、常用标签及其属性，以及如何正确使用标题等元素来构建良好的网页结构。

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

写系列文章的原因

入行前端已经有一段时日，但成长的速度很慢，每天都是策划虐我千百遍，我带他们如初恋，公司的事情很多很忙，但都是写重复的工作没有技术含量，有时候回去很晚，有时候回去很早，于是打游戏、看直播各种消遣就是不想学习，一天突然顿悟，不能这么下去，如果30岁还是这样那我就完了，于是打算每天回去写点东西学点东西，大神们勿喷很基础

html介绍

HTML是用于描述网页文档（网页）的标记语言。

DOCTYPE声明定义了文档类型是HTML
html>和</ html>之间的文本描述了一个HTML文档
head>和</ head>之间的文本提供了关于文档的信息
title>和</ title>之间的文本提供了文档的标题
body>和</ body>之间的文本描述了可见的页面内容
h1>和</ h1>之间的文字描述了一个标题
p>和</ p>之间的文字描述了一个段落
HTML标签是尖括号包围的关键字（标签名称）

<！DOCTYPE>声明

HTML5 <!DOCTYPE html>
HTML 4.01 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
XHTML 1.0 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
声明的话尽量有html5的方式去声明因为html已经兼容所有浏览器，并且格式简单易记

HTML 元素

HTML元素使用开始标签写入，并带有结束标签，内容介于两者之间：
< 标记名>内容< /标记名>
HTML 元素是从开始标记到结束标记的所有内容：

嵌套的HTML元素

HTML元素可以嵌套（元素可以包含元素）

所有HTML文档都由嵌套的HTML元素组成

这个例子包含4个HTML元素：

<html>
<body>

<h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>
</html>
复制代码

HTML 属性

HTML元素可以有属性
属性提供了有关元素的附加信息
属性始终在开始标签中指定
属性出现在名称/值对中，如：name =“value”
所有的HTML元素都可以有属性
HTML title属性提供了额外的“工具提示”信息
HTML href属性为链接提供地址信息
HTML width和height属性提供图像的大小信息
HTML alt属性为屏幕阅读器提供文本
在W3Schools，我们总是使用小写的 HTML属性名称
在W3Schools，我们总是用双引号引用属性

HTML 标题

HTML标题

标题由<h1>至<h6>标签定义。

<h1>定义了最重要的标题。<h6>定义最不重要的标题。
浏览器会在每个标题之前和之后自动添加一些空白区域（边距）。

仅将HTML标题用于标题。请勿使用标题将文字变成BIG或粗体。

搜索引擎使用您的标题来索引您的网页的结构和内容。

用户通过标题浏览您的页面。使用标题显示文档结构非常重要。

h1标题应该是主标题，其次是h2标题，然后是不太重要的h3，依此类推。

<HR>标记创建在HTML页中的水平线。
HTML 元素与HTML标题无关。

HTML 元素包含元数据。元数据不显示。

HTML 元素位于标签和标签之间
HTML <title>元素是元数据。它定义了HTML文档的标题。

标题不会显示在文档中，但可能会显示在浏览器选项卡中。
HTML 元素也是元数据。

它可以用来定义字符集和关于HTML文档的其他信息。

HTML段落

HTML <p>元素定义了一个段落。
HTML <br>元素定义了换行符。
HTML <pre>元素定义了预格式化文本。

你不能确定如何显示HTML。

大屏幕或小屏幕以及调整大小的窗口将产生不同的结果。
使用HTML，您无法通过在HTML代码中添加额外的空格或额外的行来更改输出。
浏览器将在显示页面时删除多余的空格和多余的行。
任何数量的空格和任何数量的新行都只能算作一个空格。

转载于:https://juejin.im/post/5ad747845188252ea31a8403