HTML 瀏覽器地址改變,頁(yè)面不刷新

你好，這個(gè)是HTML5的。Ajax局部刷新可以通過(guò)HTML5的新特性history.pushState 修改browser address。

網(wǎng)站設(shè)計(jì)制作過(guò)程拒絕使用模板建站；使用PHP+MYSQL原生開(kāi)發(fā)可交付網(wǎng)站源代碼;符合網(wǎng)站優(yōu)化排名的后臺(tái)管理系統(tǒng)；成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站建設(shè)收費(fèi)合理；免費(fèi)進(jìn)行網(wǎng)站備案等企業(yè)網(wǎng)站建設(shè)一條龍服務(wù).我們是一家持續(xù)穩(wěn)定運(yùn)營(yíng)了10余年的創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司。

具體演示代碼我這里沒(méi)有現(xiàn)成。網(wǎng)上有相關(guān)介紹你搜索一下 利用HTML5新特性改變?yōu)g覽器地址后不刷新頁(yè)面 。

html5 怎么在前端跳轉(zhuǎn)到其他頁(yè)面

a href="index1.html"點(diǎn)擊/a

點(diǎn)擊后跳轉(zhuǎn)到index1.html頁(yè)面。

html5基本知識(shí)點(diǎn)

一、HTML的開(kāi)發(fā)工具和使用的瀏覽器

開(kāi)發(fā)工具：記事本等文本編輯器，Atom、VisualStudioCode( VSCode)、Brackets、Sublime text和Hbuider。

瀏覽器：Chrome、Firefox、IE、Safari、IPhone、Android。

二、HTML的基本要素

DOCTYPE? 描述文檔的類型

html? ? ?網(wǎng)頁(yè)的根元素，寫(xiě)在網(wǎng)頁(yè)的在外面

head??? 網(wǎng)頁(yè)的頭部信息，寫(xiě)在html標(biāo)記的里面

body? ? 網(wǎng)頁(yè)的內(nèi)容，寫(xiě)在html標(biāo)記的里面

具體描述：

1、DOCTYPE? 描述文檔的類型，規(guī)定web 瀏覽器關(guān)于頁(yè)面使用哪個(gè) HTML 版本進(jìn)行編寫(xiě)的指令。

網(wǎng)頁(yè)可以使用的具體版本，網(wǎng)頁(yè)中可以使用那些標(biāo)記，每個(gè)版本的DTD版本均有不同

使用例子

HTML4的例子

!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" ""

HTML5的例子

2、html/html?網(wǎng)頁(yè)文檔中的根標(biāo)記

html 標(biāo)簽有三個(gè)特殊的屬性

manifest? ?指定網(wǎng)頁(yè)緩存文件，可以讓用戶離線的時(shí)候也可以訪問(wèn)文件。

xmlns? ?設(shè)置html名空間，比如把網(wǎng)頁(yè)設(shè)置成xhml的時(shí)候可以使用這個(gè)值。

lang? ?設(shè)置網(wǎng)頁(yè)的描述語(yǔ)言，比如中文是zh；英文是en。

3、head/head頭部標(biāo)簽在網(wǎng)頁(yè)中只能有一個(gè)，設(shè)置HTML文檔的頭部信息，里面內(nèi)容不會(huì)在頁(yè)面中顯示出來(lái)·。

head里面的標(biāo)記

meta 標(biāo)記

title定義網(wǎng)頁(yè)的標(biāo)題

link 鏈接

script? 標(biāo)記JavaScript腳本的內(nèi)容

style? 標(biāo)記css樣式

meta? 標(biāo)記

4、body/body只能有一個(gè)，顯示網(wǎng)頁(yè)的主體內(nèi)容。

代碼示例：

請(qǐng)點(diǎn)擊輸入圖片描述

