虚浮
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>会被浏览器解析为换行,这个时候就需要实体出现了,不然你是无法得到自己想要的结果的。
<!--
实体的语法:
&实体的名字;
空格
> 大于号
< 小于号
© 版权符号
<br> ==> <br>
-->
<br>
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的基本使用以及选择器介绍。
分享歌曲:
作者介绍