a 標(biāo)簽的用法
a 標(biāo)簽的屬性
- href 該屬性指定超鏈接指向的URL蛀骇，該屬性值可以為網(wǎng)址和泌，路徑，偽協(xié)議纷捞，或者id痢虹。
-
<a href="google.com">google</a>點(diǎn)擊該鏈接不會(huì)跳轉(zhuǎn)到google.com，會(huì)把google.com當(dāng)成文件主儡， 不是以.com為后綴就是網(wǎng)址奖唯，也可以是文件。 -
<a >google</a>糜值、<a >google</a>皆是指向確定URL丰捷，若是該URL有問(wèn)題坯墨，就會(huì)出現(xiàn)bug。 -
<a >google</a>無(wú)協(xié)議絕對(duì)地址病往，默認(rèn)是當(dāng)前頁(yè)面協(xié)議捣染，是HTTP協(xié)議, 就跳轉(zhuǎn)http://google.com -
<a href="/a/b/c.html">c.html</a>指向根目錄下的a/b文件里面的c.html、
<a href="a/b/c.html">c.html</a>指向相對(duì)路徑a/b文件里面的c.html停巷。如果開(kāi)啟了http服務(wù)耍攘，在哪里開(kāi)啟則哪里就是根目錄。 -
<a href="index.html">index</a>叠穆、<a href="./index.html">index</a>指向當(dāng)前目錄下面的index.html少漆。 -
<a href="javascript:alert(1);">javascript偽協(xié)議</a>臼膏，偽協(xié)議硼被，會(huì)執(zhí)行js后面的代碼。 -
<a href="javascript:;">空的偽協(xié)議</a>渗磅，偽協(xié)議嚷硫，使點(diǎn)擊該標(biāo)簽不跳轉(zhuǎn)。若href=""則該頁(yè)面刷新始鱼；若href="#"則該頁(yè)面跳轉(zhuǎn)到頂部仔掸。 -
<a href="#id">查看id</a>，寫(xiě)錨點(diǎn)医清，會(huì)自動(dòng)加到地址后面起暮，不會(huì)發(fā)起請(qǐng)求，如index.html#id会烙，雖然不會(huì)發(fā)起請(qǐng)求负懦，但是頁(yè)面會(huì)有變化，會(huì)自動(dòng)跳轉(zhuǎn)到該id柏腻。 -
<a href="mailto:郵箱地址">發(fā)郵箱</a>鏈接到發(fā)送郵件纸厉，并自動(dòng)填入郵件地址 -
<a href="tel:13812345678">打電話(huà)</a>撥號(hào)，在手機(jī)上點(diǎn)擊該鏈接五嫂，會(huì)撥號(hào)并填入改手機(jī)號(hào)颗品。
- target 該屬性指定在何處窗口顯示鏈接的資源。
-
target="_blank"在新窗口打開(kāi)該鏈接沃缘。 -
target="_self"在當(dāng)前頁(yè)面加載躯枢，如果沒(méi)有指定此屬性的話(huà)，該值是默認(rèn)值槐臀。 -
targe="_top"會(huì)加載到最頂層頁(yè)面闺金，當(dāng)index1.html引用index2.html，index2.html引用index3.html峰档，則index3.html中的超鏈接會(huì)加載到index1.html上败匹。 -
target="_parent"會(huì)加載到當(dāng)前頁(yè)面的父頁(yè)面寨昙，當(dāng)index1.html引用index2.html，index2.html引用index3.html掀亩，則index3.html中的超鏈接會(huì)加載到index2.html上舔哪。 如果沒(méi)有父頁(yè)面，則等同于_self槽棍。 -
target="window的name"如果有window的name窗口捉蚤，則在該窗口打開(kāi)。如果沒(méi)有該窗口則創(chuàng)建window的name窗口炼七，并在該窗口打開(kāi)缆巧。 -
target="iframe的name"在iframe的name窗口打開(kāi)。
- download 此屬性指示瀏覽器下載URL或者文件而不是導(dǎo)航到它豌拙，因此將提示用戶(hù)將其保存為本地文件陕悬。不是所有瀏覽器都支持，尤其是手機(jī)瀏覽器不可能支持按傅。
a 標(biāo)簽的作用
- 跳轉(zhuǎn)外部頁(yè)面
- 跳轉(zhuǎn)內(nèi)部錨點(diǎn)
- 跳轉(zhuǎn)到郵箱或者電話(huà)
img 標(biāo)簽的用法
img 標(biāo)簽的作用
-
<img src="" alt="">使用img標(biāo)簽會(huì)發(fā)出get請(qǐng)求捉超，獲取src中的圖片
img 標(biāo)簽的屬性
- src (source)用于指示圖片的引用路徑。
- alt (alternative)當(dāng)圖片加載失敗的時(shí)候可以顯示的內(nèi)容唯绍，可以是文字也可以是其他圖片拼岳。
- width 寬度，只寫(xiě)寬度况芒，則高度會(huì)自適應(yīng)惜纸。
- height 高度，只寫(xiě)高度绝骚，則寬度會(huì)自適應(yīng)
img 標(biāo)簽的事件
<img id="123" src="1.png" alt="">
<script>
123.onload=function{
console.log("圖片加載成功");
};
123.onerror=function{
console.log("圖片加載失敗");
123.src="/404.png";
};
</script>
onload/onerror監(jiān)聽(tīng)圖片是否加載成功耐版。
img 標(biāo)簽的響應(yīng)式
<style>
img{
max-width:100%;
}
<style>
圖片響應(yīng)屏幕的大小，寬度和窗口保持一致皮壁。
table 標(biāo)簽的用法
table 相關(guān)標(biāo)簽
<table>
<thead>
<tr>
<th>英語(yǔ)</th>
<th>翻譯</th>
</tr>
</thead>
<tbody>
<tr>
<td>hyper</td>
<td>超級(jí)</td>
</tr>
<tr>
<td>target</td>
<td>目標(biāo)</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>空</td>
<td>空</td>
</tr>
</tfoot>
</table>
基本結(jié)構(gòu)有4部分椭更，table、thead蛾魄、tbody虑瀑、tfoot，用tr標(biāo)簽代表table-row也就是行滴须，每行中如果是表頭部分則用th標(biāo)簽舌狗，代表的是table-head，其余則用td代表的是table-data扔水。
<table>
<thead>
<tr>
<th></th>
<th>小紅</th>
<th>小明</th>
<th>小李</th>
</tr>
</thead>
<tbody>
<tr>
<th>數(shù)學(xué)</th>
<td>61</td>
<td>91</td>
<td>80</td>
</tr>
<tr>
<th>語(yǔ)文</th>
<td>71</td>
<td>83</td>
<td>65</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>總分</th>
<td>132</td>
<td>174</td>
<td>144</td>
</tr>
</tfoot>
</table>
table 相關(guān)樣式
- table-layout定義了用于布局表格單元格痛侍，行和列的算法。
-
table-layout: auto;大多數(shù)瀏覽器采用自動(dòng)表格布局算法對(duì)表格布局。表格及單元格的寬度取決于其包含的內(nèi)容主届。 -
table-layout: fixed;表格和列的寬度通過(guò)表格的寬度來(lái)設(shè)置赵哲，某一列的寬度僅由該列首行的單元格決定。某一行的高度僅由該行首個(gè)單元格決定君丁。
- border-collapse決定表格的邊框是分開(kāi)的還是合并的枫夺。在分隔模式下，相鄰的單元格都擁有獨(dú)立的邊框绘闷。在合并模式下橡庞，相鄰單元格共享邊框。
-
border-collapse: collapse;相鄰的單元格共用同一條邊框印蔗。 -
border-collapse: separate;默認(rèn)值扒最。每個(gè)單元格擁有獨(dú)立的邊框。
- border-spancing指定相鄰單元格邊框之間的距離华嘹。如：
border-spacing: 0px;吧趣、border-spacing: 5px 2rem;
form 標(biāo)簽的用法
form 的作用
表示文檔中的一個(gè)區(qū)域，此區(qū)域包含交互控件除呵，用于向 Web 服務(wù)器提交信息再菊，發(fā)送get或post請(qǐng)求爪喘，然后刷新頁(yè)面颜曾。
form 的屬性
- action處理表單提交的 URL。
- autocomplete（自動(dòng)填充）用于指示 input 元素是否能夠擁有一個(gè)默認(rèn)值秉剑，此默認(rèn)值是由瀏覽器自動(dòng)補(bǔ)全的泛豪。
off：瀏覽器可能不會(huì)自動(dòng)補(bǔ)全條目（在疑似登錄表單中，瀏覽器傾向于忽略該值侦鹏，而提供密碼自動(dòng)填充功能）
on：瀏覽器可自動(dòng)補(bǔ)全條目 - method瀏覽器使用這種HTTP方式來(lái)提交表單诡曙。可能的值有：
post：指的是HTTP的POST方法略水；表單數(shù)據(jù)會(huì)包含在表單體內(nèi)然后發(fā)送給服務(wù)器.
get：指的是HTTP的GET方法价卤；表單數(shù)據(jù)會(huì)附加在action屬性的URL中，并以 '?' 作為分隔符渊涝，沒(méi)有副作用時(shí)使用這個(gè)方法慎璧。 - target表示在提交表單之后，在哪里顯示響應(yīng)信息跨释。
_self：默認(rèn)值胸私。在相同瀏覽上下文中加載。
_blank：在新的未命名的瀏覽上下文中加載鳖谈。
_parent：在當(dāng)前上下文的父級(jí)瀏覽上下文中加載岁疼，如果沒(méi)有父級(jí)，則與 _self 表現(xiàn)一致缆娃。
_top：在最頂級(jí)的瀏覽上下文中捷绒，如果沒(méi)有父級(jí)瑰排，則與 _self 表現(xiàn)一致。
form 的事件
- onsubmit
<input name="username" type="text" />
<input type="submit" value="提交" /> //input標(biāo)簽里面不能在添加新的標(biāo)簽
<button type="submit">提交</button> //button標(biāo)簽里面可以在添加新的標(biāo)簽暖侨，如span
input 標(biāo)簽的用法
input 的作用
用于為基于Web的表單創(chuàng)建交互式控件凶伙，讓用戶(hù)輸入內(nèi)容，以便接受來(lái)自用戶(hù)的數(shù)據(jù)它碎。
input 的屬性
- 類(lèi)型 type：
<input>的工作方式相當(dāng)程度上取決于type屬性的值函荣，如果未指定此屬性，則采用的默認(rèn)類(lèi)型為text扳肛。
- button 沒(méi)有默認(rèn)行為的按鈕傻挂，上面顯示 value屬性的值，默認(rèn)為空
- checkbox 復(fù)選框挖息，可設(shè)為選中或未選中金拒。
- color 用于指定顏色的控件；在支持的瀏覽器中套腹，激活時(shí)會(huì)打開(kāi)取色器绪抛。
- email 編輯郵箱地址的區(qū)域。類(lèi)似 text 輸入电禀，但在支持的瀏覽器和帶有動(dòng)態(tài)鍵盤(pán)的設(shè)備上會(huì)有確認(rèn)參數(shù)和相應(yīng)的鍵盤(pán)幢码。
- file 讓用戶(hù)選擇文件的控件。使用accept屬性規(guī)定控件能選擇的文件類(lèi)型尖飞。
- hidden 不顯示的控件症副，其值仍會(huì)提交到服務(wù)器。
- number 用于輸入數(shù)字的控件政基。
- password 單行的文本區(qū)域贞铣，其值會(huì)被遮蓋。
- radio 單選按鈕沮明，允許在多個(gè)擁有相同name值的選項(xiàng)中選中其中一個(gè)辕坝。
- search 用于搜索字符串的單行文字區(qū)域。輸入文本中的換行會(huì)被自動(dòng)去除荐健。
- submit 用于提交表單的按鈕酱畅。
- Tel 用于輸入電話(huà)號(hào)碼的控件。
- text 默認(rèn)值摧扇。單行的文本區(qū)域圣贸，輸入中的換行會(huì)被自動(dòng)去除。
<input type="text" required />
<hr>
<input type="color" />
<hr>
<input type="password" />
<hr>
<input name="gender" type="radio" />男 <!-- 單選框需要二選一時(shí)扛稽，添加同一個(gè)name屬性 -->
<input name="gender" type="radio" />女
<hr>
<input name="hobby" type="checkbox" />唱 <!-- 復(fù)選框?yàn)橥唤M時(shí)吁峻，添加同一個(gè)name屬性 -->
<input name="hobby" type="checkbox" />跳
<input name="hobby" type="checkbox" />Rap
<hr>
<input type="file" /><!-- 只能選擇一個(gè)文件 -->
<input type="file" mutiple/><!-- 可以選擇多個(gè)文件 -->
<hr>
看不見(jiàn)：<input type="hidden" /><!-- 給js自動(dòng)填入ID，字符串 -->
<hr>
<textarea style="resize: none; width: 50%; height: 300px;"></textarea><!-- 可以填入多行文本，resize:none不要擴(kuò)展 -->
<hr>
<select>
<option value="">- 請(qǐng)選擇 -</option>
<option value="1">星期一</option>
<option value="2">星期二</option>
</select>
<hr>
<input type="submit" />
- 其他
- name
input表單控件的名字用含。以名字/值對(duì)的形式隨表單一起提交矮慕。 - autofocus 頁(yè)面加載時(shí)自動(dòng)聚焦到此表單控件。
- checked 用于控制控件是否被選中啄骇。
- disable 表單控件是否被禁用痴鳄。
- maxlength 用于控制
value的最大長(zhǎng)度（最多字符數(shù)目）。 - pattern 匹配有效
value的模式缸夹。 - value 表單控件的值痪寻。以名字/值對(duì)的形式隨表單一起提交。
- placeholder 當(dāng)表單控件為空時(shí)虽惭，控件中顯示的內(nèi)容橡类。
input 的事件
- onchange 當(dāng)用戶(hù)輸入改變時(shí)觸發(fā)該事件。
- onfocus 當(dāng)用戶(hù)把鼠標(biāo)集中在它身上時(shí)觸發(fā)芽唇。
- onblur 當(dāng)鼠標(biāo)移出時(shí)觸發(fā)顾画。
注意事項(xiàng)
- 一般不監(jiān)聽(tīng)input的click事件。
- form里面的input要有name匆笤。
- form里要放一個(gè)type=submit才能觸發(fā)submit事件研侣。
