整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
寫表單的時候，經常用鼠標點擊輸入框的行為是十分累人的，經常上網的同學估計都會使用tab鍵進行表單輸入框之間的切換。
在html代碼中有一個鍵盤屬性——tabindex，它可以設置訪問者在頁面中按tab鍵的順序。如下：
<input type="button" id="b1" tabindex="1" value="Button1" />
<input type="button" id="b2" tabindex="2" value="Button2" />
<input type="button" id="b3" tabindex="3" value="Button3" />當用戶選擇第一個輸入框再按tab鍵，輸入框的焦點就會按照定義好的順序切換。 tabindex不僅可以用于輸入框間的切換，也可以用于鏈接之間的切換。方法和上面相同。 在沒有定義屬性值的時候，tabindex的默認值是0。如果將tabindex設為負值（tabindex="-1"），這個元素會被排除在tab鍵切換的范圍之外。
錄入系統需要用戶輸入相關數據，但用戶習慣在excel中回車繼續輸入下一個項目。
<script type="text/javascript">
function handleEnter (field, event) {
var keyCode = event.keyCode ? event.keyCode : event.which ? event.which : event.charCode;
if (keyCode == 13) {
var i;
for (i = 0; i < field.form.elements.length; i++)
if (field == field.form.elements[i])
break;
do {
i = (i + 1) % field.form.elements.length;
}while(field.form.elements[i].type != 'text' ) //可擴展到其他比如select 值了，避開label
field.form.elements[i].focus();
//window.event.keyCode=9
return false;
}
else
return true;
}
</script>頁面
部樣式解決了內聯樣式的問題，但他也有弊端，主要表現在一下兩個方面：
弊端1，內部樣式只能作用于一個頁面，如果要實現多個頁面共享一個樣式，就做不到了。
弊端2，隨著樣式代碼的不斷增加，在編輯器中，要不停的上下滾動屏幕來編輯樣式，很不方便。
解決這些弊端的方法就是使用外部 CSS。
外部 CSS，也叫外部樣式，可以通過改變一個文件來改變整個網站的外觀！
外部樣式，將 CSS 代碼放在一個獨立的，以 .css 為后綴名的文件中，使 html 頁面結構文件和 css 樣式文件完全獨立開來。
每個HTML頁面都必須在 head 元素里添加 <link> 元素，link 是鏈接的意思。
在 <link> 元素里定義 rel 屬性，rel 是 relationship 的縮寫，譯為關系、關聯，值為 stylesheet，表示關聯一個樣式表。
再定義一個 href 屬性，用來設置一個對外部樣式表文件的引用，值為 .css 文件的路徑。
我們來做個例子。
在 002-add-css 文件夾里創建一個 external-1.html 文件，構建好基礎代碼。添加 h1 和 p 元素，分別填入一些文本。
再創建一個 external-2.html 文件，構建好基礎代碼。添加 h1 和 p 元素，分別填入一些文本。
在 002-add-css 文件夾里創建一個 mystyle.css 文件，在這個文件里直接編寫樣式：
body，空格，花括號，回車，定義樣式屬性名 background-color，冒號，屬性值為 lightblue，分號。
h1，空格，花括號，回車，color，navy，分號，margin-left，20px，分號。
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}
前面說到，樣式表代碼的編寫格式很寬松，但是我們編寫樣式的時候還是要有一定的規范：
選擇器和花括號中間用一個空格隔開；
每一條樣式聲明語句單獨一行定義；
兩組樣式定義用空行來分隔。
樣式文件定義好后，在 external-1.html 文件的 head 元素里輸入 link，按下回車鍵或 tab 鍵，emmet 會為我們自動補全一些代碼，我們只需要設置 href 屬性的外部樣式文件路徑就好了。這里我們填入 mystyle.css。保存。
預覽頁面，第一個頁面的樣式添加好了。
在 external-2.html 文件的 head 元素里也添加一個 link 元素，設置同樣的路徑 mystyle.css。保存。
預覽頁面，第二個頁面的樣式也添加好了。
不難發現，在 mystyle.css 定義的一套樣式，應用到了兩個頁面上，做到了多個頁面的樣式共享。
文章配套視頻鏈接：https://www.bilibili.com/video/BV1oU4y1278g?p=55
tml的主體結構
標簽的分類
標簽的關系
sublime快捷鍵
單標簽
雙標簽
路徑
超鏈接額外知識運用
錨點
空連接
超鏈接的優化寫法 寫在head標簽中
特殊標記符
列表
<!doctype html><html><head>
單標簽
<!doctype html>
雙標簽
<head></head>
包含（嵌套關系、父子關系）
<head>
并列
<head></head><body></body>
| 快捷鍵 | 作用 |
|---|---|
| html:xt + tab | html4.01模板【新版本可能失效】 |
| html + tab | html5模板 |
| tab | 補全標簽 |
| ctrl + shift + d | 快速復制一行 |
| ctrl + shift + k | 快速刪除一行 |
| ctrl + 鼠標左鍵單擊 | 集體輸入 |
| ctrl + h | 查找替換 |
| ctrl + f | 查找 |
| ctrl + / | 注釋 |
| ctrl + L | 快速選中當前行 |
| ctrl + shift + ↑(↓) | 代碼的快速上移和下移 |
<!-- --> 注釋標簽<br /> 換行標簽<hr /> 水平線標簽<img src="logo.gif" alt="logo" title="這是淘寶的logo" width="200" height="100" />圖片標簽
<p></p> 段落標簽<h1></h1> 標題標簽 h1 - h6<font></font> 文本標簽<strong></strong> 文本加粗標簽，有語音加強<b></b> 文本加粗標簽<em></em> 文字傾斜，有語音加強<i></i> 文字傾斜<del></del> 刪除線，有語音加強<s></s> 刪除線<ins></ins> 下劃線，有語音加強<u></u> 下劃線<a title="百度" target="_blank">百度</a> 超鏈接
相對路徑
同一個目錄下直接寫文件的名稱就可以
文件和圖片在下一級目錄中，需要文件夾名稱 + \ + 文件名稱
圖片在上一級目錄中 ../ + 文件名稱
圖片在上一級的其它文件夾中 ../ + 文件夾名稱 + 文件名稱
總結：找到下級目錄使用/，找到上一級目錄使用../
絕對路徑
從盤符中開始的，這種路徑不能使用！因為項目最后都要移動，文件的路徑都是會變的。如：c:\baidu\logo.jpg
錨點
1.設置一個錨點 設置一個id
<div id="top"></div>
2.超鏈接到錨點
<a href="#top"></a>
空連接
<a href="#"></a>
超鏈接的優化寫法 寫在head標簽中
<base targer="_blank">
讓所有的超鏈接都是從新窗口中打開
| 空格 | |
|---|---|
| < | < |
| > | > |
| ? | © |
更多信息請查閱
無序列表
<ul type="disc">
類型：disc 默認小黑點 circle 空心小圓點 square 小方塊
有序列表
<ol type="A" start="C">
類型：a A 字母順序 i I羅馬順序 1數字 start 表示開始的位置
自定義列表
<dl>
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
