HTML图像标记

TML图像标记

常用的图像格式—GIF，PNG，JPG
图像标记<img />
HTML网页中任何元素的实现都要依靠HTML标记，要想在网页中显示图像就需要使用图像标记，接下来将详细介绍图像标记以及和他相关的属性。其基本语法格式如下：

<img src="图像URL" />

该语法中src属性用于指定图像文件的路径和文件名，他是img标记的必需属性。

相对路径和绝对路径

相对路径
相对路径不带有盘符，通常是以HTML网页文件为起点，通过层级关系描述目标图像的位置。
例如：

<img src="img/logo.gif" alt="传智播客-专业的java培训,.net培训,php培训,网页培训,平面培训,iOS培训机构" />

相对路径设置分为以下三种：

图像文件和html文件位于同一文件夹：只需输入图像文件的名称即可，如<img src="logo.gif" />。

图像文件位于html文件的下一级文件夹：输入文件夹名和文件名，之间用“/”隔开，如<img src="img/img01/logo.gif" />。

图像文件位于html文件的上一级文件夹：在文件名之前加入“…/” ，如果是上两级，则需要使用 “…/ …/”，以此类推，如<img src="../logo.gif" />。

绝对路径

绝对路径一般是指带有盘符的路径。

例如：

“D:\HTML+CSS网页制作\chapter02\img\logo.gif”，或完整的网络地址，例如“http://www.itcast.cn/images/logo.gif”。

我自己是一名从事了多年开发的web前端老程序员，目前辞职在做自己的web前端私人定制课程，今年年初我花了一个月整理了一份最适合2019年学习的web前端学习干货，各种框架都有整理，送给每一位前端小伙伴，想要获取的可以关注我的头条号并在后台私信我：前端，即可免费获取。

原文链接：https://blog.csdn.net/dubaiqaq/article/details/103500345

言

前面文章中写过类似的文章《手把手教你HTML5实现根据LBS定位到商家两点之间距离多少》，建议有兴趣的小伙伴可以看看。

使用 HTML5 Geolocation API 来构建基于地理位置的应用～

各种浏览器对HTML5 Geolocation 的支持

浏览器版本只支持HTTPS版本 IE 9+ - Edge 12+ - Firefox 3.5+ - Chrome 5+ 50+ Safari 5+ 39+ iOS Safari 3.2+ 10.2+ Android Browser 2.1+ 56+ Chrome for Android 57+ 57+ UC Browser for Android 11.4+ -

出于安全考虑，部分浏览器只允许通过HTTPS协议使用 Geolocation API。在HTTP协议下使用Geolocation API 浏览器会抛出异常，在开发阶段，127.0.0.1和localhost 等本地域在两种协议下均可使用。

Geolocation API 通过 navigator.geolocation 全局对象进行访问，第一次访问的时候会询问用户是否允许共享位置。

判断浏览器是否支持 Geolocation API

        // 判断浏览器属否支持获取位置
        if(navigator.geolocation){
            console.log("可以获取");
        }else{
            console.log("不支持");
        }

实例代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    获取用户地理位置
    <input type="button" value="点击获取位置" id="btn">
    <script>
        let btnBtn = document.getElementById('btn')
        btnBtn.onclick = () => { // 点击事件
                getAdd()
            }
            // 成功回调
        let success = (position) => {
                console.log(`获取位置成功：${position.coords}`);
                console.log(position.coords); // 获取坐标信息
                // coords的常用属性
                console.log(position.coords.latitude); // 获取坐标纬度
                console.log(position.coords.longitude); // 获取坐标经度
                console.log(position.coords.accuracy); // 获取坐标精度，单位为米
                console.log(position.timestamp); // 获取位置的时间戳

            }
            // 失败回调
        let error = (positionErr) => {
            console.log(`获取位置失败：${positionErr.code}+${positionErr.message}`);
        }

        let options = {
            enableHightAccuracy: false, // 获取高精度的位置信息，可能会增加响应时间，默认是false
            timeout: 30000, // 设置超时时间，单位毫秒，如果到达设定的时间没获取到信息则回触发失败回调，默认值为0，无限大
            maximumAge: 0 // 设置用户位置信息缓存的最大时间
        }
        let getAdd = () => {
            navigator.geolocation.getCurrentPosition(success, error, options)
        }


        // 判断浏览器属否支持获取位置
        if(navigator.geolocation){
            console.log("可以获取");
        }else{
            console.log("不支持");
        }
    </script>
