学习HTML(一)

文章目录速览:

——脑图——

HTML注释

!DOCTYPE 

html标签

head标签 

——title标签,定义标题

——meta标签,四个作用

——其他

body标签 


——脑图——

下面将会由左至右,由上至下遍历讲解脑图中出现的各个元素。

HTML注释

 在vscode中可以通过快捷键 Ctrl+/ 快速将所选行注释。 

<!-- 此为注释格式,在此处插入注释 -->

!DOCTYPE 

<!DOCTYPE> 声明不区分大小写,位于文档中的最前面的位置。

但它不是一个 HTML 标签,只是用来告知 Web 浏览器页面使用了哪种 HTML 版本。 

<!DOCTYPE html>
...

html标签

html大标签,其他所有的标签都要写在这里面。

通常可以可用全局属性 lang 标明此网页使用的语言,注意,全局属性不只含 lang 属性。

<!DOCTYPE html>
<!-- en英文,zh-CN中文 -->
<html lang="en">
    ...
</html>

head标签 

head标签是网页的头部,但其内容不会在网页中显现出来。

在我看来,它的作用是表明网页的前置信息。因此 head 标签中包含几类小标签。

——title标签,定义标题

title标签的内容即网页的标题。

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <title>哈喽啊</title>
    </head>
    ...
</html>

——meta标签,四个作用

meta标签由四个作用。

①用来设置网页的编码

...
<head>
    <!-- HTML5规范写法 -->
    <meta charset="UTF-8">
    <!-- HTML4.01规范写法 -->
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
</head>
...

②设置网页关键字,用于百度、bing等搜索引擎搜索时匹配。

所以你可以设置多个关键字来增加网页的访问量(●'◡'●)

...
<head>
    <meta name="keywords" content="HTML常见标签">
</head>
...

③描述网站,用于搜索引擎陈列时显示。

...
<head>
    <meta name="description" content="百度一下,你就知道">
</head>
...

④用于网页重定向,在指定时间后跳转到指定网页。

...
<head>
    <meta http-equiv="refresh" content="5;https://www.baidu.com/">
</head>
...

——其他

...
<head>
    <!-- style标签用于在页面中写css -->
    <style>...</style>
    <!-- link标签用于引入外部css -->
    <link rel="stylesheet" type="text/css" href="style.css">
    <!-- script标签在网页中写或引入外部JavaScript代码 -->
    <script>...</script>
    <script src="***.js"></script>
</head>
...

body标签 

body标签无实际含义,用于放置浏览器中显示信息的所有标志和属性,其中内容在浏览器中显示。

<!DOCTYPE html>
<html lang="en">
    <head>...</head>
    <body>
        <!-- 在这里编写内容,会显示在网页上 -->
        ...
    </body>
</html>

上面的内容写了那么多,其实在 vscode 中常常使用快捷键自动生成。

新建一个 .html 文档后打上一个感叹号选择快捷操作第一个即可。


未完待续,欢迎跟进~

2021/12/25 于圣诞节下午

posted @ 2022-06-17 22:47  东东咚咚东  阅读(51)  评论(0编辑  收藏  举报