HTML入门笔记总结一（基础篇）

本文链接：https://blog.csdn.net/qq_41861161/article/details/123780100

文章参考：菜鸟教程
内容部分借鉴该博主：轻松玩编程
前言：“所有目标都是黑暗的，只有行动才与光明相伴！当你停下脚步的时候，不要忘了别人还在奔跑。”
你好，我是星辰，期待与你相遇，和我一起进入HTML的世界吧！

图片来源小红书

文章目录

01.HTML概述
- 1.知识的引入：
- 2.什么是HTML?
02.HTML编辑器
03.HTML实战
- 1.第一个HTML:
- 2.基本标签
写在最后：
结语

01.HTML概述

1.知识的引入：

关于浏览器系统的结构：

B/S架构：
Browser/Server(浏览器/服务器的交互形式）

Browser支持哪些语言：HTML CSS JavaScript

写HTML CSS JavaScript代码的叫做：WEB前端开发工程师。

前端的图片需要UI设计师完成。

S是服务器端Server,Server端的语言有很多：如c/c++,Java,python…等等。

B/s架构的系统有什么优缺点？
优点：升级方便，只升级服务器端代码即可。维护成本低。
缺点：速度慢，体验差，界面不炫酷，无法运行大型游戏。（否则卡死)
企业内部的解决方案都是采用B/S的系统，因为办公不需要炫酷，只要能做数据的增删改查即可。并且维护成本低。

如：京东、腾讯视频、百度等

C/S架构

服务器-客户机，即Client-Server(C/S)结构。C/S结构通常采取两层结构。服务器负责数据的管理，客户机负责完成与用户的交互任务。
缺点：升级麻烦，维护成本较高。
优点：速度快，体验好，界面炫酷。（娱乐性的系统多数是C/S架构）
如：各种app。

2.什么是HTML?

HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。

超文本是用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本。超文本更是一种用户界面范式，用以显示文本及与文本之间相关的内容。

HTML不是一种编程语言，而是一种标记语言（markup language）

标记语言是一套标记标签（markup tag）

HTML使用标记标签来描述网页

标签往往都是成对儿出现的，每个标签都有开始标签和结束标签。

  <标签>
    <标签>
     <标签 属性名=“属性值”属性名=“属性值”>
	 </标签>
  	</标签>
   </标签>

HTML是由W3C世界万维网联盟制订的协议：HTML/XML/http协议/https协议W3C制定了HTML的规范，每个浏览器厂家都会遵守。

HTML目前最高版本：HTML5.0,简称H5

02.HTML编辑器

目前HTML编辑器可以说是种类繁多，仅推荐几个我用过的编辑器吧。

记事本

不多说，Windows自带神器万物皆可记事本。可直接运行无需安装，简洁、实用

VS Code

Visual Studio Code（简称 VS Code）是一个由微软开发，同时支持 Windows 、 Linux 和 macOS 等操作系统且开放源代码的代码编辑器，编辑器中内置了扩展程序管理的功能。

官方网站：http://www.sublimetext.com/

Notepad++

Notepad++是 Windows操作系统下的一套文本编辑器(软件版权许可证: GPL)，有完整的中文化接口及支持多国语言编写的功能(UTF8技术)。Notepad++是免费软件，可以免费使用，自带中文，支持众多计算机程序语言。

官方网站：https://notepad-plus-plus.org/

Sublime Text

Sublime Text 是一款具有代码高亮、支持语法提示、可以自动完成且反应速度快的编辑器，它的开发页面较为简单、使用者可以快速上手操作。相比于其他开发软件比如 Vim、Eclipse、VS 等较难上手的编辑器，Sublime Text 显得尤为简单。而与那些体积轻巧而且可以快速启动的编辑器如 Editplus、Notepad++ 来说也是突出的。

官方网站：http://www.sublimetext.com/

hBuilder X

我目前正在使用，体验非常好

