HTML-1标签及简单使用（h1-h6、span 、p、hr、pre、br）---外加注释标签＜!-- xxx --＞

最新推荐文章于 2025-01-01 17:44:18 发布

¡Venceremo

最新推荐文章于 2025-01-01 17:44:18 发布

阅读量994

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML 文章标签： html 前端 java

本文链接：https://blog.youkuaiyun.com/weixin_47295886/article/details/125771085

HTML 专栏收录该内容

29 篇文章

订阅专栏

本文探讨了如何通过超链接组织文本，涵盖了HTML的基本结构、CSS样式应用、JavaScript交互以及前端框架的使用，如Vue、React和Angular。

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

超文本：通过超链接的形式将文本有机组织在一起

标记：标签<title> 元素：<a>dd </a>

HTML语言：标签、元素、属性(在标签内部)

<!doctype html>
<html>-------------------------一个网页的开始
        <head>----------------------头部
          <title>无标题文档</title>--------------------网页的标题栏
        </head>



        <body>

网页的主题内容出现在工作区
        </body>
</html>

<!DOCTYPE html>——————————————文档类型 符号HTML5标准
<html lang="en">——————————————language属性 en中文 zh中文（提示给搜索引擎）
<head>
	<meta charset="UTF-8">——————————————metadata元数据，包含网页的基础信息类似网页的作者 啥时候修改 修改的最新版本 提供给关键字给搜索引擎
charset:——————————————字符集的编码方式
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	
</body>
</html>

字符character——————————————文字、符号

字符集charset——————————————字符集合

英文字符集中文字符集

编码：将字符和二进制对应出来

编码的方式有utf-8:针对所有语言的统一编码

标题h1-h6

一个页面建议只有一个h1标题

行内组合span标签（将需要特殊表示的标签组合）---配合样式的使用

段内换行br标签 ------------------在p标签内

段落p 标签

段落会与下个短路i进行自然的分行，段落和段落之间会添加默认的段落间距，将源代码中多个连续的空格变成一个空格在网页显示。使用 显示多个空格， 空行也会显示成空格。

<!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>
	<p>
		前村雨过溪流乱，    行路迷&nbsp;&nbsp;&nbsp;漫都间断。
	</p>
	<p>
		孤洲尽日少人来，小舟系在垂杨岸。
		主人空有济川心，坐见门前水日深。<br>袖手归来茅屋下，任他鸥鸟自浮沉。
	</p>
</body>
</html>

预留格式pre标签（保留了原格式）

水平线hr标签 --------默认做到右

像源代码添加注释

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>首页</title>
	<style type="text/css">
		span{
			color: red;
			font-weight: bold;
		}
	</style>
</head>
<body>
<!-- web -->
	<h1>web前端开发</h1>
	<h2>HTML</h2>
	<p>超文本编辑语言，用于构建网页结构</p>
	<hr />
	<h2>CSS</h2>
	<p>层叠样式，用于构建布局、外观、美化页面</p>
	<hr />
	<h2>JS</h2>
	<p>javascript语言，用于构建网页行为，于用户交互，使用户获得更好的体验</p>
</body>
</html>