-
html概述和基本結構
- html概述
HTML是 HyperText Mark-up Language 的首字母簡寫,意思是超文本標記語言,超文本指的是超鏈接,標記指的是標籤,是一種用來製作網頁的語言,這種語言由一個個的標籤組成,用這種語言製作的文件保存的是一個文本文件,文件的擴展名爲html或者htm,一個html文件就是一個網頁,html文件用編輯器打開顯示的是文本,可以用文本的方式編輯它,如果用瀏覽器打開,瀏覽器會按照標籤描述內容將文件渲染成網頁,顯示的網頁可以從一個網頁鏈接跳轉到另外一個網頁。
-
html基本結構
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>網頁標題</title> </head> <body> 網頁顯示內容 </body> </html>
第一行是文檔聲明,第二行“<html>”標籤和最後一行“</html>”定義html文檔的整體,“<html>”標籤中的‘lang=“en”’定義網頁的語言爲英文,定義成中文是’lang=“zh-CN”’,不定義也沒什麼影響,它一般作爲分析統計用。 “<head>”標籤和“<body>”標籤是它的第一層子元素,“<head>”標籤裏面負責對網頁進行一些設置以及定義標題,設置包括定義網頁的編碼格式,外鏈css樣式文件和javascript文件等,設置的內容不會顯示在網頁上,標題的內容會顯示在標題欄,“<body>”內編寫網頁上顯示的內容。
-
HTML文檔類型
目前常用的兩種文檔類型是 xhtml 1.0和 html5
-
xhtml 1.0
xhtml 1.0 是html5之前的一個常用的版本,目前許多網站仍然使用此版本。此版本文檔用sublime text創建方法: html:xt + tab
文檔示例:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title> xhtml 1.0 文檔類型 </title> </head> <body> </body> </html>
-
html5
pc端可以使用xhtml 1.0,也可以使用html5,html5是向下兼容的,此版本文檔用sublime text創建方法: html:5 + tab 或者 ! + tab
文檔示例:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> html5文檔類型 </title> </head> <body> </body> </html>
-
兩種文檔的區別:
1、文檔聲明和編碼聲明
2、html5新增了標籤元素以及元素屬性
-
html註釋:
html文檔代碼中可以插入註釋,註釋是對代碼的說明和解釋,註釋的內容不會顯示在頁面上,html代碼中插入註釋的方法是:
<!-- 這是一段註釋 -->
-
-
html標題標籤
通過 <h1>、<h2>、<h3>、<h4>、<h5>、<h6>,標籤可以在網頁上定義6種級別的標題。6種級別的標題表示文檔的6級目錄層級關係,比如說:<h1>用作主標題,其後是 <h2>,再其次是 <h3>,以此類推。搜索引擎會使用標題將網頁的結構和內容編制索引,所以網頁上使用標題是很重要的。
<h1>這是一級標題</h1> <h2>這是二級標題</h2> <h3>這是三級標題</h3>
-
html段落標籤、換行標籤與字符實體
-
html段落標籤
<p>標籤定義一個文本段落,一個段落含有默認的上下間距,段落之間會用這種默認間距隔開,代碼如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>段落</title> </head> <body> <p>HTML是 HyperText Mark-up Language 的首字母簡寫,意思是超文本標記語言,超 文本指的是超鏈接,標記指的是標籤,是一種用來製作網頁的語言,這種語言由一個個的 標籤組成,用這種語言製作的文件保存的是一個文本文件,文件的擴展名爲html或者htm。 </p> <p>一個html文件就是一個網頁,html文件用編輯器打開顯示的是文本,可以用文本的方 式編輯它,如果用瀏覽器打開,瀏覽器會按照標籤描述內容將文件渲染成網頁,顯示的網 頁可以從一個網頁鏈接跳轉到另外一個網頁。</p> </body> </html>
-
html換行標籤
代碼中成段的文字,直接在代碼中回車換行,在渲染成網頁時候不認這種換行,如果真想換行,可以在代碼的段落中插入<br />來強制換行,代碼如下:
<p> 一個html文件就是一個網頁,html文件用編輯器打開顯示的是文本,可以用<br /> 文本的方式編輯它,如果用瀏覽器打開,瀏覽器會按照標籤描述內容將文件<br /> 渲染成網頁,顯示的網頁可以從一個網頁鏈接跳轉到另外一個網頁。 </p>
-
html字符實體
代碼中成段的文字,如果文字間想空多個空格,在代碼中空多個空格,在渲染成網頁時只會顯示一個空格,如果想顯示多個空格,可以使用空格的字符實體,代碼如下:
<!-- 在段落前想縮進兩個文字的空格,使用空格的字符實體: --> <p> 一個html文件就是一個網頁,html文件用編輯器打開顯示的是文本,可以用<br /> 文本的方式編輯它,如果用瀏覽器打開,瀏覽器會按照標籤描述內容將文件<br /> 渲染成網頁,顯示的網頁可以從一個網頁鏈接跳轉到另外一個網頁。</p>
在網頁上顯示 “<” 和 “>” 會誤認爲是標籤,想在網頁上顯示“<”和“>”可以使用它們的字符實體,比如:
<!-- “<” 和 “>” 的字符實體爲 < 和 > --> <p> 3 < 5 <br> 10 > 5 </p>
-
-
html塊標籤、含樣式的標籤
-
html塊標籤
1、<div> 標籤 塊元素,表示一塊內容,沒有具體的語義。
2、<span> 標籤 行內元素,表示一行中的一小段內容,沒有具體的語義。 -
含樣式和語義的標籤
1、<em> 標籤 行內元素,表示語氣中的強調詞
2、<i> 標籤 行內元素,表示專業詞彙
3、<b> 標籤 行內元素,表示文檔中的關鍵字或者產品名
4、<strong> 標籤 行內元素,表示非常重要的內容 -
語義化的標籤
語義化的標籤,就是在佈局的時候多使用有語義的標籤,搜索引擎在爬取網站的時候能認識這些標籤,理解文檔的結構,方便網站的收錄。比如:h1標籤是表示標題,p標籤是表示段落,ul、li標籤是表示列表,a標籤表示鏈接,dl、dt、dd表示定義列表等,語義化的標籤不多。
-
-
html圖像標籤、絕對路徑和相對路徑
-
html圖像標籤
<img>標籤可以在網頁上插入一張圖片,它是獨立使用的標籤,它的常用屬性有:
src屬性 定義圖片的引用地址,alt屬性 定義圖片加載失敗時顯示的文字,搜索引擎會使用這個文字收錄圖片、盲人讀屏軟件會讀取這個文字讓盲人識別圖片,所以此屬性非常重要。<img src="images/pic.jpg" alt="產品圖片" />
-
絕對路徑和相對路徑
像網頁上插入圖片這種外部文件,需要定義文件的引用地址,引用外部文件還包括引用外部樣式表,javascript等等,引用地址分爲絕對地址和相對地址。
- 絕對地址:相對於磁盤的位置去定位文件的地址
- 相對地址:相對於引用文件本身去定位被引用的文件地址
- “ ./ ” 表示當前文件所在目錄下,比如:“./pic.jpg” 表示當前目錄下的pic.jpg的圖片,這個使用時可以省略。
- “ …/ ” 表示當前文件所在目錄下的上一級目錄,比如:“…/images/pic.jpg” 表示當前目錄下的上一級目錄下的images文件夾中的pic.jpg的圖片。
-
-
html鏈接標籤
<a>標籤可以在網頁上定義一個鏈接地址,它的常用屬性有:
href屬性 定義跳轉的地址
title屬性 定義鼠標懸停時彈出的提示文字框
target屬性 定義鏈接窗口打開的位置
target="_self" 缺省值,新頁面替換原來的頁面,在原來位置打開
target="_blank" 新頁面會在新開的一個瀏覽器窗口打開
<a href="#"></a> <!-- # 表示鏈接到頁面頂部 --> <a href="http://www.baidu.com/" title="百度頁面">百度</a> <a href="2.html" target="_blank">測試頁面2</a>
-
html列表
-
有序列表
在網頁上定義一個有編號的內容列表可以用<ol>、<li>配合使用來實現,代碼如下:
<ol> <li>列表文字一</li> <li>列表文字二</li> <li>列表文字三</li> </ol>
在網頁上生成的列表,每條項目上會按1、2、3編號,有序列表在實際開發中較少使用。
-
無序列表
在網頁上定義一個無編號的內容列表可以用<ul>、<li>配合使用來實現,代碼如下:
<ul> <li><a href="#">新聞標題一</a></li> <li><a href="#">新聞標題二</a></li> <li><a href="#">新聞標題三</a></li> </ul>
在網頁上生成的列表,每條項目上會有一個小圖標,這個小圖標在不同瀏覽器上顯示效果不同,所以一般會用樣式去掉默認的小圖標,如果需要圖標,可以用樣式自定義圖標,從而達到在不同瀏覽器上顯示的效果相同,實際開發中一般用這種列表。
實際應用實例:
-
定義列表
定義列表通常用於術語的定義。<dl>標籤表示列表的整體。<dt>標籤定義術語的題目。<dd>標籤是術語的解釋。一個<\dl>中可以有多個題目和解釋,代碼如下:
<h3>前端三大塊</h3> <dl> <dt>html</dt> <dd>負責頁面的結構</dd> <dt>css</dt> <dd>負責頁面的表現</dd> <dt>javascript</dt> <dd>負責頁面的行爲</dd> </dl>
-
-
html表單
表單用於蒐集不同類型的用戶輸入,表單由不同類型的標籤組成,相關標籤及屬性用法如下:
-
<form>標籤 定義整體的表單區域
action屬性 定義表單數據提交地址
method屬性 定義表單提交的方式,一般有“get”方式和“post”方式 -
<label>標籤 爲表單元素定義文字標註
-
<input>標籤 定義通用的表單元素
type屬性:
type="text" 定義單行文本輸入框 type="password" 定義密碼輸入框 type="radio" 定義單選框 type="checkbox" 定義複選框 type="file" 定義上傳文件 type="submit" 定義提交按鈕 type="reset" 定義重置按鈕 type="button" 定義一個普通按鈕 type="image" 定義圖片作爲提交按鈕,用src屬性定義圖片地址 type="hidden" 定義一個隱藏的表單域,用來存儲值
value屬性 定義表單元素的值
name屬性 定義表單元素的名稱,此名稱是提交數據時的鍵名
-
<textarea>標籤 定義多行文本輸入框
-
<select>標籤 定義下拉表單元素
-
<option>標籤 與<select>標籤配合,定義下拉表單元素中的選項
-
-
<table>標籤:聲明一個表格,它的常用屬性如下:
border屬性 定義表格的邊框,設置值是數值 cellpadding屬性 定義單元格內容與邊框的距離,設置值是數值 cellspacing屬性 定義單元格與單元格之間的距離,設置值是數值 align屬性 設置整體表格相對於瀏覽器窗口的水平對齊方式,設置值有:left | center | right
-
<tr>標籤:定義表格中的一行
-
<td>和<th>標籤:定義一行中的一個單元格,td代表普通單元格,th表示表頭單元格,它們的常用屬性如下:
align 設置單元格中內容的水平對齊方式,設置值有:left | center | right
valign 設置單元格中內容的垂直對齊方式 top | middle | bottom
colspan 設置單元格水平合併,設置值是數值
rowspan 設置單元格垂直合併,設置值是數值
-
頁面佈局概述
佈局也可以叫做排版,它指的是把文字和圖片等元素按照我們的意願有機地排列在頁面上,佈局的方式分爲兩種:
1、table佈局:通過table元素將頁面空間劃分成若干個單元格,將文字或圖片等元素放入單元格中,隱藏表格的邊框,從而實現佈局。這種佈局方式也叫傳統佈局,目前主要使用在EDM(廣告郵件中的頁面)中,主流的佈局方式不用這種。
2、HTML+CSS佈局(DIV+CSS):主要通過CSS樣式設置來佈局文字或圖片等元素,需要用到CSS盒子模型、盒子類型、CSS浮動、CSS定位、CSS背景圖定位等知識來佈局,它比傳統佈局要複雜,目前是主流的佈局方式。
-
HTML5新增標籤
-
新增語義標籤
- 1、<header> 頁面頭部、頁眉
- 2、<nav> 頁面導航
- 3、<article> 一篇文章
- 4、<section> 文章中的章節
- 5、<aside> 側邊欄
- 6、<footer> 頁面底部、頁腳
-
音頻視頻
- 1、<audio>
- 2、<video>
-
PC端兼容h5的新標籤的方法,在頁面中引入以下js文件:
<script type="text/javascript" src="//cdn.bootcss.com/html5shiv/r29/html5.js"></script>
-
-
HTML5 新增表單控件
-
新增類型:網址 郵箱 日期 時間 星期 數量 範圍 電話 顏色 搜索
<label>網址:</label><input type="url" name="" required><br><br> <label>郵箱:</label><input type="email" name="" required><br><br> <label>日期:</label><input type="date" name=""><br><br> <label>時間:</label><input type="time" name=""><br><br> <label>星期:</label><input type="week" name=""><br><br> <label>數量:</label><input type="number" name=""> <br><br> <label>範圍:</label><input type="range" name=""><br><br> <label>電話:</label><input type="tel" name=""><br><br> <label>顏色:</label><input type="color" name=""><br><br> <label>搜索:</label><input type="search" name=""><br><br>
-
新增常用表單控件屬性:
- 1、placeholder 設置文本框默認提示文字
- 2、autofocus 自動獲得焦點
- 3、autocomplete 聯想關鍵詞
-
end…