1 !DOCTYPE html 2 html lang="en" 3 head 4 ? ? meta charset="UTF-8" 5 ? ? title網(wǎng)頁(yè)標(biāo)題(顯示在瀏覽器上)/title 6 ? ? meta name="description" content="網(wǎng)頁(yè)內(nèi)容的簡(jiǎn)單描述" 7 ? ? meta name="keywords" content="網(wǎng)頁(yè)關(guān)鍵詞" 8 ? ? link rel="/css/style.css" 9 ? ? script src="/js/script.js"/script10 /head11 body12 ? ? header網(wǎng)頁(yè)頭部?jī)?nèi)容/header13 ? ? main網(wǎng)頁(yè)主要內(nèi)容/main14 ? ? nav網(wǎng)頁(yè)的導(dǎo)航內(nèi)容/nav15 ? ? footer網(wǎng)頁(yè)的頁(yè)腳內(nèi)容/footer16 /body17 /html

請(qǐng)點(diǎn)擊輸入圖片描述

請(qǐng)點(diǎn)擊輸入圖片描述

三、寫(xiě)在head中的標(biāo)簽

（一）、meta標(biāo)簽

meta元素的屬性：

name?描述信息的名稱，來(lái)標(biāo)記這是一個(gè)什么樣的信息

http-equiv? 描述行為

content? 描述的內(nèi)容

charset? ?指定網(wǎng)頁(yè)的編碼

1、name 屬性

1 meta name="author" content="nyw"2 ? ? !--作者， 定義網(wǎng)頁(yè)的作者 --3 meta name="description" content="meta標(biāo)記學(xué)習(xí)"4 ? ? !-- 描述，描述網(wǎng)頁(yè)的實(shí)際內(nèi)容 --5 meta name="keywords" content="HTML,meta"6 ? ? !-- 關(guān)鍵字，定義網(wǎng)頁(yè)關(guān)鍵字 --

2、http-equiv屬性

1 meta http-equiv="refresh" content="30"2 ? ? !-- 網(wǎng)頁(yè)30s后自動(dòng)刷新 --3 meta http-equiv="refresh" content="5,url=dom.html"4 ? ? !-- 網(wǎng)頁(yè)30秒后跳轉(zhuǎn)到dom.html文檔 --

meta http-equiv="refresh" content="5,url=dom.html"

http-equiv描述網(wǎng)頁(yè)的行為，行為 refresh刷新，內(nèi)容為5，表示5秒后跳轉(zhuǎn)到 dom.html這個(gè)文檔。

3、content 屬性

特殊屬性

content-type???指定http頭部信息的文字編碼（最為常用）

default-style? ?指定優(yōu)先使用的樣式單（stylesheet）

refresh? ? 用于網(wǎng)頁(yè)的自動(dòng)刷新或是頁(yè)面跳轉(zhuǎn)

set-cookie???設(shè)置頁(yè)面的cookie（現(xiàn)在已經(jīng)不再推薦使用）

4、charset屬性

指定網(wǎng)頁(yè)的編碼，推薦使用UTF-8來(lái)增加網(wǎng)頁(yè)的兼容性。

代碼實(shí)例：

為搜索引擎抓取機(jī)器人準(zhǔn)備一些信息

這段代碼可以禁止搜索引擎緩存和跟蹤網(wǎng)頁(yè)。

meta name="robots" content="noindex,nofollow"

!-- name定義的是機(jī)器人，內(nèi)容部分表示不要被搜索引擎緩存，也不要被搜索引擎跟蹤 --

代碼實(shí)例：

請(qǐng)點(diǎn)擊輸入圖片描述

1 !DOCTYPE html 2 html lang="en" 3 head 4 ? ? meta charset="UTF-8" 5 ? ? title網(wǎng)頁(yè)標(biāo)題(顯示在瀏覽器上)/title 6 ? ? meta name="author" content="nyw" 7 ? ? !--作者， 定義網(wǎng)頁(yè)的作者 -- 8 ? ? meta name="description" content="meta標(biāo)記學(xué)習(xí)" 9 ? ? !-- 描述，描述網(wǎng)頁(yè)的實(shí)際內(nèi)容 --10 ? ? meta name="keywords" content="HTML,meta"11 ? ? !-- 關(guān)鍵字，定義網(wǎng)頁(yè)關(guān)鍵字 --12 ? ? meta http-equiv="refresh" content="30"13 ? ? !-- 網(wǎng)頁(yè)30s后自動(dòng)刷新 --14 ? ? meta http-equiv="refresh" content="5,url=dom.html"15 ? ? !-- 網(wǎng)頁(yè)30秒后跳轉(zhuǎn)到dom.html文檔 --16 ? ? meta name="robots" content="noindex,nofollow"17 ? ? !-- name定義的是機(jī)器人，內(nèi)容部分表示不要被搜索引擎緩存，也不要被搜索引擎跟蹤 --18 /head19 body20 /body21 /html

