天天看點
傳回

HTML基礎知識鞏固你的基礎

HTML基礎知識

  1. HTML的曆史：HTML，XHTML
  2. HTML的全局屬性：全局标準屬性，全局事件屬性
  3. HTML的元素：
HTML基礎知識鞏固你的基礎
HTML基礎知識鞏固你的基礎
  1. 标記語言，是一種将文本以及與文本相關的其他資訊結合起來，展現出關于文檔結構和資料處理細節的電腦文字編碼。
  2. HTML，為超文本标記語言。

  3. XHTML

     是可擴充超文本标記語言，是一種更純潔，更嚴格，更規範的

    html

     代碼。

  4. html

     檔案由檔案頭和檔案體兩部分組成。
  5. 标簽的分類：雙标簽，單标簽。
雙标簽：由“開始标簽”和“結束标簽”兩部分構成，必須成對使用，且必須合理嵌套。
單标簽：在開始标簽中進行關閉（以開始标簽的結束而結束）。

HTML的全局标準屬性

在

HTML

中，規定了8個全局标準屬性。

  1. class

     用于定義元素的類名。

  2. id

     用于指定元素的唯一

    id

     。

  3. style

     用于指定元素的行内樣式。

  4. title

     用于指定元素的額外資訊。

  5. accesskey

     用于指定激活某個元素的快捷鍵。
支援

accesskey

 屬性的元素有

<a>, <area>, <button>, <input>, <label>, <legend>, <textarea>

  1. tabindex

     用于指定元素在

    tab

     鍵下的次序。

tabindex

<a>,<area>,<button>,<input>,<object>,<select>,<textarea>

  1. dir

     用于指定元素中内容的文本方向。

dir

 的屬性值隻有

ltr

 和

rtl

 兩種，分别是

left to right

right to left

  1. lang

     用于指定元素内容的語言。

HTML的全局事件屬性

Window

 視窗事件

  1. onload

     ，在頁面加載結束後觸發。

  2. onunload

     ，在使用者從頁面離開時觸發，如單擊跳轉，頁面重載，關閉浏覽器視窗等。

Form

 表單事件

  1. onblur

     ，當元素失去焦點時觸發。

  2. onchange

     ，在元素的元素值被改變時觸發。

  3. onfocus

     ，在元素獲得焦點時觸發。

  4. onreset

     ，當表單中的重載按鈕被點選時觸發。

  5. onselect

     ，在元素中文本被選中後觸發。

  6. onsubmit

     ，在送出表單時觸發。

Keyboard

 鍵盤事件

  1. onkeydown

     ，在使用者按下按鍵時觸發。

  2. onkeypress

     ，在使用者按下按鍵後，按着按鍵時觸發。
該屬性不會對所有按鍵生效，不生效按鍵如：

alt

 ，

ctrl

shift

esc

  1. onkeyup

     ，當使用者釋放按鍵時觸發。

Mouse

 滑鼠事件

  1. onclick

     ，當在元素上單擊滑鼠時觸發。

  2. onblclick

     ，當在元素上輕按兩下滑鼠時觸發。

  3. onmousedown

     ，當在元素上按下滑鼠按鈕時觸發。

  4. onmousemove

     ，當滑鼠指針移動到元素上時觸發。

  5. onmouseout

     ，當滑鼠指針移出元素時觸發。

  6. onmouseover

  7. onmouseup

     ，當在元素上釋放滑鼠按鈕時觸發。

Media媒體事件

  1. onabort

     ，當退出媒體播放器時觸發。

  2. onwaiting

     ，當媒體已停止播放但打算繼續播放時觸發。

HTML元素

HTML基礎知識鞏固你的基礎
一個HTML文檔包含的标簽

  1. <!DOCTYPE>

     ，聲明文檔類型。

  2. <html>

     ，HTML元素真正的根元素。

  3. <head>

     ，定義

    html

     文檔的文檔頭。 
head中包含的元素

title，定義HTML文檔的标題
base，為頁面上的所有連結規定預設位址或者預設目标
link，用于定義文檔與外部資源之間的關系
meta，提供關于HTML的中繼資料
style，用于為HTML文檔定義樣式資訊
script，用于定義用戶端腳本

  1. body

    html

     文檔的文檔體。

  2. content-Type

     ，用于設定網頁的字元集，便于浏覽器解析與渲染頁面。

