1-初始前端基本标签

news/2025/3/17 13:35:08/文章来源:https://www.cnblogs.com/positive-boy/p/18342343

目录
  • 初始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>&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)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/777931.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

WIN10使用记录

一、win10任务栏任务缩略图变列表 运行中输入regedit,打开注册表编辑器。HKEY_CURRENT_USER\SOFTWARE\Microsoft\Windows\CurrentVersion\Explorer\Taskband在右侧窗口中找到NumThumbnails,如果没有的话也要手工新建一个Dword(32位)值,把其命名为NumThumbnails, 双击NumT…

「Day 1—递归问题」

递归问题 定义 简洁来说就是一个函数不断调用自身的一个过程。 习题 汉诺塔问题 思路 对于这个经典的问题,我们考虑了使用递归的做法,由于盘子是在三个底座上来回辗转的,所以我们要确定起始座,辅助座,和目标座。我们专注于最下面的最大的那个盘子,先将盘子都放到辅助座上…

集合类关系

每天坚持,终会抵达!

人工智能的虚拟世界:源码和制作方法

源码和制作方法:人工智能的三维虚拟世界,完全免费、完全开源、完整无缺,一步步教你怎么制作这个游戏。8月4日修复学校场景输入框无法输入的故障,并增加教室外的楼道场景。 源码和制作方法:人工智能的三维虚拟世界,完全免费、完全开源、完整无缺,一步步教你怎么制作这个游…

各种变量

1.局部变量2.实例变量相当于把Hello拿了出来,作为一个变量类型来使用 布尔值的默认值是false 3.类变量4.常量

【LCA 树上两点的距离 判定点是否在某条边中】洛谷P3398 仓鼠找sugar

题目链接:P3398 仓鼠找 sugar - 洛谷 | (luogu.com.cn) 题目大意:判定一棵树上的两条边是否相交 Tag: [LCA] [树上两点间距离的计算] [如何判断与点在某条路径上] 思路: \[\begin{align} &1.建图\\ &2.\text{dfs}然后\ 计算出每个点的深度 和计\text{anc}(i,j)\\ &…

go-zero微服务框架的静态文件服务

目录go-zero微服务框架的静态文件服务go-zero版本新建项目目录新建 demo.api 文件生成api代码新建建太文件查看文件目录写入静态服务代码访问1.html参考文档 go-zero微服务框架的静态文件服务 go-zero版本 go-zero v1.7.0 新建项目目录mkdir demo cd demo新建 demo.api 文件 de…

代码随想录Day4

24.两两交换链表中的节点 给你一个链表,两两交换其中相邻的节点,并返回交换后链表的头节点。你必须在不修改节点内部的值的情况下完成本题(即,只能进行节点交换)。 示例 1: 输入:head = [1,2,3,4] 输出:[2,1,4,3]示例 2: 输入:head = [] 输出:[]示例 3: 输入:head…

Go 静态编译及在构建 docker 镜像时的应用

Go 语言具有跨平台和可移植的特点,同时还支持交叉编译,可以在一个系统上编译出运行在另一个系统上的二进制可执行文件,这是因为 Go 在编译时支持将依赖的库文件与源代码一起编译链接到二进制文件中,所以在实际运行时不再需要依赖运行环境中的库,而只需要一个二进制文件就可…

JDK与JRE区别

JDK:是整个Java的核心,包含运行环境+一系列的开发工具包 JRE:java程序开发环境+核心工具类+JVM等。不能用于编译工作。 每天坚持,终会抵达!

mysql 两种重要的日志

前言 这个不用多说,两种重要的日志分别是redo log 和 binlog,这两种,下面分别来结束。 正文 先来redo log, redo log 是inno db 引擎特有的,运用了一种wal 技术,全称是: write-ahead logging. 它的关键点就是先写日志,再写磁盘,也就是先写粉板,等不忙的时候再写账本。…

STM32H7 HAL库CubeMX 双重ADC模式同步采样详细配置+FFT计算相位差

前言 在电赛备赛期间琢磨了一下ADC同步采样的实现方式,本来是打算直接用AD7606来着,但是搞了半天也没把驱动整出来...考虑到AD7606本身采样率也拉不到太高,于是就花了几天时间把片上ADC配出来了。查资料的时候我发现关于STM32双重ADC模式的资料是真的少,用FFT算两路信号相位…