前端学习零基础——HTML框架初学入门笔记（1）

本文链接：https://blog.csdn.net/qq_43444655/article/details/107302769

HTML5框架初学入门

持续记录前端学习内容，从零基础到编辑网页，从JS到微信小程序。包括本菜鸟博主遇到的一些小技巧和好用的插件程序。

1.HTML基础框架

<!DOCTYPE html>
<html>
<!-- 基础框架 -->
    <head>
        <meta charset="utf-8">
            <title>
                我的博客
            </title>
    </head>
    <body>

        <h1> <font color = "blue">Dominic</font>的博客</h1>
        <h2> <font color = "blue">Dominic</font>的博客</h2>
        
    </body>
</html>

<!DOCTYPE html> 声明为 HTML5 文档。#其中doctype大小写均可
<html> 元素是 HTML 页面的根元素。
<head> 元素包含了文档的元（meta）数据，如定义网页编码格式为 utf-8。
<title> 元素描述了文档的标题。
<body> 元素包含了可见的页面内容。
<h1> 元素定义一个大标题。#h1可以替换为h2,h3……等，代表不同题目字体
 元素定义一个段落。
<meta charset="utf-8">元素是定义网页编码，其中utf-8代表万国码。

在VS code中，可以输入!+ tab 一键傻瓜式形成完整的HTML5基本框架。如图👇）

<!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>
    
</body>
</html>

2.注释

跟其他编程语言一样，HTML也有独特的注释语句。

<!-- 乱七八遭的注释都可以。支持所有语言。 -->
<!-- Random comments are fine. Support all languages. -->
<!--ランダムなコメントで結構です。 すべての言語をサポートします。-->

同时，与其它语言一样，也可以使用 ctrl+/的方式注释整行整段。

3.标签与自结束标签

HTML中，用方括号括起来的表示标签，标签段里面的内容为显示内容。例如你的内容部分，可以写任何内容 。

（1）.标签

标签分为自结束标签和非自结束标签。如……，<html>……</html>都是非自结束标签，这些标签都要成对出现，在结束的时候加 /。简单来说就是你得给定一个范围让他结束，这个标签的管辖范围仅包括夹在中间的内容。

（2）.自结束标签

有一些标签可以不用添加结束标志，例如<img>,<link>,<input>,<hr>等等。同时，这些标签还有另外一种编写方式，例如<img>可以写成<img />，用以区分非自结束标签和自结束标签。

4.标签属性

属性是应用广泛，且也是很重要的编程内容。它是多功能标签的必备选项。

例如在编写文本的时候，编辑字体的标签可以更改字体大小，颜色，字体类型等等。不加属性，虽然不会报错，但这个标签就毫无作用。

属性要添加在标签内部，如可以更改字体大小，size就是标签包含的一种属性。同时，有些标签还可以支持多属性。依然以为例，多属性的时候，在一条属性后面加空格即可，例如 ，这里双引号单引号都可以。

5.HTML及一些常用语言官方docsets

在编写程序的时候，往往会用到不同的标签、属性等等，而不同的标签都有不一样的作用。标签属性种类繁多，很难记住。

这里介绍一款官方软件zeal，由于是外网网站，这里把官方网站作搬运。Zeal是面向软件开发人员的脱机文档浏览器，包含196个常用语言文档集。
Zeal界面展示
链接: Zeal官网下载.