HTML基础知识详解：结构、文本格式与标签应用-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_43637099/article/details/115741244

文章目录

一些有用的链接
基本部分
正式部分

一些有用的链接

基本部分

HTML中的基本语法单位，用于指定内容的类别
利用一对<>将标签名称包围起来
格式： this is simple staff 
标签名称小写，标签未必都包含内容
在标签中加入属性，属性以键值的形式指定，属性值用双引号包起来
 i'm content 

注释

编辑器

vscode

正式部分

HTML文档的标准结构

必须包含这四个标签：<html> <head> <title> <body>
第一行是DOCTYPE命令<!DOCTYPE HTML>
之后紧接着一个<html>标签，包含属性lang，可以指定文档语言<html lang="en" >
文档包括head和body两部分，前者提供文档相关信息，后者提供文档内容
head一般包括title和meta，指定文档标题，meta至少指定编写文档的字符集
整个的html文档结构像这样

<!DOCTYPE html>
<html lang="en">
	<head>
		<title> i'm article title </title>
		<meta charset="utf-8"/>
		...
	</head>
	<body>
		...
	</body>
</html>

基本的文本标记

段落

浏览器将适量文本放在一行，末尾自动换行；
嵌入在文本中的换行会被忽略；多个空格和换行会被替换成一个空格

<!DOCTYPE html>
<html lang = "zh">
	<head>
		<meta charset="utf-8">
		<title>test-when-learn</title>
	</head>
	<body>
		<p>我  写     代码
			
			
			呆呆的
			
		</p>
	</body>
</html>

在这里插入图片描述
如果段落标签不在行首，浏览器会中断当前行，并插入一个空白行。

<!DOCTYPE html>
<html lang = "zh">
	<head>
		<meta charset="utf-8">
		<title>test-when-learn</title>
	</head>
	<body>
		<p>我写代码呆呆的 </p><p> 我写代码可快了</p>
	</body>
</html>

运行结果
在这里插入图片描述

折行

不想要空行，可以使用 

<!DOCTYPE html>
<html lang = "zh">
	<head>
		<meta charset="utf-8">
		<title>test-when-learn</title>
	</head>
	<body>
        <p>我写代码呆呆的 <br> 我写代码可快了</p>
	</body>
</html>

在这里插入图片描述

保留空白字符

用<pre> ，保留换行，字符间距，行间距；
可以包含几乎任何标签，避免文本内容中出现特殊字符

<!DOCTYPE html>
<html lang = "zh">
	<head>
		<meta charset="utf-8">
		<title>test-when-learn</title>
	</head>
	<body>
        <pre>我写代码       呆呆的 
            
            我写代码可快了
        </pre>
	</body>
</html>