Web前端開發(fā)基礎(chǔ)，帶你認(rèn)識(shí)HTML，一起加入這個(gè)歡

Web前端開發(fā)基礎(chǔ)，帶你認(rèn)識(shí)HTML，一起加入這個(gè)歡樂的世界

么是HTML

大家知道平時(shí)上網(wǎng)瀏覽的頁面是怎么做出來的嗎？就是通過今天要給大家介紹的語言HTML來完成的。什么是HTML？超文本標(biāo)記語言（HyperText Markup Language，簡稱為HTML）

HyperText：是指具有交互功能的文本，如：超鏈接，可以從當(dāng)前頁面跳到另外一個(gè)頁面。超文本在現(xiàn)在的互聯(lián)網(wǎng)不僅僅指的的文本文件，還可以是視頻，音樂，圖片等
Markup Language：通過特殊的符號(hào)表示特定的內(nèi)容，如標(biāo)題、段落、圖片、表格、超鏈接等。

HTML是一種編程語言，編程語言都需要寫到文件中，如何創(chuàng)建文件？可以創(chuàng)建一個(gè)文本文件，并命名為：home.html，其中home是文件名，文件擴(kuò)展名為.html告知瀏覽器這個(gè)文件包含HTML，這樣瀏覽器才能正確的解釋HTML并顯示出來。

什么是HTML

HTML的發(fā)展歷程

HTML最初于1989年由GERN的Tim Berners-Lee發(fā)明，至今已經(jīng)有30多年的歷史了，在這30年的過程中，HTML經(jīng)歷了幾次重大的版本更新：

HTML發(fā)展歷程

HTML在剛剛誕生的時(shí)候只有幾個(gè)最基礎(chǔ)的標(biāo)簽，做好的頁面也不好看，但是已經(jīng)支持了超文本。

在1995年自HTML3誕生開始，漫長殘酷的瀏覽器戰(zhàn)爭也隨之而來，Netscape和Microsoft兩個(gè)瀏覽器廠商都在試圖爭霸世界，這場戰(zhàn)爭的受害者是web開發(fā)人員，每個(gè)瀏覽器公司都在不斷的增加自己的專用擴(kuò)展包來試圖保證領(lǐng)先，所以web開發(fā)人員通常必須要寫兩個(gè)單獨(dú)的頁面來適應(yīng)兩大廠商。

1997年基于HTML4的標(biāo)準(zhǔn)誕生，瀏覽器大戰(zhàn)結(jié)束了，來解救我們的是萬維網(wǎng)聯(lián)盟W3C，它的計(jì)劃是創(chuàng)建一個(gè)唯一的web標(biāo)準(zhǔn)，讓世界恢復(fù)平靜，W3C計(jì)劃把HTML的結(jié)構(gòu)和表現(xiàn)分離成兩種語言：一種語言用于實(shí)現(xiàn)結(jié)構(gòu)（HTML），一種語言用于表現(xiàn)（CSS），并且要求所有的瀏覽器廠商都采用這個(gè)標(biāo)準(zhǔn)。

1999年HTML4.01閃亮登場，成為接下來十年當(dāng)中HTML的必備版本，因?yàn)閹缀跛械臑g覽器都采用了這個(gè)標(biāo)準(zhǔn)，讓我們web開發(fā)人員的日子也好過了一些，但是除了IE瀏覽器，所以開發(fā)人員針對(duì)IE瀏覽器總是要做一些額外的工作。

2000年一個(gè)新興的事物引起了我們的注意就是XML，它讓HTML開始心煩意亂，他們兩個(gè)終于不情愿的結(jié)合在了一起，就有了后來的XHTML，XHTML1.0就此誕生了。XHTML的標(biāo)準(zhǔn)更嚴(yán)格，所有的標(biāo)簽必須由開始標(biāo)簽和結(jié)束標(biāo)簽組成。所以大部分開發(fā)人員很討厭XHTML對(duì)于HTML的靈活性更擁護(hù)，導(dǎo)致XHTML發(fā)展到2.0版本的時(shí)候甚至慘遭淘汰，所以這場婚姻的結(jié)局并不好。