HX是轻量编辑器和强大IDE的完美结合体。敏捷的性能，清爽的界面，强大的功能和于一身。

官方网站：https://www.dcloud.io/hbuilderx.html

03.HTML实战

1.第一个HTML:

<!-- HTML的文件拓展名为：.html
1.HTML的注释 ：<!-- 这是单行注释 -->
<!--2.HTML不区分大小写，语法松散
 -->
<!DOCTYPE html><!-- 根， -->
<html lang="zh"><!-- 头 -->
<head>
	<meta charset="UTF-8"> <!-- 声明文件的字符集类型为“UTF-8” -->
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<!-- 这里是网页标题内容 -->
	<title>星辰，你好！</title>   
</head>
     <!-- 网页的主体内容 -->
<body>
	欢迎来到HTML!
</body>
</html>

2.基本标签

1、body标签

网页身体标签，所有网页内容都在里面，存放各种标签

2、div盒子模型

一般划分一个个区域，构建骨架

3、p文本段落标签

为文本段落标签，可存放大段落文字

4、 h1~h6标题标签

h1到h6级别逐渐减小
书写规范，一个页面只允许出现一个h1（一级标题标签），若重复出现网页会分不清主次内容，就像一篇作文只能有一个作文题目一样。

5、b标签和strong标签（文字加粗标签）

都是用于加粗文字的。二者区别是：

strong标签是为了突出重点

6、 span文字包裹标签

包裹文字的标签。
p标签和span标签的区别是：p标签会自动换行，而span标签不会自动换行。一般短的语句可以用span标签包裹。长点的用p标签包裹。

7、 br换行标签和hr分隔符标签

br标签和hr标签都是单标签
br标签是换行标签
hr标签是分隔符标签(水平分割线)

8、 i标签和em标签

二者都是斜体标签，使文字呈现效果
二者区别：em标签更容易被浏览器识别到

9、del删除标签

一般用于价格删除线

10、center居中标签

使文本居中

11、 sup上标和sub下标

标签的内容将会在当前字符高度的一半为基准线的下/上方，字体大小会小一点。

12、 pre预格式化标签

被包围在pre标签中的文本通常会保留空格和换行符，而文本也会呈现出等宽字体。

上述标签使用方法及代码展示：

 <body>
    <!-- 这是身体标签，网页的正文内容 -->

   <div class="div1">
        <!--这是一个盒子标签-->
        <p>我是段落文本p标签</p >
        <h1>我是一级标题标签</h1>
        <h2>我是二级标题标签</h2>
        <h3>我是三级标题标签</h3>
        <h4>我是四级标题标签</h4>
        <h5>我是五级标题标签</h5>
        <h6>我是六级标题标签</h6>
    </div>
    <hr>

    <div class="div2">
       <!--这也是一个盒子标签-->

        <!-- 区别是p会自动换行，而span不会自动换行，共用一行 -->
        <p>你好</p >
        <p>我爱前端</p >
        <p>好好学习</p >
        <hr>
        <!--分隔符-->
        <span>你好</span>
        <span>我爱前端</span>
        <span>好好学习</span>
        <br>
        <span>我被br强制换行了</span>
    </div>
    <hr>

    <div class="div3">
        <!--这还是一个盒子标签-->
        <p>我是正常的p</p >
        <p><i>我是被斜体i定义后的p</i></p >
       <p><em>我是被斜体em定义后的p，我更容易被浏览器识别</em></p >
    </div>
    <hr>

    <div class="div4">
        <span>现价：￥99
            <del>原价：￥399</del>
            <!--这是删除符-->
            <center>我是居中对齐</center>
            H<sub>2</sub>O
            CO<sup>2</sup>

        </span>
    </div>
    <hr>

    <div class="5">
        <p>
            你好 我是星辰
            我爱学前端
            我的空格和换行没有被p保留
        </p >

        <pre>
            你好   我是星辰
            我爱学前端
            我是被pre保留了空格和换行
        </pre>
    </div>
  </body>