The 21st century: HTML

顯示具有 HTML 標籤的文章。顯示所有文章

html 頁面內錨點定位及跳轉方法

一種方法是錨點用<a>標籤，在href屬性中寫入DIV的id。

<a href="#div1">to div1</a>
<a href="#div2">to div2</a>
<a href="#div3">to div3</a>
<div id="div1">div1</div>
<div id="div2">div2</div>
<div id="div3">div3</div>

另一種方法是用 JavaScript 的 srollIntoView方法，

document.getElementById("divId").scrollIntoView();

這種方法的好處，是URL不會變，同時能夠響應相應的scroll事件

HTML iframe 框架語法與其使用限制與缺點

被放進框架的內容網頁不見得能夠在手機等行動裝置上正常運作，相容性很混亂

https://blog.csdn.net/Abraham_bug/article/details/80053210

無法滾動、解決滾動同時要防止框架外的移動等等衝突問題

HTML iframe 框架語法 => HTML5 改為使用 CSS 設定
https://www.w3schools.com/tags/tag_iframe.asp

iframe 連結另外開啟新視窗或在原本網頁開啟
http://www.wibibi.com/info.php?tid=374

深入了解 /iframe有那些缺點/ Iframe傳值問題
https://medium.com/@small2883/iframe%E4%BB%8B%E7%B4%B9-%E6%B7%B1%E5%85%A5%E4%BA%86%E8%A7%A3-iframe%E6%9C%89%E9%82%A3%E4%BA%9B%E7%BC%BA%E9%BB%9E-iframe%E5%82%B3%E5%80%BC%E5%95%8F%E9%A1%8C-579e6c113436

iframe這個詞是inline frame的縮寫。

iframe屬性：

1.frameborder:是否顯示邊框，1(yes),0(no)
2.height:height屬性指定了iframe的像素高度，建議使用css設置。
3.width:width屬性指定了iframe的像素寬度，建議使用css設置。
4.name:iframe的名稱，window.frames[name]時專用的屬性。
5.scrolling:iframe是否滾動。yes,no,auto。
6.src：iframe的網址。
7.sandbox:控制iframe內的權限(html5新功能)：http://www.html5rocks.com/en/tutorials/security/sandboxed-iframes/?redirect_from_locale=zhhttp://msdn.microsoft.com/en-us/hh563496.aspx

為什麼前端盡量少用iframe? iframe有哪些缺點：

1.iframe会阻塞主頁面的Onload事件；
2.搜索引擎的檢索程序無法解讀這種頁面，不利於SEO;
3.iframe和主頁面共享連接池，而瀏覽器對同域的連接有限制，所以会影響頁面的並行加載。
4.因为iframe等于打開一个新的網頁，所有的JS/CSS全部加載一遍，内存会*2
5.是否同域的問題

我们通常使用iframe最基本的特性，就是能自由操作iframe和父框架的内容(DOM)。
但前提條件是同域，如果跨域頂多只能實現頁面跳轉window.location.href。

同域時，父頁面可以对子頁面進行改寫，反之亦然。
不同域，父頁面没有權限改動子頁面，但可以實現頁面的跳轉。

如果需要使用 iframe，最好是通过 javascript 動態给 iframe 添加 src 屬性值，这样可以避開一些 iframe 的缺點：

https://stackoverflow.com/questions/6000987/dynamically-set-iframe-src

跨域傳值，方法之一是使用
window.frames[0].postMessage($txt_val, ‘*’); 傳值
window.addEventListener(“message”, receiveMessage);取值
可參考
https://dotblogs.com.tw/daniel/2017/11/25/225511
https://www.cnblogs.com/dolphinX/p/3464056.html
https://blog.csdn.net/kenhins/article/details/50789125

網頁設計：波浪特效

google『css wave』、『css wave font』

https://codepen.io/tedmcdo/pen/PqxKXg

https://www.cnblogs.com/coco1s/p/7197662.html

