html的基礎知識
文檔的基本結(jié)構(gòu)
<!DOCTYPE html> <!-- 定義文本類型 -->
<html> <!-- html文件起始 -->
<head> <!-- html文件頭部 -->
<meta /> <!-- meta中定義類型、編碼督禽、作者狈惫、時間鹦马、編輯器荸频、重定向 -->
<title> 題目</title> <!--標題旭从，在頁面中不可見，顯示在瀏覽器工具欄键袱、添加收藏的標題、以及在瀏覽器搜索結(jié)果的顯示 -->
<base href="" target="" /> <!-- 超鏈的默認地址href及打開方式target -->
<link rel="stylesheet" type="text/css" href="">
<!-- 定義文檔與外部資源的關系付鹿，最常用來鏈接樣式表-->
<script type="text/javascript"></script>
<!-- 動態(tài)腳本的定義 -->
<style>
</style> <!-- 定義元素的樣式舵匾，可以采用不同類型的選擇器 -->
</head>
<body> <!-- html頁面可見部分 -->
<h1> 一級標題 </h1> <!-- h1 -> h6 標題 -->
<div> </div> <!-- 分節(jié) -->
<p> </p> <!-- 分段 -->
</body>
</html> <!-- html文件結(jié)束 -->
腦圖
html_基礎的結(jié)構(gòu)
常見元素
結(jié)構(gòu)類
定義了文檔的框架結(jié)構(gòu)
-
<h1-6>塊級元素坐梯，標題吵血，1-6 字體逐漸減小 -
<p>塊級元素蹋辅，組織文本的段落 -
<div>塊級元素其他元素的容器挫掏，常用來主旨章節(jié)；結(jié)合CSS設置樣式弃锐；及文檔布局 -
<span>內(nèi)聯(lián)元素霹菊，文本容器碌尔，結(jié)合CSS設置樣式 -
<frameset> <frame> </frame> </frameset>將頁面分欄顯示不同的html文版 -
<iframe src=""></iframe>內(nèi)連框架 -
<ul> <li>Coffee</li> <li>Milk</li> </ul>無序列表 -
<ol> <li>Coffee</li> <li>Milk</li> </ol>有序列表 -
<dl> <dt>Coffee</dt> <dd>Black hot drink</dd> <dt>Milk</dt> <dd>White cold drink</dd> </dl>自定義列表唾戚，dt為標題叹坦，dd為注釋 其中
內(nèi)容類
標簽代表一類的特殊內(nèi)容
-
<a href=""></a>超鏈接 -
<abbr>定義縮寫募书，<abbr title="World Health Organization">WHO</abbr> -
<acronym>定義首字母縮寫 -
<address>地址 -
<blockquote>塊引用插入前后換行的外邊距 -
<cite>定義引用和引證,<p><cite>The Scream</cite> by Edward Munch. Painted in 1893.</p> -
圖片 -
<q>短引用莹捡，內(nèi)容加引號
計算機相關的內(nèi)容類
-
<code>定義計算機代碼篮赢。 -
<pre>適合定義計算機代碼。 -
<kbd>定義鍵盤輸入涣脚。 -
<samp>定義計算機代碼樣本遣蚀。 -
<tt>定義打字機代碼芭梯。 -
<var>元素定義數(shù)學變量： -
<pre>定義預格式文本粥帚。 -
<listing>不贊成使用限次。使用<pre>代替。 -
<plaintext>不贊成使用赠群。使用<pre>代替查描。 -
<xmp>不贊成使用柏卤。使用<pre>代替缘缚。
修飾形容類
對內(nèi)容或者格式起修飾和形容
-
<hr>橫線 -
<del>刪除線 -
<ins>下劃線 -
<br>換行 -
<pre>預格式文本桥滨，保留格式齐媒，適合代碼塊
文本樣式修飾類
-
<bdo>定義文字方向<bdo dir="rtl">This text will be written from right to left</bdo> -
<b>定義粗體文本喻括。 -
<big>定義大號字唬血。 -
<em>定義著重文字。 -
<i>定義斜體字。 -
<small>定義小號字挑随。 -
<strong>定義加重語氣兜挨。 -
<sub>定義下標字拌汇。 -
<sup>定義上標字噪舀。 -
<ins>定義插入字。 -
<del>定義刪除字界逛。 -
<s>不贊成使用息拜。使用<del>代替少欺。 -
<strike>不贊成使用赞别。使用<del>代替氯庆。 -
<u>不贊成使用扰付。使用樣式（style）代替羽莺。
塊級元素內(nèi)聯(lián)元素及嵌套
- 塊級元素用來搭建網(wǎng)站架構(gòu)盐固、布局刁卜、承載內(nèi)容蛔趴，包括
div孝情、ul、li魁亦、dl洁奈、dt睬魂、dd氯哮、h1~h6喉钢、p、address, etc- 內(nèi)嵌元素 一般用在網(wǎng)站內(nèi)容之中的某些細節(jié)或部位的定義與修飾幔戏，用以“強調(diào)闲延、區(qū)分樣式垒玲、上標合愈、下標佛析、錨點”等等寸莫，包括
a, sapn, strong, sub, sup, img, etc- 塊元素和內(nèi)嵌元素是可以相互轉(zhuǎn)換的膘茎，如
display: block; /* 轉(zhuǎn)成塊元素 */,display: inline; /* 轉(zhuǎn)成內(nèi)嵌元素 */- 塊級元素是盒子辽狈，不管里面有多少東西，外部可以設置其寬高; 內(nèi)嵌元素是袋子其寬高由內(nèi)部的東西撐起來娘扩。
- 嵌套規(guī)則
- 塊元素可以包含內(nèi)聯(lián)元素或某些塊元素琐旁，但內(nèi)聯(lián)元素卻不能包含塊元素，它只能包含其它的內(nèi)聯(lián)元素
- 塊級元素不能放在
<p>里面h1-6、p伟阔、dt只能包含只能包含內(nèi)嵌元素掰伸，不能再包含塊級元素- li 內(nèi)可以包含 div 標簽狮鸭，li 和 div 標簽都是裝載內(nèi)容的容器歧蕉，地位平等廊谓，沒有級別之分
- 塊級元素與塊級元素并列蒸痹、內(nèi)嵌元素與內(nèi)嵌元素并列
<pre>標簽不能包含<img>,<object>,<big>,<samll>,<sub>和<sup>標簽
<div><h2></h2><p></p></div> —— 對
<div><a href=”#”></a><span></span></div> —— 對
<div><h2></h2><span></span></div> —— 錯
元素細節(jié)
超鏈
超鏈接可以文字或者圖像叠荠，通過使用 href 屬性 創(chuàng)建指向另一個文檔的鏈接榛鼎，通過使用 name 屬性 創(chuàng)建文檔內(nèi)的書簽
- 指向郵箱的鏈接抡笼，
<a href="mailto:someone@microsoft.com?cc=someoneelse@microsoft.com&bcc=andsomeoneelse2@microsoft.com&subject=Summer%20Party&body=You%20are%20invited%20to%20a%20big%20summer%20party!">發(fā)送郵件黄鳍！</a> - 無下劃線的超鏈框沟，
<a href="/example/html/lastpage.html" style="text-decoration:none"> - 圖片作為超鏈，
<a href="/example/html/lastpage.html">  </a> -
target = "_blank" or "showframe" or none指定打開文檔的顯示位置為 新窗口 或 框架 或 當前頁面 -
target = "iframe_name"顯示到指定的 iframe,<iframe src="/example/html/demo_iframe.html" name="iframe_a"></iframe> <p> <a target="iframe_a">W3School.com.cn</a></p> - 跳轉(zhuǎn)當頁面制定的錨點，制作目錄 ,
<a name="tips">基本的注意事項 - 有用的提示 --創(chuàng)建錨點--</a> <a href="#tips">有用的提示输玷，--本文檔中跳轉(zhuǎn)到書簽--</a> <a >有用的提示--UML中添加直接跳轉(zhuǎn)--</a>
圖片
- URL 可以是相對路徑和絕對路徑 饲嗽，
 -
