HTML5学习笔记----Day02

最新推荐文章于 2024-04-21 11:17:23 发布

芋头同学

最新推荐文章于 2024-04-21 11:17:23 发布

阅读量207

点赞数

分类专栏： HTML5学习笔记

本文链接：https://blog.csdn.net/jsupoker/article/details/108404763

版权

HTML5学习笔记专栏收录该内容

3 篇文章 0 订阅

订阅专栏

地理定位和SVG

地理定位

HTML5 Geolocation API 用于获得用户的地理位置。鉴于该特性可能侵犯用户的隐私，除非用户同意，否则用户位置信息是不可用的。

1、检测浏览器是否支持地理定位：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>地理定位</title>
</head>
<body>
<script>
    function mylocation() {
        if ("geolocation" in navigator){
            console.log("该浏览器支持地理定位")
        }else {
            console.log("该浏览器不支持地理定位")
        }
    }
    mylocation()
</script>
</body>
</html>

2、使用Geolocation Api获取地理定位：

<script>
    function mylocation() {
        if ("geolocation" in navigator){
            console.log("该浏览器支持地理定位")
            navigator.geolocation.getCurrentPosition(function (position) {
                console.log("纬度："+position.coords.latitude)
                console.log("经度："+position.coords.longitude)
            })
        }else {
            console.log("该浏览器不支持地理定位")
        }
    }
    mylocation()
</script>

在这里插入图片描述

3、关于地理定位更多参考资料：

Geolocation
Navigator

SVG

什么是SVG？
SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
SVG 用于定义用于网络的基于矢量的图形
SVG 使用 XML 格式定义图形
SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失
SVG 是万维网联盟的标准
SVG 的优势
与其他图像格式相比（比如 JPEG 和 GIF），使用 SVG 的优势在于：

SVG 图像可通过文本编辑器来创建和修改
SVG 图像可被搜索、索引、脚本化或压缩
SVG 是可伸缩的
SVG 图像可在任何的分辨率下被高质量地打印
SVG 可在图像质量不下降的情况下被放大

在 HTML5 中，您能够将 SVG 元素直接嵌入 HTML 页面中。

SVG演示

我们可以从IconFont获取SVG图像