代碼：

<meta http-equiv="content-Type` content="text/html"; charset=utf-8">

  1. cache-control

     ，用于告訴浏覽器如何緩存某個響應及緩存多長時間。

參數：

no-cache，發送請求，與伺服器确認該資源是否被更改，如果沒有，則使用緩存

no-store，允許緩存，每次都要去伺服器上下載下傳完整的響應

public，緩存所有響應

private，隻為單個使用者緩存

max-age，表示目前請求開始，相應響應在多久内能被緩存和重用，不去伺服器重新請求，max-age=60表示響應可以再緩存和重用60秒

<meta http-equiv=cache-control" content="no-cache">

  1. expires

     ，用于設定網頁的到期時間，過期後重新到伺服器上重新傳輸。

  2. refresh

     ，網頁将在設定的時間内，自動重新整理并轉向設定的網址

  3. Set-Cookie

     ，用于設定網頁過期。
  4. 無語義元素：

    <span>,<div>

    <span>

     是内聯标簽，用在一行文本中，

    <div>

     是塊級标簽。
DIV+CSS

div

用于存放需要顯示的資料，

css

用于指定如何顯示資料樣式，做到結構與樣式互相分離。

檢視div+css樣式HTML:點選下方連結跳轉，可檢視源碼：

div-css.html

格式化元素

  1. 普通文本

  • <b>

     ，定義粗體文本

  • <big>

     ，定義大号字

  • <em>

     ，定義着重文字

  • <i>

     ，定義斜體字

  • <small>

     ，定義小号字

  • <strong>

     ，定義加重語氣

  • <sub>

     ，定義下标字

  • <sup>

     ，定義上标字

  • <ins>

     ，定義插入字

  • <del>

     ，定義删除字
  1. 計算機輸出

  • <code>

     ，定義計算機代碼

  • <kbd>

     ，定義鍵盤輸出樣式

  • <samp>

     ，定義計算機代碼樣本

  • <tt>

     ，定義打字機輸入樣式

  • <pre>

     ，定義預格式文本
  1. 術語

  • <abbr>

     ，定義縮寫

  • <acronym>

     ，定義首字母縮寫

  • <address>

     ，定義位址

  • <bdo>

     ，定義文字方向

  • <blockquote>

     定義長的引用

  • <q>

     ，定義短的引用語

  • <cite>

     ，定義引用，引證

  • <dfn>

     ，定義一個概念，項目

圖檔元素 

<img src="圖檔的url" alt = "圖像的替代文本">

超連結元素

  1. <a>

     标簽的

    target

     屬性，預設值為

    _self
值 說明

_self

 		在超連結所在架構或視窗中打開目标頁面

_blank

 		在新浏覽器視窗中打開目标頁面

_parent

 		将目标頁面載入含有該連結架構的父架構集或父視窗中

_top

 		在目前的整個浏覽器視窗中打開目标頁面，是以會删除所有架構
  1. 文本連結是

    <a></a>

     标簽之間的元素内容為文本内容。
  2. 錨點連結是用

    #+對應的錨點

     ，錨點通常用唯一屬性值

    id

     設定。

圖像熱區連結

圖像熱區連結，是什麼呢？當你在看一些購物網頁的時候，一張圖檔上，可以在不同的地方連結到不同的目标位置，點選不同的地方可以跳轉到不同的網頁，這也是做商城項目一般要用到的技術。

這個時候不是

<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>

的坐标系：

HTML基礎知識鞏固你的基礎

圖像熱區連結的使用，

<map>

标簽定義一個

image-map

，可以含一個以上的熱區

<area>

，每個熱區都有獨立的連結。

要為

<map>

标簽賦予

name

将

<img>

usemap

屬性與

<map>

name

屬性相關聯。

為了證明我學會了，我寫一個html頁面。

map -> name="image_link"

img -> usemap="#image_link"

點選跳轉：imgmap.html

e-mail連結

e-mail連結主要是看到有很多官方網頁需要做的一個打開一封新的電子郵件。

點選下方連結即可看到效果：

<a href="mailto:[email protected]">聯系我們</a>

javascript連結

點選JavaScript連結：

點選彈窗

<a href="javascript:alert('哈哈，你點選了！');">點選彈窗</a>

空連結

  1. 空連結是指未指派目标位址的超連結。

空連結的代碼：

