/一、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)頁
其實對于文檔顯示來說,定義成en的文檔也可以顯示中文,定義zh-CN的文檔也可以顯示英文
這個屬性對于瀏覽器和搜索引擎(百度、谷歌等)還是有作用的
3、charset字符集
字符集是多個字符的集合,以便計算機(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ì) |
例
使用 <span> 元素對文本中的一部分進(jìn)行著色:
<p>我的母親有 <span style="color:blue">藍(lán)色</span> 的眼睛。</p>
瀏覽器支持
所有主流瀏覽器都支持 <span> 標(biāo)簽。
標(biāo)簽定義及使用說明
<span> 用于對文檔中的行內(nèi)元素進(jìn)行組合。
<span> 標(biāo)簽沒有固定的格式表現(xiàn)。當(dāng)對它應(yīng)用樣式時,它才會產(chǎn)生視覺上的變化。如果不對 <span> 應(yīng)用樣式,那么 <span> 元素中的文本與其他文本不會任何視覺上的差異。
<span> 標(biāo)簽提供了一種將文本的一部分或者文檔的一部分獨(dú)立出來的方式。
提示和注釋
提示:被 <span> 元素包含的文本,您可以使用 CSS 對它定義樣式,或者使用 JavaScript 對它進(jìn)行操作。
HTML 4.01 與 HTML5之間的差異
NONE.
全局屬性
<span> 標(biāo)簽支持 HTML 的全局屬性。
事件屬性
<span> 標(biāo)簽支持 HTML 的事件屬性。
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039,我們一起飛!
lt;h2 id="title1">開發(fā)工具(工欲善其事必先利其器)</h2>
為了讓大家更快的融入到編程的世界中, 不被繁瑣的英語單詞所困擾, 不用每天編寫很多沒有意義的重復(fù)代碼, 提升大家的開發(fā)效率今后的課程中我們統(tǒng)一采用最高級高發(fā)工具來編寫網(wǎng)頁
<h3 id="title2">常見的前端開發(fā)工具</h3>
記事本: 提示功能較差
editplus/nodepad++: 提示功能較差
Dreamwaver: 更偏向設(shè)計
Sublime: 輕量級,自帶功能不太全, 但是插件十分豐富
WebStorm: 重量級, 自帶功能全面
其它ide(zend studio、netbean等)
為了讓大家更快的融入到編程的世界中, 不被繁瑣的英語單詞所困擾, 今后的課程中我們統(tǒng)一采用最牛逼最高級的高發(fā)工具WebStorm
<h3 id="title3">WebStorm安裝和使用</h3>
安裝軟件
1.png
2.png
3.png
4.jpg
5.jpg
6.png
7.jpg
8.png
破解軟件
9.png
10.png
11.jpg
12.jpg
13.png
14.png
漢化軟件
15.png
16.jpg
設(shè)置模版
創(chuàng)建文件
17.png
18.jpg
關(guān)注微信訂閱號:網(wǎng)頁設(shè)計輕松學(xué) 有更多內(nèi)容
19.png
WebStorm常見快捷鍵
如何在WebStorm中利用快捷鍵創(chuàng)建一個新的.html的文件
同時按下鍵盤上的Ctrl + Alt + Insert
如何在WebStorm中讓光標(biāo)移動到當(dāng)前行的末尾
按下鍵盤上的End鍵即可
如何在WebStorm中讓光標(biāo)移動到當(dāng)前行的最前面
按下鍵盤上的Home鍵即可
如何在WebStorm中讓光標(biāo)在多行中閃爍
按住鍵盤上的Alt鍵不放, 然后再按住鼠標(biāo)的左鍵不放, 然后再拖動鼠標(biāo)即可
如何在WebStorm中快速的復(fù)制光標(biāo)所在的那一行
按下鍵盤上的Ctrl + D
如何在WebStorm中快速的刪除光標(biāo)所在的那一行
按下鍵盤上的Ctrl + X
如何在WebStorm中讓標(biāo)簽包裹一段內(nèi)容, 也就是自動在一段內(nèi)容前后加上標(biāo)簽
按下鍵盤上的Ctrl + Alt + T, 然后按下回車, 然后輸入對應(yīng)的標(biāo)簽即可
<h2 id="title4">基礎(chǔ)標(biāo)簽學(xué)習(xí)</h2>
<h3 id="title5">H系列標(biāo)簽(Header 1~Header 6)</h3>
作用:
用于給文本添加標(biāo)題語義
格式:
<h1>xxxxxx</h1>
注意點(diǎn):
H標(biāo)簽是用來給文本添加標(biāo)題語義的, 而不是用來修改文本的樣式的
H標(biāo)簽一共有6個, 從H1~H6, 最多就只能到6, 超過6則無效
被H系列標(biāo)簽包裹的內(nèi)容會獨(dú)占一行
在H系列的標(biāo)簽中, H1最大, H6最小
在企業(yè)開發(fā)中, 一定要慎用H系列的標(biāo)簽, 特別是H1標(biāo)簽. 在企業(yè)開發(fā)中一般情況下一個界面中只能出現(xiàn)一個H1標(biāo)簽(和SEO有關(guān))
<h3 id="title6">P標(biāo)簽(Paragraph)</h3>
作用:
告訴瀏覽器哪些文字是一個段落
格式:
<p>xxxxxxxx</p>
注意點(diǎn):
在瀏覽器中會單獨(dú)占一行
<h3 id="title7">Hr標(biāo)簽(Horizontal Rule)</h3>
作用:
在瀏覽器上顯示一條分割線
格式:
<hr />
注意點(diǎn):
在瀏覽器中會單獨(dú)占一行
通過我的觀察發(fā)現(xiàn)HR標(biāo)簽可以寫/也可以不寫/, 如果不寫/那么就是按照HTML的規(guī)范來編寫, 如果寫上/那么就是按照XHTML的規(guī)范來編寫.但是在HTML5中, 由于HTML5兼容HTML和XHTML所有寫不寫都可以.那么以后我們在做前端開發(fā)時到底寫還是不寫呢? 按照高級開發(fā)工具的提示來寫即可.
由于hr標(biāo)簽是用來修改樣式的, 所以不推薦使用. 今后開發(fā)中添加水平線一般都使用CSS盒子來做
<h2 id="title8">HTML注釋(Annotation)</h2>
什么是注釋?
注釋是在所有計算機(jī)語言中都非常重要的一個概念,從字面上看,就是注解、解釋的意思
注釋可以用來解釋某一段程序或者某一行代碼是什么意思,方便直接或程序員之間的交流
為什么要使用注釋?
適當(dāng)?shù)淖⑨專軌蜃屛覀兊某绦蚋涌勺x,所以用中文提示自己,這里的程序是干什么的
注釋格式
<!--被注釋的內(nèi)容-->
注意點(diǎn):
被注釋的內(nèi)容不會在瀏覽器中顯示, 注釋是寫給我們自己看的
注釋不能嵌套使用
<!--<!--被注釋的內(nèi)容-->-->
快捷鍵: ctrl + /
<h3 id="title9">img標(biāo)簽(image)</h3>
作用: 在網(wǎng)頁上插入一張圖片
格式: 
標(biāo)簽的屬性
寫在標(biāo)簽中K="V"這種格式的文本我們稱之為標(biāo)簽屬性
屬性名稱 | 作用 |
---|---|
src(source) | 告訴瀏覽器需要插入 的圖片路徑, 以便于瀏覽器到該路徑下找到需要插入的圖片 |
alt(alternate) | 規(guī)定圖像的替代文本, 只有 在src指定的路徑下找不到圖片 ,才會顯示alt指定的文本 |
title | 懸停文本(介紹這張圖片, 只有在鼠標(biāo)移動到圖片上時才會顯示) |
height | 設(shè)置圖片顯示的高度 |
width | 設(shè)置圖片顯示的寬度 |
注意點(diǎn):
img標(biāo)簽添加的圖片默認(rèn)不是占一整行空間
如果想讓圖片等比拉伸, 只寫高度或者寬度即可
關(guān)注微信訂閱號:網(wǎng)頁設(shè)計輕松學(xué) 有更多內(nèi)容
<h3 id="title10">br標(biāo)簽(Break)</h3>
作用:
讓內(nèi)容換行
格式:
<br/>
注意點(diǎn):
br的意思是不另起一個段落進(jìn)行換行, 而網(wǎng)頁中99.99%需要換行時都是因為另起了一個段落, 所以應(yīng)該用p來做
<h3 id="title11">相對路徑和絕對路徑</h3>
圖片路徑分為兩種, 一種是絕對路徑, 一種是相對路徑, 我們重點(diǎn)學(xué)習(xí)相對路徑
, 因為在企業(yè)級開發(fā)中沒有人使用絕對路徑
絕對路徑
從電腦的具體盤符開始尋找我們需要的資源

