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