alt替換文本貌虾，指定圖片顯示失敗時的替換文本尽狠， - 嵌入圖片與文字的豎直方向的對齊方式，
 middle top;水平方向的位置叶圃，<img src ="/i/eg_cute.gif" align ="left"> - 指定圖片的大小
 - 圖片的邊框
border="0" - 帶有可點擊區(qū)域的圖像映射
-
area元素永遠嵌套在map元素內(nèi)部袄膏。area元素可定義圖像映射中的區(qū)域 -
<img>中的usemap屬性可引用<map>中的 id 或 name 屬性（取決于瀏覽器），所以我們應同時向<map>添加 id 和 name 屬性掺冠。
-
<map name="planetmap" id="planetmap">
<area shape="circle" coords="180,139,14" href ="venus.html" alt="Venus" />
<area shape="circle" coords="129,161,10" href ="mercur.html" alt="Mercury" />
<area shape="rect" coords="0,0,110,260" href ="sun.html" alt="Sun" />
</map>
列表
無序列表
- 基本用例
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
- 項目符號
<ul type="disc"> </ul>, 或 “circle” 或 “square”
有序列表
- 基本用例
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
- 項目編號
<ol type="A"> </ol>, 或 “a”, “I”, “i”
自定義列表
- 基本用例
<dl>
<dt>Coffee</dt> <!-- 項目 -->
<dd>Black hot drink</dd> <!-- 注釋-->
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>
通用屬性
元素的通用屬性 - accesskey, style, class, title, tabindex, id, dir, spellcheck, hidden, contenteditable, contextmenu, draggable, dropzone
- accesskey 定義快捷鍵
<body>
<!--
accesskey - 用于定義快捷鍵沉馆。快捷鍵為：alt + accesskey德崭，參考第一個示例
第二個示例描述為：有全鍵盤的設備快捷鍵為：ctrl + alt + q（目前 IE 為：ctrl + shift + q），僅有小鍵盤的設備快捷鍵為：“數(shù)字 0 鍵”
-->
<a accesskey="w" >webabcd blog</a>
<a accesskey="q 0" >webabcd blog</a>
</body>
style 定義樣式
<span style="font-size:36px; color:Blue">webabcd</span>class 指定需要應用的 css 類選擇器
<html>
<head>
<title>class</title>
<style>
.myClass { font-size:36px; }
.myClass2 { color:Blue; }
</style>
</head>
<body>
<!--
class - 指定需要應用的 css 類選擇器
-->
<span class="myClass myClass2">webabcd</span>
</body>
</html>
- title 描述文檔信息
<body>
<!--
title - 用于描述元素信息眉厨，相當于 ToolTip
-->
<a title="webabcd" >webabcd blog</a>
</body>
- id 用于定義元素的唯一標識锌奴，主要給 DOM 用，
id與name的區(qū)別
W3C 文檔對象模型 （DOM） 是中立于平臺和語言的接口憾股，它允許程序和腳本動態(tài)地訪問和更新文檔的內(nèi)容鹿蜀、結(jié)構(gòu)和樣式。
<body>
<!--
id - 用于定義元素的唯一標識服球，主要給 DOM 用
-->
<a id="myId" >webabcd blog</a>
<script type="text/javascript"> alert(document.getElementById('myId').innerHTML); </script>
</body>
- dir 文本排列方向茴恰，可能的值有：auto|ltr|rtl
<body>
<!--
bdo - 定義文本排列的方向（bdo 是 bi-directional override 的縮寫）
dir - 文本排列方向，可能的值有：auto|ltr|rtl（dir 是 direction 的縮寫）
-->
<bdo dir="rtl">123</bdo>
</body>
- spellcheck - 是否使用瀏覽器的拼寫檢查功能對元素內(nèi)的內(nèi)容做拼寫檢查
- hidden - 用于隱藏元素
- contenteditable - 用于定義內(nèi)容是否可編輯
- ontextmenu - 指定上下文菜單的數(shù)據(jù)源
- draggable - 元素是否可拖拽斩熊；dropzone - 拖放的目標元素
腳本
-
<script>標簽用于定義客戶端腳本往枣，比如 JavaScript。script 元素既可包含腳本語句，也可通過 src 屬性指向外部腳本文件婉商。 <script type="text/javascript"> document.write("<h1>Hello World!</h1>") </script>-
<noscript>標簽提供無法使用腳本時的替代內(nèi)容，比方在瀏覽器禁用腳本時渣叛，或瀏覽器不支持客戶端腳本時丈秩。 - 如果瀏覽器壓根沒法識別
<script>標簽，那么<script>標簽所包含的內(nèi)容將以文本方式顯示在頁面上淳衙。為了避免這種情況發(fā)生蘑秽，你應該將腳本隱藏在注釋標簽當中。那些老的瀏覽器（無法識別<script>標簽的瀏覽器）將忽略這些注釋箫攀，而那些新的瀏覽器將讀懂這些腳本并執(zhí)行它們肠牲，即使代碼被嵌套在注釋標簽內(nèi)。
<script type="text/javascript">
<!--
document.write("Hello World!")
//-->
</script>
- 待深入
附錄
meta 中定義類型靴跛、編碼缀雳、作者、時間梢睛、編輯器肥印、重定向
- 類型和編碼格式
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> - 作者
<meta name="author" content="w3school.com.cn"> - 審核
<meta name="revised" content="David Yang,8/1/07"> - 編輯軟件
<meta name="generator" content="Dreamweaver 8.0en"> - 重定向
<meta http-equiv="Refresh" content="5;url=http://www.w3school.com.cn" /> </head> - 針對搜索引擎的，一些搜索引擎會利用 meta 元素的 name 和 content 屬性來索引您的頁面
- 關鍵字
<meta name="keywords" content="HTML, DHTML, CSS, XML, XHTML, JavaScript, VBScript"> - 描述
<meta name="description" content="HTML examples">
- 關鍵字
URL統(tǒng)一資源定位符
- 統(tǒng)一資源定位器（URL）用于定位萬維網(wǎng)上的文檔（或其他數(shù)據(jù)）,樣式為
scheme://host.domain:port/path/filenamescheme包含http(超文本傳輸協(xié)議), 以 http:// 開頭的普通網(wǎng)頁绝葡。不加密; https(安全超文本傳輸協(xié)議) 安全網(wǎng)頁深碱。加密所有信息交換; ftp(文件傳輸協(xié)議)用于將文件下載或上傳至網(wǎng)站; file 瀏覽本地計算機上的文件。- 編碼; URL 只能使用 ASCII 字符集來通過因特網(wǎng)進行發(fā)送, 使用 "%" 其后跟隨兩位的十六進制數(shù)來替換非 ASCII 字符,
+來替換空格
字符實體
某些符號是預留的藏畅，如果需要顯示采用字符實體敷硅，
&entity_name;或&#entity_name;
空格  
< 小于號 < <
> 大于號 > >
& 和號 & &
" 引號 " "
' 撇號 ' (IE不支持) '
￠ 分（cent） ¢ ¢
￡ 鎊（pound） £ £
￥ 元（yen） ¥ ¥
€ 歐元（euro） € €
§ 小節(jié) § §
? 版權(quán)（copyright）© ©
? 注冊商標 ® ®
? 商標 ™ ™
× 乘號 × ×
÷ 除號 ÷ ÷