請(qǐng)點(diǎn)擊輸入圖片描述

（二）、title、base標(biāo)記

title和base標(biāo)記都是寫(xiě)在head標(biāo)簽中

title：設(shè)置網(wǎng)頁(yè)的標(biāo)題

寫(xiě)法：title內(nèi)容/title。

base：指定網(wǎng)頁(yè)跳轉(zhuǎn)基準(zhǔn)URL，如果不指定的話默認(rèn)為當(dāng)前網(wǎng)站的當(dāng)前路徑。

寫(xiě)法：base href=""

base屬性值：

href? 指定網(wǎng)頁(yè)跳轉(zhuǎn)到基準(zhǔn)URL，如果不指定的話則默認(rèn)為當(dāng)前網(wǎng)站的當(dāng)前路徑。

base href=""??這是將頁(yè)面跳轉(zhuǎn)到百度的網(wǎng)站打開(kāi)。

target? 指定鏈接的跳轉(zhuǎn)幀如果不指定的話，則是在當(dāng)前頁(yè)面中跳轉(zhuǎn)。

base target="_blank"?網(wǎng)頁(yè)中的鏈接都應(yīng)該在新的窗口中打開(kāi)。

terget屬性值：

_blank? 在新窗口中打開(kāi)被鏈接的文檔

_self? ?默認(rèn)值，在相同框架中打開(kāi)被鏈接的文檔

_parent? ?在父框架集中

_top? ?在整個(gè)窗口中打開(kāi)被鏈接文檔·

framename? ?在指定框架中打開(kāi)被鏈接文檔

（三）、link標(biāo)記

link標(biāo)記：鏈接外部文件時(shí)使用的標(biāo)記，可以把外部文件的內(nèi)容引入到當(dāng)前文件中來(lái)，使當(dāng)前網(wǎng)頁(yè)實(shí)現(xiàn)更多的功能。

link屬性：

href：指定鏈接外部路徑的路徑和文件名，要設(shè)置全路徑并且?guī)募?/p>

rel：引用文件，引用資源的類型定義

我們?cè)谑褂胠ink標(biāo)簽引用外部文件的時(shí)候，外部文件的類型是多種多樣的。

alternate? ?代替文檔（種子，其他語(yǔ)言版本，其他格式等等）

author? ?網(wǎng)頁(yè)的作者

help? 幫助文件的鏈接

icon? 網(wǎng)頁(yè)的圖標(biāo)

next? 如果是連續(xù)網(wǎng)頁(yè)的時(shí)候，指定下一個(gè)網(wǎng)頁(yè)

prefetch? ?把鏈接外部資源時(shí)提前緩存起來(lái)。

prev? ?如果是連續(xù)網(wǎng)頁(yè)

media? 鏈接文件或是資源屬于哪一種資源。

hreflang? ?鏈接文件的語(yǔ)言種類

type? 鏈接文件的mi/me類型（比如說(shuō)，圖片圖標(biāo)文本）

sizes? 根據(jù)link鏈接文件的類型，來(lái)指定文件的大小

代碼示例：

鏈接網(wǎng)頁(yè)圖標(biāo)：

網(wǎng)站的圖標(biāo)指定，可以顯示在瀏覽器的圖標(biāo)欄，也可以被手機(jī)讀取作為網(wǎng)站的圖標(biāo)存入收藏夾

1 !-- 網(wǎng)站的圖標(biāo)指定，可以顯示在瀏覽器的圖標(biāo)欄，也可以被手機(jī)讀取作為網(wǎng)站的圖標(biāo)存入收藏夾 --2 ? ? link rel="icon"3 ? ? !-- 示例 --4 ? ? link rel="icon" href="img/favicon.png" type="image/png"5 ? ? link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon"6 ? ? link rel="apple-touch-icon" href="img/apple-touch-icon.png" type="image/png"

