整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
/一、html
//a、HTML語法規(guī)范
//a.1基本語法概述
1、HTML標(biāo)簽是由尖括號包圍的關(guān)鍵字，例如,
2、HTML標(biāo)簽通常是成對出現(xiàn)的，例如和,我們成為雙標(biāo)簽，標(biāo)簽對中的第一個標(biāo)簽是開始標(biāo)簽，第二個標(biāo)簽是結(jié)束標(biāo)簽。
3、有些特殊的標(biāo)簽是單個標(biāo)簽（極少情況），例如
，我們稱為單標(biāo)簽
//a.2標(biāo)簽關(guān)系
雙標(biāo)簽關(guān)系可以分為兩類：包含關(guān)系和并列關(guān)系。
//b、HTML基本結(jié)構(gòu)標(biāo)簽
//b.1第一個HTML網(wǎng)頁
每個網(wǎng)頁都會有一個基本的結(jié)構(gòu)標(biāo)簽（也稱為骨架標(biāo)簽），頁面內(nèi)容也是在這些基本標(biāo)簽上寫的。
HTML頁面也稱為HTML文檔
標(biāo)簽名 | 定義 | 說明 |
<html></html> | HTML標(biāo)簽 | 頁面中最大的標(biāo)簽，我們稱為根標(biāo)簽 |
<head></head> | 文檔的頭部 | 注意在head標(biāo)簽中我們必須要設(shè)置的標(biāo)簽是title |
<title></title> | 文檔的標(biāo)題 | 讓頁面擁有一個屬于自己的網(wǎng)頁標(biāo)題 |
<body></body> | 文檔的主體 | 元素包含文檔的所有內(nèi)容，頁面內(nèi)容，基本都是放到body里面的 |
必須是.html或.htm,瀏覽器的作用是讀取HTML文檔，并以網(wǎng)頁的形式顯示出它們。
此時，用瀏覽器打開這個網(wǎng)頁，我們就可以預(yù)覽我們寫的第一個HTML文件了。
//c、開發(fā)工具vscode
1、<!DOCTYPE>標(biāo)簽
文檔類型聲明，作用就是告訴瀏覽器使用哪種HTML版本來顯示網(wǎng)頁
<!DOCTYPE html>這句代碼的意思是：當(dāng)前頁面采用的是HTML5來顯示頁面。
2、lang語言
用來定義當(dāng)前文檔顯示的語言：
a、en定義語言為英語
b、zh-CN定義語言為中文
簡單來說定義為en就是英文網(wǎng)頁，定義為zh-CN就是中文網(wǎng)頁
其實(shí)對于文檔顯示來說，定義成en的文檔也可以顯示中文，定義zh-CN的文檔也可以顯示英文
這個屬性對于瀏覽器和搜索引擎（百度、谷歌等）還是有作用的
3、charset字符集
字符集是多個字符的集合，以便計(jì)算機(jī)能夠識別和存儲各種文字
在標(biāo)簽內(nèi)，通過標(biāo)簽的charset屬性來規(guī)定HTML文檔應(yīng)該使用哪種字符編碼。
charset常用的值：GB2312、BIG5、GBK和UTF-8,其中UTF-8也稱為萬國碼，基本包含了全世界所有國家需要用到的字符。
注意：上面語法是必須寫的代碼，否則可能引起亂碼的情況，一般情況下，統(tǒng)一使用"UTF-8"編碼，盡量統(tǒng)一寫成標(biāo)準(zhǔn)的"UTF-8",不要寫成"utf-8"或"UTF8"。
//d、HTML常用標(biāo)簽
//d.1標(biāo)簽語義
學(xué)習(xí)標(biāo)簽是有技巧的，重點(diǎn)是記住每個標(biāo)簽的語義，簡單理解就是指標(biāo)簽的含義，即這個標(biāo)簽是用來干嘛的
根據(jù)標(biāo)簽的語義，在合適的地方給一個最為合理的標(biāo)簽，可以讓頁面結(jié)構(gòu)更清晰。
//d.2標(biāo)題標(biāo)簽
-
(重要)
為了使網(wǎng)頁更具有語義，我們經(jīng)常會在頁面中用到標(biāo)題標(biāo)簽，HTML提供了6個等級的網(wǎng)頁標(biāo)題集
-
特點(diǎn)：
1、加了標(biāo)題的文字會變得更加粗，字號也會依次變大。
2、一個標(biāo)題獨(dú)占一行。
//d.3段落和換行標(biāo)簽（重要）
在網(wǎng)頁中，要把文字有條理地顯示出來，就需要將這些文字分段顯示，在HTML標(biāo)簽中，
標(biāo)簽用于定義段落，它可以將整個網(wǎng)頁分為若干段落。
<p>我是一個段落標(biāo)簽</p>標(biāo)簽語義：可以把HTML文檔分割為若干段落。
特點(diǎn)：
1、文本在一個段落中會根據(jù)瀏覽器窗口的大小自動換行。
2、段落和段落之間保有一個較大的空隙。
在HTML中，一個段落中的文字從左到右依次排列，直到瀏覽器的右端，然后自動換行，如果希望某段文本強(qiáng)制換行顯示，就需要使用換行標(biāo)簽
<br />
單詞break的縮寫，意為打斷，換行。
特點(diǎn)：
1、單標(biāo)簽
2、
標(biāo)簽只是簡單地開始新的一行，跟段落不一樣，段落之間會插入一些垂直的間距。
//d.4文本格式標(biāo)簽
在網(wǎng)頁中，有時需要為文字設(shè)置粗體，斜體或下劃線等效果，這時就需要用到HTML中的文本格式標(biāo)簽，使文字以特殊的方式顯示
標(biāo)簽語義：突出重要性，比普通文字更重要。
語義 | 標(biāo)簽 | 說明 |
加粗 | <strong></strong>或者<b></b> | 更推薦使用<strong></strong>標(biāo)簽加粗，語義更強(qiáng)烈 |
傾斜 | <em><em> 或者<i><i> | 更加推薦使用<em><em>標(biāo)簽，語義更加強(qiáng)烈 |
刪除線 | <del><del>或者<s><s> | 更加推薦使用<del><del>標(biāo)簽，語義更加強(qiáng)烈 |
下劃線 | <ins><ins>或者<u><u> | 更加推薦<ins><ins>標(biāo)簽，語義更加強(qiáng)烈 |
//d.5<div>和<span>標(biāo)簽
<div>和<span>是沒有語義的，它們就是一個盒子，用來裝內(nèi)容。
<div>這是頭部</div>
<span>今日價格</span>div是division的縮寫，表示分割，分區(qū)，span意為跨度，跨距。
特點(diǎn)：
1、<div>標(biāo)簽用來布局，但是現(xiàn)在一行只能放一個<div>，大盒子。
2、<span>標(biāo)簽用來布局，一行上可以有多個<span>,小盒子
//d.6圖像標(biāo)簽和路徑（重點(diǎn)）
1、圖像標(biāo)簽
在HTML標(biāo)簽中，<img>標(biāo)簽用于定義HTML頁面中的圖像。
<img src="圖像url"/>單詞image的縮寫，意為圖像
src是<img>標(biāo)簽的必須屬性，它用于指定圖像文件的路徑和文件名。
所謂屬性：簡單理解就是屬于這個圖像標(biāo)簽的特性。
圖像標(biāo)簽的其他屬性：
屬性 | 屬性值 | 說明 |
src | 圖片路徑 | 必須屬性 |
alt | 文本 | 替換文本，圖像不能顯示的文字 |
title | 文本 | 提示文本，鼠標(biāo)放到圖像上，顯示文字 |
width | 像素 | 設(shè)置圖像的寬度 |
height | 像素 | 設(shè)置圖像的高度 |
border | 像素 | 設(shè)置圖像的邊框粗細(xì) |
天的主要分享的是一些最基本、最常用的標(biāo)簽：<img/>、<a></a>、<table></table>、<ul></ul>，以及文件路徑。
首先，先來了解一下<img/>標(biāo)簽，它表示圖片標(biāo)簽，在頁面中會出現(xiàn)很多的圖像，主要的編碼方式就是通過<img/>來實(shí)現(xiàn)的；那是怎么實(shí)現(xiàn)的呢？它通過一些自己的屬性來規(guī)定了這個圖像的樣式，要實(shí)現(xiàn)一個圖像最基本的屬性有 src屬性、width屬性、height屬性、alt屬性，詳解一下他們的屬性分別是做什么的，是實(shí)現(xiàn)圖像的哪一個部分的？
src屬性：就是你要放置圖像，該圖像的文件路徑，你的文件是放在C盤里面的文件還是D盤里面的文件，那么src就是這個圖像的路徑；
width屬性：就是你的圖像的寬度，同理height就是圖像的高度；
alt屬性：是指一種提示，比如你的鼠標(biāo)在移動到你的圖片的時候或有文字提示、或者因?yàn)槟撤N原因圖片不能正常顯示的時候，會有直接文字提示；
完整的語法：<img src="圖像路徑" width="100px" height="100px" alt="提示"/>
接下來，我們分享<a></a>鏈接標(biāo)簽，它是一個能夠?qū)崿F(xiàn)跳轉(zhuǎn)的標(biāo)簽，在小編還是沒有完全總結(jié)<a>標(biāo)簽的情況下，可以先簡單的可以理解為從一個頁面跳轉(zhuǎn)到另外一個頁面。要實(shí)現(xiàn)一個跳轉(zhuǎn)也是需要它自有的一些屬性來完成，href屬性，target屬性，name屬性。解一下他們的屬性分別是做什么的，是實(shí)現(xiàn)跳轉(zhuǎn)的哪一個部分的？
href屬性：就是你要跳轉(zhuǎn)到哪個頁面，就是這個頁面的路徑；
target屬性：就是你要跳轉(zhuǎn)的網(wǎng)頁的打開方式，它有自己的備選答案，其中_blank代表在新的標(biāo)簽中打開，_self代表在當(dāng)前頁面中打開（這個是缺省值）
name屬性：就是定義錨點(diǎn)名稱（只有當(dāng)<a>標(biāo)簽當(dāng)做錨點(diǎn)使用時需要該屬性）
完整的語法：<a href="網(wǎng)頁路徑" target=“_blank”></.a>
總結(jié)一下<a>標(biāo)簽常用的表現(xiàn)形式（作用）
1、網(wǎng)頁面間跳轉(zhuǎn)
<a href="頁面路徑"></a>
2、頁面上的文檔(資源)下載
<a href="資源路徑"></a> 其中：資源路徑是指非html,htm,txt的資源，一般常見有為壓縮包形式 <a href="xxx.rar">下載</a>
3、返回頁面頂部的空連接
<a href="#">返回頂部</a> 跳轉(zhuǎn)到本頁(一般在開發(fā)、測試階段使用)
4、電子郵件鏈接
<a href="mailto：zhaoxu@tarena.com.cn"></a>
5、鏈接到Javascript
<a href="javascript：js代碼段落"></a> 就是在點(diǎn)擊<a>標(biāo)簽的時候，執(zhí)行一段js代碼
錨點(diǎn)：就是在頁面的任意位置處定義一個標(biāo)識，隨時隨地的都可以跳轉(zhuǎn)到這個標(biāo)識上；如果你想要在同一個頁面中，快速的到達(dá)某個點(diǎn)，這時候用錨點(diǎn)的方式是非常好的。
錨點(diǎn)的使用方式（2步驟）：
1、定義錨點(diǎn) <a name="anchorName"></a>
2、鏈接到錨點(diǎn) <a href="#anchorName">文本 或 圖像</a> 或者 <a href="url#anchorName"></a>
第三、關(guān)于<table>表格標(biāo)簽
表格：有行有列，按照一定的格式(從左到右，從上到下)排列里面的內(nèi)容；它能組織結(jié)構(gòu)化的信息，按照一定的格式來進(jìn)行數(shù)據(jù)顯示
要想創(chuàng)建表格：
1.定義表格:<table></table>
2. 定義行:<tr></tr>
3.創(chuàng)建列(單元格):<td></td>
注意:原始的表格中，每行的列數(shù)全部都是統(tǒng)一的。
在一些情況下，表格會有：表頭，表主體，表尾
表頭:<thead></thead>
表主體:<tbody></tbody>
表尾:<tfoot></tfoot>
實(shí)戰(zhàn)：創(chuàng)建一個表格，有4行3列
<table>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
表格的屬性：表格也是通過自己的屬性來形成自己風(fēng)格的table
width：寬度
height：高度
align：水平對齊方式（left,center,right）
border：設(shè)置表格的變寬,以px(像素)為單位
cellpadding：內(nèi)邊距,(單元格邊框與內(nèi)容之間的距離)
cellspacing：外邊距,(單元格與單元格之間的距離)
bgcolor：表格背景顏色
align：設(shè)置該行內(nèi)容的水平對齊方式(left,center,right)
valign：設(shè)置該行內(nèi)容的垂直對齊方式(top,middle,bottom)
colspan：單元格跨列(向右合并單元格)
rowspan：單元格跨行(向下合并單元格)
表格標(biāo)題：即表格第一行，文字加粗 語法：<caption>標(biāo)題</caption>
<table>
<caption></caption>
<tr>
<td></td>
</tr>
</table>
表格除了中規(guī)中矩，還有復(fù)雜應(yīng)用，可以形成不規(guī)則的表格，實(shí)現(xiàn)不規(guī)則表格主要是通過跨列：colspan、跨行:rowspan
第四：關(guān)于列表<ul>
列表根據(jù)使用情景，可以分為：有序列表、無序列表、自定義列表，其中
1、有序列表
語法:<ol><li></li> 列表項(xiàng)</ol>
常用屬性:
type : 列表類型，取值可以為：
1 :表示數(shù)字（默認(rèn)值）
a : 表示小寫字母
A : 表示大寫字母
i : 表示小寫羅馬數(shù)字
I : 表示大寫羅馬數(shù)字
start : 起始編號
2、無序列表
語法:<ul><li></li></ul>
屬性: type 取值可以為:
disc : 實(shí)心圓(默認(rèn))
circle : 空心圓
square : 實(shí)心矩形
3、自定義列表
<dl> 定義列表
<dt></dt> 列表內(nèi)容標(biāo)題
<dd></dd> 列表數(shù)據(jù)
</dl>
有序、無序使用場景：
1、從上到下，只有一列顯示數(shù)據(jù)
2、從左到右，只有一行顯示數(shù)據(jù)(導(dǎo)航)
自定義列表使用場景：做圖文混排的布局
最后是關(guān)于文件路徑，即URL
目錄結(jié)構(gòu)的表示方式
URL : Uniform Resource Locator , 統(tǒng)一資源定位器 ，俗稱，路徑
作用：用來標(biāo)識網(wǎng)絡(luò)中的資源位置
http://www.baidu.com
images/logo.gif
URL的三種形式: 絕對路徑 相對路徑 根相對路徑
1、絕對路徑
文件從最高級目錄開始的完整的路徑
絕對路徑就是完整的URL
1、從本機(jī)目錄結(jié)構(gòu)查找，從盤符開始
C:\xxx\xxx.jpg
2、網(wǎng)絡(luò)資源目錄結(jié)構(gòu)開始查找
協(xié)議、主機(jī)、目錄路徑、文件名稱
http://www.baidu.com/images/logo.jpg
2、相對路徑
相對于當(dāng)前文件的位置，查找資源文件
1、同級目錄(直接找)
直接輸入資源文件名稱即可
2、子級目錄(先進(jìn)入)
先進(jìn)入到指定文件夾，再查找資源文件
3、父級目錄(先返回)
先返回到指定的父級目錄出，再查找指定資源文件
../ : 表示返回上一級
../../images/logo.png
3、根相對路徑
file:///C:/zhaoxu/ ........ 本地訪問
http://www.baidu.com
http://localhost/ ...... 從服務(wù)器訪問數(shù)據(jù)
TML標(biāo)簽
基本標(biāo)簽
HTML頁面中內(nèi)容是由HTML標(biāo)簽組織起來的，如頁面中的文本、圖像、Flash視頻文件等都是通過HTML標(biāo)簽合理地顯示在頁面的各個位置。
1 標(biāo)題標(biāo)簽<h1>～<h6>
標(biāo)題標(biāo)簽表示一段文字的標(biāo)題（主題），并且支持多層次的內(nèi)容結(jié)構(gòu)。HTNL.共提供了6級標(biāo)題，分別為<h1>～<h6>，并賦予了標(biāo)題一定的外觀，所有標(biāo)題字體加粗，其中山<h1>字號最大，<h6>字號最小.
2.圖像標(biāo)簽<img>
在網(wǎng)頁中常用的圖像格式有4種，即JPG、GIF、BMP.PNG，其中使用比較多的是JPG、GIF和PNG，大多數(shù)瀏覽器都可以顯示這些圖像。
顯示圖像的語法：
< img src="ur1" alt="文本" width="x" height="y"/>
在語法中：
a、SrC屬性：表示顯示圖像的地址。
b、alt屬性：指定圖像的替代文本，當(dāng)圖像無法顯示時（如圖片路徑錯誤或網(wǎng)速太慢等）替代顯示的文本，這樣，即使圖像無法顯示，用戶還可以看到網(wǎng)頁丟失的信息，所以為頁面上的圖像都加上替換文本屬性是個好習(xí)慣，這樣有助于更好地顯示信息，并且對于那些使用純文本瀏覽器的人來說是非常有幫助的。
c、width屬性：表示圖像寬度.
d、height屬性：表示圖像高度。
3.段落標(biāo)簽<p>
顧名思義，段落標(biāo)簽表示將一段文字組成一系列段落內(nèi)容，這樣做的目的是內(nèi)容應(yīng)用某些格式和布局，使各個段落的邏輯更清晰明了。在HTML文檔中，段落通過<p>標(biāo)簽定義。段落標(biāo)簽<p>表示段落的開始，</p >表示段落的結(jié)束。
4.換行標(biāo)簽<br/>
在希望不產(chǎn)生一個新段落的情況下進(jìn)行換行，則使用<br>標(biāo)簽。<br>是一個空的HTML標(biāo)簽，由于關(guān)閉標(biāo)簽沒有任何意義，因此它沒有結(jié)束標(biāo)簽。
注意：
使用<b>和<br>的結(jié)果一樣，在XHTML以及未來的HTML版本中，根據(jù)W3C規(guī)范，不允許使用沒有結(jié)束標(biāo)簽的HTML元素，因此使用<br>頁面更規(guī)范，有更長遠(yuǎn)的保障。
5.水平線標(biāo)簽<hr/>
水平線標(biāo)簽表示一條水平線，注意該標(biāo)簽與<br>標(biāo)簽一樣，沒有結(jié)束標(biāo)簽，直接使用<hr/>表示標(biāo)簽的開始和結(jié)束。
使用以上講解的基本標(biāo)簽，就可以進(jìn)行網(wǎng)頁內(nèi)容排版了。
*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
