目录
- 初始html –超文本标记语言
- 1.超文本：
- 2.标记语言：
- 3.标签
- 4.html基本框架
- 5.拓展插件
- 6.文字标签
- 7.转义字符
- 8.语义化与SEO
初始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="https://img2023.cnblogs.com/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><</span><!-- 大于号 --><span>></span><!-- 空格 --><p> 我前面有几个空格</p><!-- 人民币 --><p>¥</p> </body> </html>
-
-
7.转义字符
在前端开发中，有的符号可能会产生歧义，让浏览器不好理解，所以一些特别的符号就用转义字符代替，比如 空格，普通的<和>
语法：
- < - -小于号 - -<；
- `> --大于号 --gt;
空格-- --人民币--¥
8.语义化与SEO
SEO- ->搜索引擎优化
优化网页内容，提高权重，让网页可以在搜索引擎里面排名更加靠前（提高
规范性，语义化，meta属性）
网站排名靠前的好处：
越靠前，浏览量，点击量更多–>用户量/流量更多
b标签：单纯的加粗文字不起强调作用；
strong标签：不仅起到加粗文字，还有强调作用；
- 有利于学习的网站：
程序员专区
C语言中文网：C语言程序设计门户网站(入门教程、编程软件) (biancheng.net)
