初始html –超文本标记语言

1.超文本：

比普通的文本更厉害。可以插入图片/音乐/视频/超链接,对立面的内容进行排版，样式设计

2.标记语言：

可以吧html当做是一快拼图，它的代码就是一块快碎片称为标签，我们要做的事情就是要把正确的标签
放在合适的位置就可以了（不需要考虑太多的逻辑）

什么样的是网页文件？网页文件的后缀是什么？

一个文件，它的内容为html代码，文件后缀为.html就是一个网页文件

3.标签

写在html里面的代码。用<>包裹

单标签;一般是作为功能标签，有特别的作用
- <hr>–>分割线
- <br>-->换行
双标签：一般是用来包裹/保存内容，显示东西，它一般是成双成对出现，需要闭合，结束标签里面有个/
- <标签名>内容</标签名>
  
  <h1>多喝热水</h1>
  <h1>
  
  多喝热水
  
  </h1>

4.html基本框架

写代码时，更加推荐创建一个专门的项目文件夹来写代码
创建好html文件后，输入!+回车或者 html:5 就可以生成网页模版
html 注释的语法：
- 
  - 快捷键：ctrl+/
基本框架代码：
- <html></html>:是网页的基本组成，基本上所有东西都写在里面
- <head></head>:头标签，里面的内容是一些网页说明，主要是给浏览器看的
- <body>

<!DOCTYPE html><!--doc文档type类型 文档类型为html，告诉你的电脑，这是一个网页文件-->
<html lang="en"><!--html标签，是网页的基本组成，网页内容都写在它里面-->
<head><!--头标签，里面的内容是一些网页说明，主要是给浏览器看的-->
    <meta charset="UTF-8"><!-- meta标签，设置一些属性，设置字符编码为utf-8-->
    <title>我喜欢你</title><!-- 标题标签，作为网页的标题-->
</head>
<body><!-- 身体标签，里面的内容是给客户看的，图片/文字-->
    <h1>我喜欢你很久了</h1>
    <p>我爱你</p>
    <img src="/i/l/?n=23&i=blog/3493231/202408/3493231-20240804223117493-1660621093.png" alt="美女">
</body>

5.拓展插件

vscode - ->开发插件：open in brower,HTML CSS SUPPORT
快捷键：ALT +B
vscode删除一整行的快捷键：ctrl+x 或者shift+del

6.文字标签

h标题标签

<h1>
    一级标题：网页里的老大，从规范里面来说，一个网页只能有一个一级标题
</h1>

<h2>
    二级标题：作用就是切分网页内容，作为目录标签，可以有多个
</h2>
<h3>
    三级标题：分块内容标签
</h3>
以此类推  
h标题只有h1~h6,常用h1~h3

p段落标签

<p>文本内容</p>:用来放内容，用的比较多的文本标签，它会自动换行
<span>文本内容</span>:它不会自动换行，也没有特别的样式属性，比较单纯，后续主要结合css一起使用
<br>-->换行
<hr>-->分割线

特殊文字标签

<b></b> &&<strong></strong>:加粗文本标签
<i></i> &&<em></em>:文本斜体标签

<u></u> &&<ins></ins>:文本下划线标签

<!DOCTYPE html>
<html lang="en">
<head><!--给服务器看的，浏览器看的，头部标签-->
    <meta charset="UTF-8">
    <title>wb前端学习</title>
    
</head>
<body><!--身体标签，里面的内容主要给用户看的-->
    啊，我没有套标签<!--不标准的，不推荐-->
    
    <p>我有标签</p>
    <br><!--换行-->
    <p>我喜欢你很久了</p>
    <hr><!--分割符-->
    <h1>初始html –超文本标记语言</h1>
    <h2>1.超文本</h2>
    <p>比普通的文本更厉害。可以插入图片/音乐/视频/超链接,对立面的内容进行排版，样式设计</p>
    <!-- 标题标签 -->
    <h2>2.标记语言</h2>
    <!-- 段落标签 -->
    <p>可以吧html当做是一快拼图，它的代码就是一块快碎片称为标签，我们要做的事情就是要把正确的标签
        放在合适的位置就可以了（不需要考虑太多的逻辑）</p><!--p标签会自动换行，比较常用的一个文本标签-->

    <hr>
    <!-- 行内标签 -->
    <span>写代码时，更加推荐创建一个专门的项目文件夹来写代码</span><!--一般结合css一起使用-->
    <br><!--换行-->
    <span>创建好html文件后，输入`!+回车 或者 html:5 就可以生成网页模版</span>

    <p style="color: rgb(8, 247, 255);">特价98块钱</p><!--加颜色，这是全部都加了-->
    <!-- 如果我们想只加数字上面 -->
    <p>特价<span style="color: rgb(204, 0, 255);">98</span>块钱</p>
    <!-- 特殊文字标签 -->
    <!-- 加粗标签 -->
    <b>特价98块钱</b>
    <br>
    <strong>特价98块钱</strong>  <!--b标签和strong标签等价,不自带换行-->
    <!-- 斜体标签 -->
<br>
    <i>我喜欢你很久了</i>
    <br>
    <em>我喜欢你</em>  <!--em标签和i标签等价-->
    <br>
    <!-- 下划线标签 -->
    <u>围城</u> <ins>羊驼</ins>
    <!-- 又加粗又斜体且有下划线 -->
    <br>
    <strong><em><ins>我喜欢你很久了</ins></em></strong>   
    <!--小于号-->
    <span>&lt;</span>
    <!-- 大于号 -->
    <span>&gt;</span>
    <!-- 空格 -->
    <p>&nbsp;&nbsp; 我前面有几个空格</p>
    <!-- 人民币 -->
    <p>&yen;</p>
</body>
</html>

7.转义字符

在前端开发中，有的符号可能会产生歧义，让浏览器不好理解，所以一些特别的符号就用转义字符代替，比如空格，普通的<和>

语法：

< - -小于号 - -&lt；
`> --大于号 --gt;
空格--&nbsp
--人民币--¥

8.语义化与SEO

SEO- ->搜索引擎优化
优化网页内容，提高权重，让网页可以在搜索引擎里面排名更加靠前（提高

规范性，语义化，meta属性）

网站排名靠前的好处：
越靠前，浏览量，点击量更多–>用户量/流量更多

b标签：单纯的加粗文字不起强调作用；
strong标签：不仅起到加粗文字，还有强调作用；

有利于学习的网站：

程序员专区

C语言中文网：C语言程序设计门户网站(入门教程、编程软件) (biancheng.net)

标签：网页,--,标签,html,&&,超文本,文本,初始
From： https://www.cnblogs.com/positive-boy/p/18342343

1-初始前端&&基本标签