HTML基础知识（常见元素、列表、链接元素、图片元素）
1、HTML有關(guān)概念
全稱: Hyper Text Markup Language（超文本標(biāo)記語言） 其文件擴(kuò)展名為“.html”或“.htm”
???? * 超文本 - 在普通的文本基礎(chǔ)上，添加超鏈接、圖片、音頻或視頻等
???? * 標(biāo)記 - 標(biāo)記就是HTML中的標(biāo)簽(元素)，特點(diǎn):<a>
* 語言 - 目前目標(biāo)所能識(shí)別的
版本: HTML 4.01 <4.01與4.0不是一個(gè)版本>； HTML 5； XHTML：嚴(yán)格版本的HTML
- ? 基本結(jié)構(gòu)：
?
?附：<!doctype html>: 申明版本，則瀏覽器可以預(yù)先知道文檔類型，從而正確顯示網(wǎng)頁(yè)內(nèi)容
<meta charset="UTF-8"> : 設(shè)置編碼格式
meta標(biāo)簽提供了元數(shù)據(jù)（不顯示在頁(yè)面上，但會(huì)被瀏覽器解析）。
meta元素常用于指定網(wǎng)頁(yè)的描述、關(guān)鍵詞、文件的最后修改時(shí)間、作者、和其他元數(shù)據(jù)。元數(shù)據(jù)可使用瀏覽器(如何顯示內(nèi)容或重新加載頁(yè)面），搜索引擎(關(guān)鍵詞)，或其他Web服務(wù)。
eg:為搜索引擎定義關(guān)鍵詞、為網(wǎng)頁(yè)定義內(nèi)容、為網(wǎng)頁(yè)定義作者….
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
<meta name="description" content="Free Web tutorials on HTML and CSS">
<meta name="author" content="King">
- ? 元素
空元素 - 只有開始標(biāo)簽，沒有結(jié)束標(biāo)簽;
起始元素 - 具有開始標(biāo)簽和結(jié)束標(biāo)簽 -----成對(duì)出現(xiàn)
注: 元素名（大小寫均可）- W3C預(yù)定義，建議使用小寫
- ? 屬性
作用：定義當(dāng)前元素的信息? ??????????格式：屬性名="屬性值"??
（a.屬性必須定義在開始標(biāo)簽中?? b.同一個(gè)元素具有多個(gè)屬性）
i?? 通用屬性 - 幾乎所有的HTML元素都具有的屬性
??id: 表示當(dāng)前元素的標(biāo)識(shí)(唯一的)? ??????name: 表示當(dāng)前元素的名稱
??style: 表示定義CSS樣式?????????? ???class: 表示定義CSS樣式
i 私有屬性 - 某個(gè)元素獨(dú)有的屬性
- ? 注釋
作用：解釋當(dāng)前的元素的作用?????? ???特點(diǎn)：不會(huì)顯示在瀏覽器的頁(yè)面中
? 格式：<!-- 注釋內(nèi)容 -->???????????? ??快捷鍵：CTRL ?
2、HTML常見元素
ü? 標(biāo)題 <h1> ~ <h6> （常用的<h1> ~ <h3>，尤其是<h1>）
?????? <h1>：用于搜索引擎抓取HTML頁(yè)面
搜索引擎抓取HTML內(nèi)容時(shí)，優(yōu)先級(jí):
???? ?<title>元素中的內(nèi)容 大于 <meta name="keywords" content="">大于<h1>元素
ü? 段落 <p></p>? ?
特點(diǎn)：自動(dòng)換行，行間距比較大
eg: ?<p> </p>? <p></p>
? ?或 ?<p> </p>
<p> </p>
eg: <p> <br> </p>?
?
ü? <hr> - 水平線 ??????
ü? <br> - 換行????? [快捷鍵 - 標(biāo)簽名 TAB]
3、列表
(1)有序列表????? (2)無序列表????? ??(3)定義列表
???? ?<ol>????? ???????<ul>?????????? ???<dl>????? ???- 表示定義列表
???????? <li></li>???? ????<li></li>??????? ??<dt></dt> ??- 表示列表項(xiàng)(列表的標(biāo)題)
???? ?</ol>? ???????????</ul>??????????? ???<dd></dd> ?- 表示列表項(xiàng)的描述(列表項(xiàng))
??????? ??????????????????????????????? ?????</dl>
?
有序列表 type屬性：規(guī)定列表類型1、A、a、l、i； start屬性：規(guī)定起始數(shù)字
快捷鍵：標(biāo)簽:*數(shù)量 TAB；?? alt 鼠標(biāo)左鍵
4、鏈接元素
?? 格式：<a href=" "></a>
?? 屬性：<a href="當(dāng)前要跳轉(zhuǎn)到的地址"></a>???? <a name="當(dāng)前元素的名稱"></a>
a鏈接會(huì)自帶下劃線，若去除下劃線，則? a{ text-decoration: none;}
href：去往的路徑即跳轉(zhuǎn)的頁(yè)面(必寫屬性)
title：提示文本，也就是鼠標(biāo)放到鏈接上顯示的文字
target = ’_self ’??? 默認(rèn)值，在自身頁(yè)面打開（關(guān)閉自身頁(yè)面，打開鏈接頁(yè)面）?
target = ’_blank ’? 打開新頁(yè)面 （自身頁(yè)面不關(guān)閉，打開一個(gè)新的鏈接頁(yè)面）
作用: 實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)(默認(rèn))； 實(shí)現(xiàn)回到頂部[錨點(diǎn)(#name)]即指向某固定位置；實(shí)現(xiàn)發(fā)送郵件
eg: <a name="top">這是頂端</a>
??? <a href="mailto:82328769@qq.com" >郵箱地址</a>
??? <a href="#top" >回到頂部</a>????? <a href="#middle" >回到中間</a>
2 相對(duì)路徑
即相對(duì)于文件自身出發(fā)，就是相對(duì)路徑。
文件和圖片（html文檔）在同一個(gè)目錄(文件夾) ，直接寫文件名。
?
圖片（html文檔）在文件在下一級(jí)目錄里。文件夾名稱/圖片（html）名稱
?
圖片（html）在文件的上一級(jí)目錄里，.. /圖片（html）名稱
?
圖片在文件的上一級(jí)的其他目錄里，../文件夾名稱/圖片名稱
?
2? 絕對(duì)路徑
5、圖片元素
<img src="當(dāng)前引入圖片的路徑" ?alt=" text文本"? width="圖片寬度" ?height="圖片高度" >
? ? ? ? ? ? ? ? ? ? ? ? ? ?圖片元素的加載原理
?
?
?
?
?
總結(jié)
以上是生活随笔為你收集整理的HTML基础知识（常见元素、列表、链接元素、图片元素）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： CSS基础知识（display和visi
- 下一篇： HTML 网页创建