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