</body>

</html>

当获取位置失败时，会调用失败回调(error函数)。返回的参数<positionErr.code 标识错误的原因><positionErr.message错误信息描述> positionErr.code 值

UNKNOWN_ERROR(0): 其他错误
PERMISSION_DENIED(1): 用户拒绝分享位置信息
POSITION_UNAVAILABLE(2): 获取用户位置信息失败
TIMEOUT(3): 获取用户位置信息超时

tml概述和基本结构

html概述

HTML是 HyperText Mark-up Language 的首字母简写，意思是超文本标记语言，超文本指的是超链接，标记指的是标签，是一种用来制作网页的语言，这种语言由一个个的标签组成，用这种语言制作的文件保存的是一个文本文件，文件的扩展名为html或者htm，一个html文件就是一个网页，html文件用编辑器打开显示的是文本，可以用文本的方式编辑它，如果用浏览器打开，浏览器会按照标签描述内容将文件渲染成网页，显示的网页可以从一个网页链接跳转到另外一个网页。

html基本结构

一个html的基本结构如下：

<!DOCTYPE html>
<html lang="en">
 <head> 
 <meta charset="UTF-8">
 <title>网页标题</title>
 </head>
 <body>
 网页显示内容
 </body>
</html>

第一行是文档声明，第二行“”标签和最后一行“”定义html文档的整体，“”标签中的‘lang=“en”’定义网页的语言为英文，定义成中文是’lang=“zh-CN”’,不定义也没什么影响，它一般作为分析统计用。 “”标签和“”标签是它的第一层子元素，“”标签里面负责对网页进行一些设置以及定义标题，设置包括定义网页的编码格式，外链css样式文件和javascript文件等，设置的内容不会显示在网页上，标题的内容会显示在标题栏，“”内编写网页上显示的内容。

HTML文档类型

目前常用的两种文档类型是xhtml 1.0和html5

xhtml 1.0

xhtml 1.0 是html5之前的一个常用的版本，目前许多网站仍然使用此版本。

此版本文档用sublime text创建方法： html:xt + tab

文档示例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
 <title> xhtml 1.0 文档类型 </title>
</head>
<body>
</body>
</html>

html5

pc端可以使用xhtml 1.0，也可以使用html5，html5是向下兼容的

此版本文档用sublime text创建方法： html:5 + tab 或者 ! + tab

文档示例：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title> html5文档类型 </title>
</head>
<body>
</body>
</html>

两种文档的区别

1、文档声明和编码声明

2、html5新增了标签元素以及元素属性

html注释：

html文档代码中可以插入注释，注释是对代码的说明和解释，注释的内容不会显示在页面上，html代码中插入注释的方法是：

<!-- 这是一段注释 -->

html标题标签

通过

、

,标签可以在网页上定义6种级别的标题。6种级别的标题表示文档的6级目录层级关系，比如说：

用作主标题，其后是

，再其次是

，以此类推。搜索引擎会使用标题将网页的结构和内容编制索引，所以网页上使用标题是很重要的。

<h1>这是一级标题</h1>
<h2>这是二级标题</h2>
<h3>这是三级标题</h3>

html段落标签、换行标签与字符实体

html段落标签

标签定义一个文本段落，一个段落含有默认的上下间距，段落之间会用这种默认间距隔开，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>段落</title>
</head>
<body>
 <p>HTML是 HyperText Mark-up Language 的首字母简写，意思是超文本标记语言，超
 文本指的是超链接，标记指的是标签，是一种用来制作网页的语言，这种语言由一个个的
 标签组成，用这种语言制作的文件保存的是一个文本文件，文件的扩展名为html或者htm。
 </p>
 <p>一个html文件就是一个网页，html文件用编辑器打开显示的是文本，可以用文本的方
 式编辑它，如果用浏览器打开，浏览器会按照标签描述内容将文件渲染成网页，显示的网
 页可以从一个网页链接跳转到另外一个网页。</p>
