1.html的概念
HTML是用來描述網頁的一種語言.
HTML指的是超文本标記語言(HyperText Markup Language)
HTML不是一種程式設計語言,而是一種标記語言(markup language)
标記語言是一套标記标簽
HTML使用标記标簽來描述網頁
2.HTML文檔
HTML文檔描述網頁
HTML文檔包含HTML标簽和純文字
HTML文檔也被稱為網頁
WEB浏覽器的作用是讀取HTML文檔,并以網頁的形式顯示出來.浏覽器不會顯示HTML标簽,而是使用标簽來解釋頁面的内容;
一個建立的HTML模闆如下所示:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html> <!DOCTYPE html>聲明位于文檔的最前面的位置,處于标簽之前.此标簽告訴浏覽器使用什麼樣的html或者xhtml規範.
作用:聲明文檔的解析類型(document compatMode),避免浏覽器的怪異模式.
document compatMode有兩種:
BackCompat:怪異模式,浏覽器使用自己的怪異模式解析渲染頁面.
CSS1Compat:标準模式,浏覽器使用W3C的标準解析頁面. 這個屬性會被浏覽器識别并使用,但是如果網頁沒有使用DOCTYPE的聲明,那個預設使用怪異模式.
3.HTML标簽
HTML标記标簽通常被稱為HTML标簽(HTML tag).
HTML标簽是由尖括号包圍的關鍵詞,比如
HTML标簽通常是成對出現的,比如
标簽分為兩個部分:開始标簽和結束标簽,标簽之間的部分也叫做标簽體
開始和結束标簽也被稱為開放标簽和閉合标簽
标簽可以有若幹個屬性,也可以不帶屬性
标簽可以嵌套,但是不能交叉嵌套
标簽的文法:
<标簽名 屬性1="屬性值1" 屬性2="屬性值2"...>内容部分</标簽名>
<标簽名 屬性1="屬性值1" 屬性2="屬性值2".../> HTML元素
HTML元素是指從開始标簽(start tag)到結束标簽(end tag)的所有代碼
與之間的文本描述網頁
<p></p> 指定一個段落
<a href="b.html"></a> 指向另外一個連結
<br/> 開始标簽常被稱為開放标簽(opening tag)
結束标簽常被稱為閉合标簽(closing tag)
HTML元素文法:
HTML元素以開始标簽起始
HTML元素以結束标簽終止
元素的内容是開始标簽與結束标簽之間的内容
某些HTML元素具有空内容（empty content）
空元素在開始标簽中進行關閉（以開始标簽的結束而結束）
大多數HTML元素可擁有屬性 1.head内常用的标簽:
元素出現在文檔的開頭部分,在它之間的元素在特殊意義,但是不會出現在浏覽器的文檔視窗裡
1. <meta>
<meta>
<meta>
元素可提供有關頁面的元資訊(meta-information),針對搜尋引擎和更新頻度的描述和關鍵詞.
<meta>
标簽位于文檔的頭部,不包含任何内容.
<meta>
提供的資訊是使用者不可見的
<meta>
标簽的組成:meta标簽共有兩個屬性,分别是http-equiv屬性和name屬性.
不同的屬性有不同的參數值,不同的參數值提供不同的網頁功能.
http-equiv屬性相當于http的檔案頭作用,可以向浏覽器傳回一些有用的資訊,以幫助正确的顯示網頁内容.
與之對應的屬性值為content,content中的内容其實就是各個參數的變量值.
name屬性主要用于描述網頁,與之對應的屬性值為content,content中的内容主要便于搜尋引擎機器人查找資訊和分類資訊用的.
<meta name="keywords" content="meta總結,html meta,meta屬性">
<meta name="desciption" content="html content"> 2.非meta标簽
<title>test</title>定義網頁的标題,在浏覽器标題欄顯示
<link res="icon" href="http://www.baidu.com">指定網頁标題前面的小圖示
<link res="stylesheet" href="css.css"> 指定運作的css檔案
<script src="hello.js"></script>指定運作的javascript腳本檔案 2.内常用的标簽
與
之間的文本是可見的網頁主體内容
基本标簽:
<hn> n的取值範圍是1~6,從大到小,用來表示标題
<p> 段落标簽,裡面的内容被換行,并且其上下内容之間有一行空白
<b><strong> 加粗标簽
<strike> 為文字加上一條中線
<em> 文字變成斜體
<sup> 上角标
<sub> 下角标
<br> 換行
<hr> 水準線 1.HTML标題
HTML标題(heading)是通過<h1>-<h6>等标簽進行定義的
<h1>This is a heading</h1> 指定一級标題
<h2>This is a heading</h2> 指定二級标題
<h3>This is a heading</h3> 指定三級标題
<h4>This is a heading</h4> 指定四級标題
<h5>This is a heading</h5> 指定五級标題
<h6>This is a heading</h6> 指定六級标題 2.HTML超連結标簽
超連結是指從一個網頁指向一個目标的連接配接關系,這個目标可以是另一個網頁,也可以是相同網頁上的不同位置,
還可以是一個圖檔,一個電子郵件,一個檔案,甚至是一個應用程式.
HTML連結通過<a>标簽來進行定義的
<a href="http://www.baidu.com">百度</a>
在href屬性中指定連結的位址
絕對URL位址:指向另一個站點(href="http://www.baidu.com")
相對URL位址:指向目前站點中的确切路徑(href="index.html")
錨URL位址:指向頁面中的錨(href="#top") 3.HTML圖像
HTML圖像是通過标簽進行定義的
<img src="a.jpg" /> 在src屬性中指定圖檔的位址,可以是本地位址,也可以是網絡位址.
中可以使用的屬性有:
src 要顯示的圖檔的路徑
alt 圖檔沒有加載成功時的提示
title 滑鼠懸浮時的提示資訊
width 圖檔的寬
height 圖檔的高(圖檔的寬和高兩個屬性隻用一個會自動等比縮放) 圖像的尺寸是以屬性的形式提供
<img src="a.jpg" alt="test1" title="test2" width="128" height="128" />
表示圖檔正常加載時會加載名為"a.jpg"的圖檔,滑鼠停在圖檔時會顯示"test2";
當圖檔加載失敗時會顯示"test1"的資訊. 4.清單标簽
HTML支援有序清單,無序清單和定義清單
無序清單:
無序清單是一個項目的清單,此列項目使用粗體圓點(典型的小黑圓圈)進行标記
無序清單始于<ul>标簽.每個清單項始于<li>.
清單項内部可以使用段落,換行符,圖檔,連結以及其他清單等.
有序清單
有序清單也是一列項目,清單項目使用數字進行标記
有序清單始于<ol>标簽,每個清單始于<li>标簽.
清單項内部可以使用段落,換行符,圖檔,連結以及其他清單等.
定義清單
自定義清單不僅僅是一列項目,而是項目及其注釋的組合
自定義清單以<dl>标簽開始,每個自定義清單項以<dt>開始,每個自定義清單項的定義以<dd>開始.
定義清單的清單項内部可以使用段落,換行符,圖檔,連結以及其他清單等. 5.表格标簽:
表格是一個二維資料空間,一個表格由若幹行組成,一個行又有若幹單元格組成.
單元格裡可以包含文字,清單,圖案,表單,數字元号,預置文本和其他的表格等内容.
表格最重要的目的是顯示表格類資料,表格類資料是指最适合組織為表格格式(即按行和列組織)的資料.
表格的基本結構:
表格由
<table>
标簽來定義,每個表格均有若幹行(由标簽定義),每行被分割為若幹單元格(由标簽)定義.
字母td指表格資料(table data),即資料單元格的内容.
資料單元格可以包含文本,圖檔,清單,段落,表單,水準線,表格等.
表格的表頭使用
<th>
标簽進行定義.浏覽器會把表頭顯示為粗體居中的文本.
表格标簽:
<table> 定義表格
<caption> 定義表格标題
<th> 定義表格的表頭
<tr> 定義表格的行
<td> 定義表格的單元
<thread> 定義表格的頁眉
<tbody> 定義表格的主體
<tfoot> 定義表格的頁腳
<col> 定義用于表格列的屬性
<colgroup> 定義表格列的組 屬性:
border:表格邊框
cellpadding:内邊距
cellspacing:外邊距
width:像素百分比(最好通過css來設定長寬)
rowspan:單元格緊跨多少行
colspan:單元格橫跨多少列(即合并單元格) 6.HTML中的 <div>
<span>
<div>
<span>
可以通過
<div>
<span>
将HTML元素組合起來
塊元素
大多數HTML元素被定義為塊級元素或内聯元素.
塊級元素:block level element
塊級元素在浏覽器顯示時,通常會以新行來開始(和結束)
例子:<h1>,<p>,<ul>,<table> 内聯元素:inline element
内聯元素在顯示時通常不會以新行開始
例子:<b>,<td>,<a>,<img> 7.HTML的 <div>
<div>
HTML
<div>
元素是塊級元素,是可用于組合其他HTML元素容器
<div>
元素沒有特定的含義,由于屬于塊級元素,浏覽器會在其前後顯示拆行.
如果與 CSS 一同使用，
<div>
元素可用于對大的内容塊設定樣式屬性。
<div>
元素的另一個常見的用途是文檔布局。它取代了使用表格定義布局的老式方法。
使用
<table>
元素進行文檔布局不是表格的正确用法。
<table>
元素的作用是顯示表格化的資料。
8.HTML <span>
<span>
<span>
元素是内聯元素,可用作文本的容器
<span>
與CSS一同使用時,
<span>
元素可用于部分文本設定樣式屬性
![Web前端就業前景好不好 怎麼迅速在行業立足[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)