墨滴

虚浮

V1

2022/02/09阅读：43主题：极客黑

WebGIS学习之HTML

WebGIS学习之HTML

主要内容预览：
1.vscode相关配置
2.HTML常用标签以及相关案例

1.vscode相关配置

  • vscode下载安装
  • vscode相关插件安装

1.vscode下载安装

下载地址：https://code.visualstudio.com/Download/

安装步骤:一直next即可。

2.vscode相关插件下载

推荐插件：
1.live server(运行代码，必装)
2.Auto Close Tag(自动补充HTML标签)
3.Auto Rename Tag(改动HTML开标签会自动改变闭标签)
4.Bracket Pair Colorizer
5.Auto Import(自动加载组件)
6.Beautiful(美化代码)

vscode插件安装步骤：
具体步骤如下图：

2.HTML常用标签

1.实体
2.meta标签
3.语义化标签
4.列表标签
5.超链接标签
6.图片标签
7.内联框架
8.音视频标签

1.实体

实体是什么？(可以类比python语言的转义字符)
在HTML中，有时候我们无法直接书写一些特殊符号，比如我们要在网页中书写<br>，你直接写<br>会被浏览器解析为换行，这个时候就需要实体出现了，不然你是无法得到自己想要的结果的。

<!--
  实体的语法：
    &实体的名字;
    &nbsp; 空格
    &gt; 大于号
    &lt; 小于号
    &copy; 版权符号
    
    <br> ==> &lt;br&gt;
  -->
    &lt;br&gt;

2.meta标签

meta的含义是元数据，简单来说就是对网页进行说明，它常用的内容如下图所示：

<head>
    <meta charset="UTF-8">
    /* 
        meta主要用于设置网页中的一些元数据，元数据不是给用户看
            charset 指定网页的字符集
            name 指定的数据的名称
            content 指定的数据的内容

            keywords 表示网站的关键字，可以同时指定多个关键字，关键字间使用,隔开
            <meta name="Keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东"/>
            <meta name="keywords" content="网购,网上购物,在线购物,网购网站,网购商城,购物网站,网购中心,购物中心,卓越,亚马逊,卓越亚马逊,亚马逊中国,joyo,amazon">
                    
            description 用于指定网站的描述
            <meta name="description" content="京东JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!"/>
                    网站的描述会显示在搜索引擎的搜索的结果中

                title标签的内容会作为搜索结果的超链接上的文字显示    
     */
     <meta name="keywords" content="HTML5,前端,CSS3">
     <meta name="description" content="这是一个非常不错的网站">
     /*
          <meta http-equiv="refresh" content="3;url=https://www.mozilla.org"> 
        将页面重定向到另一个网站
    -->
    <!-- <meta http-equiv="refresh" content="3;url=https://www.baidu.com"> */
    <title>Document</title>

</head>

3.语义化标签

在网页中HTML专门用来负责网页的结构，所以在使用html标签时，应该关注的是标签的语义，而不是它的样式。
所谓语义化标签即标签能够表达出开发者想表达的意思，比如我要写网页的头部，就可以使用<head>标签，所见即所得。 语义化标签主要包括：
☆标题标签：h1~h6(常用的h1~h4)以及hgroup(标题分组)
☆段落标签：p,常用
☆强调标签：em(斜体)和strong(加粗)标签
☆引用标签：q(短引用)和blockquote(长引用)
☆换行标签：br
☆布局标签：如下

  header 表示网页的头部
  main 表示网页的主体部分(一个页面中只会有一个main)
  footer 表示网页的底部
  nav 表示网页中的导航
  aside 和主体相关的其他内容（侧边栏）
  article 表示一个独立的文章
  section 表示一个独立的区块，上边的标签都不能表示时使用section

  div 没有语义，就用来表示一个区块，目前来讲div还是我们主要的布局元素
  span 行内元素，没有任何的语义，一般用于在网页中选中文字

4.列表标签

在html中也可以创建列表，html列表一共有三种：

  1. 有序列表
  2. 无序列表
  3. 自定义列表

列表的定义：

  • 有序列表，使用ol标签来创建无序列表
    使用li表示列表项

  • 无序列表，使用ul标签来创建无序列表
    使用li表示列表项

  • 定义列表，使用dl标签来创建一个定义列表
    使用dt来表示定义的内容
    使用dd来对内容进行解释说明

  • 列表之间可以互相嵌套

5.超链接

