來源：達達 發(fā)布時間：2020-04-28 14:13:44 閱讀量：1223
HTML基礎(chǔ)知識
HTML的歷史：HTML，XHTML
HTML的全局屬性：全局標準屬性，全局事件屬性
HTML的元素：
標記語言，是一種將文本以及與文本相關(guān)的其他信息結(jié)合起來，展現(xiàn)出關(guān)于文檔結(jié)構(gòu)和數(shù)據(jù)處理細節(jié)的電腦文字編碼。
HTML，為超文本標記語言。
XHTML是可擴展超文本標記語言，是一種更純潔，更嚴格，更規(guī)范的html代碼。
html文件由文件頭和文件體兩部分組成。
標簽的分類：雙標簽，單標簽。
雙標簽：由“開始標簽”和“結(jié)束標簽”兩部分構(gòu)成，必須成對使用，且必須合理嵌套。
單標簽：在開始標簽中進行關(guān)閉（以開始標簽的結(jié)束而結(jié)束）。
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元素
一個HTML文檔包含的標簽
<!DOCTYPE>，聲明文檔類型。
<html>，HTML元素真正的根元素。
<head>，定義html文檔的文檔頭。
head中包含的元素
title，定義HTML文檔的標題
base，為頁面上的所有鏈接規(guī)定默認地址或者默認目標
link，用于定義文檔與外部資源之間的關(guān)系
meta，提供關(guān)于HTML的元數(shù)據(jù)
style，用于為HTML文檔定義樣式信息
script，用于定義客戶端腳本
1
body，定義html文檔的文檔體。
content-Type，用于設(shè)定網(wǎng)頁的字符集，便于瀏覽器解析與渲染頁面。
代碼：
<meta http-equiv="content-Type` content="text/html"; charset=utf-8">
1
cache-control，用于告訴瀏覽器如何緩存某個響應及緩存多長時間。
參數(shù)：
no-cache，發(fā)送請求，與服務器確認該資源是否被更改，如果沒有，則使用緩存
no-store，允許緩存，每次都要去服務器上下載完整的響應
public，緩存所有響應
private，只為單個用戶緩存
max-age，表示當前請求開始，相應響應在多久內(nèi)能被緩存和重用，不去服務器重新請求，max-age=60表示響應可以再緩存和重用60秒
<meta http-equiv=cache-control" content="no-cache">
1
expires，用于設(shè)定網(wǎng)頁的到期時間，過期后重新到服務器上重新傳輸。
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+CSS
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>，定義預格式文本
術(shù)語
<abbr>，定義縮寫
<acronym>，定義首字母縮寫
<address>，定義地址
<bdo>，定義文字方向
<blockquote>定義長的引用
<q>，定義短的引用語
<cite>，定義引用，引證
<dfn>，定義一個概念，項目
圖片元素
<img src="圖片的url" alt = "圖像的替代文本">
1
超鏈接元素
<a>標簽的target屬性，默認值為_self。
值 說明
_self 在超鏈接所在框架或窗口中打開目標頁面
_blank 在新瀏覽器窗口中打開目標頁面
_parent 將目標頁面載入含有該鏈接框架的父框架集或父窗口中
_top 在當前的整個瀏覽器窗口中打開目標頁面，因此會刪除所有框架
文本鏈接是<a></a>標簽之間的元素內(nèi)容為文本內(nèi)容。
錨點鏈接是用#+對應的錨點，錨點通常用唯一屬性值id設(shè)定。
圖像熱區(qū)鏈接
圖像熱區(qū)鏈接，是什么呢？當你在看一些購物網(wǎng)頁的時候，一張圖片上，可以在不同的地方鏈接到不同的目標位置，點擊不同的地方可以跳轉(zhuǎn)到不同的網(wǎng)頁，這也是做商城項目一般要用到的技術(shù)。
這個時候不是<a>標簽元素了，而是<area>元素。
<area>元素的屬性有兩個shape，cords屬性。
shape 屬性 說明 cords 屬性 說明
circle 圓形 x,y,r (x,y)為圓心坐標，r為半徑
rect 矩形 x1,y1; x2,y2 (x1,y1)為左上角坐標，(x2,y2)為右下角坐標
poly 多邊形 x1,y1;x2,y2;x3,y3;... 分別是各個點的點坐標
<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>
1
javascript鏈接
點擊JavaScript鏈接：
點擊彈窗
代碼：
<a href="javascript:alert('哈哈，你點擊了！');">點擊彈窗</a>
1
空鏈接
空鏈接是指未指派目標地址的超鏈接。
空鏈接的代碼：
javascript: void(0)
<a href=""></a>
<a href="#"></a>
<a href="javascript:void(0)"></a>
1
列表元素
整合列表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>三個標簽。
屬性 說明
border 設(shè)置表格的邊框?qū)挾?/span>
width 設(shè)置表格的寬
height 設(shè)置表格的高
cellpadding 設(shè)置內(nèi)邊距
cellspacing 設(shè)置外邊距
<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">
1
<select>
<option>
size屬性用來設(shè)置選擇欄的高度，multiple屬性用來決定是多選列表，還是單選
selected="selected"
1
表單控件，用于輸入更多的文本
<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>
1
frameset
<frameset>定義一個框架集，用于組織多個窗口，每個框架存有獨立的html文檔
<frameset>不能與<body>共同使用，除非有<noframe>元素
<frame>用于定義<frameset>中一個特定的窗口?？赵?lt;frame/>
frame屬性
屬性 說明
src 需要顯示的html文檔
frameborder 定義框架的外邊框，屬性值為0或者1
scrolling 定義是否顯示滾動條,有3個值：yes,no,auto
noresize="noresize" 定義該框架無法調(diào)整大小，默認是可以調(diào)整的
marginheight和marginwidth屬性 定義上下左右的邊距
<noframe>，用于為那些不支持框架集的瀏覽器顯示文本
<iframe>，與<frame>元素相同，iframe有frame的屬性，還加了height和width
代碼：
<!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
預留字符
HTML 中的預留字符必須被替換為字符實體。
顯示結(jié)果 描述 實體名稱 實體編號
空格  
< 小于號 < <
> 大于號 > >
& 和號 & &
" 引號 " "
' 撇號 ' (IE不支持) '
￠ 分（cent） ¢ ¢
￡ 鎊（pound） £ £
￥ 元（yen） ¥ ¥
€ 歐元（euro） € €
§ 小節(jié) § §
? 版權(quán)（copyright） © ©
? 注冊商標 ® ®
? 商標 ™ ™
× 乘號 × ×
÷ 除號 ÷ ÷
13450931319
微信登錄
QQ登錄
微博登錄
售前咨詢