HTML基礎(chǔ)

到了2009年，XHTML很快被HTML5取代，因?yàn)镠TML5延用了HTML4.01的大部分特性，還提供了很多適合web新發(fā)展的新特性，而這正是開發(fā)人員一直想要的，并且完全支持XHTML風(fēng)格的代碼，所以HTML5成為大家公認(rèn)的標(biāo)準(zhǔn)，并于2014年HTML5正式發(fā)布，曾經(jīng)對(duì)標(biāo)準(zhǔn)不屑一顧的IE瀏覽器，自IE9瀏覽器開始也加入了全面支持HTML5的陣營。

現(xiàn)在很清楚了，HTML5對(duì)我們來說意味著什么？跟著我一起加入這個(gè)歡樂的世界，關(guān)注我，后面會(huì)繼續(xù)給大家介紹Web前端開發(fā)所需掌握的技能。

前天的內(nèi)容。繼續(xù)：

根據(jù)業(yè)務(wù)畫出流程圖（dag，有向無環(huán)圖）。
看缺乏哪些函數(shù)，直接設(shè)計(jì)函數(shù)，主要入?yún)⒑统鰠ⅲ鶕?jù)出入?yún)⑦M(jìn)行寫邏輯。

dag圖有了，參考這里：

https://www.toutiao.com/article/7101114126621229601

這個(gè)時(shí)候可以根據(jù)dag圖做一些數(shù)據(jù)結(jié)構(gòu)設(shè)計(jì)，以及函數(shù)設(shè)計(jì)。

