整合營(yíng)銷(xiāo)服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線：
常用的圖像格式—GIF，PNG，JPG
圖像標(biāo)記<img />
HTML網(wǎng)頁(yè)中任何元素的實(shí)現(xiàn)都要依靠HTML標(biāo)記，要想在網(wǎng)頁(yè)中顯示圖像就需要使用圖像標(biāo)記，接下來(lái)將詳細(xì)介紹圖像標(biāo)記以及和他相關(guān)的屬性。其基本語(yǔ)法格式如下：
<img src="圖像URL" />
該語(yǔ)法中src屬性用于指定圖像文件的路徑和文件名，他是img標(biāo)記的必需屬性。
相對(duì)路徑
相對(duì)路徑不帶有盤(pán)符，通常是以HTML網(wǎng)頁(yè)文件為起點(diǎn)，通過(guò)層級(jí)關(guān)系描述目標(biāo)圖像的位置。
例如：
<img src="img/logo.gif" alt="傳智播客-專(zhuān)業(yè)的java培訓(xùn),.net培訓(xùn),php培訓(xùn),網(wǎng)頁(yè)培訓(xùn),平面培訓(xùn),iOS培訓(xùn)機(jī)構(gòu)" />
相對(duì)路徑設(shè)置分為以下三種：
圖像文件和html文件位于同一文件夾：只需輸入圖像文件的名稱(chēng)即可，如<img src="logo.gif" />。
圖像文件位于html文件的下一級(jí)文件夾：輸入文件夾名和文件名，之間用“/”隔開(kāi)，如<img src="img/img01/logo.gif" />。
圖像文件位于html文件的上一級(jí)文件夾：在文件名之前加入“…/” ，如果是上兩級(jí)，則需要使用 “…/ …/”，以此類(lèi)推，如<img src="../logo.gif" />。
絕對(duì)路徑
絕對(duì)路徑一般是指帶有盤(pán)符的路徑。
例如：
“D:\HTML+CSS網(wǎng)頁(yè)制作\chapter02\img\logo.gif”，或完整的網(wǎng)絡(luò)地址，例如“http://www.itcast.cn/images/logo.gif”。
我自己是一名從事了多年開(kāi)發(fā)的web前端老程序員，目前辭職在做自己的web前端私人定制課程，今年年初我花了一個(gè)月整理了一份最適合2019年學(xué)習(xí)的web前端學(xué)習(xí)干貨，各種框架都有整理，送給每一位前端小伙伴，想要獲取的可以關(guān)注我的頭條號(hào)并在后臺(tái)私信我：前端，即可免費(fèi)獲取。
原文鏈接：https://blog.csdn.net/dubaiqaq/article/details/103500345
前面文章中寫(xiě)過(guò)類(lèi)似的文章《手把手教你HTML5實(shí)現(xiàn)根據(jù)LBS定位到商家兩點(diǎn)之間距離多少》，建議有興趣的小伙伴可以看看。
各種瀏覽器對(duì)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+ -
出于安全考慮，部分瀏覽器只允許通過(guò)HTTPS協(xié)議使用 Geolocation API。在HTTP協(xié)議下使用Geolocation API 瀏覽器會(huì)拋出異常，在開(kāi)發(fā)階段，127.0.0.1和localhost 等本地域在兩種協(xié)議下均可使用。
Geolocation API 通過(guò) navigator.geolocation 全局對(duì)象進(jìn)行訪問(wèn)，第一次訪問(wèn)的時(shí)候會(huì)詢(xún)問(wèn)用戶是否允許共享位置。
判斷瀏覽器是否支持 Geolocation API
// 判斷瀏覽器屬否支持獲取位置
if(navigator.geolocation){
console.log("可以獲取");
}else{
console.log("不支持");
}
實(shí)例代碼如下：
<!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="點(diǎn)擊獲取位置" id="btn">
<script>
let btnBtn = document.getElementById('btn')
btnBtn.onclick = () => { // 點(diǎn)擊事件
getAdd()
}
// 成功回調(diào)
let success = (position) => {
console.log(`獲取位置成功：${position.coords}`);
console.log(position.coords); // 獲取坐標(biāo)信息
// coords的常用屬性
console.log(position.coords.latitude); // 獲取坐標(biāo)緯度
console.log(position.coords.longitude); // 獲取坐標(biāo)經(jīng)度
console.log(position.coords.accuracy); // 獲取坐標(biāo)精度，單位為米
console.log(position.timestamp); // 獲取位置的時(shí)間戳
}
// 失敗回調(diào)
let error = (positionErr) => {
console.log(`獲取位置失敗：${positionErr.code}+${positionErr.message}`);
}
let options = {
enableHightAccuracy: false, // 獲取高精度的位置信息，可能會(huì)增加響應(yīng)時(shí)間，默認(rèn)是false
timeout: 30000, // 設(shè)置超時(shí)時(shí)間，單位毫秒，如果到達(dá)設(shè)定的時(shí)間沒(méi)獲取到信息則回觸發(fā)失敗回調(diào)，默認(rèn)值為0，無(wú)限大
maximumAge: 0 // 設(shè)置用戶位置信息緩存的最大時(shí)間
}
let getAdd = () => {
navigator.geolocation.getCurrentPosition(success, error, options)
}
// 判斷瀏覽器屬否支持獲取位置
if(navigator.geolocation){
console.log("可以獲取");
}else{
console.log("不支持");
}
</script>
</body>
</html>
當(dāng)獲取位置失敗時(shí)，會(huì)調(diào)用失敗回調(diào)(error函數(shù))。返回的參數(shù)<positionErr.code 標(biāo)識(shí)錯(cuò)誤的原因><positionErr.message錯(cuò)誤信息描述> positionErr.code 值
《手把手教你HTML5實(shí)現(xiàn)根據(jù)LBS定位到商家兩點(diǎn)之間距離多少》
作者：藍(lán)海00
鏈接：https://www.jianshu.com/p/d0b0b6120055
html概述
HTML是 HyperText Mark-up Language 的首字母簡(jiǎn)寫(xiě)，意思是超文本標(biāo)記語(yǔ)言，超文本指的是超鏈接，標(biāo)記指的是標(biāo)簽，是一種用來(lái)制作網(wǎng)頁(yè)的語(yǔ)言，這種語(yǔ)言由一個(gè)個(gè)的標(biāo)簽組成，用這種語(yǔ)言制作的文件保存的是一個(gè)文本文件，文件的擴(kuò)展名為html或者h(yuǎn)tm，一個(gè)html文件就是一個(gè)網(wǎng)頁(yè)，html文件用編輯器打開(kāi)顯示的是文本，可以用文本的方式編輯它，如果用瀏覽器打開(kāi)，瀏覽器會(huì)按照標(biāo)簽描述內(nèi)容將文件渲染成網(wǎng)頁(yè)，顯示的網(wǎng)頁(yè)可以從一個(gè)網(wǎng)頁(yè)鏈接跳轉(zhuǎn)到另外一個(gè)網(wǎng)頁(yè)。
html基本結(jié)構(gòu)
一個(gè)html的基本結(jié)構(gòu)如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>網(wǎng)頁(yè)標(biāo)題</title> </head> <body> 網(wǎng)頁(yè)顯示內(nèi)容 </body> </html>
第一行是文檔聲明，第二行“”標(biāo)簽和最后一行“”定義html文檔的整體，“”標(biāo)簽中的‘lang=“en”’定義網(wǎng)頁(yè)的語(yǔ)言為英文，定義成中文是’lang=“zh-CN”’,不定義也沒(méi)什么影響，它一般作為分析統(tǒng)計(jì)用。 “”標(biāo)簽和“”標(biāo)簽是它的第一層子元素，“”標(biāo)簽里面負(fù)責(zé)對(duì)網(wǎng)頁(yè)進(jìn)行一些設(shè)置以及定義標(biāo)題，設(shè)置包括定義網(wǎng)頁(yè)的編碼格式，外鏈css樣式文件和javascript文件等，設(shè)置的內(nèi)容不會(huì)顯示在網(wǎng)頁(yè)上，標(biāo)題的內(nèi)容會(huì)顯示在標(biāo)題欄，“”內(nèi)編寫(xiě)網(wǎng)頁(yè)上顯示的內(nèi)容。
HTML文檔類(lèi)型
目前常用的兩種文檔類(lèi)型是xhtml 1.0和html5
xhtml 1.0
xhtml 1.0 是html5之前的一個(gè)常用的版本，目前許多網(wǎng)站仍然使用此版本。
此版本文檔用sublime text創(chuàng)建方法： 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 文檔類(lèi)型 </title> </head> <body> </body> </html>
html5
pc端可以使用xhtml 1.0，也可以使用html5，html5是向下兼容的
此版本文檔用sublime text創(chuàng)建方法： html:5 + tab 或者 ! + tab
文檔示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> html5文檔類(lèi)型 </title> </head> <body> </body> </html>
兩種文檔的區(qū)別
1、文檔聲明和編碼聲明
2、html5新增了標(biāo)簽元素以及元素屬性
html注釋?zhuān)?/strong>
html文檔代碼中可以插入注釋?zhuān)⑨屖菍?duì)代碼的說(shuō)明和解釋?zhuān)⑨尩膬?nèi)容不會(huì)顯示在頁(yè)面上，html代碼中插入注釋的方法是：
<!-- 這是一段注釋 -->
通過(guò)
、
、
、
、
,標(biāo)簽可以在網(wǎng)頁(yè)上定義6種級(jí)別的標(biāo)題。6種級(jí)別的標(biāo)題表示文檔的6級(jí)目錄層級(jí)關(guān)系，比如說(shuō)：
，再其次是
，以此類(lèi)推。搜索引擎會(huì)使用標(biāo)題將網(wǎng)頁(yè)的結(jié)構(gòu)和內(nèi)容編制索引，所以網(wǎng)頁(yè)上使用標(biāo)題是很重要的。
<h1>這是一級(jí)標(biāo)題</h1> <h2>這是二級(jí)標(biāo)題</h2> <h3>這是三級(jí)標(biāo)題</h3>
html段落標(biāo)簽
標(biāo)簽定義一個(gè)文本段落，一個(gè)段落含有默認(rèn)的上下間距，段落之間會(huì)用這種默認(rèn)間距隔開(kāi)，代碼如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>段落</title> </head> <body> <p>HTML是 HyperText Mark-up Language 的首字母簡(jiǎn)寫(xiě)，意思是超文本標(biāo)記語(yǔ)言，超 文本指的是超鏈接，標(biāo)記指的是標(biāo)簽，是一種用來(lái)制作網(wǎng)頁(yè)的語(yǔ)言，這種語(yǔ)言由一個(gè)個(gè)的 標(biāo)簽組成，用這種語(yǔ)言制作的文件保存的是一個(gè)文本文件，文件的擴(kuò)展名為html或者h(yuǎn)tm。 </p> <p>一個(gè)html文件就是一個(gè)網(wǎng)頁(yè)，html文件用編輯器打開(kāi)顯示的是文本，可以用文本的方 式編輯它，如果用瀏覽器打開(kāi)，瀏覽器會(huì)按照標(biāo)簽描述內(nèi)容將文件渲染成網(wǎng)頁(yè)，顯示的網(wǎng) 頁(yè)可以從一個(gè)網(wǎng)頁(yè)鏈接跳轉(zhuǎn)到另外一個(gè)網(wǎng)頁(yè)。</p> </body> </html>
html換行標(biāo)簽
代碼中成段的文字，直接在代碼中回車(chē)換行，在渲染成網(wǎng)頁(yè)時(shí)候不認(rèn)這種換行，如果真想換行，可以在代碼的段落中插入
來(lái)強(qiáng)制換行，代碼如下：
<p> 一個(gè)html文件就是一個(gè)網(wǎng)頁(yè)，html文件用編輯器打開(kāi)顯示的是文本，可以用<br /> 文本的方式編輯它，如果用瀏覽器打開(kāi)，瀏覽器會(huì)按照標(biāo)簽描述內(nèi)容將文件<br /> 渲染成網(wǎng)頁(yè)，顯示的網(wǎng)頁(yè)可以從一個(gè)網(wǎng)頁(yè)鏈接跳轉(zhuǎn)到另外一個(gè)網(wǎng)頁(yè)。 </p>
html字符實(shí)體
代碼中成段的文字，如果文字間想空多個(gè)空格，在代碼中空多個(gè)空格，在渲染成網(wǎng)頁(yè)時(shí)只會(huì)顯示一個(gè)空格，如果想顯示多個(gè)空格，可以使用空格的字符實(shí)體,代碼如下：
<!-- 在段落前想縮進(jìn)兩個(gè)文字的空格，使用空格的字符實(shí)體： --> <p> 一個(gè)html文件就是一個(gè)網(wǎng)頁(yè)，html文件用編輯器打開(kāi)顯示的是文本，可以用<br /> 文本的方式編輯它，如果用瀏覽器打開(kāi)，瀏覽器會(huì)按照標(biāo)簽描述內(nèi)容將文件<br /> 渲染成網(wǎng)頁(yè)，顯示的網(wǎng)頁(yè)可以從一個(gè)網(wǎng)頁(yè)鏈接跳轉(zhuǎn)到另外一個(gè)網(wǎng)頁(yè)。</p>
在網(wǎng)頁(yè)上顯示 “<” 和 “>” 會(huì)誤認(rèn)為是標(biāo)簽，想在網(wǎng)頁(yè)上顯示“<”和“>”可以使用它們的字符實(shí)體，比如：
<!-- “<” 和 “>” 的字符實(shí)體為 < 和 > --> <p> 3 < 5 <br> 10 > 5 </p>
html塊標(biāo)簽
1、
標(biāo)簽 塊元素，表示一塊內(nèi)容，沒(méi)有具體的語(yǔ)義。
2、 標(biāo)簽 行內(nèi)元素，表示一行中的一小段內(nèi)容，沒(méi)有具體的語(yǔ)義。
含樣式和語(yǔ)義的標(biāo)簽
1、 標(biāo)簽 行內(nèi)元素，表示語(yǔ)氣中的強(qiáng)調(diào)詞
2、 標(biāo)簽 行內(nèi)元素，表示專(zhuān)業(yè)詞匯
3、 標(biāo)簽 行內(nèi)元素，表示文檔中的關(guān)鍵字或者產(chǎn)品名
4、 標(biāo)簽 行內(nèi)元素，表示非常重要的內(nèi)容
語(yǔ)義化的標(biāo)簽
語(yǔ)義化的標(biāo)簽，就是在布局的時(shí)候多使用有語(yǔ)義的標(biāo)簽，搜索引擎在爬網(wǎng)的時(shí)候能認(rèn)識(shí)這些標(biāo)簽，理解文檔的結(jié)構(gòu)，方便網(wǎng)站的收錄。比如：h1標(biāo)簽是表示標(biāo)題，p標(biāo)簽是表示段落，ul、li標(biāo)簽是表示列表，a標(biāo)簽表示鏈接，dl、dt、dd表示定義列表等，語(yǔ)義化的標(biāo)簽不多。
html圖像標(biāo)簽
標(biāo)簽可以在網(wǎng)頁(yè)上插入一張圖片，它是獨(dú)立使用的標(biāo)簽，它的常用屬性有：
src屬性 定義圖片的引用地址
alt屬性 定義圖片加載失敗時(shí)顯示的文字，搜索引擎會(huì)使用這個(gè)文字收錄圖片、盲人讀屏軟件會(huì)讀取這個(gè)文字讓盲人識(shí)別圖片，所以此屬性非常重要。
<img src="images/pic.jpg" alt="產(chǎn)品圖片" />
絕對(duì)路徑和相對(duì)路徑
像網(wǎng)頁(yè)上插入圖片這種外部文件，需要定義文件的引用地址，引用外部文件還包括引用外部樣式表，javascript等等，引用地址分為絕對(duì)地址和相對(duì)地址。
絕對(duì)地址：相對(duì)于磁盤(pán)的位置去定位文件的地址
相對(duì)地址：相對(duì)于引用文件本身去定位被引用的文件地址
絕對(duì)地址在整體文件遷移時(shí)會(huì)因?yàn)榇疟P(pán)和頂層目錄的改變而找不到文件，相對(duì)路徑就沒(méi)有這個(gè)問(wèn)題。相對(duì)路徑的定義技巧：
“ ./ ” 表示當(dāng)前文件所在目錄下，比如：“./pic.jpg” 表示當(dāng)前目錄下的pic.jpg的圖片，這個(gè)使用時(shí)可以省略。
“ …/ ” 表示當(dāng)前文件所在目錄下的上一級(jí)目錄，比如：“…/images/pic.jpg” 表示當(dāng)前目錄下的上一級(jí)目錄下的images文件夾中的pic.jpg的圖片。
標(biāo)簽可以在網(wǎng)頁(yè)上定義一個(gè)鏈接地址，它的常用屬性有：
href屬性 定義跳轉(zhuǎn)的地址
title屬性 定義鼠標(biāo)懸停時(shí)彈出的提示文字框
target屬性 定義鏈接窗口打開(kāi)的位置
target="_self" 缺省值，新頁(yè)面替換原來(lái)的頁(yè)面，在原來(lái)位置打開(kāi)
target="_blank" 新頁(yè)面會(huì)在新開(kāi)的一個(gè)瀏覽器窗口打開(kāi)
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
