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列表一共有三种：

有序列表
无序列表
自定义列表

列表的定义：

有序列表，使用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的基本使用以及选择器介绍。

分享歌曲：