注意：后面的href和前面type標(biāo)注的類型要一致，這樣既可以顯示在瀏覽器，又可以顯示在手機(jī)上

鏈接外部樣式單

1 link rel="stylesheet"2 ? ? link rel="stylesheet" href="style1.css" media="screen"3 ? ? link rel="stylesheet" href="style2.css" title="主題樣式文件"4 ? ? link rel=" alternate stylesheet" href="style3.css" title="可選樣式單"

說(shuō)明：

alternate 會(huì)在瀏覽器中會(huì)彈出一個(gè)對(duì)話框，供用戶可以進(jìn)行選擇

media? 表示媒體類型為屏幕，可以是手機(jī)，但不包括打印機(jī)和投影儀

title? 對(duì)這個(gè)link進(jìn)行簡(jiǎn)單的說(shuō)明

網(wǎng)站RSS種子指定

!-- 網(wǎng)站RSS種子指定 --

link rel="alternate" type="application/rss+xml"

為搜索引擎的準(zhǔn)備的網(wǎng)頁(yè)的URL

!-- 為搜索引擎的準(zhǔn)備的網(wǎng)頁(yè)的URL --

link rel="canonical"

link rel="canonical" href=""

談開(kāi)發(fā)和用戶體驗(yàn)(1)

我們很多時(shí)候，并不了解知識(shí)到底是什么？如同說(shuō)，我們可能覺(jué)得知識(shí)的長(zhǎng)久性和短暫性，但是其本質(zhì)，很多時(shí)候不了解。這并不是說(shuō)，開(kāi)發(fā)中需要累計(jì)知識(shí)，而是說(shuō)，要累積可用的，并且好用的知識(shí)，這里并沒(méi)有相反。緣何？相反的一面是因?yàn)椋R(shí)沒(méi)有應(yīng)用到對(duì)等需求的方面。所以，就功利性質(zhì)而言，工具書(shū)籍自然是有其作用的；然而“課外讀本”也不是毫無(wú)價(jià)值。

需要認(rèn)識(shí)這條信息，沒(méi)有一定的經(jīng)歷，是無(wú)法感受的；正如同杞人憂天的思慮，都是沒(méi)有經(jīng)過(guò)印證的。當(dāng)然，已經(jīng)印證過(guò)的，如果還要去印證，那么這中間必然是認(rèn)識(shí)層面上面出現(xiàn)了異常。平時(shí)的認(rèn)知和出現(xiàn)異常時(shí)候的異常。這就是經(jīng)驗(yàn)了。

本文前承風(fēng)格，繼續(xù)談?wù)動(dòng)脩趔w驗(yàn)。

前文說(shuō)明了緩存對(duì)用戶的體驗(yàn)以及作用。本文再次談及。緩存的作用在于，讓用戶不需要每次打開(kāi)產(chǎn)品就進(jìn)行耗流量的操作。例如某些文件是否可以緩存本地，那就直接讀取，而不用從服務(wù)器端再次拉取。本質(zhì)而言，可復(fù)用性很強(qiáng)。

從意義而言，緩存在于最大限度地避免用戶在使用產(chǎn)品的時(shí)候的細(xì)微時(shí)間的拖延。這個(gè)細(xì)微的時(shí)間的拖延，可以累積，所以對(duì)于產(chǎn)品而言，增加這些體驗(yàn)尤其重要；累積的細(xì)微時(shí)間，最終的體驗(yàn)結(jié)果就是產(chǎn)品卡頓。所以“盡可能地應(yīng)用緩存是一個(gè)原則，不論是服務(wù)器端還是客戶端”。

