虚浮

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