初始HTML-CSDN博客

本文链接：https://blog.csdn.net/Welitsi/article/details/131801034

文章介绍了如何创建第一个简单的HTML网页，指出了其仅显示纯文本的局限性。接着，解释了HTML作为超文本标记语言的角色，包括标记语言的概念、超文本的含义。详细阐述了HTML文件的扩展名和结构，并推荐了WebStorm和VSCode等前端开发工具，特别提到了VSCode的安装配置和常用插件。此外，文章还详细讲解了HTML元素的组成、属性、单双标签以及元素嵌套，并介绍了注释在代码中的作用和重要性。

摘要由CSDN通过智能技术生成

1.开发第一个网页

1.1 新建一个.txt文件

在其中添加一些文字，比如hello world
保存文件
修改文件的扩展名为.html文件
使用浏览器打开页面

在这里插入图片描述

1.2 这个网页有什么缺点

只能显示一段普通文本；
浏览器不知道是否要对这段文本加粗、放大、段落之间的间距；

2. 认识HTML

超文本标记语言（HyperText Markup Language, HTML）是一种用于创建网页的标准标记语言。

HTML 元素是构建网站的基石

什么是标记语言（markup language）？

由无数个标记（标签、tag）组成；
是对某些内容进行特殊的标记，以供其他解释器识别粗合理；
比如使用<h2></h2>标记的文本会被识别为“标题” 进行加粗、文字加大显示；
由标签和内容组成的称为元素（element）

什么是超文本（HyperText）呢?

表示不仅仅可以插入普通的文本（Text），还可以插入图片、音频、视频等内容；
还可以表示超链接（HyperLink），从一个网页跳转到另一个网页；

2.1 HTML文件的特点 - 扩展名（后缀名）

HTML文件的扩展名是.htm\.html

因历史遗留问题，Win95\Win98系统的文件拓展名不能超过3字符，所以使用.htm
现在统一使用 .html

2.2 HTML文件的特点 - 结构

<!DOCTYPE html>
<html lang="en">
<head></head>
<body></body>
</html>

3. 开发工具

3.1 前端开发工具

WebStorm、Sublime Text、Visual Studio Code、Atom、HBuilder、IntelliJ IDEA、Dreamweaver
智能提示、高亮识别、语法检测、集成环境、开发效率高

WebStorm

优点：集成开发工具，包罗万象
缺点：重（占用系统资源多），收费

VS Code

优点：轻（相当于一个编辑器），免费
缺点：需要安装一些插件来辅助开发

3.2 VS Code 工具安装配置

下载：https://code.visualstudio.com/

安装插件

中文插件：Chinese
颜色主题：atom one dark
文件夹图标：VSCode Great Icons
在浏览器中打开网页：open in browser、Live Sever
自动重命名标签：auto rename tag

VSCode的配置(快捷键Ctrl + ,)

Auto Save 自动保存
Font Size 修改代码字体大小
Word Wrap 代码自动换行
Render Whitespace 空格的渲染方式(个人推荐)
Tab Size 代码缩进
- 推荐2个空格（公司开发项目基本都是2个空格）

4. 认识元素

HTML本质上是由一系列的**元素（Element）**构成的；

什么是元素（Element）呢?

元素是网页的一部分；
一个元素可以包含一个数据项，或是一块文本，或是一张照片，亦或是什么也不包含；

HTML有哪些元素？

https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element

4.1 元素的组成

开始标签   结束标签
  ||        ||
  \/        \/
  <p>啦啦啦啦</p>
     |_____|
	   内容
  |____________|
       元素

元素的主要组成部分有：

开始标签（Opening tag）：包含元素的名称（本例为 p），被左、右尖括号所包围。表示元素从这里开始或者开始起作用 —— 在本例中即段落由此开始。
结束标签（Closing tag）：与开始标签相似，只是其在元素名之前包含了一个斜杠。这表示着元素的结尾 —— 在本例中即段落在此结束。初学者常常会犯忘记包含结束标签的错误，这可能会产生一些奇怪的结果。
内容（Content）：元素的内容，本例中就是所输入的文本本身。
元素（Element）：开始标签、结束标签与内容相结合，便是一个完整的元素。

4.2 元素的属性

元素也可以拥有属性(Attribute):

<p class="editor-note">啦啦啦啦</p>
   |_________________|
		   属性

属性包含元素的额外信息，这些信息不会出现在实际的内容中。

创建一个超链接元素a：

<a href="http://www.baidu.com">百度一下</a>

4.2.1 分类

有些属性是公共的，每一个元素都可以设置

比如class、id、title属性

有些属性是元素特有的，不是每一个元素都可以设置

比如meta元素的charset属性、img元素的alt属性等

4.3 单标签与双标签元素

双标签元素：我们会发现前面大部分看到的元素都是双标签的；

html、body、head、h2、p、a元素；

单标签元素：也有一些元素是只有一个标签；

br、img、hr、meta、input；

HTML元素不区分大小写，但是推荐小写

4.4 元素的嵌套

某些元素的内容除了可以是文本之外，还可以去其他元素，这样就形成了元素的嵌套。

<ul>
    <li>
      <div>
        <span>我是span元素</span>
        <span>我是span元素</span>
        <span>我是span元素</span>
      </div>
    </li>
  </ul>

5. HTML的注释

5.1 什么是注释

简单来说，注释就是一段代码说明

<!-- 这是一段注释 -->

注释是只给开发者看的，浏览器并不会把注释显示给用户看

5.2 注释的意义

帮助我们自己理清代码的思路, 方便以后进行查阅.
与别人合作开发时, 添加注释, 可以减少沟通成本.(同事之间分模块开发)
开发自己的框架时, 加入适当的注释, 方便别人使用和学习.(开源精神)
可以临时注释掉一段代码, 方便调试.

注释快捷键：ctrl + /