</body>
</html>

html换行标签

代码中成段的文字，直接在代码中回车换行，在渲染成网页时候不认这种换行，如果真想换行，可以在代码的段落中插入

来强制换行，代码如下：

<p>
一个html文件就是一个网页，html文件用编辑器打开显示的是文本，可以用<br />
文本的方式编辑它，如果用浏览器打开，浏览器会按照标签描述内容将文件<br />
渲染成网页，显示的网页可以从一个网页链接跳转到另外一个网页。
</p>

html字符实体

代码中成段的文字，如果文字间想空多个空格，在代码中空多个空格，在渲染成网页时只会显示一个空格，如果想显示多个空格，可以使用空格的字符实体,代码如下：

<!-- 在段落前想缩进两个文字的空格，使用空格的字符实体： -->
<p>
 一个html文件就是一个网页，html文件用编辑器打开显示的是文本，可以用<br />
文本的方式编辑它，如果用浏览器打开，浏览器会按照标签描述内容将文件<br />
渲染成网页，显示的网页可以从一个网页链接跳转到另外一个网页。</p>

在网页上显示 “<” 和 “>” 会误认为是标签，想在网页上显示“<”和“>”可以使用它们的字符实体，比如：

<!-- “<” 和 “>” 的字符实体为 < 和 > -->
<p>
 3 < 5 <br>
 10 > 5
</p>

html块标签、含样式的标签

html块标签

1、

标签块元素，表示一块内容，没有具体的语义。

2、标签行内元素，表示一行中的一小段内容，没有具体的语义。

含样式和语义的标签

1、 标签行内元素，表示语气中的强调词

2、标签行内元素，表示专业词汇

3、 标签行内元素，表示文档中的关键字或者产品名

4、标签行内元素，表示非常重要的内容

语义化的标签

语义化的标签，就是在布局的时候多使用有语义的标签，搜索引擎在爬网的时候能认识这些标签，理解文档的结构，方便网站的收录。比如：h1标签是表示标题，p标签是表示段落，ul、li标签是表示列表，a标签表示链接，dl、dt、dd表示定义列表等，语义化的标签不多。

html图像标签、绝对路径和相对路径

html图像标签

标签可以在网页上插入一张图片，它是独立使用的标签，它的常用属性有：

src属性定义图片的引用地址

alt属性定义图片加载失败时显示的文字，搜索引擎会使用这个文字收录图片、盲人读屏软件会读取这个文字让盲人识别图片，所以此属性非常重要。

<img src="images/pic.jpg" alt="产品图片" />

绝对路径和相对路径

像网页上插入图片这种外部文件，需要定义文件的引用地址，引用外部文件还包括引用外部样式表，javascript等等，引用地址分为绝对地址和相对地址。

绝对地址：相对于磁盘的位置去定位文件的地址

相对地址：相对于引用文件本身去定位被引用的文件地址

绝对地址在整体文件迁移时会因为磁盘和顶层目录的改变而找不到文件，相对路径就没有这个问题。相对路径的定义技巧：

“ ./ ” 表示当前文件所在目录下，比如：“./pic.jpg” 表示当前目录下的pic.jpg的图片，这个使用时可以省略。

“ …/ ” 表示当前文件所在目录下的上一级目录，比如：“…/images/pic.jpg” 表示当前目录下的上一级目录下的images文件夹中的pic.jpg的图片。

html链接标签

标签可以在网页上定义一个链接地址，它的常用属性有：

href属性定义跳转的地址

title属性定义鼠标悬停时弹出的提示文字框

target属性定义链接窗口打开的位置

target="_self" 缺省值，新页面替换原来的页面，在原来位置打开

target="_blank" 新页面会在新开的一个浏览器窗口打开

在线咨询

上一篇：HTML行内元素与块级元素有哪些及区别？
下一篇：HTML编码规范

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商