全棧攻城獅-每日更新原創IT編程技術及日常實用視頻。
主要內容:正式引入HTML網頁開發,學習并了解HTML的相關知識。變身Web開發達人,做全棧程序員。這是HTML技術的第二課,主要講解一下HTML的幾大重要標簽,做出來比較不錯的顯示效果。
上節中主要講解了HTML的開發工具以及書寫了第一個Web網頁。上節請戳→HTML電腦編程02 書寫第一個Web網頁 程序員學習復習
第一個HTML網頁
其中包括<html>....</html>標簽、<head>...</head>(頭部標簽)、<title>...</title>(標題標簽)、<body>...</body>(身體標簽)。每個標簽都有自己的含義。其實還有很多非常重要的標簽的。下面我們一起來看一看。
PS小技巧:分享個寫標簽的小技巧,在書寫(<)時,順帶著把(>)也也寫好了。成對成對的寫,對于標簽也適用,如在寫html標簽時。書寫順序如下:
1.<
2.>
3.html
4.<
5.>
6./html
對于標簽的學習,最好進行分類,這樣就可以快速的進行學習了。首先說一下文本標簽。
文本標簽是用來顯示文字的。只要是內容的東西,咋就意味著需要卸載body內:
body標簽
如同上節課一樣,直接在body標簽中寫文字也是可行的。但是你無法對字體顏色格式等信息進行控制。所以出現了不同的文本標簽,用來顯示設置不同的字形。
如同名字一樣,標題標簽就是標題。使用這個標簽可以讓你的內容和標題一樣顯示。標題標簽包括<h1>-<h6>六種。
6種標題標簽
其顯示效果如下:
6種標題標簽的展示效果
可以看到H1-H6標簽的大小不一致。H后面的數字越大反而越小。
H標簽中還包含一個屬性align。那到底什么是屬性呢?
屬性以鍵值對的形式存在。屬性是相對于標簽而言的,也就是需要把屬性寫在標簽內。既然是屬性,也就意味著可以改變標簽的某些功能。例如H標簽中含有align屬性。這就是用來控制對齊方式的。
align屬性
align屬性就是用來控制對齊方式的。通過上圖,也可以看到屬性的書寫方式。一起來看一下效果吧:
align屬性的不同效果
align屬性常用的包括left(靠左)、center(居中)、right(靠右)三個基本值。
下面介紹幾個物理字體的標簽。物理字體指的是:加粗、斜體、下劃線、上下標等
粗體:
粗體
粗體顯示的效果
還有其他的標簽,和b標簽使用方式一致:
各種物理字體
大家直接試用一下就可以看到效果了。
本教程由做全棧攻城獅,原創首發,如有轉載,請注明出處。
如果你有什么比較不錯的編程技巧,或者你想要什么程序員編程資源,點擊下方了解更多。
視覺格式化模型,大體上將頁面中盒子的排列分為三種方式:
1. 常規流
2. 浮動
3. 定位
1. 文字環繞
字體環繞
2. 橫向排列
修改float屬性值為:
- left:左浮動,元素靠上靠左
- right:右浮動,元素靠上靠右
默認值為none
1. 當一個元素浮動后,元素必定為塊盒(更改display屬性為block)
2. 浮動元素的包含塊,和常規流一樣,為父元素的內容盒
1. 寬度為auto時,適應內容寬度
2. 高度為auto時,與常規流一致,適應內容的高度
3. margin為auto,為0.
4. 邊框、內邊距、百分比設置與常規流一樣
1. 左浮動的盒子靠上靠左排列
2. 右浮動的盒子考上靠右排列
3. 浮動盒子在包含塊中排列時,會避開常規流塊盒
4. 常規流塊盒在排列時,無視浮動盒子
5. 行盒在排列時,會避開浮動盒子
6. 外邊距合并不會發生
> 如果文字沒有在行盒中,瀏覽器會自動生成一個行盒包裹文字,該行盒叫做匿名行盒。
高度坍塌的根源:常規流盒子的自動高度,在計算時,不會考慮浮動盒子
清除浮動,涉及css屬性:clear
- 默認值:none
- left:清除左浮動,該元素必須出現在前面所有左浮動盒子的下方
- right:清除右浮動,該元素必須出現在前面所有右浮動盒子的下方
- both:清除左右浮動,該元素必須出現在前面所有浮動盒子的下方
德經第二十二章中有一句是說“少則得,多則惑”,這句話的意思是:少取則真得,貪多則反而導致自身的混亂。結合我親身經歷,更容易理解這句話的意思。
有一段時間,我們天都學習10個小時,這種情況一直持續了大半個月。可是效果卻幾乎等于沒有,這段時間內每天都會有大量的信息涌入你的腦袋,在學的那一刻,你感覺你已經完全會了。但是過個一兩天,你卻完全不記得你到底學過些什么,像失憶了似的。
艾賓浩斯記憶曲線也告訴我們,大腦的記憶是一個緩慢的過程,想要對某一知識記憶深刻,就需要不斷地重復練習。直到隨時隨地拿來就用的地步,你就再也不會忘記了。
為什么說少則得,多則惑呢?每天只學一點,練習好幾遍,把這個知識點刻到腦子里面去,這樣日積月累你會發現你已經學會了很多。每天學習很多知識點,很少時間去練習,過段時間你會發現你什么都沒有記住,到用的時候根本想不起來,還得返回頭再去學習一遍。徒增學習成本,也就是多則惑的道理。
好了言歸正傳,今天我們來學習html中的表格和表單,這兩個可不是一個東西哦。
表格:excel表格知道吧,橫行豎起列的那種表格。看圖:
上面是一個9行2列的表格,在html里面也有這種表格,我們來使用html的table表格標簽來實現一個5行3列的表格。
上圖中table標簽表示這是一個表格,tr表示一行,圖中我寫了五行,都用紅圈標注了出來,每個tr里面又包含著td,td表示列,第1行里面有3列,第2、3、4、5行每行里面都有3列。
在瀏覽器中的效果:
和我們想象中的樣子好像有點不一樣,沒有格子,這是因為我們沒有設置的緣故,table標簽允許你通過border屬性來設置邊框(也就是格子),那我們來給它設置一個邊框吧。
通過給table標簽添加border="1",就可以讓表格有邊框了,來看看瀏覽器中的效果:
還是有點別扭,我腦海里面的表格應該是和艾賓浩斯記憶曲線的那張表格一樣才對啊,現在的這個表格有點鏤空的感覺,第1行的第1列和第1行的第2列,也就是“關羽”、“男”之前有距離,如何把這個距離去掉呢?我們可以通過table標簽的cellspacing屬性把距離去掉,試一下:
加了cellspacing="0" 屬性后,瀏覽器中的效果如下:
當然了, table標簽的cellspacing屬性的不光可以等于0,還可以等于其他值,比如我們就是希望有距離,那么我們設置成20試一下:
瀏覽器中的效果:
cellspacing屬性的值應該取多少,按照你的需求來設置就好了。
現在還有一個問題,我覺得每個單元格的太小了,也就是“關羽”這個格子的邊框和“關羽”這兩個字貼得太緊了,一點都不好看,我們可以讓他稍微有點距離,那樣看起來應該比較美觀一點。這個需求可以通過table標簽的cellpadding屬性來設置,其實也就是設置內邊距,關于內邊距的概念我們在《踏上編程之路的必經之路之html篇三》中講解過,如果忘記的同學可以返回去看一下。
我們將cellpadding設置為10,在瀏覽器中的效果如下:
現在整個表格感覺是豎起來的,能不能讓他感覺是橫著呢?table標簽允許你調整它的寬度,只要寬度夠了,感覺起來自然就是橫的了。我們通過table標簽的width屬性來調整表格的寬度:
調整表格的寬度為600,瀏覽器中的效果如下:
表格中的文字現在是左對齊,也就是靠近單元格的左邊,我們可以讓它居中,或者靠右對齊(右對齊),文字的對齊方式可以通過tr標簽的align屬性來控制:
注意文字對齊方式,是給tr標簽(也就是table的行標簽)設置了align屬性,不是給table,不要寫錯地方了。align="center"就是讓文字居中,align="right"就是讓文字右對齊,如果不寫,默認是左對齊。
設置了文字對齊方式后,瀏覽器中的效果如下:
最我們整體調整一下,我需要有邊框(border="1",設置為0就是沒有邊框),單元格之間不要距離(cellspacing="0",設置成其它值就是有距離),內邊距需要5(cellpadding="5"),表格寬度需要400(width="400"),文字統一都是居中對齊(table標簽的tr標簽上面設置align="center"),整體設置后的代碼如下:
瀏覽器中的效果如下:
其實table標簽也有一個align屬性,它可以讓整表格在瀏覽器中的居中、靠左或者靠右對齊,有興趣的同學可以自己嘗試一下。
最后提醒一句,代碼中的各種標簽和標簽的屬性還有單雙引號,都必須是英文的,如果你寫成中文的,是不正確的。
舉個例子:
良好的行動力,是成功的一半,動手練起來。
*請認真填寫需求信息,我們會在24小時內與您取得聯系。