整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
前面文章中寫過類似的文章《手把手教你HTML5實現根據LBS定位到商家兩點之間距離多少》，建議有興趣的小伙伴可以看看。
各種瀏覽器對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 值
《手把手教你HTML5實現根據LBS定位到商家兩點之間距離多少》
作者：藍海00
鏈接：https://www.jianshu.com/p/d0b0b6120055
嘍，大家好，我是雷工！
今天繼續學習JavaScript基礎語法，JS的書寫位置，俗話說：好記性不如爛筆頭，邊學邊記，方便回顧。
代碼寫在標簽內部
示例：
<body>
<button onclick="alert('你還真信呀？~')">點擊關注【雷工筆記】月薪過萬</button>
</body>2.1、要將JS代碼直接寫在HTML文件里面。
2.2、在HTML文件中添加一個script，用script標簽包住，script標簽中的代碼就是JS代碼。
2.3、script標簽的位置可以在HTML文件中的任何地方，但推薦在head標簽中或者body標簽中。
示例：
<body>
<script>
alert('hello,歡迎關注雷工筆記')
</script>
</body>雷工提醒：
我們習慣將<script>標簽放在HTML文件的底部附近，原因是瀏覽器會按照代碼在文件中的順序加載HTML。
如果先加載的JS代碼希望修改其下方的HTML，那么其可能因為要修改的HTML還未被加載而失效。所以比較穩妥的策略是將JS代碼放在html文件的底部附近。
3.1、先創建一個JS文件，后綴名是xxxx.js。
3.2、使用script標簽引入JS文件。
示例：
<body>
<!--用src引入外部JS文件-->
<script src="leigong.js"></script>
</body>雷工提醒：
外聯式JavaScript會讓代碼看上去更加有序，更容易復用，且沒有了腳本的混淆，html也更容易閱讀，因此這是值得我們學習的好習慣。
4.1、外聯式中，script標簽的位置可以在HTML文件中的任何地方，但推薦在body標簽中，盡量寫到文件末尾</body>
前面。
4.2、JS中內嵌式寫法和外聯式寫法不可以混合使用，如果外聯式寫法，script標簽中間就不可以再寫代碼，否則會被忽略，只執行外聯部分。
以上是關于JavaScript基礎中書寫位置的相關知識的筆記，有不當之處還望指正。
想起一句話，貌似是錘子科技發布會上聽到的：從來沒有什么失敗的人，只有半途而廢的人。
每天進步一點點，加油。
HTML的全稱是超文本標記語言，英文全稱是HyperText Markup Language。如果您是零基礎的話，看到這個名字，即使是漢語的，估計也會不知所云。
超文本指的是用超鏈接的方法，將各種不同空間的文字信息組織在一起的網狀文本。通俗來說就是多個文本之間通過超鏈接相互連接在一起，這些相互連接的文本集合稱為"超文本"。超文本是網頁制作一個非常重要的概念，可以說網絡的精髓就在于"互聯"。
這些相互關聯的信息媒體可能在同一文本中，也可能是其他文件，或是地理位置相距遙遠的某臺計算機上的文件。這種組織信息方式將分布在不同位置的信息資源用隨機方式進行連接，為人們查找，檢索信息提供方便。（孫素華編著．Dreamweaver CS5 Flash CS5 Photoshop CS5網頁設計從入門到精通：中國青年出版社，2014.10：第16頁）
標記語言的概念比較復雜，簡單來說，HTML并不是程序語言（不同于C或Python），只是一種在網頁中顯示資料排版位置的標記結構語言。這句話提煉一下就是"標記信息在頁面中排版結構的語言"。
如果讀的不太明白，在下一節"HTML基本框架"中會對HTML的排版結構規則進行直觀展示，如果您讀不懂可以盡情的跳過，畢竟我們的重點是怎么用。
HTML框架簡單說就是任何HTML網頁文件中都會包含的基本代碼內容。如果我們打算寫一個頁面，就一定要把框架代碼寫入后才能正式開始添加內容。框架代碼如下：
<!DOCTYPE HTML><html> <head> </head> <body> </body> </html>
第一行 <!DOCTYPE HTML>
第二行 <html>
第三行 <head>
第四行 </head>
第五行 <body>
第六行 </body>
第七行 </html>
這七行代碼是所有HTML頁面所共有的，也就是HTML的框架了。不信我們來驗證一下。
例子一，頭條的文章頁面（電腦版）網址：https://www.toutiao.com/i6785149184245760516/
筆者使用Firefox（火狐）瀏覽器，輸入網址后點擊鍵盤上的F12,，如圖所示
我們可以看到頁面下半部分出現了一個調控臺。
點擊查看器即可看頁面代碼。代碼如下：
放大一些，大家看看，<!DOCTYPE HTML> <html> <head> </head> <body> </body> </html>這些標簽是不是一個不少，只是中間多了很多內容而已。
一個例子不具有普適性，下面我們再看一個例子，我隨便找了個新聞頁面，網址：https://mil.eastday.com/a/200125113254400.html
使用同樣的方法打開查看器看代碼，如圖：
是不是框架中的代碼一個也不少吧。
所以，大家請在自己的電腦中新建一個txt文件，將HTML框架粘貼到txt文件中，并命名為"HTML框架"。以后我們寫的每一個頁面都會從這個框架開始。
通過對框架中的代碼進行觀察，細心的讀者可能已經發現了HTML這種標記語言的書寫規律。
規律1：每一個語句都是包含在<>尖括號內的。這是HTML標記語言的基本特點之一，大家一定記牢。
規律2：除了<!DOCTYPE HTML>這個標簽外，其他標簽都是成對出現！例如<html>與</html>，<head>與</head>，<body>與</body>。
規律3：這個規律通過觀察代碼也不難發現，即<html></html>兩個標簽中間夾著<head></head>和<body></body>，我們把<head></head>標簽稱為<html></html>標簽的子標簽，反過來<html></html>標簽是<head></head>標簽的父標簽，<head></head>和<body></body>稱為并列關系或者兄弟關系。而<!DOCTYPE HTML>是一個聲明語句，屬于六親不認的。
各種關系如下圖所示：
這樣就回到了之前我們解釋"標記語言"的問題上。我們說"標記語言"是"標記信息在頁面中排版結構的語言"，這種父子關系、兄弟關系就可以理解為一個頁面的"結構"，這種結構又與頁面的排版有關。
在下一期中，我們會通過練習來解釋"結構"與排版的關系。
喜歡的小伙伴請加關注，有任何問題可以留言給我，歡迎指正批評，感激不盡！
HTML序章（學習目的、對象、基本概念）——零基礎自學網頁制作
第一個HTML頁面如何寫？——零基礎自學網頁制作
HTML頁面中head標簽有啥用？——零基礎自學網頁制作
初識meta標簽與SEO——零基礎自學網頁制作
HTML中的元素使用方法1——零基礎自學網頁制作
HTML中的元素使用方法2——零基礎自學網頁制作
HTML元素中的屬性1——零基礎自學網頁制作
HTML元素中的屬性2（路徑詳解）——零基礎自學網頁制作
使用HTML添加表格1（基本元素）——零基礎自學網頁制作
使用HTML添加表格2（表格頭部與腳部）——零基礎自學網頁制作
使用HTML添加表格3（間距與顏色）——零基礎自學網頁制作
使用HTML添加表格4（行顏色與表格嵌套）——零基礎自學網頁制作
16進制顏色表示與RGB色彩模型——零基礎自學網頁制作
HTML中的塊級元素與內聯元素——零基礎自學網頁制作
初識HTML中的<div>塊元素——零基礎自學網頁制作
在HTML頁面中嵌入其他頁面的方法——零基礎自學網頁制作
封閉在家學網頁制作！為頁面嵌入PDF文件——零基礎自學網頁制作
HTML表單元素初識1——零基礎自學網頁制作
HTML表單元素初識2——零基礎自學網頁制作
HTML表單3（下拉列表、多行文字輸入）——零基礎自學網頁制作
HTML表單4（form的action、method屬性）——零基礎自學網頁制作
HTML列表制作講解——零基礎自學網頁制作
為HTML頁面添加視頻、音頻的方法——零基礎自學網頁制作
音視頻格式轉換神器與html視頻元素加字幕——零基礎自學網頁制作
HTML中使用<a>標簽實現文本內鏈接——零基礎自學網頁制作
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