IconFont

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>SVG</title>
</head>
<body>
<svg t="1599203709962" class="icon" viewBox="0 0 1542 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4503" width="200" height="200">
    <path d="M1516.182588 556.766871c17.167059-9.914729 25.756612-22.889412 25.792753-35.900236l0.048188-15.119059c0 0.385506-0.036141 0.758965-0.048188 1.144471 0.554165-13.540894-8.143812-27.202259-26.154165-37.538635L726.293082 16.191247c-34.779859-19.974024-90.991435-19.961976-125.530353 0L0.144565 363.170635 0 497.326682 915.636706 1022.795294v-15.119059V1022.795294l600.425412-346.967341c17.155012-9.926776 25.756612-22.901459 25.792753-35.900235l0.048188-15.119059c0 0.385506-0.036141 0.758965-0.048188 1.14447 0.554165-13.540894-8.155859-27.202259-26.166212-37.550682l-29.816471-17.106823 0.048188 2.975623 30.262212-17.492329z" fill="#884D01" p-id="4504"></path><path d="M915.636706 1007.664188v15.119059L0 497.326682l0.048188-15.119058z" fill="#D07400" p-id="4505"></path><path d="M1515.688659 588.3904c34.791906 19.974024 34.972612 52.332424 0.4096 72.2944L915.636706 1007.664188 0.048188 482.207624l600.569977-346.979389c34.575059-19.961976 90.762541-19.961976 125.554447 0l789.516047 453.162165z" fill="#A66206" p-id="4506"></path><path d="M1460.175812 563.236141L904.782306 884.073412v103.905882l555.2128-320.825223c17.155012-9.914729 25.756612-22.889412 25.792753-35.900236l0.192753-103.905882c-0.048188 12.998776-8.637741 25.973459-25.8048 35.900235z" fill="#E0E0E2" p-id="4507"></path><path d="M1515.821176 469.353412c34.779859 19.961976 34.948518 52.332424 0.4096 72.2944L915.636706 888.6272 0.156612 363.170635 600.750682 16.191247c34.550965-19.961976 90.762541-19.974024 125.5424 0l789.528094 453.162165z" fill="#D07400" p-id="4508"></path><path d="M499.133741 469.666635l-34.93647-20.046306-13.275859 7.66193 34.93647 20.058353c3.8912 2.228706 7.143906 4.228518 9.758118 6.023529 2.614212 1.807059 4.457412 3.493647 5.577788 5.095906 1.084235 1.590212 1.301082 3.108141 0.638494 4.577882-0.638494 1.469741-2.337129 2.975624-5.03567 4.529695-2.746729 1.602259-5.577788 2.770824-8.469083 3.553882a42.008094 42.008094 0 0 1-6.637929 1.385412l7.842635 7.951058a47.9232 47.9232 0 0 0 19.082541-6.107858c5.638024-3.252706 9.288282-6.336753 10.93873-9.240094 1.662494-2.891294 1.8432-5.698259 0.590306-8.469083-1.276988-2.758776-3.782776-5.517553-7.541459-8.300423-3.758682-2.770824-8.240188-5.662118-13.456565-8.673883M521.348518 456.161882a28.864753 28.864753 0 0 1-7.059577-5.541647 14.396235 14.396235 0 0 1-3.577976-6.421082 9.481035 9.481035 0 0 1 1.024-6.613835c1.192659-2.216659 3.373176-4.240565 6.577694-6.083765 3.072-1.782965 6.493365-3.011765 10.203859-3.734588a45.417412 45.417412 0 0 1 11.336282-0.686683c3.830965 0.240941 7.589647 0.891482 11.324235 1.951624 3.698447 1.060141 7.047529 2.433506 9.999059 4.132141 2.855153 1.626353 5.216376 3.493647 7.083671 5.553694 1.879341 2.096188 3.047906 4.240565 3.565929 6.481318a9.577412 9.577412 0 0 1-0.987859 6.625882c-1.144471 2.204612-3.312941 4.216471-6.529506 6.071718-3.132235 1.807059-6.589741 3.072-10.336376 3.758682a47.043765 47.043765 0 0 1-11.384471 0.650541c-3.855059-0.240941-7.589647-0.891482-11.276047-1.96367a45.778824 45.778824 0 0 1-9.962917-4.18033m53.380517-30.599529a60.777412 60.777412 0 0 0-15.167247-5.951247 85.714824 85.714824 0 0 0-17.950117-2.566024 81.136941 81.136941 0 0 0-18.432 1.445647 52.790212 52.790212 0 0 0-16.564706 6.059671c-4.818824 2.782871-8.312471 5.903059-10.517083 9.372612-2.180518 3.457506-3.180424 6.975247-2.927435 10.541176 0.240941 3.590024 1.602259 7.059576 4.108047 10.456847 2.505788 3.385224 6.023529 6.396988 10.601412 9.035294 4.397176 2.517835 9.481035 4.517647 15.299765 5.987389a81.799529 81.799529 0 0 0 36.285741 0.951717c6.047624-1.2288 11.565176-3.2768 16.552659-6.156047 4.818824-2.770824 8.312471-5.915106 10.517082-9.360564 2.204612-3.469553 3.168376-6.9632 2.927435-10.505036-0.240941-3.541835-1.626353-6.987294-4.108047-10.336376-2.493741-3.349082-6.047624-6.3488-10.613459-8.975059M644.180329 385.987765l-35.044894-20.118589-13.167435 7.613742 35.044894 20.118588c2.831059 1.626353 5.3248 3.373176 7.45713 5.228423 2.108235 1.855247 3.565929 3.734588 4.312847 5.686212a7.625788 7.625788 0 0 1-0.144565 5.903059c-0.867388 1.975718-2.8672 3.879153-6.02353 5.698259a27.009506 27.009506 0 0 1-9.673788 3.409317c-3.373176 0.493929-6.746353 0.542118-10.119529 0.120471a42.502024 42.502024 0 0 1-9.902683-2.481694 62.403765 62.403765 0 0 1-9.191905-4.336941l-35.044895-20.118588-13.275858 7.673976 35.056941 20.118588c4.457412 2.553976 9.252141 4.7104 14.45647 6.481318 5.168188 1.746824 10.517082 2.843106 16.022589 3.264753a62.765176 62.765176 0 0 0 16.841788-1.024c5.710306-1.120376 11.300141-3.240659 16.745412-6.384941 5.252518-3.035859 8.878682-6.168094 10.866447-9.396706 1.963671-3.216565 2.602165-6.409035 1.903435-9.577412-0.674635-3.168376-2.529882-6.264471-5.565741-9.276235a53.488941 53.488941 0 0 0-11.55313-8.6016M647.481224 357.219388l16.070776-9.276235c1.156518-0.686682 2.578071-1.180612 4.240565-1.505882a22.528 22.528 0 0 1 5.276611-0.397553c1.891388 0.072282 3.746635 0.361412 5.61393 0.831247 1.891388 0.481882 3.614118 1.204706 5.216376 2.120282 1.554071 0.891482 2.770824 1.8432 3.710494 2.891294a7.300518 7.300518 0 0 1 1.686589 3.084047 4.288753 4.288753 0 0 1-0.361412 2.939483 6.180141 6.180141 0 0 1-2.541929 2.469647l-16.649036 9.613553-22.262964-12.769883m98.966588 8.493177l-41.441883-5.830777a9.517176 9.517176 0 0 0 1.120377-9.721976c-1.445647-3.373176-4.373082-6.336753-8.842541-8.89073a38.104847 38.104847 0 0 0-9.91473-3.80687 57.175341 57.175341 0 0 0-11.866353-1.614306 53.886494 53.886494 0 0 0-12.107294 0.975812c-3.975529 0.771012-7.541459 2.072094-10.697788 3.8912l-30.201976 17.444141 68.740517 39.454117 13.275859-7.661929-23.046024-13.227671 13.095153-7.5776 36.984471 5.180236 14.902212-8.613647M814.332988 326.487341l-68.632094-39.393882-13.251765 7.661929 45.007812 25.828894-80.703247-5.3248-10.300235 5.951247 68.740517 39.454118 13.275859-7.673976-44.068141-25.298824 79.173271 5.011577 10.758023-6.216283M817.537506 294.0928l-17.2032-21.178729 36.4544 10.059294-19.2512 11.119435m68.162259-8.830494l-94.70193-24.45553-11.721788 6.770448 42.670682 54.512941 13.661365-7.878777-10.890541-13.444517 23.853176-13.781836 23.479718 6.168094 13.649318-7.890823M941.296941 253.144847l-11.721788-6.722259-34.816 20.118588-57.018729-32.731858-13.275859 7.661929 68.740517 39.454118 48.091859-27.780518" fill="#884D01" p-id="4509"></path><path d="M0.156612 363.170635L0 497.326682 915.636706 1022.795294V888.6272z" fill="#A66206" p-id="4510"></path><path d="M1516.182588 556.766871c17.167059-9.914729 25.756612-22.889412 25.792753-35.900236l0.048188-15.119059c-0.036141 13.010824-8.625694 25.985506-25.792753 35.900236L915.636706 888.6272V1022.795294l600.425412-346.979388c17.155012-9.914729 25.756612-22.889412 25.792753-35.900235l0.048188-15.107012c-0.036141 12.986729-8.637741 25.973459-25.8048 35.900235L927.406682 1000.845553v-103.905882l588.775906-340.184847z" fill="#884D01" p-id="4511"></path><path d="M1504.774024 544.515012l-0.397553 140.263906-40.670871 23.491764 0.4096-140.263906z" fill="#5E4C36" p-id="4512">
</path>
    <path d="M1504.774024 544.515012l-40.670871 23.491764L546.936471 41.562353l40.658823-23.491765z" fill="#6A563D" p-id="4513"></path></svg>
</body>
</html>

在这里插入图片描述

芋头同学

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5学习笔记----Day02

SVG什么是SVG？SVG 指可伸缩矢量图形 (Scalable Vector Graphics)SVG 用于定义用于网络的基于矢量的图形SVG 使用 XML 格式定义图形SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失SVG 是万维网联盟的标准SVG 的优势与其他图像格式相比（比如 JPEG 和 GIF），使用 SVG 的优势在于：SVG 图像可通过文本编辑器来创建和修改SVG 图像可被搜索、索引、脚本化或压缩SVG 是可伸缩的SVG 图像可在任何的分辨率下被高质量地打印
复制链接

扫一扫