我們說(shuō)說(shuō)刷新。我們每次更新html5頁(yè)面，會(huì)發(fā)現(xiàn)有時(shí)候old的頁(yè)面沒(méi)有及時(shí)刷新。這是一個(gè)問(wèn)題。那么我們?cè)趺醋龅剿⑿履?。其?shí)，這里的要求必然是非常簡(jiǎn)單的頁(yè)面了，如果復(fù)雜的頁(yè)面，刷新的方式自然是另外一回事了，而不是簡(jiǎn)單頁(yè)面的刷新。刷新和緩存是一個(gè)對(duì)立面，有時(shí)候，真的需要把刷新和緩存對(duì)調(diào)。簡(jiǎn)單的頁(yè)面，已經(jīng)確定了不會(huì)更多附加的時(shí)候，自然是刷新比較好。一則產(chǎn)品流量不會(huì)過(guò)分消耗，二則產(chǎn)品體驗(yàn)相差不大。復(fù)雜的頁(yè)面就必須考慮緩存了。

刷新，自然不是一直刷新，而是每次僅僅刷新一次。這點(diǎn)尤其重要。實(shí)現(xiàn)的要點(diǎn)是reload頁(yè)面，并且添加尾綴。具體的意義就是添加唯一標(biāo)識(shí)符，實(shí)現(xiàn)再次load頁(yè)面的時(shí)候，可以不再刷新即可。思路如下：在定時(shí)器回調(diào)中，獲取url地址，添加特殊尾綴，reload之后，獲取尾綴，發(fā)現(xiàn)是特殊標(biāo)識(shí)符結(jié)尾，那么不再reload，否則reload。

小提示。在公眾號(hào)很多期之前，我有寫(xiě)過(guò)layui。這是一款極其優(yōu)秀的框架。我之前使用過(guò)的H-ui框架就是集成這個(gè)的，當(dāng)然H-ui還集成了其他的優(yōu)秀組件。包括各種彈出層，都是出自layui，很不錯(cuò)的組件。后面我將前端H-ui結(jié)合了后端laraval。開(kāi)發(fā)模式比較簡(jiǎn)單，極其好用。Layui分電腦端和移動(dòng)端，體驗(yàn)自然不同。這種小提示，默認(rèn)是很酷的黑色底色，上面配置彈出的信息內(nèi)容，顯得好看，而且不失移動(dòng)風(fēng)格。Layui支持很多風(fēng)格，如果可以應(yīng)用的話，盡可能地應(yīng)用layui。如果網(wǎng)頁(yè)端支持移動(dòng)和網(wǎng)頁(yè)，那么可以考慮不同平臺(tái)加載不同的layui組件即可。

Loading。加載頁(yè)面也是增加體驗(yàn)的一個(gè)小工具。盡可能地使用loading不失為一種策略，除非能夠保證提供絕對(duì)的網(wǎng)絡(luò)服務(wù)。既然不能保證，那么請(qǐng)使用loading。這里說(shuō)網(wǎng)頁(yè)的loading如果通過(guò)自己實(shí)現(xiàn)，總是覺(jué)得非常費(fèi)時(shí)。不管需不需要多久，總之實(shí)現(xiàn)起來(lái)，還是要考慮很多，既然layui提供，那么盡可能地應(yīng)用組件已經(jīng)擁有的。例如網(wǎng)絡(luò)請(qǐng)求中，使用layui的組件，實(shí)現(xiàn)loading是一個(gè)極其好的選擇。設(shè)置type為2即可。當(dāng)然關(guān)閉這個(gè)loading，首先得保存loading的返回值，一個(gè)div或者其他。在其他地方調(diào)用close即可。

為什么HTML5canvas中drawImage()第一次加載只出現(xiàn)最后一個(gè)圖，刷新就出現(xiàn)問(wèn)題？

必須等到圖片完全加載后才能對(duì)其進(jìn)行操作， 瀏覽器通常會(huì)在頁(yè)面腳本執(zhí)行的同時(shí)異步加載圖片。 如果試圖在圖片未完全加載之前就將其呈現(xiàn)到canvas 上，將不會(huì)顯示任何圖片. \x0d\x0a\x0d\x0a var img= new Image(); \x0d\x0a img.src = "bark.jpg"; \x0d\x0a \x0d\x0a // 圖片加載完后，將其顯示在canvas 上 \x0d\x0a img.onload = function () { \x0d\x0a drawCanvas(); \x0d\x0a }