使用 javascript 動態更改 CSS 的各種方式

https://www.jianshu.com/p/0260cddff86a

在很多情况下，都需要对网页上元素的样式进行动态的修改。在JavaScript中提供几种方式动态的修改样式，下面将介绍方法的使用、效果、以及缺陷。

1、使用obj.className来修改样式表的类名。
2、使用obj.style.cssTest来修改嵌入式的css。
3、使用obj.className来修改样式表的类名。
4、使用更改外联的css文件，从而改变元素的css

下面是一段html代码和css代码用来解释上面方法的区别的。

CSS

.style1{margin:10px auto ;background-color:#9999FF; display:block;color:White; border:1px solid white; padding:10px 25px; font-size:18px; }

.style1:hover{ background-color:#66B3FF; cursor:pointer;}

.style2{margin:10px auto ;background-color:gray; display:block;color:black; border:1px solid white; padding:10px 25px; font-size:18px; }

.style2:hover{ background-color:black; color:White; cursor:pointer}

HTML

<div>
<input id="btnB" type="button" name="btnLogin" value="登录" class="style1" />
<div id="tool">
<input type="button" value="【obj.style.className】更改样式" onclick="changeBackgroundColor()"/>
<input type="button" value="【obj.style.cssText】更改样式" onclick="changeFontSize()" />
<input type="button" value="【obj.className】更改样式" onclick="addRadius()" />
<input type="button" value="更改外联css样式" onclick="recover()" />
</div>
</div>

一、使用obj.className来修改样式表的类名

从下面的代码可以看出ob.style.cssTest是如何来btnB的样式的。

function changeStyle1() {
var obj = document.getElementById("btnB");
obj.style.backgroundColor= "black";

}

该段代码修改btB的文字的颜色，在浏览器中打开调试工具，可以发现btB标签中多了一个属性【style="background-color:black"】，从而改变btB的样式。

缺陷：
在修改btB的背景色之后用鼠标放到btB上可以发现，btB的伪类hover里面的css根本不起作用。原来是当你修改了这个这样样式之后。在btB的内联样式中多了background-color属性了，在css的应用中也是有级别的，嵌入式>内联式>外联式。而btB的hove伪类的background-color样式写在内联式中，所以嵌入式的background-color覆盖了伪类中，这就使得鼠标放入btB上感觉不到背景颜色的变化。

二、使用obj.style.cssTest来修改嵌入式的css

直接上JavaScript代码：

function changeStyle2() {
var obj = document.getElementById("btnB");
obj.style.cssText = "background-color:black; display:block;color:White;

}

该段代码和【一】中的效果是一样的，缺陷也是一样。

三、使用obj.className来修改样式表的类名

使用代码来修改btB引用样式的类名，如下段代码：

function changeStyle3() {
var obj = document.getElementById("btnB");
//obj.className = "style2";
obj.setAttribute("class", "style2");
}

通过更改btB的css的类名的方式来更改样式，更改样式类名有两种方式。1、obj.className = "style2"; 2、 obj.setAttribute("class", "style2");都是一样的效果。

用这种方式来修改css比上面的效果要好很多。

四、使用更改外联的css文件，从而改变元素的css

通过更改外联的css文件引用从而来更改btB的样式，操作很简单。代码如下：

首先得引用外联的css文件，代码如下：

<link href="css1.css" rel="stylesheet" type="text/css" id="css"/>

function changeStyle4() {
var obj = document.getElementById("css");
obj.setAttribute("href","css2.css");
}

这样也能方便的更改btB的样式，个人觉得这种方式是最好用的。是实现整体页面换肤的最佳方案。

SVG 動畫範例

打勾勾、打叉叉：https://codepen.io/elevaunt/pen/JYRBzJ
波浪、微笑曲線：https://codepen.io/thebabydino/pen/CxkHm

雖然 Microdata 的目的是易於機器理解，但最終也能惠於用戶

https://schema.org/docs/gs.html

Microdata 是 HTML5 引入的，是為機器而不是用戶所設計的，主要目的是為了機器能更好的理解內容。這看起來與前端沒什麼關係，一般理解的前端是服務於用戶的，主要負責與用戶交互的部分。但是 microdata 是 HTML 的一部分，雖然目的是易於機器理解，但最終也能惠於用戶。

Microdata & Schema.org 的現狀與未來
目前 Google, Bing, Yandex, Yahoo! 都支援 Microdata，但是進度不一效果不一，支援度最好的還是 Google。

各個搜索引擎商的接入文檔：

https://developers.google.com/structured-data/
http://www.bing.com/webmaster/help/marking-up-your-site-with-structured-data-3a93e731
https://help.yandex.com/webmaster/microdata/what-is-microdata.xml
https://help.yandex.com/webmaster/schema-org/what-is-schema-org.xml
結構化的數據不僅僅能被這些 Web 搜索引擎使用，還能被諸如 Siri, Cortana 等語音設備使用，當然，他們也能被當作搜索引擎。

實測 Siri 所推薦的網頁資訊都是有做 Microdata 的。

結構化的數據在未來相當有吸引力，方便未來的各種設備接入。比如「智能廚房」，你告訴它你要做什麼菜，於是它從下廚房找到了菜譜，因為下廚房使用了結構化數據，「智能廚房」就能直接列出需要的材料與材料的份量。

目前正在應用的點有很多，比如日曆、地圖、郵件等。尤其值得一提的是郵件，這個古老的通訊方式也許會在結構化數據下煥然一新。Gmail 已經在做一系列嘗試了，比如從郵件里提取出你的行程以及日程安排，比如匯總你的收據。

詳閱 https://lepture.com/zh/2015/fe-microdata

以下為頁庫存檔：

Microdata 以機器可解析的語言來描述網頁里的內容是什麼，比如網頁描述的是一本書、一篇影評或者一張菜譜。例如上面的這張圖，展示的是我的一篇書評在 Google 搜索里的結果，它有作者信息、有評分、有發表時間，這都是因為這篇書評的網頁里使用 Microdata 標示出了相應的信息。

Microdata 基礎

Mircodata 主要用到這幾個 attributes 來標注信息：itemscope, itemtype, itemprop，另外還有 itemid 與 itemref。

包含 itemscope 這個 attribute 的 DOM 樹就是一個事物(item)，例如：

<div itemscope>
...
</div>

我們可以給這個事物定義一個類型，比如一本書，這時就需要用到 itemtype，它的值是一個或多個 URL：

<div itemscope itemtype="http://example.com/Book">
...
</div>

如上的代碼片斷，我們知道它是一本書了，但是它還缺少書的信息，需要用 itemprop 來標示：

<div itemscope itemtype="http://example.com/Book">
  <div>書名：<span itemprop="name">改革歷程</span></div>
  <div>作者：<span itemprop="author">趙紫陽</span></div>
  ...
</div>

也許因為奇怪的設計方案，也許因為 PM 的無理取鬧，也許就是因為代碼不太好寫，佈局並不能輕易合乎要求，itemprop 可能散落於其它地方，這時可以使用 itemref 將它們連接起來：

<div itemscope itemtype="http://example.com/Book" itemref="a b">
  <div>作者：<span itemprop="author">趙紫陽</span></div>
  ...
</div>

<!-- 因為某些原因，書名與價格不在 scope 裡面 -->
<div id="a">書名：<span itemprop="name">改革歷程</span></div>
<div id="b">價格：<span itemprop="price">$12</span></div>

Microdata 也定義了 DOM API，目前只有 Firefox 與 Opera 支持，用途不太大，可以在 Firefox 的終端里測試一下：

document.getItems()
document.getItems('http://schema.org/Article')

Microdata 與 Schema.org

Microdata 作為規範，定義好了語法，其中 itemtype 表示事物的類型。如果每一家都自己定義 itemtype的話，結局將相當糟糕，網站開發者也將頭疼不已。於是 Google, Bing, Yandex, Yahoo! 合作創建了 Schema.org 用以統一規範 Microdata。

Schema.org 不是標準化組織，所做的卻是標準化的事情。查閱 Schema.org 快速入門文檔，瞭解如何使用。例如你正在看的這篇文章所在的頁面便在使用 http://schema.org/Article 這個 itemtype，你可以查看一下本頁面的源碼。

Schema.org 定義了許多類型，仍然在創建更多的類型。這些定義對後端開發也有意義，幫助你理解業務模型，瞭解某一模型應該包含哪些數據，亦是不小的啓發。

比如我們來賣個車看看：http://schema.org/Car

<div itemscope itemtype="http://schema.org/Car">
  <h2 itemprop="name">奇瑞QQ</h2>
  <p itemprop="description">中國汽車製造商奇瑞汽車公司於2003年推出的一款微型車(...)</p>
  <img itemprop="image" href="2003_qq.png" />
  <div>
    <strong>顏色</strong>
    <span itemprop="color">黑色</span>
  </div>
  <div>
    <strong>齒輪數</strong>
    <span itemprop="numberOfForwardGears">6</span>
  </div>
  <div itemprop="vehicleEngine" itemscope itemtype="http://schema.org/EngineSpecification">
    <div>
      <strong>引擎</strong>
      <span itemprop="name">1.1 L SQR472F I4 DOHC 16v — 50 kW at 6000 rpm, 90 N·m at 3500 rpm</span>
    </div>
  </div>
  <div>
    <strong>氣囊數</strong>
    <span itemprop="airbags">4</span>
  </div>
</div>

RDFa, Microformats 與 JSON-LD

結構化數據在 Microdata 出來之前就已經有了，比如 RDFa，比如 Microformats。Microdata 正是站在他們肩膀上，總結他們的得失利弊發展起來的。

Schema.org 的示例通常包含 Microdata，RDFa 與 JSON-LD 格式。RDFa 主要引入了 vocab, typeof 與 property 作為 attributes。這裡不再談 RDFa 的格式與實現，推薦使用 Microdata。但是需知 RDFa 仍然在被使用，比如豆瓣網，因為創建時間早，又沒有升級代碼，仍然使用著 RDFa，他們使用的字典集是 http://www.data-vocabulary.org/。

Microformats 已經十年了，這是一套使用 class 輔以其它屬性來標記事物的方案。比如這篇文章的這個頁面亦使用 Microformats 做了標注，類型是 hentry。Microformats 現在推出了 2.0 版本，預測支持性不會太好，但是仍然值得一讀，當作指導前端的 class 命名也不錯。正在使用的 hentry 是 1.0:

<div class="hentry">
  <h1 class="entry-title">前端的基礎修養：Microdata</h1>
  <div class="entry-content">...</div>
  ...
</div>

JSON-LD 誕生的時間更晚，是一套使用 JSON 格式標注數據的方案。最大的優點是 JSON 格式便於解析，缺點是數據冗余，尤其是在需要 HTML 展示大段內容的情況下。

Microdata & Schema.org 的現狀與未來

目前 Google, Bing, Yandex, Yahoo! 都支援 Microdata，但是進度不一效果不一，支援度最好的還是 Google。據說百度也是支持的。

各個搜索引擎商的接入文檔：

結構化的數據不僅僅能被這些 Web 搜索引擎使用，還能被諸如 Siri, Cortana 等語音設備使用，當然，他們也能被當作搜索引擎。例如我問 Siri 最近有什麼電影可看，於是找到了《模仿遊戲》

Siri 展示的模仿遊戲

這個內容來自爛番茄，爛番茄的網頁有使用 Schema.org 的 Microdata 標注，不知道 Siri 是否解析了 Microdata，還是專門為爛番茄作了解析。

再次詢問 Siri 附近吃飯的地方，返回了大眾點評的數據：

Siri 展示的餐廳列表

查看大眾點評的網頁，亦是使用 Schema.org 的 Microdata 標注的。

因為沒有 Android 與 Windows 手機，無法展示 Google Now 與 Cortana 的效果。查閱 Microsoft Cortana 的文檔可知其是支持 Schema.org 的。Google Now 就更不必說了。

結構化的數據在未來相當有吸引力，方便未來的各種設備接入。比如「智能廚房」，你告訴它你要做什麼菜，於是它從下廚房找到了菜譜，因為下廚房使用了結構化數據，「智能廚房」就能直接列出需要的材料與材料的份量。

目前正在應用的點有很多，比如日曆、地圖、郵件等。尤其值得一提的是郵件，這個古老的通訊方式也許會在結構化數據下煥然一新。Gmail 已經在做一系列嘗試了，比如從郵件里提取出你的行程以及日程安排，比如匯總你的收據。

索引

Microdata: http://www.w3.org/TR/microdata/
JSON-LD: http://www.w3.org/TR/json-ld/
RDFa: http://www.w3.org/TR/xhtml-rdfa-primer/
Microformats: http://microformats.org/
Embed Schemas in Emails: https://developers.google.com/schemas/tutorials/embedding-schemas-in-emails

Gmail 的部分没有细写，其实删掉了不少内容，不然看着就像 Google 家的软文了。不过文中提到的链接都能点开看看的话，应该就能了解了。

應該避免的過時語法

https://developer.mozilla.org/zh-TW/docs/Web_%E9%96%8B%E7%99%BC/Historical_artifacts_to_avoid

PushState + Ajax = Pjax

單頁面應用（Single Page Application）簡稱 SPA，使用 SPA 理念構建的應用優點有用戶體驗好、速度快，內容的改變不需要重新加載整個頁面，避免了不必要的跳轉和重複渲染，從而相對減輕了服務器壓力。

實作上，使用 HTML5 的 PushState + Ajax 可實現不刷新整個頁面卻可讓地址欄變換、頁面局部刷新的效果。

在 SEO 方面，Google官方宣布不再繼續支持2009年以來的AJAX的googlebot檢索。
Google建議在建置網站時應該使用漸進增強的原則。
如果已經實施了Google關於AJAX的建議，Google表示網站仍然會被索引，但建議網站應支援新的隨時間變化的作法。

具體解釋window.history：
https://tw.saowen.com/a/022ff7a00a0cc0214313135aba4cbc178a59784adda3bf0a6120038b205eac9c

PushState+Ajax實現簡單的單頁面應用SPA：
https://www.itread01.com/articles/1476680423.html

ajax与HTML5 history pushState/replaceState实例
https://www.zhangxinxu.com/study/201306/ajax-page-html5-history-api.html?area=pudong

Javascript實現前端簡單路由：
https://www.itread01.com/articles/1476578707.html

PushState and Ajax
http://www.ayqy.net/blog/pjaxpushstate-and-ajax/

pjax = pushState + ajax (一個開源的 jQuery plugin)
https://github.com/defunkt/jquery-pjax

了解 Ajax 漏洞

Ajax 吸引 Web 開發人員的地方也是對其安全性最易受威脅的地方。眾多安全專家一致認為 Web 應用程序是網絡犯罪的一大目標，但是 Web 安全通常只是企業安全預算的一小部分。由於 Ajax 被用於開發很多可在 Web 上看到的應用程序，因此它的流行使其成為攻擊者在 JavaScript 代碼中尋找漏洞的目標。

Ajax 存在的核心是可以用它來創建數據驅動網站。真正吸引攻擊者的不是可以將 Ajax 用作 Web 應用程序開發工具，而是數據，不管是金融數據、個人數據還是機密數據，都是珍貴的在線商品，Ajax 再次發現自己成為了網絡犯罪的焦點。

在使用 Ajax 進行開發時，可以採用以下步驟防止出現 XSS 漏洞

確保 JavaScript 變量被引用。
使用 JavaScript 十六進制編碼。
使用 JavaScript Unicode 編碼。
避免反斜杠編碼（\"、\' 或 \\）。
使用 JSON.parse 或 json2.js 庫來分析 JSON。
避免使用 eval() 方法分析 JSON，它執行任何包含 JSON 的腳本。

要避免Ajax 橋接漏洞，在橋接時除了需要與第三方的站點之間建立信任，也應該審核第三方站點以何種方式訪問您的站點，並掃描可能被橋接利用的任何漏洞。

與 Ajax 相關的資安議題應詳閱 https://www.ibm.com/developerworks/cn/web/wa-vulnerabilities/index.html

資安風險：

駭客的攻擊方向之一恐怕會是尋找該應用的 Javascript 編程漏洞，另一個攻擊方向可能是 XSS、SQL注入，或是將目標放在大量的用戶資訊等容易被輕忽的XML或 JSON 資料傳遞。
比如說先取得明星的粉絲 Email ，再假借明星的名義對粉絲販售商品。

由於在用戶端有各種不確定性，比如用戶可能會使用各種方式來另開分頁，所以許多細節都必須考慮在 SPA 應用編程內，而 Javascript 程式碼必須赤裸裸地開源在前端，越複雜的程式碼，透露的資訊越多，為攻擊者提供了越多的線索 (資深的程式師從一段編程，看到的不只是程序是否存在安全議題，也看得到該程式碼創作者可能是個人還是團隊、軟體管理的情況、編程習慣、資歷等)。

Ajax 受到喜愛的原因是提高了 UI/UX 用戶體驗的同時還降低了 Server 負擔，然而，顧及用戶端的許多使用細節，就是得應用更大量的前端編程；當前端設計越複雜，如果只是 CSS 這些不涉及資安的層面，對維護者的心理壓力尚輕；若一旦涉及資安，就變成越養越大的不定時炸彈了。

所以，適度地使用 Ajax 會有好處，但是過度使用則會帶來隱憂，取捨並達到平衡點就好。

免寫程式！HTML5新屬性自動檢核表單與欄位格式是否填寫正確

https://www.minwt.com/webdesign-dev/html/17161.html

表單驗證是件相當麻煩的事，除了要驗證欄位是否有填寫外，還要針對填入的資料格式是否正確，光是一個表單驗證，就相當的傷神，過去得開發各種驗證表單的程式，來解決這惱人的問題，但現在透過HTML5所提供的新屬性後，完全不用寫任何的程式，就可實現表單的驗證。

用法很簡單，只需在input的標籤加入「required」。

<input name="text" id="text" type="text" required />

加入後，當未填寫就按送出時，就會跳出提示框。

當要驗證Email格式時，將type設為「email」，若是網址就為「url」。

<input name="email" id="email" type="email" required />

除了驗證email與網址外，電話也是很重要的，由於電話編碼每個國家都不同，因此就不能透過type來作設定，而是用pattern這屬性，再加入正規表示法來作驗證，以手機來說，前四碼為電信商，後六碼為個人碼，所以可以這樣子寫 pattern='\d{4}[\-]\d{6}'，這表示前方四碼輸入完後，需加入-隔開，再輸入六碼，這樣格式才正確。

<input name="mobile" id="mobile" pattern='\d{4}[\-]\d{6}' required />

若是室內電話時，再將pattern='\d{4}[\-]\d{6}'變成pattern='\d{2}[\-]\d{8}'，這樣就大功告成了，是不是超EZ的呀！！且完全不用寫到任何的程式，而這麼方便的功能，目前只有Safa ri不支援，其它的瀏覽器皆可正常運行。

訂閱：文章 (Atom)

The 21st century