成 | 語言 | 描述 |
結(jié)構(gòu) | HTML | 網(wǎng)頁元素和內(nèi)容 |
表現(xiàn) | CSS | 網(wǎng)頁元素頁面樣式 |
行為 | JavaScript | 網(wǎng)頁交互 |
HTML,超文本標記語言(Hyper Text Markup Language),是一門描述性語言。標記,標簽,元素,叫法不同,意思相同。HTML超文本標記語言主要通過標簽的方式,對網(wǎng)頁頁面的文本、圖片、音頻、視頻等內(nèi)容進行描述。學(xué)習(xí)HTML,就是學(xué)習(xí)各種標簽,來搭建網(wǎng)頁的結(jié)構(gòu)。
結(jié)構(gòu):!DOCTYPE
說明:作用是告訴瀏覽器用哪個文檔規(guī)范來解析文檔
標簽:html
說明:用于搭建HTML網(wǎng)頁文檔結(jié)構(gòu)和網(wǎng)頁布局
?標簽:head
說明:用于定義HTML網(wǎng)頁文檔的頭部,它是所有頭部元素的容器?
?標簽:body
說明:用來定義HTML網(wǎng)頁文檔的主體區(qū)域?
?標簽:meta
說明:用來描述HTML網(wǎng)頁文檔的屬性?
?標簽:title
說明:用來放到HTML網(wǎng)頁文檔的頭部,是搜索引擎首要抓取的目標代碼?
標簽,也叫作標記,是由一對尖括號<>,里面包含單詞組成
<html></html>
<br>
嵌套關(guān)系
<html>
<head>
</head>
</html>
并列關(guān)系
<head>
</head>
<body>
</body>
注釋用來幫助程序員記錄程序設(shè)計方法,輔助程序閱讀
雙標簽,定義網(wǎng)頁的標題
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>百度一下,你就知道了</title>
</head>
<body>
</body>
</html>
是單標簽,用來描述HTML網(wǎng)頁文檔的屬性
屬性值 | 說明 |
keywords | 網(wǎng)頁關(guān)鍵字,多個逗號隔開 |
description | 網(wǎng)頁描述 |
author | 作者 |
copyright | 版權(quán)信息 |
<!DOCTYPE html>
<html lang="en">
<head>
<!-- 網(wǎng)頁關(guān)鍵字 -->
<meta name="keywords" content="html,css,javascript">
<!-- 網(wǎng)頁描述 -->
<meta name="description" content="基礎(chǔ)前端知識">
<!-- 網(wǎng)頁作者 -->
<meta name="author" content="buddha">
<!-- 網(wǎng)頁版權(quán)信息 -->
<meta name="copyright" content="版權(quán)所有,翻版必究">
</head>
<body>
</body>
</html>
標簽屬性:
1、標簽的屬性寫在開始標簽內(nèi)部
2、標簽名與屬性之間要有空格隔開
3、一個標簽可以同時存在多個屬性
4、屬性之間以空格隔開
5、屬性沒有先后順序之分
屬性值 | 說明 |
Content-Type | 定義網(wǎng)頁所使用編碼 |
refresh | 定義網(wǎng)頁自動刷新跳轉(zhuǎn) |
<!DOCTYPE html>
<html lang="en">
<head>
<!-- 設(shè)置網(wǎng)頁編碼完整寫法 -->
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<!-- 設(shè)置網(wǎng)頁編碼簡寫寫法 -->
<meta charset="UTF-8">
<!-- 網(wǎng)頁打開3秒后跳去百度 -->
<meta http-equiv="refresh" content="3;url=https://www.baidu.com">
</head>
<body>
</body>
</html>
是雙標簽,用來定義標簽的css樣式
<!DOCTYPE html>
<html lang="en">
<head>
<style type="text/css">
/* css內(nèi)聯(lián)樣式寫這里 */
</style>
</head>
<body>
</body>
</html>
是單標簽,是用來引入外部css樣式文件
<link rel="stylesheet" href="css/index.css" type="text/css">
是雙標簽,是用來寫JavaScript代碼的地方
<!DOCTYPE html>
<html lang="en">
<head>
<script>
/* 這里寫JavaScript代碼 */
</script>
</head>
<body>
</body>
</html>
是單標簽,是用來設(shè)置整個網(wǎng)頁的基礎(chǔ)路徑。
<!DOCTYPE html>
<html lang="en">
<head>
<base href="https://pic.rmb.bdstatic.com">
</head>
<body>
<img src="bjh/news/e7fb4c2be6a2e439ff7e3197fa205d8f1336.gif">
</body>
</html>
開發(fā)中很少用到,有人使用知道就行
上面所述標簽是放在head標簽里的,接下來接觸的標簽都是放在body標簽內(nèi)的
是雙標簽,h是header的縮寫
<h1>h1標簽:一級標題</h1>
<h2>h2標簽:二級標題</h2>
<h3>h3標簽:三級標題</h3>
<h4>h4標簽:四級標題</h4>
<h5>h5標簽:五級標題</h5>
<h6>h6標簽:六級標題</h6>
特點:
1、字體加粗
2、獨占一行
3、從h1到h6,字體逐漸減小
4、使用<h>標簽的主要意義是告訴搜索引擎這是一段文字的標題
5、<h1>在一個頁面最多只能有一個,不要用多個
是雙標簽,p是paragraph的縮寫
<p>這是一段文字</p>
<p>這是一段文字</p>
<p>這是一段文字</p>
特點:
1、獨占一行
2、段落與段落之間,存在間隙
是單標簽,br是break的縮寫
<p>這是一段<br>文字</p>
特點:
1、強制換行
2、單標簽
是單標簽,hr是horizon地平線的縮寫
<p>這是一段文字</p>
<hr>
<p>這是一段文字</p>
特點:
1、在頁面中顯示一條水平線
2、單標簽
標簽1 | 標簽2 | 說明 |
b | strong | 加粗 |
u | ins | 下劃線 |
i | em | 傾斜 |
s | del | 刪除線 |
<b>這是一段文字</b>
<strong>這是一段文字</strong>
<br>
<u>這是一段文字</u>
<ins>這是一段文字</ins>
<br>
<i>這是一段文字</i>
<em>這是一段文字</em>
<br>
<s>這是一段文字</s>
<del>這是一段文字</del>
特點:
1、不會獨占一行
2、推薦使用標簽2所在列標簽
sup是superscripted這個單詞的縮寫
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
a<sup>2</sup>
</body>
</html>
sub是subscripted這個單詞的縮寫
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
H<sub>2</sub>O
</body>
</html>
在網(wǎng)頁中展示特殊符號效果時,需要使用字符實體替代
顯示結(jié)果 | 描述 | 實體名稱 |
空格 |
| |
< | 小于號 | < |
> | 大于號 | > |
& | 與 | & |
" | 雙引號 | " |
x | 乘號 | × |
÷ | 除號 | ÷ |
- | 長破折號 | — |
| | 豎線 | | |
‘ | 左單引號 | ‘ |
‘ | 右單引號 | ’ |
? | 版權(quán)符 | © |
? | 注冊商標 | ® |
? | 商標 | ™ |
° | 度 | ° |
<img src="./001.jpg" alt="">
img標簽常見屬性:
屬性名 | 說明 |
src | 圖片路徑(絕對路徑、相對路徑) |
alt | 圖片加載失敗時,顯示的文字 |
title | 鼠標懸停時,顯示的文字 |
width | 圖片寬度 |
height | 圖片高度 |
只設(shè)置寬或高,會自動等比縮放,寬高只需要數(shù)字,不需要'px'
<img src="./001.jpg" alt="圖片加載失敗" title="這是程序兔" width="200" height="200">
絕對路徑:指目錄下的絕對位置,比如從根目錄開始的路徑,或完整的網(wǎng)絡(luò)地址
相對路徑:從當(dāng)前文件開始出發(fā)找目標文件的過程
<audio src="music.mp3" controls autoplay loop></audio>
audio標簽常見屬性:
屬性名 | 說明 |
src | 音頻路徑 |
controls | 顯示播放控件 |
autoplay | 自動播放 |
loop | 循環(huán)播放 |
支持mp3、wav、ogg三種音頻格式
<video src="video.mp4" controls loop autoplay></video>
屬性名 | 說明 |
src | 視頻路徑 |
controls | 顯示播放控件 |
autoplay | 自動播放 |
loop | 循環(huán)播放 |
支持mp4、webm、ogg三種視頻格式
超鏈接,是雙標簽,實現(xiàn)各個獨立頁面之間進行跳轉(zhuǎn),可以跳去站外也可以在站內(nèi)之間跳轉(zhuǎn)
<a href="鏈接地址">文本或圖片</a>
站外跳轉(zhuǎn),采用絕對路徑
<a href="http://www.baidu.com" target="_blank">百度</a>
站內(nèi)跳轉(zhuǎn),采用相對路徑
<!-- a頁面 -->
<a href="b.html">跳去b頁面</a>
<!-- b頁面 -->
<p>b頁面</p>
頁面內(nèi)跳轉(zhuǎn)
<a href="#ms">美食</a>
<a href="#jd">景點</a>
<h3 id="ms">推薦美食</h3>
<!-- 省略n個br標簽 -->
<br>
<h3 id="jd">推薦景點</h3>
屬性名 | 說明 |
href | 跳轉(zhuǎn)鏈接 |
target | 鏈接打開方式 |
target屬性值
屬性值 | 說明 |
_self | 默認,原窗口打開鏈接 |
_blank | 在新窗口打開鏈接 |
_parent | 在父窗口打開鏈接 |
_top | 在頂層窗口打開超鏈接 |
target屬性值一般使用_self(默認)和_blank
<ul type="屬性值">
<li>列表項</li>
<li>列表項</li>
<li>列表項</li>
</ul>
解釋:
1、ul,unordered lists,無序列表,li,list item,列表項
2、ul標簽子標簽只允許是li標簽
3、li標簽可以包含任意內(nèi)容
type屬性值
屬性值 | 說明 |
disc | 默認,實心圓 |
circle | 空心圓 |
square | 實心方型 |
<ul>
<li>你</li>
<li>我</li>
<li>他</li>
</ul>
<ol type="屬性值">
<li>列表項</li>
<li>列表項</li>
<li>列表項</li>
</ol>
解釋:
1、ol,ordered lists,有序列表,li,list item,列表項
2、ol標簽子標簽只允許是li標簽
3、li標簽可以包含任意內(nèi)容
type屬性值
屬性值 | 說明 |
1 | 默認,阿拉伯?dāng)?shù)字,1,2,3...... |
a | 小寫英文字母,a,b,c...... |
A | 大寫英文字母,A,B,C...... |
i | 小寫羅馬數(shù)字,i,ii,iii...... |
I | 大寫羅馬數(shù)字,I,II,III...... |
<ol>
<li>你</li>
<li>我</li>
<li>他</li>
</ol>
<dl>
<dt>名詞</dt>
<dd>描述</dd>
……
</dl>
解釋:
1、dl,definition lists,自定義列表;dt,definition term,自定義列表組;dd,definition description,自定義列表描述
<dl>
<dt>稱呼</dt>
<dd>你</dd>
<dd>我</dd>
<dd>他</dd>
</dl>
<table>
<tr>
<td>單元格1</td>
<td>單元格2</td>
</tr>
<tr>
<td>單元格3</td>
<td>單元格4</td>
</tr>
</table>
解釋:
1、tr,table row,表格行;td,table data cell,表行單元格
<table>
<tr>
<td>1</td>
</tr>
</table>
屬性名 | 屬性值 | 描述 |
border | 數(shù)字 | 邊框?qū)挾?/span> |
width | 數(shù)字 | 表格寬度 |
height | 數(shù)字 | 表格高度 |
<table border="1" width="200" height="50">
<tr>
<td>1</td>
</tr>
</table>
<caption>標題內(nèi)容</caption>,位于表格內(nèi)第一行
<table border="1" width="200" height="50">
<caption>數(shù)字</caption>
<tr>
<td>1</td>
</tr>
</table>
<th></th>,th,table header cell,表頭單元格
<table border="1" width="200" height="50">
<caption>數(shù)字</caption>
<tr>
<th>序號</th>
</tr>
<tr>
<td>1</td>
</tr>
</table>
thead、tbody、tfoot
<table border="1" width="200" height="50">
<caption>數(shù)字</caption>
<thead>
<tr>
<th>序號</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>匯總</td>
</tr>
</tfoot>
</table>
屬性名 | 屬性值 | 說明 |
rowspan | 合并單元格個數(shù) | 合并行,單元格垂直合并 |
colspan | 合并單元格個數(shù) | 合并列,單元格水平合并 |
<td rowspan="跨越的行數(shù)"></td>
<td colspan="跨越的列數(shù)"></td>
<table border="1" width="200" height="50">
<caption>數(shù)字</caption>
<thead>
<tr>
<th>序號</th>
<th>金額</th>
<th>金額</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td rowspan="2">20</td>
<td rowspan="2">20</td>
</tr>
<tr>
<td>2</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>匯總</td>
<td colspan="2">40</td>
</tr>
</tfoot>
</table>
雙標簽,包裹其它表單標簽
<form>
// 表單
</form>
form標簽的常用屬性
屬性 | 說明 |
name | 表單名稱 |
method | 提交方式 |
action | 提交地址 |
target | 打開方式 |
enctype | 編碼方式 |
name屬性
一個頁面中,表單可能不止一個。name屬性,用來區(qū)分不同的表單
<form name="myForm"></form>
method屬性
用來指定表單數(shù)據(jù)使用哪種提交方式給后端
屬性值 | 說明 |
get | get方式 |
post | post方式 |
<form method="get"></form>
action屬性
用來指定表單數(shù)據(jù)提交到哪個地址
<!-- 比如提交到index.php地址 -->
<form action="index.php"></form>
target屬性
該屬性跟a標簽的target屬性一樣,其屬性值也是四個,一般情況只用到_blank屬性值,默認也是這個值
<form target="_blank"></form>
enctype屬性
屬性值 | 說明 |
application/x-www-form-urlencoded | 在發(fā)送前編碼所有字符(默認) |
multipart/form-data | 不對字符編碼,在使用包含文件上傳控件的表單時,必須使用該值 |
text/plain | 空格轉(zhuǎn)換為 "+" 加號,但不對特殊字符編碼 |
<form enctype="multipart/form-data"></form>
input是單標簽
<input type="表單類型">
屬性值 | 說明 |
text | 單行文本框 |
password | 密碼文本框 |
radio | 單選框 |
checkbox | 多選框 |
button | 普通按鈕 |
submit | 提交按鈕 |
reset | 重置按鈕 |
file | 文件上傳 |
單行文本框常用屬性
屬性 | 說明 |
value | 設(shè)置文本框的默認值 |
size | 設(shè)置文本框的長度 |
maxlength | 設(shè)置最多可輸入字符 |
<form>
<input type="text" value="默認值" size="長度" maxlength="可輸入字符">
</form>
<form>
<label>姓名:<input type="text" value="曹操" size="20" maxlength="10"></label>
</form>
密碼文本框常用屬性
密碼文本框常用屬性和單行文本框常用屬性相同
<input type="password" value="默認值" size="長度" maxlength="可輸入字符">
<form>
<label>密碼:<input type="password" value="12345678" size="20" maxlength="10"></label>
</form>
單選框
屬性 | 說明 |
name | 組名,同組單選框,組名要相同,必要屬性 |
value | 單選框選項取值,必要屬性 |
checked | 默認選中項,同組單選框,可以有一個默認選中項 |
<input type="radio" name="組名" value="取值" checked="checked">
<form>
性別:
<input type="radio" name="sex" value="男" checked="checked">男
<input type="radio" name="sex" value="女">女
</form>
復(fù)選框
復(fù)選框和單選框的屬性都相同,區(qū)別復(fù)選框可以多選
<form>
愛好:
<input type="checkbox" name="hobby" value="籃球" checked>籃球
<input type="checkbox" name="hobby" value="足球" checked>足球
<input type="checkbox" name="hobby" value="臺球">臺球
</form>
普通按鈕
<input type="button" value="取值">
<form>
<input type="button" value="普通按鈕">
</form>
<button>普通按鈕</button>
區(qū)別:
1、input是單標簽,button是雙標簽
2、button標簽的信息除了文本,還可以是圖像、其它標簽等
3、button有type屬性,屬性值可以是button、submit、reset等
提交按鈕
<input type="submit" value="取值">
<form>
<input type="submit" value="提交">
</form>
把對應(yīng)表單數(shù)據(jù)提交給后端服務(wù)器
重置按鈕
<input type="reset" value="取值">
<form>
<input type="reset" value="重置">
</form>
點擊重置后,所在form表單里所有內(nèi)容被清空了
文件上傳
<input type="file">
<form>
<input type="file">
</form>
<textarea name="文本名稱" cols="列數(shù)" rows="行數(shù)"></textarea>
<form>
<textarea name="文本名稱" cols="1" rows="2"></textarea>
</form>
<select>
<option>選項內(nèi)容</option>
<option>選項內(nèi)容</option>
</select>
下拉列表標簽是為了節(jié)省頁面空間
select標簽屬性
屬性名 | 說明 |
name | 數(shù)據(jù)提交后端所需字段 |
size | 下拉選項顯示個數(shù) |
multiple | 默認只允許選一個,選多個得加這個屬性 |
disabled | 所有下拉選項禁止選中 |
<form>
<select name="age" size="4" multiple="multiple" disabled="disabled">
<option>18歲以下</option>
<option>18-28歲</option>
<option>28-38歲</option>
<option>38歲以上</option>
</select>
</form>
option標簽屬性
屬性名 | 說明 |
selected | 默認選中 |
value | 被選中,數(shù)據(jù)提交后端的值 |
disabled | 該下拉選項禁止選中 |
<form>
<select name="age" size="5">
<option value="1">18歲以下</option>
<option value="2" disabled="disabled">18-28歲</option>
<option value="3" selected="selected">28-38歲</option>
<option value="4">38歲以上</option>
</select>
</form>
<iframe src="URL" width="數(shù)值" height="數(shù)值"></iframe>
框架標簽常用屬性
屬性名 | 說明 |
src | 嵌入的文檔地址 |
width | 標簽寬度 |
height | 標簽高度 |
<iframe src="https://www.bilibili.com" width="300" height="200"></iframe>
有些文檔禁止被嵌入
HTML標簽分為三種,行內(nèi)標簽、塊級標簽和行內(nèi)塊級標簽。
特點:
1、在頁面內(nèi)只占據(jù)剛好能包裹自己內(nèi)容的空間
2、沒有寬高,內(nèi)容多大就多大,行內(nèi)標簽不能嵌套塊級標簽(a標簽除外)
3、行內(nèi)標簽設(shè)置寬高無效,可以對行高line-height進行設(shè)置
4、可以設(shè)置外邊距margin和內(nèi)邊距padding,但只對左右邊距有效果,上下無效
5、常見行內(nèi)標簽span、a、strong、ins、del、br等
span標簽
雙標簽,行內(nèi)標簽,本身沒有固定樣式
<p>我是<span>中國人</span></p>
特點:
1、獨占一行
2、高度、寬度、外邊距、內(nèi)邊距都可以設(shè)置生效
3、寬度默認是父級寬度的100%
4、是一個容器盒子,可以嵌套多層子級行內(nèi)標簽、塊級標簽,文本類塊級標簽除外
5、常見塊級標簽div、p、h1~h6、ol、ul、li等
div標簽
雙標簽,塊級標簽,本身沒有固定樣式
<!-- 頭部區(qū)域 -->
<div></div>
<!-- 內(nèi)容區(qū)域 -->
<div></div>
特點
1、在頁面內(nèi)只占據(jù)剛好能包裹自己內(nèi)容的空間
2、高度、寬度、外邊距、內(nèi)邊距都可以設(shè)置生效
3、常見塊級標簽img、input、td
通過css樣式display屬性轉(zhuǎn)換,這是css的內(nèi)容
語義化是指根據(jù)內(nèi)容的結(jié)構(gòu)化(內(nèi)容語義化),選擇合適的標簽(代 碼語義化)。通俗來講就是用正確的標簽做正確的事情。
語義化的優(yōu)點如下:
對機器友好,帶有語義的文字表現(xiàn)力豐富,更適合搜索引擎的爬蟲爬 取有效信息,有利于 SEO。除此之外,語義類還支持讀屏軟件,根據(jù) 文章可以自動生成目錄;
對開發(fā)者友好,使用語義類標簽增強了可讀性,結(jié)構(gòu)更加清晰,開發(fā) 者能清晰地看出網(wǎng)頁的結(jié)構(gòu),便于團隊的開發(fā)與維護。
常見的語義化標簽:
DOCTYPE 是 HTML5 中一種標準通用標記語言的文檔類型聲明,它的目 的是告訴瀏覽器(解析器)應(yīng)該以什么樣(html 或 xhtml)的文檔類 行定義來解析文檔,不同的渲染模式會影響瀏覽器對 CSS 代碼甚?JavaScript 腳本的解析。它必須聲明在 HTML?檔的第??。
瀏覽器渲染頁面的兩種模式(可通過 document.compatMode 獲取,比 如,語雀官網(wǎng)的文檔類型是 CSS1Compat):
CSS1Compat:標準模式(Strick mode),默認模式,瀏覽器使用 W3C 的標準解析渲染頁面。在標準模式中,瀏覽器以其支持的最高標準呈 現(xiàn)頁面。
BackCompat:怪異模式(混雜模式)(Quick mode),瀏覽器使用自己的 怪異模式解析渲染頁面。在怪異模式中,頁面以一種比較寬松的向后 兼容的方式顯示。
如果沒有 defer 或 async 屬性,瀏覽器會立即加載并執(zhí)行相應(yīng)的腳本。它不會等待后續(xù)加載的文檔元素,讀取到就會開始加載和執(zhí)行,這樣 就阻塞了后續(xù)文檔的加載。
下圖可以直觀地看出三者之間的區(qū)別:
其中藍色代表 js 腳本網(wǎng)絡(luò)加載時間,紅色代表 js 腳本執(zhí)行時間,綠 色代表 html 解析。
defer 和 async 屬性都是去異步加載外部的 JS 腳本文件,它們都不 會阻塞頁面的解析,其區(qū)別如下:
執(zhí)行順序:多個帶 async 屬性的標簽,不能保證加載的順序;多個帶 defer 屬性的標簽,按照加載順序執(zhí)行;
腳本是否并行執(zhí)行:async 屬性,表示后續(xù)文檔的加載和執(zhí)行與 js 腳本的加載和執(zhí)行是并行進行的,即異步執(zhí)行;defer 屬性,加載后 續(xù)文檔的過程和 js 腳本的加載(此時僅加載不執(zhí)行)是并行進行的(異步),js 腳本需要等到文檔所有元素解析完成之后才執(zhí)行,DOMContentLoaded 事件觸發(fā)執(zhí)行之前。
行內(nèi)元素有:a b span img input select strong;
塊級元素有:div ul ol li dl dt dd h1 h2 h3 h4 h5 h6 p;
空元素,即沒有內(nèi)容的 HTML 元素。空元素是在開始標簽中關(guān)閉的,也就是空元素沒有閉合標簽:
常見的有:<br>、<hr>、<img>、<input>、<link>、<meta>;
鮮見的有:<area>、<base>、<col>、<colgroup>、<command>、<embed>、<keygen>、<param>、<source>、<track>、<wbr>。
在線的情況下,瀏覽器發(fā)現(xiàn) html 頭部有 manifest 屬性,它會請求 manifest 文件,如果是第一次訪問頁面 ,那么瀏覽器就會根據(jù) manifest 文件的內(nèi)容下載相應(yīng)的資源并且進行離線存儲。如果已經(jīng) 訪問過頁面并且資源已經(jīng)進行離線存儲了,那么瀏覽器就會使用離線 的資源加載頁面,然后瀏覽器會對比新的 manifest 文件與舊的 manifest 文件,如果文件沒有發(fā)生改變,就不做任何操作,如果文 件改變了,就會重新下載文件中的資源并進行離線存儲。
離線的情況下,瀏覽器會直接使用離線存儲的資源。
(1)SVG:
SVG 可縮放矢量圖形(Scalable Vector Graphics)是基于可擴展標 記語言 XML 描述的 2D 圖形的語言,SVG 基于 XML 就意味著 SVG DOM 中的每個元素都是可用的,可以為某個元素附加 Javascript 事件處 理器。在 SVG 中,每個被繪制的圖形均被視為對象。如果 SVG 對象 的屬性發(fā)生變化,那么瀏覽器能夠自動重現(xiàn)圖形。
其特點如下:
不依賴分辨率
支持事件處理器
最適合帶有大型渲染區(qū)域的應(yīng)用程序(比如谷歌地圖)
復(fù)雜度高會減慢渲染速度(任何過度使用 DOM 的應(yīng)用都不快)不適合游戲應(yīng)用
(2)Canvas:
Canvas 是畫布,通過 Javascript 來繪制 2D 圖形,是逐像素進行渲 染的。其位置發(fā)生改變,就會重新進行繪制。
其特點如下:
依賴分辨率
不支持事件處理器
弱的文本渲染能力
能夠以 .png 或 .jpg 格式保存結(jié)果圖像
最適合圖像密集型的游戲,其中的許多對象會被頻繁重繪
注:矢量圖,也稱為面向?qū)ο蟮膱D像或繪圖圖像,在數(shù)學(xué)上定義為一 系列由線連接的點。矢量文件中的圖形元素稱為對象。每個對象都是
一個自成一體的實體,它具有顏色、形狀、輪廓、大小和屏幕位置等 屬性。
dragstart:事件主體是被拖放元素,在開始拖放被拖放元素時觸發(fā)。
darg:事件主體是被拖放元素,在正在拖放被拖放元素時觸發(fā)。dragenter:事件主體是目標元素,在被拖放元素進入某元素時觸發(fā)。dragover:事件主體是目標元素,在被拖放在某元素內(nèi)移動時觸發(fā)。dragleave:事件主體是目標元素,在被拖放元素移出目標元素是觸 發(fā)。
drop:事件主體是目標元素,在目標元素完全接受被拖放元素時觸發(fā)。
dragend:事件主體是被拖放元素,在整個拖放操作結(jié)束時觸發(fā)。
譯自: https://medium.freecodecamp.org/for-your-first-html-code-lets-help-batman-write-a-love-letter-64c203b9360b
作者: Kunal Sarkar
譯者: MjSeven
在一個美好的夜晚,你的肚子拒絕消化你在晚餐吃的大塊披薩,所以你不得不在睡夢中沖進洗手間。
在浴室里,當(dāng)你在思考為什么會發(fā)生這種情況時,你聽到一個來自通風(fēng)口的低沉聲音:“嘿,我是蝙蝠俠。”
這時,你會怎么做呢?
在你恐慌并處于關(guān)鍵時刻之前,蝙蝠俠說:“我需要你的幫助。我是一個超級極客,但我不懂 HTML。我需要用 HTML 寫一封情書,你愿意幫助我嗎?”
誰會拒絕蝙蝠俠的請求呢,對吧?所以讓我們用 HTML 來寫一封蝙蝠俠的情書。
HTML 網(wǎng)頁與你電腦上的其它文件一樣。就同一個 .doc 文件以 MS Word 打開,.jpg 文件在圖像查看器中打開一樣,一個 .html 文件在瀏覽器中打開。
那么,讓我們來創(chuàng)建一個 .html 文件。你可以在 Notepad 或其它任何編輯器中完成此任務(wù),但我建議使用 VS Code。 在這里下載并安裝 VS Code 。它是免費的,也是我唯一喜歡的微軟產(chǎn)品。
在系統(tǒng)中創(chuàng)建一個目錄,將其命名為 “HTML Practice”(不帶引號)。在這個目錄中,再創(chuàng)建一個名為 “Batman’s Love Letter”(不帶引號)的目錄,這將是我們的項目根目錄。這意味著我們所有與這個項目相關(guān)的文件都會在這里。
打開 VS Code,按下 ctrl+n 創(chuàng)建一個新文件,按下 ctrl+s 保存文件。切換到 “Batman’s Love Letter” 文件夾并將其命名為 “l(fā)oveletter.html”,然后單擊保存。
現(xiàn)在,如果你在文件資源管理器中雙擊它,它將在你的默認瀏覽器中打開。我建議使用 Firefox 來進行 web 開發(fā),但 Chrome 也可以。
讓我們將這個過程與我們已經(jīng)熟悉的東西聯(lián)系起來。還記得你第一次拿到電腦嗎?我做的第一件事是打開 MS Paint 并繪制一些東西。你在 Paint 中繪制一些東西并將其另存為圖像,然后你可以在圖像查看器中查看該圖像。之后,如果要再次編輯該圖像,你在 Paint 中重新打開它,編輯并保存它。
我們目前的流程非常相似。正如我們使用 Paint 創(chuàng)建和編輯圖像一樣,我們使用 VS Code 來創(chuàng)建和編輯 HTML 文件。就像我們使用圖像查看器查看圖像一樣,我們使用瀏覽器來查看我們的 HTML 頁面。
我們有一個空的 HTML 文件,以下是蝙蝠俠想在他的情書中寫的第一段。
“After all the battles we fought together, after all the difficult times we saw together, and after all the good and bad moments we’ve been through, I think it’s time I let you know how I feel about you.”
復(fù)制這些到 VS Code 中的 loveletter.html。單擊 “View -> Toggle Word Wrap (alt+z)” 自動換行。
保存并在瀏覽器中打開它。如果它已經(jīng)打開,單擊瀏覽器中的刷新按鈕。
瞧!那是你的第一個網(wǎng)頁!
我們的第一段已準備就緒,但這不是在 HTML 中編寫段落的推薦方法。我們有一種特定的方法讓瀏覽器知道一個文本是一個段落。
如果你用 <p> 和 </p> 來包裹文本,那么瀏覽器將識別 <p> 和 </p> 中的文本是一個段落。我們這樣做:
<p>After all the battles we fought together, after all the difficult times we saw together, after all the good and bad moments we've been through, I think it's time I let you know how I feel about you.</p>
通過在 <p> 和 </p>中編寫段落,你創(chuàng)建了一個 HTML 元素。一個網(wǎng)頁就是 HTML 元素的集合。
讓我們首先來認識一些術(shù)語:<p> 是開始標簽,</p> 是結(jié)束標簽,“p” 是標簽名稱。元素開始和結(jié)束標簽之間的文本是元素的內(nèi)容。
在上面,你將看到文本覆蓋屏幕的整個寬度。
我們不希望這樣。沒有人想要閱讀這么長的行。讓我們設(shè)定段落寬度為 550px。
我們可以通過使用元素的 style 屬性來實現(xiàn)。你可以在其 style 屬性中定義元素的樣式(例如,在我們的示例中為寬度)。以下行將在 p 元素上創(chuàng)建一個空樣式屬性:
<p style="">...</p>
你看到那個空的 "" 了嗎?這就是我們定義元素外觀的地方。現(xiàn)在我們要將寬度設(shè)置為 550px。我們這樣做:
<p style="width:550px;">
After all the battles we fought together, after all the difficult times we saw together, after all the good and bad moments we've been through, I think it's time I let you know how I feel about you.
</p>
我們將 width 屬性設(shè)置為 550px,用冒號 : 分隔,以分號 ; 結(jié)束。
另外,注意我們?nèi)绾螌?<p> 和 </p> 放在單獨的行中,文本內(nèi)容用一個制表符縮進。像這樣設(shè)置代碼使其更具可讀性。
接下來,蝙蝠俠希望列出他所欽佩的人的一些優(yōu)點,例如:
You complete my darkness with your light. I love:
- the way you see good in the worst things
- the way you handle emotionally difficult situations
- the way you look at Justice
I have learned a lot from you. You have occupied a special place in my heart over time.
這看起來很簡單。
讓我們繼續(xù),在 </p> 下面復(fù)制所需的文本:
<p style="width:550px;">
After all the battles we faught together, after all the difficult times we saw together, after all the good and bad moments we've been through, I think it's time I let you know how I feel about you.
</p>
<p style="width:550px;">
You complete my darkness with your light. I love:
- the way you see good in the worse
- the way you handle emotionally difficult situations
- the way you look at Justice
I have learned a lot from you. You have occupied a special place in my heart over the time.
</p>
保存并刷新瀏覽器。
哇!這里發(fā)生了什么,我們的列表在哪里?
如果你仔細觀察,你會發(fā)現(xiàn)沒有顯示換行符。在代碼中我們在新的一行中編寫列表項,但這些項在瀏覽器中顯示在一行中。
如果你想在 HTML(新行)中插入換行符,你必須使用 <br>。讓我們來使用 <br>,看看它長什么樣:
<p style="width:550px;">
After all the battles we faught together, after all the difficult times we saw together, after all the good and bad moments we've been through, I think it's time I let you know how I feel about you.
</p>
<p style="width:550px;">
You complete my darkness with your light. I love: <br>
- the way you see good in the worse <br>
- the way you handle emotionally difficult situations <br>
- the way you look at Justice <br>
I have learned a lot from you. You have occupied a special place in my heart over the time.
</p>
保存并刷新:
好的,現(xiàn)在它看起來就像我們想要的那樣!
另外,注意我們沒有寫一個 </br>。有些標簽不需要結(jié)束標簽(它們被稱為自閉合標簽)。
還有一件事:我們沒有在兩個段落之間使用 <br>,但第二個段落仍然是從一個新行開始,這是因為 <p> 元素會自動插入換行符。
我們使用純文本編寫列表,但是有兩個標簽可以供我們使用來達到相同的目的:<ul> and <li>。
讓我們解釋一下名字的意思:ul 代表 無序列表(Unordered List),li 代表 列表項目(List Item)。讓我們使用它們來展示我們的列表:
<p style="width:550px;">
After all the battles we faught together, after all the difficult times we saw together, after all the good and bad moments we've been through, I think it's time I let you know how I feel about you.
</p>
<p style="width:550px;">
You complete my darkness with your light. I love:
<ul>
<li>the way you see good in the worse</li>
<li>the way you handle emotionally difficult situations</li>
<li>the way you look at Justice</li>
</ul>
I have learned a lot from you. You have occupied a special place in my heart over the time.
</p>
在復(fù)制代碼之前,注意差異部分:
讓我們保存文件并刷新瀏覽器以查看結(jié)果:
你會立即注意到在每個列表項之前顯示了重點標志。我們現(xiàn)在不需要在每個列表項之前寫 “-”。
經(jīng)過仔細檢查,你會注意到最后一行超出 550px 寬度。這是為什么?因為 HTML 不允許 <ul> 元素出現(xiàn)在 <p> 元素中。讓我們將第一行和最后一行放在單獨的 <p> 元素中:
<p style="width:550px;">
After all the battles we faught together, after all the difficult times we saw together, after all the good and bad moments we've been through, I think it's time I let you know how I feel about you.
</p>
<p style="width:550px;">
You complete my darkness with your light. I love:
</p>
<ul style="width:550px;">
<li>the way you see good in the worse</li>
<li>the way you handle emotionally difficult situations</li>
<li>the way you look at Justice</li>
</ul>
<p style="width:550px;">
I have learned a lot from you. You have occupied a special place in my heart over the time.
</p>
保存并刷新。
注意,這次我們還定義了 <ul> 元素的寬度。那是因為我們現(xiàn)在已經(jīng)將 <ul> 元素放在了 <p> 元素之外。
定義情書中所有元素的寬度會變得很麻煩。我們有一個特定的元素用于此目的:<div> 元素。一個 <div> 元素就是一個通用容器,用于對內(nèi)容進行分組,以便輕松設(shè)置樣式。
讓我們用 <div> 元素包裝整個情書,并為其賦予寬度:550px 。
<div style="width:550px;">
<p>
After all the battles we faught together, after all the difficult times we saw together, after all the good and bad moments we've been through, I think it's time I let you know how I feel about you.
</p>
<p>
You complete my darkness with your light. I love:
</p>
<ul>
<li>the way you see good in the worse</li>
<li>the way you handle emotionally difficult situations</li>
<li>the way you look at Justice</li>
</ul>
<p>
I have learned a lot from you. You have occupied a special place in my heart over the time.
</p>
</div>
棒極了,我們的代碼現(xiàn)在看起來簡潔多了。
到目前為止,蝙蝠俠對結(jié)果很高興,他希望在情書上標題。他想寫一個標題: “Bat Letter”。當(dāng)然,你已經(jīng)看到這個名字了,不是嗎?:D
你可以使用 <h1>、<h2>、<h3>、<h4>、<h5> 和 <h6> 標簽來添加標題,<h1> 是最大的標題和最主要的標題,<h6> 是最小的標題。
讓我們在第二段之前使用 <h1> 做主標題和一個副標題:
<div style="width:550px;">
<h1>Bat Letter</h1>
<p>
After all the battles we faught together, after all the difficult times we saw together, after all the good and bad moments we've been through, I think it's time I let you know how I feel about you.
</p>
<h2>You are the light of my life</h2>
<p>
You complete my darkness with your light. I love:
</p>
<ul>
<li>the way you see good in the worse</li>
<li>the way you handle emotionally difficult situations</li>
<li>the way you look at Justice</li>
</ul>
<p>
I have learned a lot from you. You have occupied a special place in my heart over the time.
</p>
</div>
保存,刷新。
我們的情書尚未完成,但在繼續(xù)之前,缺少一件大事:蝙蝠俠標志。你見過是蝙蝠俠的東西但沒有蝙蝠俠的標志嗎?
并沒有。
所以,讓我們在情書中添加一個蝙蝠俠標志。
在 HTML 中包含圖像就像在一個 Word 文件中包含圖像一樣。在 MS Word 中,你到 “菜單 -> 插入 -> 圖像 -> 然后導(dǎo)航到圖像位置為止 -> 選擇圖像 -> 單擊插入”。
在 HTML 中,我們使用 <img> 標簽讓瀏覽器知道我們需要加載的圖像,而不是單擊菜單。我們在 src 屬性中寫入文件的位置和名稱。如果圖像在項目根目錄中,我們可以簡單地在 src 屬性中寫入圖像文件的名稱。
在我們深入編碼之前,從 這里 下載蝙蝠俠標志。你可能希望裁剪圖像中的額外空白區(qū)域。復(fù)制項目根目錄中的圖像并將其重命名為 “bat-logo.jpeg”。
<div style="width:550px;">
<h1>Bat Letter</h1>
<img src="bat-logo.jpeg">
<p>
After all the battles we faught together, after all the difficult times we saw together, after all the good and bad moments we've been through, I think it's time I let you know how I feel about you.
</p>
<h2>You are the light of my life</h2>
<p>
You complete my darkness with your light. I love:
</p>
<ul>
<li>the way you see good in the worse</li>
<li>the way you handle emotionally difficult situations</li>
<li>the way you look at Justice</li>
</ul>
<p>
I have learned a lot from you. You have occupied a special place in my heart over the time.
</p>
</div>
我們在第 3 行包含了 <img> 標簽。這個標簽也是一個自閉合的標簽,所以我們不需要寫 </img>。在 src 屬性中,我們給出了圖像文件的名稱。這個名稱應(yīng)與圖像名稱完全相同,包括擴展名(.jpeg)及其大小寫。
保存并刷新,查看結(jié)果。
該死的!剛剛發(fā)生了什么?
當(dāng)使用 <img> 標簽包含圖像時,默認情況下,圖像將以其原始分辨率顯示。在我們的例子中,圖像比 550px 寬得多。讓我們使用 style 屬性定義它的寬度:
<div style="width:550px;">
<h1>Bat Letter</h1>
<img src="bat-logo.jpeg" style="width:100%">
<p>
After all the battles we faught together, after all the difficult times we saw together, after all the good and bad moments we've been through, I think it's time I let you know how I feel about you.
</p>
<h2>You are the light of my life</h2>
<p>
You complete my darkness with your light. I love:
</p>
<ul>
<li>the way you see good in the worse</li>
<li>the way you handle emotionally difficult situations</li>
<li>the way you look at Justice</li>
</ul>
<p>
I have learned a lot from you. You have occupied a special place in my heart over the time.
</p>
</div>
你會注意到,這次我們定義寬度使用了 “%” 而不是 “px”。當(dāng)我們在 “%” 中定義寬度時,它將占據(jù)父元素寬度的百分比。因此,100% 的 550px 將為我們提供 550px。
保存并刷新,查看結(jié)果。
太棒了!這讓蝙蝠俠的臉露出了羞澀的微笑 :)。
現(xiàn)在蝙蝠俠想在最后幾段中承認他的愛。他有以下文本供你用 HTML 編寫:
“I have a confession to make
It feels like my chest does have a heart. You make my heart beat. Your smile brings a smile to my face, your pain brings pain to my heart.
I don’t show my emotions, but I think this man behind the mask is falling for you.”
當(dāng)閱讀到這里時,你會問蝙蝠俠:“等等,這是給誰的?”蝙蝠俠說:
“這是給超人的。”
你說:哦!我還以為是給神奇女俠的呢。
蝙蝠俠說:不,這是給超人的,請在最后寫上 “I love you Superman.”。
好的,我們來寫:
<div style="width:550px;">
<h1>Bat Letter</h1>
<img src="bat-logo.jpeg" style="width:100%">
<p>
After all the battles we faught together, after all the difficult times we saw together, after all the good and bad moments we've been through, I think it's time I let you know how I feel about you.
</p>
<h2>You are the light of my life</h2>
<p>
You complete my darkness with your light. I love:
</p>
<ul>
<li>the way you see good in the worse</li>
<li>the way you handle emotionally difficult situations</li>
<li>the way you look at Justice</li>
</ul>
<p>
I have learned a lot from you. You have occupied a special place in my heart over the time.
</p>
<h2>I have a confession to make</h2>
<p>
It feels like my chest does have a heart. You make my heart beat. Your smile brings smile on my face, your pain brings pain to my heart.
</p>
<p>
I don't show my emotions, but I think this man behind the mask is falling for you.
</p>
<p>I love you Superman.</p>
<p>
Your not-so-secret-lover, <br>
Batman
</p>
</div>
這封信差不多完成了,蝙蝠俠另外想再做兩次改變。蝙蝠俠希望在最后段落的第一句中的 “does” 一詞是斜體,而 “I love you Superman” 這句話是粗體的。
我們使用 <em> 和 <strong> 以斜體和粗體顯示文本。讓我們來更新這些更改:
<div style="width:550px;">
<h1>Bat Letter</h1>
<img src="bat-logo.jpeg" style="width:100%">
<p>
After all the battles we faught together, after all the difficult times we saw together, after all the good and bad moments we've been through, I think it's time I let you know how I feel about you.
</p>
<h2>You are the light of my life</h2>
<p>
You complete my darkness with your light. I love:
</p>
<ul>
<li>the way you see good in the worse</li>
<li>the way you handle emotionally difficult situations</li>
<li>the way you look at Justice</li>
</ul>
<p>
I have learned a lot from you. You have occupied a special place in my heart over the time.
</p>
<h2>I have a confession to make</h2>
<p>
It feels like my chest <em>does</em> have a heart. You make my heart beat. Your smile brings smile on my face, your pain brings pain to my heart.
</p>
<p>
I don't show my emotions, but I think this man behind the mask is falling for you.
</p>
<p><strong>I love you Superman.</strong></p>
<p>
Your not-so-secret-lover, <br>
Batman
</p>
</div>
你可以通過三種方式設(shè)置樣式或定義 HTML 元素的外觀:
讓我們來看看如何定義 <div> 的內(nèi)聯(lián)樣式:
<div style="width:550px;">
我們可以在 <style> 和 </style> 里面寫同樣的樣式:
div{
width:550px;
}
在嵌入式樣式中,我們編寫的樣式是與元素分開的。所以我們需要一種方法來關(guān)聯(lián)元素及其樣式。第一個單詞 “div” 就做了這樣的活。它讓瀏覽器知道花括號 {...} 里面的所有樣式都屬于 “div” 元素。由于這種語法確定要應(yīng)用樣式的元素,因此它稱為一個選擇器。
我們編寫樣式的方式保持不變:屬性(width)和值(550px)用冒號(:)分隔,以分號(;)結(jié)束。
讓我們從 <div> 和 <img> 元素中刪除內(nèi)聯(lián)樣式,將其寫入 <style> 元素:
<style>
div{
width:550px;
}
img{
width:100%;
}
</style>
<div>
<h1>Bat Letter</h1>
<img src="bat-logo.jpeg">
<p>
After all the battles we faught together, after all the difficult times we saw together, after all the good and bad moments we've been through, I think it's time I let you know how I feel about you.
</p>
<h2>You are the light of my life</h2>
<p>
You complete my darkness with your light. I love:
</p>
<ul>
<li>the way you see good in the worse</li>
<li>the way you handle emotionally difficult situations</li>
<li>the way you look at Justice</li>
</ul>
<p>
I have learned a lot from you. You have occupied a special place in my heart over the time.
</p>
<h2>I have a confession to make</h2>
<p>
It feels like my chest <em>does</em> have a heart. You make my heart beat. Your smile brings smile on my face, your pain brings pain to my heart.
</p>
<p>
I don't show my emotions, but I think this man behind the mask is falling for you.
</p>
<p><strong>I love you Superman.</strong></p>
<p>
Your not-so-secret-lover, <br>
Batman
</p>
</div>
保存并刷新,結(jié)果應(yīng)保持不變。
但是有一個大問題,如果我們的 HTML 文件中有多個 <div> 和 <img> 元素該怎么辦?這樣我們在 <style> 元素中為 div 和 img 定義的樣式就會應(yīng)用于頁面上的每個 div 和 img。
如果你在以后的代碼中添加另一個 div,那么該 div 也將變?yōu)?550px 寬。我們并不希望這樣。
我們想要將我們的樣式應(yīng)用于現(xiàn)在正在使用的特定 div 和 img。為此,我們需要為 div 和 img 元素提供唯一的 id。以下是使用 id 屬性為元素賦予 id 的方法:
<div id="letter-container">
以下是如何在嵌入式樣式中將此 id 用作選擇器:
#letter-container{
...
}
注意 # 符號。它表示它是一個 id,{...} 中的樣式應(yīng)該只應(yīng)用于具有該特定 id 的元素。
讓我們來應(yīng)用它:
<style>
#letter-container{
width:550px;
}
#header-bat-logo{
width:100%;
}
</style>
<div id="letter-container">
<h1>Bat Letter</h1>
<img id="header-bat-logo" src="bat-logo.jpeg">
<p>
After all the battles we faught together, after all the difficult times we saw together, after all the good and bad moments we've been through, I think it's time I let you know how I feel about you.
</p>
<h2>You are the light of my life</h2>
<p>
You complete my darkness with your light. I love:
</p>
<ul>
<li>the way you see good in the worse</li>
<li>the way you handle emotionally difficult situations</li>
<li>the way you look at Justice</li>
</ul>
<p>
I have learned a lot from you. You have occupied a special place in my heart over the time.
</p>
<h2>I have a confession to make</h2>
<p>
It feels like my chest <em>does</em> have a heart. You make my heart beat. Your smile brings smile on my face, your pain brings pain to my heart.
</p>
<p>
I don't show my emotions, but I think this man behind the mask is falling for you.
</p>
<p><strong>I love you Superman.</strong></p>
<p>
Your not-so-secret-lover, <br>
Batman
</p>
</div>
HTML 已經(jīng)準備好了嵌入式樣式。
但是,你可以看到,隨著我們包含越來越多的樣式,<style></style> 將變得很大。這可能很快會混亂我們的主 HTML 文件。
因此,讓我們更進一步,通過將 <style> 標簽內(nèi)的內(nèi)容復(fù)制到一個新文件來使用鏈接樣式。
在項目根目錄中創(chuàng)建一個新文件,將其另存為 “style.css”:
#letter-container{
width:550px;
}
#header-bat-logo{
width:100%;
}
我們不需要在 CSS 文件中寫 <style> 和 </style>。
我們需要使用 HTML 文件中的 <link> 標簽來將新創(chuàng)建的 CSS 文件鏈接到 HTML 文件。以下是我們?nèi)绾巫龅竭@一點:
<link rel="stylesheet" type="text/css" href="style.css">
我們使用 <link> 元素在 HTML 文檔中包含外部資源,它主要用于鏈接樣式表。我們使用的三個屬性是:
link 元素的結(jié)尾沒有 </link>。因此,<link> 也是一個自閉合的標簽。
<link rel="gf" type="cute" href="girl.next.door">
如果只是得到一個女朋友,那么很容易:D
可惜沒有那么簡單,讓我們繼續(xù)前進。
這是我們 “l(fā)oveletter.html” 的內(nèi)容:
<link rel="stylesheet" type="text/css" href="style.css">
<div id="letter-container">
<h1>Bat Letter</h1>
<img id="header-bat-logo" src="bat-logo.jpeg">
<p>
After all the battles we faught together, after all the difficult times we saw together, after all the good and bad moments we've been through, I think it's time I let you know how I feel about you.
</p>
<h2>You are the light of my life</h2>
<p>
You complete my darkness with your light. I love:
</p>
<ul>
<li>the way you see good in the worse</li>
<li>the way you handle emotionally difficult situations</li>
<li>the way you look at Justice</li>
</ul>
<p>
I have learned a lot from you. You have occupied a special place in my heart over the time.
</p>
<h2>I have a confession to make</h2>
<p>
It feels like my chest <em>does</em> have a heart. You make my heart beat. Your smile brings smile on my face, your pain brings pain to my heart.
</p>
<p>
I don't show my emotions, but I think this man behind the mask is falling for you.
</p>
<p><strong>I love you Superman.</strong></p>
<p>
Your not-so-secret-lover, <br>
Batman
</p>
</div>
“style.css” 內(nèi)容:
#letter-container{
width:550px;
}
#header-bat-logo{
width:100%;
}
保存文件并刷新,瀏覽器中的輸出應(yīng)保持不變。
我們的情書已經(jīng)準備好給蝙蝠俠,但還有一些正式的片段。
與其他任何編程語言一樣,HTML 自出生以來(1990 年)經(jīng)歷過許多版本,當(dāng)前版本是 HTML5。
那么,瀏覽器如何知道你使用哪個版本的 HTML 來編寫頁面呢?要告訴瀏覽器你正在使用 HTML5,你需要在頁面頂部包含 <!DOCTYPE html>。對于舊版本的 HTML,這行不同,但你不需要了解它們,因為我們不再使用它們了。
此外,在之前的 HTML 版本中,我們曾經(jīng)將整個文檔封裝在 <html></html> 標簽內(nèi)。整個文件分為兩個主要部分:頭部在 <head></head> 里面,主體在 <body></body> 里面。這在 HTML5 中不是必須的,但由于兼容性原因,我們?nèi)匀贿@樣做。讓我們用 <Doctype>, <html>、 <head> 和 <body> 更新我們的代碼:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="letter-container">
<h1>Bat Letter</h1>
<img id="header-bat-logo" src="bat-logo.jpeg">
<p>
After all the battles we faught together, after all the difficult times we saw together, after all the good and bad moments we've been through, I think it's time I let you know how I feel about you.
</p>
<h2>You are the light of my life</h2>
<p>
You complete my darkness with your light. I love:
</p>
<ul>
<li>the way you see good in the worse</li>
<li>the way you handle emotionally difficult situations</li>
<li>the way you look at Justice</li>
</ul>
<p>
I have learned a lot from you. You have occupied a special place in my heart over the time.
</p>
<h2>I have a confession to make</h2>
<p>
It feels like my chest <em>does</em> have a heart. You make my heart beat. Your smile brings smile on my face, your pain brings pain to my heart.
</p>
<p>
I don't show my emotions, but I think this man behind the mask is falling for you.
</p>
<p><strong>I love you Superman.</strong></p>
<p>
Your not-so-secret-lover, <br>
Batman
</p>
</div>
</body>
</html>
主要內(nèi)容在 <body> 里面,元信息在 <head> 里面。所以我們把 <div> 保存在 <body> 里面并加載 <head> 里面的樣式表。
保存并刷新,你的 HTML 頁面應(yīng)顯示與之前相同的內(nèi)容。
我發(fā)誓,這是最后一次改變。
你可能已經(jīng)注意到選項卡的標題正在顯示 HTML 文件的路徑:
我們可以使用 <title> 標簽來定義 HTML 文件的標題。標題標簽也像鏈接標簽一樣在 <head> 內(nèi)部。讓我們我們在標題中加上 “Bat Letter”:
<!DOCTYPE html>
<html>
<head>
<title>Bat Letter</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="letter-container">
<h1>Bat Letter</h1>
<img id="header-bat-logo" src="bat-logo.jpeg">
<p>
After all the battles we faught together, after all the difficult times we saw together, after all the good and bad moments we've been through, I think it's time I let you know how I feel about you.
</p>
<h2>You are the light of my life</h2>
<p>
You complete my darkness with your light. I love:
</p>
<ul>
<li>the way you see good in the worse</li>
<li>the way you handle emotionally difficult situations</li>
<li>the way you look at Justice</li>
</ul>
<p>
I have learned a lot from you. You have occupied a special place in my heart over the time.
</p>
<h2>I have a confession to make</h2>
<p>
It feels like my chest <em>does</em> have a heart. You make my heart beat. Your smile brings smile on my face, your pain brings pain to my heart.
</p>
<p>
I don't show my emotions, but I think this man behind the mask is falling for you.
</p>
<p><strong>I love you Superman.</strong></p>
<p>
Your not-so-secret-lover, <br>
Batman
</p>
</div>
</body>
</html>
保存并刷新,你將看到在選項卡上顯示的是 “Bat Letter” 而不是文件路徑。
蝙蝠俠的情書現(xiàn)在已經(jīng)完成。
恭喜!你用 HTML 制作了蝙蝠俠的情書。
我們學(xué)習(xí)了以下新概念:
我們學(xué)習(xí)了以下 HTML 標簽:
我們學(xué)習(xí)了以下 CSS 屬性:
朋友們,這就是今天的全部了,下一個教程中見。
作者簡介:開發(fā)者 + 作者 | supersarkar.com | twitter.com/supersarkar
via: https://medium.freecodecamp.org/for-your-first-html-code-lets-help-batman-write-a-love-letter-64c203b9360b
作者: Kunal Sarkar 譯者: MjSeven 校對: wxy
本文由 LCTT 原創(chuàng)編譯, Linux中國 榮譽推出
*請認真填寫需求信息,我們會在24小時內(nèi)與您取得聯(lián)系。