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

目录

初始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>&lt;</span>
    <!-- 大于号 -->
    <span>&gt;</span>
    <!-- 空格 -->
    <p>&nbsp;&nbsp; 我前面有几个空格</p>
    <!-- 人民币 -->
    <p>&yen;</p>
</body>
</html>

7.转义字符

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

语法：

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

8.语义化与SEO

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

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

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

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

  • 有利于学习的网站：

程序员专区

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

posted @   奋斗的独角兽  阅读(19)  评论(0)  编辑  收藏  举报
相关博文：
·  3.初识CSS与文本背景样式
·  8.初始JavaScript
·  前端（一）
·  前端学习之html(一）
·  前端基础之HTML基础
阅读排行：
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型，支持深度思考和联网搜索！
· 25岁的心里话
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· ollama系列01：轻松3步本地部署deepseek，普通电脑可用
· 闲置电脑爆改个人服务器（超详细） #公网映射 #Vmware虚拟网络编辑器
点击右上角即可分享
微信分享提示