HTML5语法与基础标签（一）

皮特王同学
618 阅读3分钟

什么是互联网

代码在本地开发，上传到服务器供所有人访问，服务多了，访问的人多了，互联网就形成了。

HTTP协议

HTTP协议（Hypertext Transfer Protocal 超文本传输协议)是互联网上传输数据的常见协议。

前端和后端

访问互联网，常见的方式就是通过浏览器，浏览器发起请求到服务器，服务器返回数据由浏览器进行渲染，服务器相关功能的开发就是后端，浏览器相关的开发就是前端。（虽然现在前端涉及面很广，但本质上都可以理解为基于浏览器进行开发）

开发一个网页

创建文件夹，用VSCODE编辑器打开，创建一个index.html文件，输入!(英文模式下的感叹号），按tab键即可自动生成HTML5的骨架

image.png

如何浏览网页

在VSCODE中安装LiveServer插件，安装完成后右键选择“Open With Live Server”，将自动打开浏览器展示该网页

image.png

认识HTML5骨架

HTML由标签对构成，HTML5是HTML的最新规范。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
</html>

<!DOCTYPE html>是文档类型声明DTD(Document Type Definition)

<html lang="en"></html>是html标签对，lang="en"lang是html的属性，表示网页的语言

<head></head>是head标签对，包含网页的配置

<body></body>是body标签对，包含网页的内容

字符集

<meta charset="UTF-8" />设置网页的字符集，meta标签表示基础配置；charset是属性名，表示字符集；UTF-8是属性值，表示一种字符集。

UTF-8实际是一种字符编码方式，基于Unicode字符集，该字符集还有其它的编码方式如UTF16等。

网页标题

<title>Document</title>设置网页的标题，即浏览器标签栏上的内容。title也是搜索引擎收录网站时显示的标题，为了吸引用户，合理设置title是必要的。

image.png

认识标签

HTML叫超文本标记语言，“超文本标记”就是标签，不同的标签拥有不同的功能。

标签通常成对出现，比如<p>前端</p>中，<p>是起始标签，</p>是结束标签，p标签表示一段文本，类似的还有<h1>标题</h1>表示一级标题。

有的标签不是成对的，只有一个起始标签，称为单标签。比如<meta chartset="UTF-8">就是一个单标签，在HTML4时代，单标签的尾部还需要添加一个反斜杠/，如<meta charset="UTF-8" />，HTML5不用写。

标题标签

h系列标签表示标题语义，根据权重分为h1~h6，比如<h1>一级标题</h1>、<h2>二级标题</h2>。搜索引擎非常看重h1标签，应该将重点内容放置<h1></h1>中。

h1标签一般只能放置一个，否则会被操作系统视为作弊。

段落标签

<p></p>为段落标签，包含一段文本。

div标签

<div></div>标签是HTML最通用的标签，用于将相关内容组合在一起，构建网页的布局。div标签像是一个容器，什么都可以放在里面，通常我们称之为“盒子”。

HTML5特性

空白折叠

文字间多个空格或换行被合并成一个空格

转义字符

我们如果想要展示今天学习了<p></p>标签这句话，如果我们直接写，就会展示成这样

image.png

浏览器不会展示出标签，只会将其当做语义标识，所以我们需要用特殊的符合来书写，这就是转义字符。

常见的转义字符包括：

  • &lt; 小于号
  • &gt; 大于号
  • &nbsp; 空格(这种方式书写空格不会被折叠）
  • &copy; 版权符号©

所以上面那句话应该这么写：今天学习了&lt;p&gt;&lt;/p&gt;标签。

HTML注释

注释用于解释代码的含义，帮助读者更好的理解代码。注释书写的格式为<!-- 注释内容 -->，注释不会被浏览器识别，只用于为代码提供注解。

avatar
文章
阅读
粉丝