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