2020-3-28 前端達(dá)人
HTML的元素：
XHTML是可擴(kuò)展超文本標(biāo)記語言，是一種更純潔，更嚴(yán)格，更規(guī)范的html代碼。html文件由文件頭和文件體兩部分組成。標(biāo)簽的分類：雙標(biāo)簽，單標(biāo)簽。
HTML的全局標(biāo)準(zhǔn)屬性
在HTML中，規(guī)定了8個(gè)全局標(biāo)準(zhǔn)屬性。
class用于定義元素的類名。
id用于指定元素的唯一id。
style用于指定元素的行內(nèi)樣式。
title用于指定元素的額外信息。
accesskey用于指定激活某個(gè)元素的快捷鍵。
支持accesskey屬性的元素有<a>, <area>, <button>, <input>, <label>, <legend>, <textarea>。
tabindex用于指定元素在tab鍵下的次序。
支持tabindex屬性的元素有<a>,<area>,<button>,<input>,<object>,<select>,<textarea>
dir用于指定元素中內(nèi)容的文本方向。
dir的屬性值只有l(wèi)tr和rtl兩種，分別是left to right和right to left。
lang用于指定元素內(nèi)容的語言。
HTML的全局事件屬性
Window窗口事件
onload，在頁面加載結(jié)束后觸發(fā)。
onunload，在用戶從頁面離開時(shí)觸發(fā)，如單擊跳轉(zhuǎn)，頁面重載，關(guān)閉瀏覽器窗口等。
Form表單事件
onblur，當(dāng)元素失去焦點(diǎn)時(shí)觸發(fā)。
onchange，在元素的元素值被改變時(shí)觸發(fā)。
onfocus，在元素獲得焦點(diǎn)時(shí)觸發(fā)。
onreset，當(dāng)表單中的重載按鈕被點(diǎn)擊時(shí)觸發(fā)。
onselect，在元素中文本被選中后觸發(fā)。
onsubmit，在提交表單時(shí)觸發(fā)。
Keyboard鍵盤事件
onkeydown，在用戶按下按鍵時(shí)觸發(fā)。
onkeypress，在用戶按下按鍵后，按著按鍵時(shí)觸發(fā)。
該屬性不會(huì)對(duì)所有按鍵生效，不生效按鍵如：alt，ctrl，shift，esc。
onkeyup，當(dāng)用戶釋放按鍵時(shí)觸發(fā)。
Mouse鼠標(biāo)事件
onclick，當(dāng)在元素上單擊鼠標(biāo)時(shí)觸發(fā)。
onblclick，當(dāng)在元素上雙擊鼠標(biāo)時(shí)觸發(fā)。
onmousedown，當(dāng)在元素上按下鼠標(biāo)按鈕時(shí)觸發(fā)。
onmousemove，當(dāng)鼠標(biāo)指針移動(dòng)到元素上時(shí)觸發(fā)。
onmouseout，當(dāng)鼠標(biāo)指針移出元素時(shí)觸發(fā)。
onmouseover，當(dāng)鼠標(biāo)指針移動(dòng)到元素上時(shí)觸發(fā)。
onmouseup，當(dāng)在元素上釋放鼠標(biāo)按鈕時(shí)觸發(fā)。
Media媒體事件
onabort，當(dāng)退出媒體播放器時(shí)觸發(fā)。
onwaiting，當(dāng)媒體已停止播放但打算繼續(xù)播放時(shí)觸發(fā)。
HTML元素
<!DOCTYPE>，聲明文檔類型。<html>，HTML元素真正的根元素。<head>，定義html文檔的文檔頭。
head中包含的元素 title，定義HTML文檔的標(biāo)題 base，為頁面上的所有鏈接規(guī)定默認(rèn)地址或者默認(rèn)目標(biāo) link，用于定義文檔與外部資源之間的關(guān)系 meta，提供關(guān)于HTML的元數(shù)據(jù) style，用于為HTML文檔定義樣式信息 script，用于定義客戶端腳本
body，定義html文檔的文檔體。content-Type，用于設(shè)定網(wǎng)頁的字符集，便于瀏覽器解析與渲染頁面。cache-control，用于告訴瀏覽器如何緩存某個(gè)響應(yīng)及緩存多長時(shí)間。
參數(shù)：
no-cache，發(fā)送請(qǐng)求，與服務(wù)器確認(rèn)該資源是否被更改，如果沒有，則使用緩存
no-store，允許緩存，每次都要去服務(wù)器上下載完整的響應(yīng)
public，緩存所有響應(yīng)
private，只為單個(gè)用戶緩存
max-age，表示當(dāng)前請(qǐng)求開始，相應(yīng)響應(yīng)在多久內(nèi)能被緩存和重用，不去服務(wù)器重新請(qǐng)求，max-age=60表示響應(yīng)可以再緩存和重用60秒
<meta http-equiv=cache-control" content="no-cache">
1
expires，用于設(shè)定網(wǎng)頁的到期時(shí)間，過期后重新到服務(wù)器上重新傳輸。
refresh，網(wǎng)頁將在設(shè)定的時(shí)間內(nèi)，自動(dòng)刷新并轉(zhuǎn)向設(shè)定的網(wǎng)址
Set-Cookie，用于設(shè)置網(wǎng)頁過期。
無語義元素：<span>,<div>，<span>是內(nèi)聯(lián)標(biāo)簽，用在一行文本中，<div>是塊級(jí)標(biāo)簽。
div用于存放需要顯示的數(shù)據(jù)，css用于指定如何顯示數(shù)據(jù)樣式，做到結(jié)構(gòu)與樣式相互分離。
查看div+css樣式HTML:點(diǎn)擊下方鏈接跳轉(zhuǎn)，可查看源碼：
div-css.html
格式化元素
普通文本
<b>，定義粗體文本
<big>，定義大號(hào)字
<em>，定義著重文字
<i>，定義斜體字
<small>，定義小號(hào)字
<strong>，定義加重語氣
<sub>，定義下標(biāo)字
<sup>，定義上標(biāo)字
<ins>，定義插入字
<del>，定義刪除字
計(jì)算機(jī)輸出
<code>，定義計(jì)算機(jī)代碼
<kbd>，定義鍵盤輸出樣式
<samp>，定義計(jì)算機(jī)代碼樣本
<tt>，定義打字機(jī)輸入樣式
<pre>，定義預(yù)格式文本
術(shù)語
<abbr>，定義縮寫
<acronym>，定義首字母縮寫
<address>，定義地址
<bdo>，定義文字方向
<blockquote>定義長的引用
<q>，定義短的引用語
<cite>，定義引用，引證
<dfn>，定義一個(gè)概念，項(xiàng)目
圖像熱區(qū)鏈接
圖像熱區(qū)鏈接，是什么呢？當(dāng)你在看一些購物網(wǎng)頁的時(shí)候，一張圖片上，可以在不同的地方鏈接到不同的目標(biāo)位置，點(diǎn)擊不同的地方可以跳轉(zhuǎn)到不同的網(wǎng)頁，這也是做商城項(xiàng)目一般要用到的技術(shù)。
這個(gè)時(shí)候不是<a>標(biāo)簽元素了，而是<area>元素。
<area>元素的屬性有兩個(gè)shape，cords屬性。
<area>的坐標(biāo)系，原點(diǎn)為圖片的左上角,x軸正方向向右，y軸正方向向下
我畫個(gè)圖哈，反映<area>的坐標(biāo)系：
圖像熱區(qū)鏈接的使用，<map>標(biāo)簽定義一個(gè)image-map，可以含一個(gè)以上的熱區(qū)<area>，每個(gè)熱區(qū)都有獨(dú)立的鏈接。
要為<map>標(biāo)簽賦予name屬性。
將<img>標(biāo)簽的usemap屬性與<map>標(biāo)簽的name屬性相關(guān)聯(lián)。
為了證明我學(xué)會(huì)了，我寫一個(gè)html頁面。
map -> name="image_link"
img -> usemap="#image_link"
1
點(diǎn)擊跳轉(zhuǎn)：imgmap.html
e-mail鏈接
e-mail鏈接主要是看到有很多官方網(wǎng)頁需要做的一個(gè)打開一封新的電子郵件。
點(diǎn)擊下方鏈接即可看到效果：
聯(lián)系我們
代碼：
<a href="mailto:xxxxxx@qq.com">聯(lián)系我們</a>
列表元素
整合列表html網(wǎng)頁，點(diǎn)擊跳轉(zhuǎn)：ul-ol.html
無序列表，<ul>定義無序列表，<li>定義列表項(xiàng)。
<ul>的type屬性值：disc點(diǎn)，square方塊，circle圓，none無.
有序列表，<ol>定義有序列表，<li>定義列表項(xiàng)。
<ol>的type屬性值：數(shù)字，大寫字母，大寫羅馬數(shù)字，小寫字母，小寫羅馬數(shù)字。
start屬性定義序號(hào)的開始位置。
定義列表<dl>，定義列表內(nèi)部可以有多個(gè)列表項(xiàng)標(biāo)題，每個(gè)列表項(xiàng)標(biāo)題用<dt>標(biāo)簽定義，列表項(xiàng)標(biāo)題內(nèi)部又可以有多個(gè)列表項(xiàng)描述，用<dd>標(biāo)簽定義。
表格
整合表格html網(wǎng)頁，點(diǎn)擊跳轉(zhuǎn)：table.html
<table>定義表格
<caption>定義表格標(biāo)題
<tr>定義若干行
<td>定義若干單元格
<th>定義表頭
表格分頭部，主體，底部：<thead>,<tbody>,<tfoot>三個(gè)標(biāo)簽。
<td>的兩個(gè)屬性：colspan用于定義單元格跨行，rowspan用于定義單元格跨列<tbody>,<thead>,<tfoot>標(biāo)簽通常用于對(duì)表格內(nèi)容進(jìn)行分組。<form>標(biāo)簽定義，action屬性定義了表單提交的地址，method屬性定義表單提交的方式。
<input type="text"> <input type="password"> <input type="radio"> <input type="checkbox"> <input type="submit"> <input type="reset"> <input type="button"> <input type="image"> <input type="file"> <input type="hidden">
<textarea>元素
<textarea>標(biāo)簽具有name,cols,rows3個(gè)屬性。
name用于提交參數(shù)value用于輸入文本內(nèi)容cols和rows分別用于文本框的列數(shù)和行數(shù)，寬度和高度。效果：
自我評(píng)價(jià)：
代碼：
<form action="web" method="post"> 自我評(píng)價(jià)：<br/> <textarea rows="10" cols="50" name="introduce"> </textarea> <br/> <input type="submit" id="" name=""> </form>
<frameset>定義一個(gè)框架集，用于組織多個(gè)窗口，每個(gè)框架存有獨(dú)立的html文檔<frameset>不能與<body>共同使用，除非有<noframe>元素<frame>用于定義<frameset>中一個(gè)特定的窗口?？赵?code style="box-sizing:border-box;outline:0px;margin:0px;padding:2px 4px;font-family:"font-size:14px;line-height:22px;color:#C7254E;background-color:#F9F2F4;border-radius:2px;overflow-wrap:break-word;"><frame/>
：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>frameset</title>
</head>
<frameset cols="25%,50%,25%">
<frame src="https://blog.csdn.net/qq_36232611" scrolling="no" noresize="noresize"></frame>
<frame src="https://juejin.im/user/5e477d7ce51d4526c550a27d" ></frame>
<frame src="https://www.jianshu.com/u/c785ece603d1" ></frame>
</frameset>
<noframes>
<body>您的瀏覽器無法處理框架，請(qǐng)更換瀏覽器打開</body>
</noframes>
</html>
1
顯示結(jié)果 描述 實(shí)體名稱 實(shí)體編號(hào)
空格  
< 小于號(hào) < <
> 大于號(hào) > >
& 和號(hào) & &
" 引號(hào) " "
' 撇號(hào) ' (IE不支持) '
￠ 分（cent） ¢ ¢
￡ 鎊（pound） £ £
￥ 元（yen） ¥ ¥
€ 歐元（euro） € €
§ 小節(jié) § §
© 版權(quán)（copyright） © ©
® 注冊(cè)商標(biāo) ® ®
? 商標(biāo) ™ ™
× 乘號(hào) × ×
÷ 除號(hào) ÷ ÷
————————————————
版權(quán)聲明：本文為CSDN博主「達(dá)達(dá)前端」的原創(chuàng)文章，遵循 CC 4.0 BY-SA 版權(quán)協(xié)議，轉(zhuǎn)載請(qǐng)附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/qq_36232611/article/details/105109467
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.alimai.net