javascript: void(0)

<a href=""></a>

<a href="#"></a>

<a href="javascript:void(0)"></a>

清單元素

整合清單html網頁，點選跳轉：ul-ol.html

  1. 無序清單，

    <ul>

     定義無序清單，

    <li>

     定義清單項。

<ul>

的

type

屬性值：

disc

點，

square

方塊，

circle

圓，

none

無.

  1. 有序清單，

    <ol>

     定義有序清單，

    <li>

<ol>

type

屬性值：數字，大寫字母，大寫羅馬數字，小寫字母，小寫羅馬數字。

start

屬性定義序号的開始位置。

  1. 定義清單

    <dl>

     ，定義清單内部可以有多個清單項标題，每個清單項标題用

    <dt>

     标簽定義，清單項标題内部又可以有多個清單項描述，用

    <dd>

     标簽定義。

表格

整合表格html網頁，點選跳轉：table.html

  1. <table>

     定義表格

  2. <caption>

     定義表格标題

  3. <tr>

     定義若幹行

  4. <td>

     定義若幹單元格

  5. <th>

     定義表頭
  6. 表格分頭部，主體，底部：

    <thead>,<tbody>,<tfoot>

     三個标簽。

border

 		設定表格的邊框寬度

width

 		設定表格的寬

height

 		設定表格的高

cellpadding

 		設定内邊距

cellspacing

 		設定外邊距

  1. <td>

     的兩個屬性：

    colspan

     用于定義單元格跨行，

    rowspan

     用于定義單元格跨列

  2. <tbody>,<thead>,<tfoot>

     标簽通常用于對表格内容進行分組。
  3. 表單由

    <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">
           
<select>

<option>

size屬性用來設定選擇欄的高度，multiple屬性用來決定是多選清單，還是單選

selected="selected"
表單控件，用于輸入更多的文本

<textarea>

元素

<textarea>

标簽具有

name,cols,rows

3個屬性。

  1. name

     用于送出參數

  2. value

     用于輸入文本内容

  3. cols

    rows

     分别用于文本框的列數和行數，寬度和高度。

效果：

自我評價： 

<form action="web" method="post">
 自我評價：<br/>
 <textarea rows="10" cols="50" name="introduce">
 </textarea>
 <br/>
 <input type="submit" id="" name="">
</form>

frameset

  1. <frameset>

     定義一個架構集，用于組織多個視窗，每個架構存有獨立的html文檔

  2. <frameset>

     不能與

    <body>

     共同使用，除非有

    <noframe>

  3. <frame>

     用于定義

    <frameset>

     中一個特定的視窗。空元素

    <frame/>

frame

src

 		需要顯示的

html

 文檔

frameborder

 		定義架構的外邊框，屬性值為0或者1

scrolling

 		定義是否顯示滾動條,有3個值：yes,no,auto

noresize="noresize"

 		定義該架構無法調整大小，預設是可以調整的

marginheight

marginwidth

 		定義上下左右的邊距

  1. <noframe>

     ，用于為那些不支援架構集的浏覽器顯示文本

  2. <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="" scrolling="no" noresize="noresize"></frame>
        <frame src="" ></frame>
        <frame src="https://www.jianshu.com/u/c785ece603d1" ></frame>
    </frameset>
    <noframes>
        <body>您的浏覽器無法處理架構，請更換浏覽器打開</body>
    </noframes>
</html>

預留字元

顯示結果 描述 實體名稱 實體編号
空格

&#160;
< 小于号

&lt;

&#60;
> 大于号

&gt;

&#62;
& 和号

&amp;

&#38;
" 引号

&quot;

&#34;
' 撇号

&apos;

 (IE不支援)

&#39;
￠ 分（cent）

&cent;

&#162;
£ 鎊（pound）

&pound;

&#163;
¥ 元（yen）

&yen;

&#165;
€ 歐元（euro）

&euro;

&#8364;
§ 小節

&sect;

&#167;
© 版權（copyright）

&copy;

&#169;
® 注冊商标

&reg;

&#174;
™ 商标

&trade;

&#8482;
× 乘号

&times;

&#215;
÷ 除号

&divide;

&#247;
達達前端指路 前端頁面開發與實作 html css JS前端開發經驗
上一篇: 鞏固shell基礎知識
下一篇: web前端的基礎知識！！！！

繼續閱讀