基本概念
HTML 是網(wǎng)頁內(nèi)容的載體。內(nèi)容就是網(wǎng)頁制作者放在頁面上想要讓用戶瀏覽的信息,可以包含文字、圖片、視頻等。
CSS 樣式是表現(xiàn)。比如,標(biāo)題字體、顏色變化,或?yàn)闃?biāo)題加入背景圖片、邊框等,所有這些用來改變內(nèi)容外觀的東西稱之為表現(xiàn)。
JavaScript 是用來實(shí)現(xiàn)網(wǎng)頁上的特效效果。如:鼠標(biāo)滑過彈出下拉菜單,或鼠標(biāo)滑過表格的背景顏色改變,還有焦點(diǎn)新聞(新聞圖片)的輪換。有動畫的,有交互的一般都是用 JavaScript 來實(shí)現(xiàn)的。
2.常用標(biāo)簽
強(qiáng)調(diào)語氣:<em>是斜體,<strong>是加粗
引用:<q>短文本引用,<blockquote>長文本引用
換行 <br />
水平橫線 <hr />
空格
表格 <table><tbody>
加上后表格內(nèi)容全部下載完才會顯示
行 <tr>
列 <td>
表格表頭 <th>
標(biāo)題 <caption>
超鏈 <a>
例子:<a href="目標(biāo)網(wǎng)址" title="鼠標(biāo)滑過顯示的文本">鏈接顯示的文本</a>
新標(biāo)簽打開:target="_blank"
圖片 <img>,圖像可以是 GIF,PNG,JPEG 格式的圖像文件
例子:<img src="圖片地址" alt="下載失敗時(shí)的替換文本" title = "提示文本">
表單 <form>
文本域 <textarea>
例子 <textarea rows="行數(shù)" cols="列數(shù)">文本</textarea>
cols 多行輸入域的列數(shù);rows 多行輸入域的行數(shù)。這兩個(gè)屬性可用 CSS 樣式的 width 和 height 來代替:col 用 width、row 用 height 來代替
輸入框 <input type="text/password" name="名稱" value="文本" />
當(dāng) type=”text” 時(shí),輸入框?yàn)槲谋据斎肟?/p>
當(dāng) type=”password” 時(shí), 輸入框?yàn)槊艽a輸入框
單/復(fù)選框 <input type="radio/checkbox" value="值" name="名稱" checked="checked"/>
當(dāng) type=”radio” 時(shí),控件為單選框,同一組單選框 name 命名要一致
當(dāng) type=”checkbox” 時(shí),控件為復(fù)選框
提交按鈕 <input type="submit" value="提交">
重置按鈕 <input type="reset" value="重置">
下拉列表框 ` `
value <option value="提交值">選項(xiàng)</option>
選中 selected="selected"
多選 multiple="multiple"
標(biāo)簽 <label for="控件id名稱">,標(biāo)簽的 for 屬性中的值應(yīng)當(dāng)與相關(guān)控件的 id 屬性 值一定要相同
基本知識
CSS 樣式由選擇符和聲明組成,而聲明又由屬性和值組成。
選擇符:又稱選擇器,指明網(wǎng)頁中要應(yīng)用樣式規(guī)則的元素。
聲明:在英文大括號{}中的的就是聲明,屬性和值之間用英文冒號{}分隔。當(dāng)有多條聲明時(shí),中間可以英文分號;分隔。
從CSS 樣式代碼插入的形式來看基本可以分為以下3種:內(nèi)聯(lián)式、嵌入式和外部式三種。優(yōu)先級遵循就近原則,一般來說,內(nèi)聯(lián)式 > 嵌入式 > 外部式。
內(nèi)聯(lián)式
例子 <p style="color:red;font-size:12px">這里文字是紅色。</p>
嵌入式
外部式
例子:<link href="base.css" rel="stylesheet" type="text/css" />
CSS 選擇器
常見的類選擇器類型有如下幾種:
標(biāo)簽選擇器,.標(biāo)簽選擇器名稱{css樣式代碼;}
類選擇器,.類選器名稱{css樣式代碼;}
ID 選擇器,#類選器名稱{css樣式代碼;}
子選擇器,即大于符號(>),用于選擇指定標(biāo)簽元素的第一代子元素
包含選擇器,即加入空格 ,用于選擇指定標(biāo)簽元素下的后輩元素
通用選擇器,匹配html中所有標(biāo)簽元素,* {css樣式代碼;}類選擇器和ID選擇器都可以應(yīng)用于任何元素,但 ID 選擇器只能在文檔中使用一次,可以使用類選擇器詞列表方法為一個(gè)元素同時(shí)設(shè)置多個(gè)樣式,ID 選擇器是不可以的。
子選擇器和包含選擇器區(qū)別:>作用于元素的第一代后代,空格作用于元素的所有后代。
另外還有兩種選擇符:
偽類選擇符,允許給 HTML 不存在的標(biāo)簽(標(biāo)簽的某種狀態(tài))設(shè)置樣式。常用的有 a:hover{color:red;}
分組選擇符,為 HTML 中多個(gè)標(biāo)簽元素設(shè)置同一個(gè)樣式時(shí),可以使用分組選擇符,
。例如h1,span{color:red;}
CSS 的繼承、層疊和特殊性
CSS 的某些樣式是具有繼承性的,繼承是一種規(guī)則,它允許樣式不僅應(yīng)用于某個(gè)特定 HTML 標(biāo)簽元素,而且應(yīng)用于其后代。
特殊性:不同選擇器具有不同權(quán)值,標(biāo)簽的權(quán)值為 1,類選擇符的權(quán)值為 10,ID選擇符的權(quán)值最高為 100。
層疊 就是在 HTML 文件中對于同一個(gè)元素可以有多個(gè) CSS 樣式存在,當(dāng)有相同權(quán)重的樣式存在時(shí),會根據(jù)這些 CSS 樣式的前后順序來決定,處于最后面的 CSS 樣式會被應(yīng)用。
CSS 格式化排版
文字排版
字體,body{font-family:"Microsoft Yahei";}
字號、顏色,body{font-size:12px;color:#666}
粗體,body{font-weight:bold;}
斜體,body{font-style:italic;}
下劃線,body{font-style:italic;}
刪除線,body{text-decoration:line-through;}
段落排版
縮進(jìn),p{text-indent:2em;}
行間距(行高),p{line-height:1.5em;}
中文字間距、字母間距,letter-spacing:50px;和word-spacing:50px;
對齊,div{text-align:center;}
CSS 盒模型
元素分類
在 CSS 中,HTML 中的標(biāo)簽元素大體被分為三種不同的類型:塊狀元素、內(nèi)聯(lián)元素(又叫行內(nèi)元素)和內(nèi)聯(lián)塊狀元素。
常用的塊狀元素有:
塊級元素特點(diǎn):
每個(gè)塊級元素都從新的一行開始,并且其后的元素也另起一行。
元素的高度、寬度、行高以及頂和底邊距都可設(shè)置。
元素寬度在不設(shè)置的情況下,是它本身父容器的 100%(和父元素的寬度一致),除非設(shè)定一個(gè)寬度。
設(shè)置 display:block就是將元素顯示為塊級元素,從而使元素具有塊狀元素特點(diǎn)。
注:img 標(biāo)簽與 div 層之間會有空隙的解決方法是:使用 display:block 就可以消除間隙。
常用的內(nèi)聯(lián)元素有:
內(nèi)聯(lián)元素特點(diǎn):
和其他元素都在一行上;
元素的高度、寬度及頂部和底部邊距不可設(shè)置;
元素的寬度就是它包含的文字或圖片的寬度,不可改變。
塊狀元素也可以通過代碼 display:inline將元素設(shè)置為內(nèi)聯(lián)元素。
常用的內(nèi)聯(lián)塊狀元素有:
inline-block 元素特點(diǎn):
和其他元素都在一行上;
元素的高度、寬度、行高以及頂和底邊距都可設(shè)置。
內(nèi)聯(lián)塊狀元素(inline-block)就是同時(shí)具備內(nèi)聯(lián)元素、塊狀元素的特點(diǎn),代碼 display:inline-block就是將元素設(shè)置為內(nèi)聯(lián)塊狀元素。
盒模型
邊框
盒子模型的邊框就是圍繞著內(nèi)容及補(bǔ)白的線,這條線你可以設(shè)置它的粗細(xì)、樣式和顏色(邊框三個(gè)屬性)。
單獨(dú)設(shè)置下邊框的例子 div{border-bottom:1px solid red;}
寬度和高度
CSS 內(nèi)定義的寬(width)和高(height),指的是 填充以里的內(nèi)容范圍。一個(gè)元素實(shí)際寬度(盒子的寬度)=左邊界+左邊框+左填充+內(nèi)容寬度+右填充+右邊框+右邊界。
W3C 的標(biāo)準(zhǔn) Box Model:
所以有時(shí)會設(shè)置 box-sizing: border-box;來避免計(jì)算內(nèi)部元素大小
填充(padding)
元素內(nèi)容與邊框之間是可以設(shè)置距離的,稱之為“填充”。填充也可分為上、右、下、左(順時(shí)針)。
例子:
邊界(margin)
元素與其它元素之間的距離可以使用邊界(margin)來設(shè)置,順序和填充一樣是上,右,下,左。padding 在邊框里,margin 在邊框外。
CSS 布局模型
CSS 包含 3 種基本的布局模型,用英文概括為:Flow、Layer 和 Float。 在網(wǎng)頁中,元素有三種布局模型:
流動模型(Flow)
浮動模型 (Float)
層模型(Layer)
流動模型
流動模型,流動(Flow)是默認(rèn)的網(wǎng)頁布局模式。
流動布局模型具有2個(gè)比較典型的特征:
塊狀元素 都會在所處的包含元素內(nèi)自上而下按順序垂直延伸分布,因?yàn)樵谀J(rèn)狀態(tài)下,塊狀元素的寬度都為 100%。實(shí)際上,塊狀元素都會以行的形式占據(jù)位置。
在流動模型下,內(nèi)聯(lián)元素 都會在所處的包含元素內(nèi)從左到右水平分布顯示。
浮動模型
任何元素在默認(rèn)情況下是不能浮動的,但可以用 CSS 定義為浮動。例子:#div1{float:left;}
層模型
CSS 定義了一組定位(positioning)屬性來支持層布局模型。
層模型有三種形式:
絕對定位(position: absolute)
相對定位(position: relative)
固定定位(position: fixed)
絕對定位(position: absolute)
如果想為元素設(shè)置層模型中的絕對定位,需要設(shè)置 position:absolute(表示絕對定位),這條語句的作用將元素從文檔流中拖出來,然后使用 left、right、top、bottom 屬性相對于其最接近的一個(gè)具有定位屬性的父包含塊進(jìn)行絕對定位。如果不存在這樣的包含塊,則相對于 body 元素,即相對于瀏覽器窗口。
相對定位(position: relative)
如果想為元素設(shè)置層模型中的相對定位,需要設(shè)置 position:relative(表示相對定位),它通過 left、right、top、bottom 屬性確定元素在正常文檔流中的偏移位置。相對定位完成的過程是首先按 static(float) 方式生成一個(gè)元素(并且元素像層一樣浮動了起來),然后相對于以前的位置移動,移動的方向和幅度由left、right、top、bottom屬性確定,偏移前的位置保留不動。
簡單來說,就是相對元素原來的位置進(jìn)行移動,元素本身所占的位置會保留。
固定定位(position: fixed)
設(shè)置 position:fixed;。fixed:表示固定定位,與 absolute 定位類型類似,但它的相對移動的坐標(biāo)是視圖(屏幕內(nèi)的網(wǎng)頁窗口)本身。由于視圖本身是固定的,它不會隨瀏覽器窗口的滾動條滾動而變化,除非你在屏幕中移動瀏覽器窗口的屏幕位置,或改變?yōu)g覽器窗口的顯示大小,因此固定定位的元素會始終位于瀏覽器窗口內(nèi)視圖的某個(gè)位置,不會受文檔流動影響,這與 background-attachment:fixed; 屬性功能相同。
Relative 與 Absolute 組合使用,必須遵守下面規(guī)范:
參照定位的元素必須是相對定位元素的前輩元素
參照定位的元素必須加入 position:relative;
定位元素加入 position:absolute,便可以使用 top、bottom、left、right 來進(jìn)行偏移定位了
例子(HTML 和 CSS 代碼分別為):
顏色和長度
設(shè)置顏色的方法也有很多種:
英文命令顏色,p{color:red;}
RGB顏色,p{color:rgb(133,45,200);} 和 p{color:rgb(20%,33%,25%);}
十六進(jìn)制顏色, 這種顏色設(shè)置方法是現(xiàn)在比較普遍使用的方法,其原理其實(shí)也是 RGB 設(shè)置,但是其每一項(xiàng)的值由 0-255 變成了十六進(jìn)制 00-ff。p{color:#00ffff;}(當(dāng)你設(shè)置的顏色是 16 進(jìn)制的色彩值時(shí),如果每兩位的值相同,可以縮寫一半,#0ff)RGB 配色表參考 RGB顏色對照表 - 在線工具 - 開源中國 或者 RGB 配色表長度單位總結(jié)一下,目前比較常用到px(像素)、em、% 百分比,要注意其實(shí)這三種單位都是相對單位。
像素
em,就是本元素給定字體的 font-size 值
% 百分比
設(shè)置小技巧
水平居中設(shè)置
行內(nèi)元素。如果被設(shè)置元素為文本、圖片等行內(nèi)元素時(shí),水平居中是通過給父元素設(shè)置 text-align:center來實(shí)現(xiàn)的。
定寬塊狀元素(塊狀元素的寬度 width 為固定值)。滿足定寬和塊狀兩個(gè)條件的元素是可以通過設(shè)置“左右 margin”值為 auto 來實(shí)現(xiàn)居中的。
不定寬塊狀元素。
加入 table 標(biāo)簽(包括 <tbody>、<tr>、<td>),為這個(gè) table 設(shè)置“左右 margin 居中”
設(shè)置 display: inline方法:與第一種類似,顯示類型設(shè)為 行內(nèi)元素,然后使用 text-align:center來實(shí)現(xiàn)居中效果,進(jìn)行不定寬元素的屬性設(shè)置。
給父元素設(shè)置 float 和 position:relative; left:50%,子元素設(shè)置 position:relative 和left: -50% 來實(shí)現(xiàn)水平居中。
垂直居中設(shè)置
父元素高度確定的單行文本。通過設(shè)置父元素的 height 和 line-height 高度一致來實(shí)現(xiàn)的。(height: 該元素的高度;line-height: 顧名思義,行高(行間距),指在文本中,行與行之間的 基線間的距離 )。
父元素高度確定的多行文本。使用插入 table (包括 tbody、tr、td)標(biāo)簽,同時(shí)設(shè)置 vertical-align:middle。
另外,為元素設(shè)置以下兩個(gè)屬性之一會隱形改變 display 類型,元素的display顯示類型就會自動變?yōu)橐?span>display:inline-block(塊狀元素)的方式顯示,當(dāng)然就可以設(shè)置元素的 width 和 height 了,且默認(rèn)寬度不占滿父元素。
position: absolute
float: left 或 float:right
互聯(lián)網(wǎng)時(shí)代的今天,各種各樣的網(wǎng)頁充斥著我們的生活。只要使用瀏覽器,打開的每一個(gè)頁面都可以稱之為網(wǎng)頁。即使使用頭條這樣的APP,其內(nèi)容布局、展示的方法也脫胎于網(wǎng)頁頁面設(shè)計(jì)的方法與原則。可以說頁面的概念已經(jīng)遍布我們的信息化世界。
作為蕓蕓眾生中的一員,學(xué)習(xí)網(wǎng)頁制作對我們的事業(yè)、生活有怎樣的幫助呢?
第一,學(xué)習(xí)網(wǎng)頁制作有助于理解網(wǎng)絡(luò)信息的傳播運(yùn)行機(jī)制,即使通過本課程不能全面了解這些核心機(jī)制,也能為大家鋪墊下繼續(xù)深入學(xué)習(xí)的知識基礎(chǔ)。即使自己不必親自制作網(wǎng)頁,在使用第三方工具時(shí),比如微信公眾號、微信小程序或者其他自動網(wǎng)頁或網(wǎng)站生成工具時(shí)也會比沒有基礎(chǔ)的人更快的掌握這些工具。
第二,學(xué)好網(wǎng)頁制作是制作網(wǎng)站的基礎(chǔ),如果您因?yàn)槭聵I(yè)需要或者個(gè)人愛好打算制作自己的網(wǎng)站或博客,無論是打算使用php還是Java還是Python去構(gòu)建您的網(wǎng)站,精通網(wǎng)頁制作技術(shù)是您的第一塊技術(shù)基石。
第三,如果您打算學(xué)習(xí)網(wǎng)絡(luò)爬蟲來分析一些網(wǎng)絡(luò)數(shù)據(jù),了解網(wǎng)頁頁面構(gòu)成也是必要基礎(chǔ),至少您要知道一個(gè)網(wǎng)頁頁面中每個(gè)標(biāo)簽中對應(yīng)的是哪些信息,才能有的放矢拿到自己想要的信息。
第四,如果您想學(xué)習(xí)編程,但是缺少相應(yīng)的基礎(chǔ)知識,看不懂復(fù)雜的C語言教學(xué),那么從網(wǎng)頁制作入手嘗試?yán)斫饩幊痰恼Z法也是一個(gè)很不錯的選擇。
除此之外,瀏覽器可以做的事情越來越多,比如webgl的出現(xiàn),可以讓我們通過瀏覽器構(gòu)建3d世界,無論是虛擬現(xiàn)實(shí)(VR)還是增強(qiáng)現(xiàn)實(shí)(AR)都有很多開源免費(fèi)的解決方案。TensorFlow的JavaScript版本的出現(xiàn),讓我們可以通過結(jié)合瀏覽器學(xué)習(xí)使用人工智能技術(shù),且非常容易實(shí)現(xiàn)。
所以,新的一年里,我打算做網(wǎng)頁制作的學(xué)習(xí)教程,讓更多沒有基礎(chǔ)卻對網(wǎng)絡(luò)技術(shù)感興趣的小伙伴能加入進(jìn)來。
簡單來說學(xué)習(xí)網(wǎng)頁制作需要掌握三門技術(shù)。
第一,也是最基礎(chǔ)最核心的內(nèi)容是HTML超文本標(biāo)記語言。大家不必糾結(jié)HTML到底是什么,但是一定要記住它能干什么。HTML通俗來說可以比喻成容器。大家試想,網(wǎng)頁里都有哪些內(nèi)容呢?
一般網(wǎng)頁中都會有文字、圖片、聲音、視頻、表格等內(nèi)容,這些內(nèi)容就是靠HTML中的標(biāo)簽添加進(jìn)頁面的。
所以說HTML這個(gè)工具就是個(gè)容器,我們使用HTML標(biāo)簽語言為網(wǎng)頁添加所有需要的信息內(nèi)容。
第二,CSS層疊樣式表,這是一個(gè)用來裝飾頁面的工具。如果說HTML是個(gè)信息容器,那么如何讓這些信息條理清晰的顯示出來呢?那就需要CSS來幫忙了。如下圖所示,這是一個(gè)最簡單的頁面,只用到了HTML,里面裝了一個(gè)標(biāo)題和一個(gè)只有六個(gè)字的段落。
為了讓這個(gè)頁面看起來美觀些,我們?yōu)槠涮砑觕ss樣式表。添加后如圖所示:
我們可以看出來,CSS讓標(biāo)題文字換了顏色,也居中顯示了,背景也變成了藍(lán)色。
第三,JavaScript,這個(gè)工具相比HTML和CSS來講是最難學(xué)習(xí)的,學(xué)習(xí)JavaScript就是在學(xué)習(xí)編程了。它雖然只是個(gè)腳本語言,但是用到的知識和其他編程語言相差不大。
那JavaScript能干什么呢?
首先,它能為頁面中添加很多交互效果。舉個(gè)例子,我們常見的圖片翻頁、輪播很多就是基于JavaScript腳本實(shí)現(xiàn)的。
其次,JavaScript可以為傳統(tǒng)頁面擴(kuò)展出很多新功能,例如結(jié)合three.js我們可以很容易的在頁面中構(gòu)建三維空間,或者實(shí)現(xiàn)一些3d游戲或其他三維動態(tài)演示效果。舉個(gè)例子(https://renaultespace.littleworkshop.fr/),打開可能略慢。3d展示的汽車廣告是不是很酷!
再次,JavaScript可以以網(wǎng)頁為基礎(chǔ),實(shí)現(xiàn)各種各樣的在線小游戲,例如Phaser.js就是目前非常火的一個(gè)開源免費(fèi)網(wǎng)頁游戲制作庫。phaser官網(wǎng):http://phaser.io/
JavaScript為網(wǎng)頁的功能拓展提供了很多可能性,無論是3d顯示還是游戲制作還是未來的人工智能工具,都是由JavaScript都為大家提供了將功能引入到頁面的接口,這也是學(xué)習(xí)難度比較大的原因。不過只要堅(jiān)持下去一定能學(xué)通的!
網(wǎng)頁是指我們看到的單個(gè)頁面。這些頁面分為靜態(tài)頁面和動態(tài)頁面兩種。靜態(tài)頁面指的是不能與服務(wù)器進(jìn)行數(shù)據(jù)交互的頁面,顧名思義動態(tài)頁面指的是可以與服務(wù)器進(jìn)行數(shù)據(jù)交互的頁面,這一點(diǎn)大家不必糾結(jié)。
簡單來說,靜態(tài)頁面寫好后什么樣就是什么樣,誰打開都是事先編輯好的內(nèi)容,而動態(tài)頁面寫好后會隨著不同的訪問變換不同數(shù)據(jù),動態(tài)頁面更像是一個(gè)頁面模板,隨時(shí)套用不同信息。
大部分網(wǎng)站中的頁面都是動態(tài)頁面。
如果使用靜態(tài)頁面做網(wǎng)站會出現(xiàn)什么問題呢?如果您有300篇博客文章,那您就要做300個(gè)靜態(tài)頁面來顯示,大型資訊網(wǎng)站信息量更加龐大,如果都用靜態(tài)頁面來做,占用的服務(wù)器空間也是龐大到不可想象。
網(wǎng)站中的動態(tài)頁面就解決了這個(gè)問題,例如一個(gè)簡單的網(wǎng)站我們只需一個(gè)主頁、文章頁、搜索頁基本上就可以了,這些頁面中沒有具體內(nèi)容,我們稱之為模板。當(dāng)您打開后,顯示的內(nèi)容都是在數(shù)據(jù)庫中調(diào)出的。這樣,一個(gè)數(shù)據(jù)庫用來存儲壓縮過的精簡信息,這些信息通過不同頁面模板顯示在用戶面前就成為網(wǎng)站的基本運(yùn)行模式。
例如在靜態(tài)頁面中顯示文字字?jǐn)?shù)的代碼是這樣
<p>300字</p>
如果使用以php編寫的WordPress網(wǎng)站框架來動態(tài)顯示文章字?jǐn)?shù)就是這樣
<p><?php echo zm_count_words($text); ?></p>
<?php echo zm_count_words($text); ?>這條語句可以調(diào)取數(shù)據(jù)庫中文章字?jǐn)?shù)的記錄并顯示出來。這也我們通過這一條語句就可以顯示不同文章的字?jǐn)?shù)了。
無論是靜態(tài)頁面還是動態(tài)頁面,他們的核心內(nèi)容都是一樣的,HTML,CSS,JavaScript都是必修知識。只是靜態(tài)頁面在HTML中插入信息,而動態(tài)頁面插入的是調(diào)取數(shù)據(jù)庫信息的語句。
因此,我們這個(gè)教程看起來是在做靜態(tài)頁面,但是我們學(xué)習(xí)的也是制作網(wǎng)站的基礎(chǔ)知識。
第一,可以寫出靜態(tài)頁面。
第二,有能力讀懂他人寫好的頁面代碼。
第三,為繼續(xù)深入學(xué)習(xí)網(wǎng)站制作或更為炫酷的頁面制作打下基礎(chǔ)。
第四,掌握編程基礎(chǔ),至少是基于JavaScript的。
我是大魚,致力于數(shù)字藝術(shù)技術(shù)分享!歡迎大家關(guān)注!祝愿大家2020年學(xué)有所成!
HTML是什么?——零基礎(chǔ)自學(xué)網(wǎng)頁制作
第一個(gè)HTML頁面如何寫?——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML頁面中head標(biāo)簽有啥用?——零基礎(chǔ)自學(xué)網(wǎng)頁制作
初識meta標(biāo)簽與SEO——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML中的元素使用方法1——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML中的元素使用方法2——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML元素中的屬性1——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML元素中的屬性2(路徑詳解)——零基礎(chǔ)自學(xué)網(wǎng)頁制作
使用HTML添加表格1(基本元素)——零基礎(chǔ)自學(xué)網(wǎng)頁制作
使用HTML添加表格2(表格頭部與腳部)——零基礎(chǔ)自學(xué)網(wǎng)頁制作
使用HTML添加表格3(間距與顏色)——零基礎(chǔ)自學(xué)網(wǎng)頁制作
使用HTML添加表格4(行顏色與表格嵌套)——零基礎(chǔ)自學(xué)網(wǎng)頁制作
16進(jìn)制顏色表示與RGB色彩模型——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML中的塊級元素與內(nèi)聯(lián)元素——零基礎(chǔ)自學(xué)網(wǎng)頁制作
初識HTML中的<div>塊元素——零基礎(chǔ)自學(xué)網(wǎng)頁制作
在HTML頁面中嵌入其他頁面的方法——零基礎(chǔ)自學(xué)網(wǎng)頁制作
封閉在家學(xué)網(wǎng)頁制作!為頁面嵌入PDF文件——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML表單元素初識1——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML表單元素初識2——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML表單3(下拉列表、多行文字輸入)——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML表單4(form的action、method屬性)——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML列表制作講解——零基礎(chǔ)自學(xué)網(wǎng)頁制作
為HTML頁面添加視頻、音頻的方法——零基礎(chǔ)自學(xué)網(wǎng)頁制作
音視頻格式轉(zhuǎn)換神器與html視頻元素加字幕——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML中使用<a>標(biāo)簽實(shí)現(xiàn)文本內(nèi)鏈接——零基礎(chǔ)自學(xué)網(wǎng)頁制作
1.段落標(biāo)簽<p>
<style> p{margin:0px;} </style>
2.斜體標(biāo)簽<em>
<em>斜體</em>
3.粗體標(biāo)簽<strong>
<strong>加粗</strong>
4.<span>標(biāo)簽
被用來組合文檔中的行內(nèi)元素。使用 <span> 來組合行內(nèi)元素,以便通過樣式來格式化它們。
例如:
<style> span{ color:blue; } </style>
這樣,<span>標(biāo)簽包含的文本就變成了藍(lán)色的字體。
5.<q>標(biāo)簽
作用:段文本引用
例如:
<p>最初知道莊子,是從一首詩<q>莊生曉夢迷蝴蝶。望帝春心托杜鵑。</q>開始的。雖然當(dāng)時(shí)不知道是什么意思,只是覺得詩句挺特別。后來才明白這個(gè)典故出自是莊子的《逍遙游》,《逍遙游》代表了莊子思想的最高境界,是對世俗社會的功名利祿及自己的舍棄。</p> 在上面的例子中,“莊生曉夢迷蝴蝶。望帝春心托杜鵑。” 這是一句詩歌,出自晚唐詩人李商隱的《錦瑟》 。因?yàn)椴皇亲髡咦约旱奈淖郑孕枰褂?lt;q></q>實(shí)現(xiàn)引用。 注意要引用的文本不用加雙引號,瀏覽器會對q標(biāo)簽自動添加雙引號。 這里用<q>標(biāo)簽的真正關(guān)鍵點(diǎn)不是它的默認(rèn)樣式雙引號(如果這樣我們不如自己在鍵盤上輸入雙引號就行了),而是它的語義:引用別人的話。 補(bǔ)充知識:語義化網(wǎng)頁結(jié)構(gòu)有助于搜索引擎的收錄。同一個(gè)效果可以用很多鐘方式實(shí)現(xiàn),但這只方便了瀏覽者,而搜索引擎不知道這里到底是什么內(nèi)容,這里如果你使用標(biāo)簽,那么就告訴瀏覽器這里是引用的話。而且在手持設(shè)備或移動設(shè)備不能很好支持css的基礎(chǔ)上,瀏覽器會使用默認(rèn)的效果,因而提供較好可讀性。
6.<blockquote>標(biāo)簽
作用:長文本引用
例如:
<blockquote>明月出天山,蒼茫云海間。長風(fēng)幾萬里,吹度玉門關(guān)。漢下白登道,胡窺青海灣。由來征戰(zhàn)地,不見有人還。 戍客望邊色,思?xì)w多苦顏。高樓當(dāng)此夜,嘆息未應(yīng)閑。</blockquote>
注意:瀏覽器對<blockquote>標(biāo)簽的解析是縮進(jìn)樣式
7.<br>標(biāo)簽
怎么可以讓每一句詩詞后面加入一個(gè)折行呢?那就可以用到<br />標(biāo)簽了,在需要加回車換行的地方加入<br />,<br />標(biāo)簽作用相當(dāng)于word文檔中的回車。
語法:
xhtml1.0寫法:
<br/>
html4.01寫法:
<br>
現(xiàn)在一般使用 xhtml1.0 的版本的寫法(其它標(biāo)簽也是),這種版本比較規(guī)范。
與以前我們學(xué)過的標(biāo)簽不一樣,<br />標(biāo)簽是一個(gè)空標(biāo)簽,沒有HTML內(nèi)容的標(biāo)簽就是空標(biāo)簽,空標(biāo)簽只需要寫一個(gè)開始標(biāo)簽,這樣的標(biāo)簽有<br />、<hr />和<img />。
講到這里,你是不是有個(gè)疑問,想折行還不好說嘛,就像在 word 文件檔或記事本中,在想要折行的前面輸入回車不就行了嗎? 不好意思,在 html 中是忽略回車和空格的,你輸入的再多回車和空格也是顯示不出來的。
8.<hr>標(biāo)簽
在信息展示時(shí),有時(shí)會需要加一些用于分隔的橫線,這樣會使文章看起來整齊些。
語法:
html4.01版本
<hr>
xhtml1.0版本
<hr/>
注意:
9.<address>標(biāo)簽
一般網(wǎng)頁中會有一些網(wǎng)站的聯(lián)系地址信息需要在網(wǎng)頁中展示出來,這些聯(lián)系地址信息如公司的地址就可以<address>標(biāo)簽。也可以定義一個(gè)地址(比如電子郵件地址)、簽名或者文檔的作者身份。
語法:
<address>聯(lián)系地址信息</address>
如:
<address>文檔編寫:lilian 北京市西城區(qū)德外大街10號</address>
10.<code>標(biāo)簽
在介紹語言技術(shù)的網(wǎng)站中,避免不了在網(wǎng)頁中顯示一些計(jì)算機(jī)專業(yè)的編程代碼,當(dāng)代碼為一行代碼時(shí),你就可以使用<code>標(biāo)簽了,如下面例子:
<code>var i=i+300;</code>
注意:在文章中一般如果要插入多行代碼時(shí)不能使用<code>標(biāo)簽了。
語法:
<code>代碼語言</code>
注:如果是多行代碼,可以使用<pre>標(biāo)簽。
11.<pre>標(biāo)簽
主要作用:預(yù)格式化的文本。被包圍在 pre 元素中的文本通常會保留空格和換行符。
語法:
<pre>語言代碼段</pre>
如下代碼:
<pre> var message="歡迎"; for(var i=1;i<=10;i++) { alert(message); } </pre>
效果如下:
注意:<pre> 標(biāo)簽不只是為顯示計(jì)算機(jī)的源代碼時(shí)用的,在你需要在網(wǎng)頁中預(yù)顯示格式時(shí)都可以使用它,只是<pre>標(biāo)簽的一個(gè)常見應(yīng)用就是用來展示計(jì)算機(jī)的源代碼。
12.<ul>標(biāo)簽
ul-li是沒有前后順序的信息列表。
ul{ list-style:circle; }
ul{ list-style:none }
<ul> <li>信息</li> <li>信息</li> ...... </ul>
<ul> <li>精彩少年</li> <li>美麗突然出現(xiàn)</li> <li>觸動心靈的旋律</li> </ul>
13.<ol>標(biāo)簽
ol-li是有前后順序的信息列表
<ol> <li>信息</li> <li>信息</li> ...... </ol>
<ol> <li>前端開發(fā)面試心法 </li> <li>零基礎(chǔ)學(xué)習(xí)html</li> <li>JavaScript全攻略</li> </ol>
<ol>在網(wǎng)頁中顯示的默認(rèn)樣式一般為:每項(xiàng)<li>前都自帶一個(gè)序號,序號默認(rèn)從1開始。
14.<div>標(biāo)簽
15.<table>標(biāo)簽
1)屬性:border
作用:規(guī)定表格邊框的寬度
2)屬性:cellpadding
作用:單元格中的文本與單元格邊框的間距
3)屬性:cellspacing
作用:單元格之間的間距
table、tbody、tr、th、td
1、<table>…</table>:整個(gè)表格以<table>標(biāo)記開始、</table>標(biāo)記結(jié)束。
2、<tbody>…</tbody>:當(dāng)表格內(nèi)容非常多時(shí),表格會下載一點(diǎn)顯示一點(diǎn),但如果加上<tbody>標(biāo)簽后,這個(gè)表格就要等表格內(nèi)容全部下載完才會顯示。如右側(cè)代碼編輯器中的代碼。
3、<tr>…</tr>:表格的一行,所以有幾對tr 表格就有幾行。
4、<td>…</td>:表格的一個(gè)單元格,一行中包含幾對<td>...</td>,說明一行中就有幾列。
- 常用屬性: colspan:規(guī)定單元格可橫跨的列數(shù),值為數(shù)字 rowspan:規(guī)定單元格可橫跨的行數(shù),值為數(shù)字
5、<th>…</th>:表格的頭部的一個(gè)單元格,表格表頭。
6、表格中列的個(gè)數(shù),取決于一行中數(shù)據(jù)單元格的個(gè)數(shù)。
總結(jié):
16.<caption>標(biāo)簽
表格還是需要添加一些標(biāo)簽進(jìn)行優(yōu)化,可以添加標(biāo)題和摘要。
摘要的內(nèi)容是不會在瀏覽器中顯示出來的。它的作用是增加表格的可讀性(語義化),使搜索引擎更好的讀懂表格內(nèi)容,還可以使屏幕閱讀器更好的幫助特殊用戶讀取表格內(nèi)容。語法:
<table summary="表格簡介文本">
用以描述表格內(nèi)容,標(biāo)題的顯示位置:表格上方。語法:
<table> <caption>標(biāo)題文本</caption> <tr> <td>…</td> <td>…</td> … </tr> … </table>
17.<a>標(biāo)簽
<a href="目標(biāo)網(wǎng)址" title="鼠標(biāo)滑過顯示的文本">鏈接顯示的文本</a>
例如:
<a title="點(diǎn)擊進(jìn)入慕課網(wǎng)">click here!</a>
上面例子作用是單擊click here!文字,網(wǎng)頁鏈接跳轉(zhuǎn)到http://www.imooc.com這個(gè)網(wǎng)頁。
<a href="目標(biāo)網(wǎng)址" target="_blank">click here!</a>
<a>標(biāo)簽還有一個(gè)作用是可以鏈接Email地址,使用mailto能讓訪問者便捷向網(wǎng)站管理者發(fā)送電子郵件。
注意:如果mailto后面同時(shí)有多個(gè)參數(shù)的話,第一個(gè)參數(shù)必須以“?”開頭,后面的參數(shù)每一個(gè)都以“&”分隔。引號只有一對!
例子: <a href="mailto:yy@qq.com? cc=xx@qq.com & bcc=aa@qq.com & subject=郵件主題 & body=郵件內(nèi)容">
那么: 1)A知道自己發(fā)送郵件給了B1、B2、B3,并且抄送給了C1、C2、C3,密送給了D1、D2、D3。 2)B1知道這封是A發(fā)送給B1、B2、B3的郵件,并且抄送給了C1、C2、C3,但不知道密送給了D1、D2、D3。 3)C1知道這封是A發(fā)送給B1、B2、B3的郵件,并且抄送給了C1、C2、C3,但不知道密送給了D1、D2、D3。 4)D1知道這封是A發(fā)送給B1、B2、B3的郵件,并且抄送給了C1、C2、C3,而且密送給了自己,但不知道密送給了D2、D3。 5)郵箱地址 mailto: <a href="mailto:qiujie@staff.weibo.com">發(fā)送</a> 6)抄送地址 cc: <a href="mailto:qiujie@staff.weibo.com?cc=zz@sina.com">發(fā)送</a> 7)密件抄送地址 用分號分隔: <a href="mailto:qiujie@staff.weibo.com?bcc=zz@sina.com">發(fā)送</a> 8)多個(gè)收件人、抄送人、密送人 ; bcc: <a href="mailto:qiujie@staff.weibo.com;zz@sina.com">發(fā)送</a> 9)郵件主題 subject: <a href="mailto:qiujie@staff.weibo.com?subject=郵件主題">發(fā)送</a> 10)郵件內(nèi)容 body: <a href="mailto:qiujie@staff.weibo.com?body=郵件正文">發(fā)送</a> 例子: <a href="mailto:yy@imooc.com;10001@qq.com?cc=10002@qq.com&bbc=madanteng@qqhelp.com&subject=觀了不起的蓋茨比有感。&body=你好,對此評論有些想法。">對此影評有何感想,發(fā)送郵件給我</a>
18.<img>標(biāo)簽
在網(wǎng)頁的制作中為使網(wǎng)頁炫麗美觀,肯定是缺少不了圖片,可以使用
標(biāo)簽來插入圖片。
[站外圖片上傳中……(2)] <img src = "myimage.gif" alt = "My Image" title = "My Image" />
src:標(biāo)識圖像的位置; alt:指定圖像的描述性文本,當(dāng)圖像不可見時(shí)(下載不成功時(shí)),可看到該屬性指定的文本; title:提供在圖像可見時(shí)對圖像的描述(鼠標(biāo)滑過圖片時(shí)顯示的文本); 圖像可以是GIF,PNG,JPEG格式的圖像文件。 路徑有兩種填寫方式:絕對路徑、相對路徑 相對路徑:相對于我們當(dāng)前 html 文件的位置來寫路徑即可! ./表示當(dāng)前目錄,../表示上一級目錄
19.<form>標(biāo)簽
注意:
1、所有表單控件(文本框、文本域、按鈕、單選框、復(fù)選框等)都必須放在<form></form>標(biāo)簽之間(否則用戶輸入的信息可提交不到服務(wù)器上哦!)。
2、method:post/get的區(qū)別這一部分內(nèi)容屬于后端程序員考慮的問題。
語法:
<form method="傳送方式" action="服務(wù)器文件">
<form> :<form>標(biāo)簽是成對出現(xiàn)的,以<form>開始,以</form>結(jié)束。 action :瀏覽者輸入的數(shù)據(jù)被傳送到的地方,比如一個(gè)PHP頁面(save.php)。 method : 數(shù)據(jù)傳送的方式(get/post)。 <form method="post" action="save.php"> <label for="username">用戶名:</label> <input type="text" name="username" /> <label for="pass">密碼:</label> <input type="password" name="pass" /> </form>
20.<input>標(biāo)簽
語法:
<form> <input type="text/password" name="名稱" value="文本" /> </form>
舉例: <form> 姓名: <input type="text" name="myName"/><br/> 密碼: <input type="password" name="pass"/> </form> value="xxx" 替換為 placeholder="xxx" 的體驗(yàn)更好一些,placeholder屬性為 HTML 5 的新屬性。placeholder 屬性提供可描述輸入字段預(yù)期值的提示信息(hint)。該提示會在輸入字段為空時(shí)顯示,并會在字段獲得焦點(diǎn)時(shí)消失。
語法:
<input placeholder="text"/> 注釋:placeholder 屬性適用于以下的 <input> 類型:text, search, url, telephone, email 以及 password。
注意:同一組的單選按鈕,name 取值一定要一致,比如上同一個(gè)名稱“gender”,這樣同一組的單選按鈕才可以起到單選的作用!
type:
name:為文本框命名,以備后臺程序ASP 、PHP使用。
value:為文本輸入框設(shè)置默認(rèn)值。(一般起到提示作用)
21.<textarea>標(biāo)簽
語法:
<textarea rows="行數(shù)" cols="列數(shù)">文本</textarea>
舉例:
<form method="post" action="save.php"> <label>聯(lián)系我們</label> <textarea cols="50" rows="10" >在這里輸入內(nèi)容...</textarea> </form>
22.<select>標(biāo)簽
語法:
<select> <option value="提交的值">顯示的值</option> ... </select> 設(shè)置selected="selected"屬性,則該選項(xiàng)就被默認(rèn)選中。 selected="selected"
<select multiple="multiple"> 然后選擇時(shí)候按ctrl點(diǎn)鼠標(biāo)選中
<option disabled="disabled">
把相關(guān)的選項(xiàng)組合在一起
屬性 label:給選項(xiàng)組命名
屬性 disabled:禁用該選項(xiàng)組
23.<label>標(biāo)簽
<label for="控件id名稱">
注意:標(biāo)簽的 for 屬性中的值應(yīng)當(dāng)與相關(guān)控件的 id 屬性值一定要相同。
<form> <label for="male">男</label> <input type="radio" name="gender" id="male" /> <br /> <label for="female">女</label> <input type="radio" name="gender" id="female" /> <label for="email">輸入你的郵箱地址</label> <input type="email" id="email" placeholder="Enter email"> </form>
24.<map>標(biāo)簽
使用 map 標(biāo)簽可以給圖片某塊區(qū)域加超鏈接
使用方法:
1)為 map 標(biāo)簽首先加上 id 屬性用來為 map 標(biāo)簽定義一個(gè)唯一的名稱
2)為了保證兼容性再加上 name 屬性,屬性值與 id 的值相同
3)為 map 標(biāo)簽所作用的圖片加上 usemap 屬性,屬性值為 #id 名稱
4)在 map 標(biāo)簽內(nèi)嵌套 area 標(biāo)簽來實(shí)現(xiàn)給指定區(qū)域加鏈接
<area shape="" coords="" href ="" alt="" /> shape 屬性:定義鏈接區(qū)域的形狀,常用值 rect、circle coords 屬性:確定區(qū)域的精確位置。填寫坐標(biāo)即可,以父元素左上角為原點(diǎn),可借助qq截圖來得到想要的坐標(biāo) href 屬性:填寫鏈接地址即可 alt 屬性:給鏈接加一些說明信息
例子:
<map id="img1" name="img1"> <area shape="rect" coords="184,33,391,258" href="http:www.baidu.com" alt="百度一下" target="_blank" /> <area shape="circle" coords="507,287,20" alt="私房庫我的博客" target="_blank" /> </map>
注意:
25.<iframe>標(biāo)簽
創(chuàng)建包含另外一個(gè)文檔的內(nèi)聯(lián)框架(即行內(nèi)框架)
屬性:
值:1、0
作用:規(guī)定是否顯示框架周圍的邊框。
作用:定義 iframe 的寬度
作用:定義高度
作用:給 iframe 命名
值:yes、no、auto
作用:規(guī)定是否在 iframe 中顯示滾動條
作用:規(guī)定在 iframe 中顯示的文檔的 URL
可以是本地的 html 文件,也可以是遠(yuǎn)程的 html 文件
標(biāo)簽寫法
1)不允許寫結(jié)束標(biāo)簽的元素
area,base,br,col,command,embed,hr,img,input,keygen,link,meta,paran,source,track,wbr。這些標(biāo)簽都是單標(biāo)簽例如:br 標(biāo)簽,不可以這樣<br></br>,只能<br />這樣來關(guān)閉標(biāo)簽。
2)可以省略結(jié)束標(biāo)記的元素有:
li,dt,dd,p,rt,rp,optgroup,option,colgroup,thead,tbody,tfoot,tr,td,th。
3)可以省略全部標(biāo)記的元素有
html,head,body,colgroup,tbody
例如:disabled,readonly,checked 等只寫屬性而不寫屬性值得時(shí)候當(dāng)做 ture 不寫屬性表示 false
要求:屬性值不包含 空字符串,<,>,=, ‘
標(biāo)簽嵌套探討
1.html 規(guī)定我們必須要嵌套著寫的標(biāo)簽
例如:頁面頭部是嵌套在 head 標(biāo)簽里面的,主體內(nèi)容都是嵌套在 body 標(biāo)簽里面的表單的內(nèi)容是嵌套在 form 標(biāo)簽里面的,dt、dd 是嵌套在 dl 標(biāo)簽里面的,li 是嵌套到ul 標(biāo)簽里面的,等等...
2.塊級元素可以嵌套內(nèi)聯(lián)元素,但是內(nèi)聯(lián)元素不能包含塊元素
<div> <span>我是一個(gè) span 元素</span> </div> —— 對 <span> <div>div 元素</div> </span> —— 錯
3.內(nèi)聯(lián)元素可以嵌套內(nèi)聯(lián)元素
<a href="#"> <span></span> </a> —— 對
4.塊級元素與塊級元素嵌套注意點(diǎn)
<p><ol><li></li></ol></p> —— 錯 <p><div></div></p> —— 錯
喜歡前端的小伙伴們可以在評論區(qū)留言,尋找和小馮童鞋一樣熱愛前端的友人,讓我們一起玩轉(zhuǎn)前端的世界!
*請認(rèn)真填寫需求信息,我們會在24小時(shí)內(nèi)與您取得聯(lián)系。