"""前端的作用，
---------------------------------------------------------------------------------------
1.功能1：收集長鏈接并生成短鏈接
  dag流程：收集長URL，并確認(rèn)長URL有效，如果有效則生成短URL，并傳遞到后端服務(wù)器。
  1-1 收集長URL： 通過在index.html 中設(shè)計(jì)一個(gè)表單，客戶輸入表單后，用requests.form 方法獲取表單內(nèi)容
  1-2 檢查長URL是否有效：通過checkurl(longurl)函數(shù)，當(dāng)longurl 有效則返回1，否則返回0
  1-3 生成短URL：通過createshorturl(longurl)函數(shù)，從長url里面截取字段另外加上時(shí)間來生成一個(gè)短url
  1-4 傳遞到后端服務(wù)器：把長短URL的關(guān)系記錄到后端
      具體實(shí)現(xiàn)可以通過requests.post 方法，向?qū)?yīng)的restful api 進(jìn)行請求（備注1），傳遞jason字段（備注2）
      備注1：這里指post 的url，指requsts.post 請求對(duì)應(yīng)的Url，建議post的url要詳細(xì)到具體的接口，比如127.0.0.1:8008/api/shorturlcreate 接口，這樣后端服務(wù)器可以根據(jù)接口特性來進(jìn)行相應(yīng)的邏輯處理
      備注2：制作字典，按照 dic1={短鏈:{"長鏈"：長鏈，"訪問日期"："null"，"創(chuàng)建日期"：date}} 創(chuàng)建
      另外，requests.post 方式，選擇data=json 方式傳遞，json字段是對(duì)備注2里字典信息做字符串序列化的結(jié)果 json.dumps(dic1)


2.功能2：收集短鏈接做相關(guān)跳轉(zhuǎn)
  dag流程：收集短url，如果短url存在，則接收服務(wù)端的redirect請求，跳轉(zhuǎn)到短URL對(duì)應(yīng)的長URL鏈接上。
  2-1 收集短url：通過在index.html設(shè)計(jì)一個(gè)表單，客戶輸入表單后，用requests.form方法獲取表單內(nèi)容
  2-2 檢查短url是否存在：通過checksurl(shorturl)函數(shù)，當(dāng)shorturl有效則返回1，否則返回0 （服務(wù)端）
  2-3 跳轉(zhuǎn)到長URL：通過jumpurl(shorturl)函數(shù)，請求到服務(wù)端。服務(wù)端先判斷短URL是否存在，如果存在則做redirect。
      jumpurl函數(shù)設(shè)計(jì)：
      1.訪問到后端服務(wù)器，requests.post(url/api/jump,""), 后端服務(wù)器根據(jù)URL具體的api來返回信息，返回值里包含了URL信息
      2.服務(wù)端要構(gòu)造返回的Header值，根據(jù)Location 參數(shù) ，讓客戶瀏覽器跳轉(zhuǎn)到對(duì)應(yīng)的長鏈URL中



3.功能3：請求某個(gè)短鏈的訪問信息，并進(jìn)行展示：
  dag流程：收集短url 對(duì)應(yīng)的信息，如果短URL存在，則返回這個(gè)短URL被調(diào)度的次數(shù)等信息
  3-1 在第2-3步，每次服務(wù)端指定后端做跳轉(zhuǎn)的時(shí)候，把短URL被訪問的時(shí)間做一個(gè)記錄。
      服務(wù)端操作：
      每次訪問短鏈的時(shí)候，對(duì)訪問情況做個(gè)統(tǒng)計(jì)：
       3-1-1: {短url：訪問時(shí)間} 存入redis 另外一個(gè)表里。
       3-2-2：對(duì)之前的 數(shù)據(jù)結(jié)構(gòu)做個(gè)更新，主要是對(duì) shorturl 的value做個(gè)update，訪問時(shí)間增加一行。

  3-2 發(fā)起請求，通過requests.post() 函數(shù)，傳參數(shù)為 /api/statics ，到后端
      收集后端返回的json字符串,查詢時(shí)間，短url，以及這個(gè)url的訪問列表，{date:[list],"shorturl",url, visittime:[list]}。
      用json.loads() 把信息拿到，然后收集visittime的信息，
      按照天的維度對(duì)visittime做一個(gè)圖像化。---作業(yè)。


redis 數(shù)據(jù)結(jié)構(gòu)設(shè)計(jì)：
      key：value
      shorturl:{"對(duì)應(yīng)的長鏈接"：longurl,"訪問時(shí)間":[visitdate1,visitdate2]，"創(chuàng)建時(shí)間":createdate}
      把短鏈做為Key，把長鏈的信息、訪問時(shí)間，創(chuàng)建時(shí)間作為value，

---------------------------------------------------------------------------------------

前端設(shè)計(jì)1 ：

1.功能1：收集長鏈接并生成短鏈接

dag流程：收集長URL，并確認(rèn)長URL有效，如果有效則生成短URL，并傳遞到后端服務(wù)器。

1.收集長URL：通過在index.html 中設(shè)計(jì)一個(gè)表單，客戶輸入表單后，用requests.form 方法獲取表單內(nèi)容。

2.檢查長URL是否有效：通過checkurl(longurl)函數(shù)，當(dāng)longurl 有效則返回1，否則返回0。

3.生成短URL：createshorturl(longurl)函數(shù)。

4.傳參函數(shù)：linkshort_long(shorturl,longurl)

把長短鏈對(duì)照信息做成一個(gè)字典，并把字典轉(zhuǎn)化為json字段。

restapi 方式向后端傳遞相關(guān)信息：requests.post("URL", json=post_data)

def checkurl(longurl):
    #判斷l(xiāng)ongurl 是否可以訪問
    #如果是有效的，返回頭為200，則返回1
    #如果長連接無效，返回頭為200 之外的，則返回0
    return result


def createshorturl(longurl):
    #頭幾個(gè)字符基于時(shí)間-年月日時(shí)
    #后幾個(gè)字符取長鏈的前幾個(gè)字段
    return shorturl

def linkshort_long(shorturl,longurl):
    #生成一個(gè)json字段，并作為post邏輯的輸入。
    #后續(xù)這個(gè)字典被Json化后傳入到服務(wù)器后端，后端程序基于short url 及 createtype 可以做插入redis的操作。
    dic={"shorturl":shorturl,"date":date,"longurl":longurl,"createtype":"build"}
    return dic

前端設(shè)計(jì)2:

dag流程：收集短url，如果短url存在，則接收服務(wù)端的redirect請求，跳轉(zhuǎn)到短URL對(duì)應(yīng)的長URL鏈接上。

2-1 收集短url：通過在index.html設(shè)計(jì)一個(gè)表單，客戶輸入表單后，用requests.form方法獲取表單內(nèi)容

2-2 檢查短url是否存在：通過checksurl(shorturl)函數(shù)，當(dāng)shorturl有效則返回1，否則返回0 （服務(wù)端）

2-3 跳轉(zhuǎn)到長URL：通過jumpurl(shorturl)函數(shù)，請求到服務(wù)端。服務(wù)端先判斷短URL是否存在，如果存在則做redirect。

jumpurl函數(shù)設(shè)計(jì)：

1.訪問到后端服務(wù)器，requests.post(url/api/jump,""), 后端服務(wù)器根據(jù)URL具體的api來返回信息，返回值里包含了URL信息

2.服務(wù)端要構(gòu)造返回的Header值，根據(jù)Location 參數(shù) ，讓客戶瀏覽器跳轉(zhuǎn)到對(duì)應(yīng)的長鏈URL中


def checksurl(shorturl):
    #檢查shorturl 是否在后臺(tái)服務(wù)中存在，
    #后臺(tái)判斷是否存在，如果存在則返回確認(rèn)
    #如果存在則返回值為真，否則為假
    return result

def jumpurl(shorturl):
    #發(fā)數(shù)據(jù)到服務(wù)端，
    #服務(wù)端判斷短鏈?zhǔn)欠翊嬖?
    #如果存在則返回 redirect header，做301
    #同時(shí)服務(wù)端做一個(gè)記錄。

前端設(shè)計(jì)3:

3.功能3：請求某個(gè)短鏈的訪問信息，并進(jìn)行展示：

dag流程：收集短url 對(duì)應(yīng)的信息，如果短URL存在，則返回這個(gè)短URL被調(diào)度的次數(shù)等信息

3-1 在第2-3步，每次服務(wù)端指定后端做跳轉(zhuǎn)的時(shí)候，把短URL被訪問的時(shí)間做一個(gè)記錄。

#根據(jù)請求，做相關(guān)展示邏輯。

@app.route('/shorturl/stats')
def route_statics():
    #從requests 里面獲取shorturl的信息
    #post到服務(wù)端，收集訪問信息
    #從服務(wù)端獲取返回?cái)?shù)值字典
    #用返回字典做展示，跳到一個(gè)單獨(dú)的頁面，用render_template模版。
    return dict

服務(wù)端操作：

每次訪問短鏈的時(shí)候，對(duì)訪問情況做個(gè)統(tǒng)計(jì)：

3-1-1: {短url：訪問時(shí)間} 存入redis 另外一個(gè)表里。

3-2-2：對(duì)之前的數(shù)據(jù)結(jié)構(gòu)做個(gè)更新，主要是對(duì) shorturl 的value做個(gè)update，訪問時(shí)間增加一行。

3-2 發(fā)起請求，通過requests.post() 函數(shù)，傳參數(shù)為 /api/statics ，到后端

收集后端返回的json字符串,查詢時(shí)間，短url，以及這個(gè)url的訪問列表，{date:[list],"shorturl",url, visittime:[list]}。

用json.loads() 把信息拿到，然后收集visittime的信息，

按照天的維度對(duì)visittime做一個(gè)圖像化。---作業(yè)。


def check_ifexist(longurl):
# 檢查長鏈接是否存在，如果存在則跳過


def record_check(dic1):
    #收集長短鏈的鏈接請求，如果是訪問/api/record 則進(jìn)入邏輯
    #把字典信息直接寫redis()，
    #redis插入，主要插入短鏈（key)及短鏈的對(duì)應(yīng)信息表結(jié)構(gòu)(value)，另外針對(duì)長鏈接是否存在的表結(jié)構(gòu)(key為長鏈接，value為1）

def record_route(shorturl):
    #收集route請求，如果訪問的是/api/route ,則進(jìn)入邏輯
    #查詢短鏈對(duì)應(yīng)的長鏈接
    #返回header指定location 為長鏈接
    #通過update redis表，記錄這次訪問，

redis 數(shù)據(jù)結(jié)構(gòu)設(shè)計(jì)：

表1:

key：value

shorturl:{"對(duì)應(yīng)的長鏈接"：longurl,"訪問時(shí)間":[visitdate1,visitdate2]，"創(chuàng)建時(shí)間":createdate}把短鏈做為Key，把長鏈的信息、訪問時(shí)間，創(chuàng)建時(shí)間作為value。

這樣設(shè)計(jì)表結(jié)構(gòu)的作用是，每次可以查到visit的訪問時(shí)間，可以容易查到shorturl被訪問的情況。

表2

key:value

longurl：shorturl

主要用來查詢對(duì)應(yīng)的longurl 是否存在，把它作為Key更加容易。

先寫到這里，感覺還是蠻復(fù)雜的，不過經(jīng)過上面的分析，其實(shí)大體程序框架已經(jīng)ready了。

下一步準(zhǔn)備客戶端、服務(wù)端的代碼。

前的技術(shù)總監(jiān)喊我加入他們的接私活團(tuán)隊(duì)，說他們缺一個(gè)前端工程師，不缺后端。可我一直是做后端開發(fā)的，前端代碼寫的實(shí)在是很少，沒有經(jīng)驗(yàn)，寫起來肯定很慢了，所以想對(duì)前端的HTML知識(shí)點(diǎn)做一個(gè)匯總。

HTML代碼結(jié)構(gòu)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <h1>一級(jí)標(biāo)題</h1>
    <br/>
    <h2>二級(jí)標(biāo)題</h2>
</body>
</html>

<!DOCTYPE html>聲明這是一個(gè)html文檔；<html>元素是html頁面的根元素；整個(gè)html文檔包括兩大部分：head頭和body體。

meta元素提供了頁面的元信息；title元素描述了文檔的標(biāo)題；body元素包含了可見的頁面內(nèi)容。

HTML元素概念

開始標(biāo)簽	元素內(nèi)容	結(jié)束標(biāo)簽
<h1>	一個(gè)標(biāo)題	</h1>
<br/>	換行
HTML 元素以開始標(biāo)簽起始，以結(jié)束標(biāo)簽終止。元素內(nèi)容在其中間，如<h1>html元素概念</h1>。有些元素沒有內(nèi)容，沒有結(jié)束標(biāo)簽，如<br/>。

HTML屬性概念

下面是適用于大多數(shù) HTML 元素的屬性：

屬性	描述
class	為元素定義一個(gè)或多個(gè)類名
id	定義元素的唯一id
style	設(shè)定元素的行內(nèi)樣式
實(shí)例：<a href="toutiao.com">頭條</a>
HTML元素可以設(shè)置屬性屬性描述于開始標(biāo)簽屬性以鍵/值對(duì)的形式出現(xiàn)

標(biāo)題元素

<body>
    <!-- 一般用在標(biāo)題上，利于seo優(yōu)化-->
    <h1>這是標(biāo)題 1</h1>
    <h2>這是標(biāo)題 2</h2>
    <h3>這是標(biāo)題 3</h3>
    <h4>這是標(biāo)題 4</h4>
    <h5>這是標(biāo)題 5</h5>
    <h6>這是標(biāo)題 6</h6>
</body>

段落與換行元素

<body>
    <!-- 這是注釋 -->
    <!-- </p> 是塊級(jí)元素、前后有空行-->
    <p>這個(gè)段落</p>
    <p>這<br>個(gè)<br>段落</p>
    <hr/>
</body>

基本格式化標(biāo)簽

<body>
    <b>加粗</b>
    <i>斜體</i>
    <small>更小的</small> <br><br>
    <strong>重要的</strong> <br><br>
    這是 <sub> 下標(biāo)</sub> 和 <sup> 上標(biāo)</sup> <br><br>
    <del> 刪除的文本
</body>

超鏈接（鏈接）

屬性	值	描述
href	toutiao.com	鏈接的地址
target	_blank	在何處顯示
id		文檔書簽

<body>
    <!-- 實(shí)例 -->
    文本：<a href="http://www.example.com/">文本</a> <br/>
    圖像： <a href="http://www.example.com/">
        <img src="URL" alt="描述信息">
    </a> <br/>
    郵件： <a href="mailto:qq@example.com">發(fā)送e-mail</a> <br/>
    書簽：
    <a id="tips">書簽</a> <br/>
    <a href="#tips">跳到書簽</a>
</body>

圖像標(biāo)簽

屬性	描述
src	圖像的 URL 地址
alt	無法載入圖像時(shí)，顯示替換文本
width	指定寬度
height	指定高度

<body>
    <img src="meinv.jpg" alt="美女" width="280" height="180">
</body>

哈哈哈，調(diào)皮一下

HTML表格

表格由 <table> 標(biāo)簽來定義。每個(gè)表格均有若干行（由 <tr> 標(biāo)簽定義），每行被分割為若干單元格（由 <td> 標(biāo)簽定義）。字母 td 指表格數(shù)據(jù)（table data），即數(shù)據(jù)單元格的內(nèi)容。
數(shù)據(jù)單元格可以包含文本、圖片、列表、段落、表單、水平線、表格等等。

<body>
    <!-- 邊框?qū)傩裕喝绻欢x邊框?qū)傩裕砀駥⒉伙@示邊框-->
    <table border="1">
        <tr>
            <!-- 表頭使用<th>標(biāo)簽定義。瀏覽器會(huì)把表頭顯示為粗體居中的文本-->
            <th>姓名</th>
            <th>年齡</th>
            <th>性別</th>
        </tr>
        <tr>
            <td>小紅</td>
            <td>18</td>
            <th>女</th>
        </tr>
        <tr>
            <td>小明</td>
            <td>21</td>
            <td>男</td>
        </tr>
    </table>
</body>

HTML列表

<body>
    <!-- 有序列表 數(shù)字進(jìn)行標(biāo)記-->
    <ol>
        <li>蘋果汁</li>
        <li>草莓汁</li>
    </ol>
    <!-- 無序列表 粗體圓點(diǎn)標(biāo)記-->
    <ul>
        <li>咖啡</li>
        <li>飲料</li>
        <li>茶
            <!-- 嵌套列表 -->
            <ol>
                <li>紅茶</li>
                <li>綠茶</li>
            </ol>
        </li>
    </ul>
</body>

HTM區(qū)塊

塊級(jí)元素在瀏覽器顯示時(shí)，會(huì)以新行來開始和結(jié)束。如<h1>,<p>,<ul>,<table>
內(nèi)聯(lián)元素在顯示時(shí)不會(huì)以新行開始。如<b>, <td>, <a>, <img>

<div> 元素	<span> 元素
塊級(jí)元素	內(nèi)聯(lián)元素
HTML 元素的容器	文本的容器
搭配css可對(duì)內(nèi)容塊設(shè)置樣式屬性	搭配css可為文本設(shè)置樣式屬性

HTML 布局

<body>
    <div style="width:500px">
        <div style="background-color: antiquewhite;">
            <h1 style="margin-bottom:0;">網(wǎng)頁頭部信息</h1>
        </div>
      
        <div style="background-color: aquamarine; height:200px;width:100px;float:left;">
            <b>網(wǎng)頁左側(cè)信息</b><br>
            中考資訊<br>
            高考資訊<br>
            成人自考
        </div>
       
        <div style="background-color: aqua; height:200px;width:400px;float:left;">
            主題內(nèi)容
        </div>
       
        <div style="background-color:#FFA500;clear:both;text-align:center;">
            底部內(nèi)容
        </div>
    </div>
</body>

HTML表單

form表單有兩個(gè)屬性：

action	method
定義了服務(wù)端的文件名	數(shù)據(jù)的提交方式
對(duì)接收到的數(shù)據(jù)進(jìn)行處理	有POST與GET方法
post：表單數(shù)據(jù)會(huì)包含在表單體內(nèi)然后發(fā)送給服務(wù)器，用于提交敏感數(shù)據(jù)，如用戶名與密碼等。 get：默認(rèn)值，表單數(shù)據(jù)會(huì)附加在action屬性的URL中。

<body>
    <!-- 表單是一個(gè)包含表單元素的區(qū)域
    允許用戶在表單中輸入內(nèi)容-->
    <form action="" method="">
        <!-- input 輸入標(biāo)簽 類型是由type屬性定義-->

        <!-- 文本域 type="text" -->
        年齡: <input type="text" name="age"><br>

        <!-- 密碼字段 type="password" -->
        密碼: <input type="password" name="age"><br>
        
        <!-- 單選框 type="radio" -->
        <input type="radio" name="sex" value="male">男
        <input type="radio" name="sex" value="female">女<br>
        
        <!-- 復(fù)選框 type="checkbox" -->
        <input type="checkbox" name="like" value="Coffee">喜歡咖啡
        <input type="checkbox" name="like" value="tea">喜歡茶<br>

        <!-- 提交按鈕 type="submit" -->
        <!-- 將表單的內(nèi)容傳送到服務(wù)器 -->
        <input type="submit" value="提交">
    </form>
</body>

HTML框架

<body>
    <!-- 通過使用框架，你可以在同一個(gè)瀏覽器窗口中顯示不止一個(gè)頁面。 -->
    <iframe src="test.html" width="200" height="200"></iframe>
</body>

height 和 width 屬性用來定義iframe標(biāo)簽的高度與寬度

HTML <head> 元素介紹

<head> 元素定義了文檔的信息，包含了所有的頭部標(biāo)簽元素。常用的標(biāo)簽元素如下所示。

<meta>	文檔的元數(shù)據(jù)
<base>	頁面鏈接標(biāo)簽的默認(rèn)地址
<title>	文檔的標(biāo)題
<link>	外部樣式資源
<style>	客戶端腳本文件
<script>	文檔樣式文件

<meta> 標(biāo)簽詳解

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- 定義關(guān)鍵詞 -->
    <meta name="keywords" content="生活夢想家, 科技愛好者, 新手剪輯師, 記錄生活, 分享美好">
    <!-- 定義描述內(nèi)容 -->
    <meta name="description" content="我是一個(gè)生活夢想家, 科技愛好者, 新手剪輯師, 記錄生活和分享美好的一個(gè)人。">
    <!-- 定義文檔作者 -->
    <meta name="author" content="小明">
    <!-- 每10秒鐘刷新當(dāng)前頁面 -->
    <meta http-equiv="refresh" content="10">
    <title>Document</title>
</head>
<body>
</body>  
</html>

這只是HTML的基本內(nèi)容，后續(xù)還會(huì)總結(jié)HTML5的知識(shí)點(diǎn)。

在線咨詢

上一篇：硬核！C語言八大排序算法，附動(dòng)圖和詳細(xì)代碼解釋
下一篇：UniApp富文本圖片路徑解析及圖片路徑CSS樣式問

您的項(xiàng)目需求

*請認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商