以上代碼表示在F盤下查找lnj文件夾, 然后在lnj文件夾下查找girl.png圖片
相對路徑
一個文件相對于另外一個文件的位置尋找我們需要的資源

假設(shè)html文件和girl.png都在lnj文件夾下, 以上代碼表示在lnj文件夾下查找girl.png圖片
為什么沒人使用絕對路徑?
可以移植性太差.
什么是可移植性?
可以簡單的理解為把寫到的代碼拷貝到另外一臺電腦上是否能夠正常運(yùn)行
為什么絕對路徑可移植性差?
假如我編寫的html文件放在我電腦的 F:/lnj
目錄下, html文件中用到的圖片放在F:/lnj/images
目錄下, 我給src指定的絕對路為F:/lnj/images/girl.png
. 那么將來我將整個lnj文件夾拷貝給你
, 如果你將lnj文件夾放在非F盤下, 那么將無法顯示圖片
例如你存放在C盤根目錄, 那么圖片的絕對路徑會變?yōu)?code>C:/lnj/images/girl.png, 而src會去F盤找, 所以不會顯示
你只有將lnj
文件夾存放在F盤根目錄下時圖片才會正常運(yùn)行, 這就叫做可移植性不好
Q群;162542073
為什么相對路徑可移植性好?
同上, 如果src指定的路徑為images/girl.png
, 那么無論你拷貝到那個盤, 哪個文件夾. 系統(tǒng)都只會在當(dāng)前文件夾中的images下去查找圖片
, 不會受到盤符和存儲位置的影響, 只要保證頁面和圖片位置的相對關(guān)系不變就不會影響到圖片的顯示
相對路徑幾種查找方式
../代表訪問上級目錄
假設(shè)a文件夾下面有b文件夾, 圖片存放在a文件夾中, html文件存放在b文件夾中, 那么路徑為../girl.png
因為html文件在b文件夾中, 所以路徑是相對于b文件夾的, 所以../代表訪問b文件夾的上一級目錄, b文件夾的上一級目錄是a文件夾, 所以../girl.png就代表在a文件夾查找girl.png
直接編寫, 例如abc/girl.png
加上./ 編寫, 例如./abc/girl.png
相對當(dāng)前目錄有幾個文件夾,就在后面依次補(bǔ)全幾個文件夾名稱即可, 例如 abc/bbb/ccc/ddd/girl.png
或./abc/bbb/ccc/ddd/girl.png
直接編寫, 例如: girl.png
加上./ 編寫, 例如./girl.png
./代表當(dāng)前目錄, ./girl.png
代表在當(dāng)前目錄下查找
同級
下級
上級
注意事項:
相對路徑不會出現(xiàn)這種格式aaa/../bbb/girl.png
雖然可以顯示, 但是企業(yè)開發(fā)中千萬不要這么寫
<h3 id="title12">a標(biāo)簽(anchor)</h3>
格式: <a >江哥博客</a>
作用: 用于從一個頁面鏈接到另一個頁面
注意事項:
在a標(biāo)簽之間一定要寫上文字, 如果沒有, 那么在頁面上找不到這個標(biāo)簽
a標(biāo)簽也叫做超級鏈接
或超鏈接
a標(biāo)簽的屬性
屬性名稱 | 作用 |
---|---|
href(hypertext reference) | 指定跳轉(zhuǎn)的目標(biāo)地址 |
target | 告訴瀏覽器是否保留原始界面, _blank保留, _self不保留 |
title | 懸停文本(介紹這個鏈接, 只有在鼠標(biāo)移動到超鏈接上時才會顯示) |
base標(biāo)簽和a標(biāo)簽結(jié)合使用
如果每個a標(biāo)簽都想在新頁面中打開,那么逐個設(shè)置a標(biāo)簽的target屬性比較麻煩, 這時我們可以使用base和a標(biāo)簽結(jié)合的方式,一次性設(shè)置有a標(biāo)簽都在新頁面中打開
格式: <base target="_blank" />
注意事項:
base必須嵌套在head標(biāo)簽里面
如果標(biāo)簽上指定了target,base中也指定了target,那么會按照標(biāo)簽上指定的來執(zhí)行
a標(biāo)簽其它用法
例如<a href="girl.zip">下載福利資源<a/>
格式: <a href="01-錨點(diǎn)鏈接.html#location">跳轉(zhuǎn)到指定位置</a>
只需要在01-錨點(diǎn)鏈接.html
頁面添加一個id位置即可
2.1.格式<a href="#location">跳轉(zhuǎn)到指定位置</a>
2.2.在頁面的指定位置給任意標(biāo)簽添加一個id屬性
例如 <p id="location">這個是目標(biāo)</p>
格式<a href="#">江哥博客</a>
格式<a href="javascript:">江哥博客</a>
假鏈接(本質(zhì)是跳轉(zhuǎn)到當(dāng)前頁面)
跳轉(zhuǎn)到當(dāng)前
頁面指定位置
(錨點(diǎn)鏈接)
跳轉(zhuǎn)到指定
頁面的指定位置
下載(極力不推薦使用)
*請認(rèn)真填寫需求信息,我們會在24小時內(nèi)與您取得聯(lián)系。