超链接： 超链接可以让我们从一个页面跳转到其他页面，或者是当前页面的其他的位置。
超链接的定义与使用：

  • 使用 a 标签来定义超链接
  • 属性：
    href 指定跳转的目标路径
          - 值可以是一个外部网站的地址
          - 也可以写一个内部页面的地址
    target属性，用来指定超链接打开的位置
         可选值：
               _self 默认值 在当前页面中打开超链接
                _blank 在一个新的要么中打开超链接

ex:如下

<a href="https://www.baidu.com">超链接</a>
<br><br>
<!-- <a href="https://www.baidu123.com">超链接</a> -->
<a href="07.列表.html">超链接2</a>
    

思考：使用a标签如何实现从页面底部回到顶部？以及如何利用a标签定位到网页中某个位置？

answer(参考):1.可以直接将超链接的href属性设置为#，这样点击超链接以后页面不会发生跳转，而是转到当前页面的顶部的位置
2.可以跳转到页面的指定位置，只需将href属性设置 #目标元素的id属性值

6.图片标签

图片标签用于向当前页面中引入一个外部图片，使用img标签来引入外部图片，img标签是一个自结束标签。
属性：

  • src 属性指定的是外部图片的路径（路径规则和超链接是一样的）

  • alt 图片的描述，这个描述默认情况下不会显示，有些浏览器会图片无法加载时显示,搜索引擎会根据alt中的内容来识别图片，如果不写alt属性则图片不会被搜索引擎所收录

  • width 图片的宽度 (单位是像素)

  • height 图片的高度

  • 宽度和高度中如果只修改了一个，则另一个会等比例缩放

  • 注意：一般情况在pc端，不建议修改图片的大小，需要多大的图片就裁多大,但是在移动端，经常需要对图片进行缩放（大图缩小）
    示例：

 <img src="./img/1.gif" alt="松鼠">

 <img width="200"  src="https://d2ggl082rr1mkp.cloudfront.net/category/IronMan_preview_1521810286_220_310.jpeg" alt="钢铁侠">

图片的格式：

  • jpeg(jpg)：支持的颜色比较丰富，不支持透明效果，不支持动图，一般用来显示照片
  • gif：支持的颜色比较少，支持简单透明，支持动图；颜色单一的图片，动图
  • png：支持的颜色丰富，支持复杂透明，不支持动图；颜色丰富，复杂透明图片（专为网页而生）
  • webp：这种格式是谷歌新推出的专门用来表示网页中的图片的一种格式；它具备其他图片格式的所有优点，而且文件还特别的小；缺点：兼容性不好
  • base64：将图片使用base64编码，这样可以将图片转换为字符，通过字符的形式来引入图片；一般都是一些需要和网页一起加载的图片才会使用base64
    图片格式使用原则：效果一样，用内存占比小的;效果不一样，用效果好的

7.内联标签(很少用到)

内联框架，用于向当前页面中引入一个其他页面。 属性：
src 指定要引入的网页的路径
frameborder 指定内联框架的边框
ex:

  <iframe src="https://www.baidu.com" width="800" height="600" frameborder="0"></iframe>

8.音视频标签

audio音频标签： audio 标签用来向页面中引入一个外部的音频文件的；音视频文件引入时，默认情况下不允许用户自己控制播放停止。
video视频标签： 使用video标签来向网页中引入一个视频；使用方式和audio基本上是一样的。

相关属性以及案例如下：

<!--
属性：
  controls 是否允许用户控制播放
  autoplay 音频文件是否自动播放
    - 如果设置了autoplay 则音乐在打开页面时会自动播放
      但是目前来讲大部分浏览器都不会自动对音乐进行播放 
  loop 音乐是否循环播放  
-->
<!--
简单写法：
-->
<audio src="./source/audio.mp3" controls autoplay loop></audio>   
<audio src="./source/audio.mp3" controls></audio> 
<video src="./source/flower.mp4" controls autoplay loop></video>

<!--
  兼容性写法：音频标签
-->
<audio controls>
    <!-- 对不起，您的浏览器不支持播放音频！请升级浏览器！ -->
    <source src="./source/audio.mp3">
    <source src="./source/audio.ogg">
    <embed src="./source/audio.mp3" type="audio/mp3" width="300" height="100">
</audio>

<!--
视频标签
-->
<video controls>
    <source src="./source/flower.webm">
    <source src="./source/flower.mp4">
    <embed src="./source/flower.mp4" type="video/mp4">
</video>

以上即为今天所有内容，下一篇文章内容预计为CSS的基本使用以及选择器介绍。

分享歌曲：

分类：

前端

标签：

HTML

作者介绍

虚浮
V1