• web前端零基础入门4


    VS 配置liveServer

    • 第一步还是直接搜索,搜索live即可,找到第三个live server,这是大多数用户选择的。

    -在这里插入图片描述

    • 安装liveServer的用处是方便我们的网页也会随着我们的代码同步更新。不用再去手动刷新。
      在这里插入图片描述
    • 第三,标题栏网址也会变化。之前都是咱们磁盘的地址,而现在安装好liveServer之后,就是一个真正的服务器地址。

    在这里插入图片描述
    在这里插入图片描述
    -但是唯一不足是,它也并不是完全同步,我们还是需要在源代码上面CTRL+S保存一下之后,它才会出现。

    实体

    • 首先在VS里面咱们可以直接!+enter(回车键)就可以直接生成以下代码。其他一般情况下,!+tab键也可以。
    • 在这里插入图片描述
      简单写一句话
      在这里插入图片描述

    空格的使用

    • 当我们在这句话的中间按上一个空格键,我们发现在网页中也会出现

    在这里插入图片描述

    • 但是有了一个空格之后,当我们无论按多少个,在网页中也只有一个空格的距离。
      在这里插入图片描述
    • 这就说明在我们编写网页中,我们的空格会被浏览器解析为只有一个空格。

    <>的使用

    • 当我们重新写一个开始

      标签后,我们写上ac,表示的是b既大于a又大于c,但是在网页中只显示ac。
      在这里插入图片描述

    • 这是因为我们的VS把它作为了一个开始标签,所以不显示。而且我们看见c好像有被加粗的感觉,因为b表示的就是加粗的意思。
      在这里插入图片描述

    如何解决标签问题

    • 我们只需要在标签的前面加上一个空格
      在这里插入图片描述在这里插入图片描述

    注意

    • 在HTML中我们不能直接书写一些特殊符号,比如:多个连续的空格,比如:字母两侧的大于和小于符号。因为它们本身有特殊含义。
    • 如果我们要写网页中的特殊符号,我们需要使用HTML中的实体(转义字符)。

    实体的语法

    • 首先实体的用法:&和一个分号,&中间是实体的名字;
    • 例如我们这里的空格: & nbsp ; (想要网页中有几个空格就写几遍& nbsp ; )
      在这里插入图片描述

    常用实体

    由于这里的符号如果不空格,显示不了,所以我空格了,实际编写时,大家不用刻意将&和;空格哦~
    在这里插入图片描述

    空格:& nbsp ;
    大于:& gt ;
    小于:& lt ;
    版权符号:& copy ;

    怎样查询其他实体

    直接找到W3school网站,找到HTML实体这一栏
    在这里插入图片描述
    你需要的应该都有

    meta标签

    • 首先我们还是新创建一个html
      在这里插入图片描述
    • 因为meta标签有100多个,想要全部记住确实需要非常大的功夫,那么如果我们想要查看更多的meta标签除了M3school网站,还有一个更权威的应该就算是MDN了吧。
      在这里插入图片描述
    • 由于我也不太了解,大家自己去了解吧。
      在这里插入图片描述

    meta标签有哪些

    • meta标签就是元数据,但是元数据不是给用户看的
    • charset:指定网页的字符集
    • name:指定数据的名称
    • content:指定数据的内容
    • keywords:表示网站中的关键字,可以同时指定多个关键字,关键字使用用空格隔开。
      在这里插入图片描述
    • 如果大家忘了怎么写,不妨去真实的网站中看一看别人怎么写的,借鉴一下也不是不可以。
      在这里插入图片描述
    • 这里的conten="3…"就是表示这个网站,你进去之后将在3秒过后弹出来。

    在这里插入图片描述

    注意

    meta标签是写在< head >里面
    之后还会学meta标签写视口。(未完待续…)

  • 相关阅读:
    DHCP概述及原理
    【Anaconda】conda阿里云镜像源配置
    Node Package Manager (npm包管理工具 )
    23.1 微服务理论基础
    超级记忆节目
    生成删除数据库所有表的外检脚本
    Python爬虫是什么?
    基于单片机的太阳能热水器控制系统设计与仿真
    java 企业工程管理系统软件源码+Spring Cloud + Spring Boot +二次开发+ MybatisPlus + Redis
    Day02SSM第二次笔记---加载properties文件和容器的相关知识
  • 原文地址:https://blog.csdn.net/qq_62512326/article/details/125535570