HTML相關(guān)知識點(diǎn)總結(jié)
簡介
HTML超文本標(biāo)記語言（Hyper Text Markup Language），它是互聯(lián)網(wǎng)上應(yīng)用最廣泛的標(biāo)記語言。不要把HTML語言和C、Java等編程語言混淆起來。簡單的說，HTML文件就是普通文本+HTML標(biāo)記（也就是HTML標(biāo)簽），而不同的HTML標(biāo)簽?zāi)茱@示不同的效果。
HTML文檔和網(wǎng)頁的關(guān)系呢？
**網(wǎng)頁就是HTML文檔。HTML文檔有HTML標(biāo)簽和純文本組成。**web瀏覽器的作用就是讀取HTML文檔，并以網(wǎng)頁的形式顯示它們。瀏覽器不是顯示HTML標(biāo)簽，而是使用標(biāo)簽來解釋頁面的內(nèi)容。
HTML的標(biāo)簽樣子？
HTML的標(biāo)記標(biāo)簽通常被稱為HTML標(biāo)簽，它是由一對尖括號以及關(guān)鍵詞組成，如。而且HTML的標(biāo)簽基本上是成對出現(xiàn)的，如
<html></html>。在這一對標(biāo)簽中，第一個稱為起始標(biāo)簽，第二個被稱為結(jié)束標(biāo)簽。
### HTML的組成：
head 部分
用于定義HTML的一些基本信息，或者引入外部文件。
body 部分
整個HTML文檔的顯示內(nèi)容。
HTML基本概念
標(biāo)簽
網(wǎng)頁就是HTML文檔。HTML文檔是由標(biāo)簽和內(nèi)容組成。
常用的標(biāo)簽：
<html>、<head>、<body>、<div>、<span>、<h1>~<h6>、<p>、<form>、<input>、<a>、<img>、<iframe>、<script>、<style> 等
元素
HTML 元素指的是從開始標(biāo)簽（start tag）到結(jié)束標(biāo)簽（end tag）的所有代碼。
| 開始標(biāo)簽 | 內(nèi)容 | 結(jié)束標(biāo)簽 |
|---|---|---|
| <p> | 你好，李磊 | </p> |
| <a href=“http://www.baidu.com”> | 到百度 | </a> |
| <br/> |
屬性
多數(shù)的HTML元素都有屬性。
屬性提供了有關(guān) HTML 元素的更多的信息。
屬性總是以**名稱/值對(屬性/屬性值)**的形式出現(xiàn)，比如：name=“value”。
屬性總是在 HTML 元素的開始標(biāo)簽中規(guī)定。
注釋
注釋標(biāo)簽 <!-- 與 --> 用于在 HTML 插入注釋。
編碼規(guī)則
（1） 元素和屬性均小寫
HTML 標(biāo)簽對大小寫不敏感。
等同于
。萬維網(wǎng)聯(lián)盟（W3C）在 HTML 4 中推薦使用小寫，建議小寫。
（2） 有結(jié)束標(biāo)簽的元素，有開始標(biāo)簽必須有結(jié)束標(biāo)簽；只有開始標(biāo)簽沒有結(jié)束標(biāo)簽的元素，開始標(biāo)簽中必須加 /。
（3） 始終為屬性加引號
<img alt=”name=‘Bill “HelloWorld” Gates'” id=”imgId” name='imgName'/>
HTML常用元素
標(biāo)題
標(biāo)題（Heading）是通過 <h1> - <h6> 等標(biāo)簽進(jìn)行定義的。
<h1> 定義最大的標(biāo)題。<h6> 定義最小的標(biāo)題。
標(biāo)題的建議用法：
1.每個頁面h1標(biāo)簽最多只使用一次，搜索引擎會懷疑頁面內(nèi)存在多個h1標(biāo)簽是作弊；
2.如果是首頁，建議h1標(biāo)簽為網(wǎng)站名稱，網(wǎng)站名稱是首頁的重中之重，非他莫屬；
3.如果是文章頁面建議h1標(biāo)簽為文章的標(biāo)題，h1標(biāo)簽就是對文本標(biāo)題所進(jìn)行的著重強(qiáng)調(diào)的一種標(biāo)簽，那么文章頁面當(dāng)然是文章的標(biāo)題是最重要的；
4.如果是分類頁面則不建議使用h1標(biāo)簽，實(shí)際經(jīng)驗(yàn)總結(jié)，分類頁面等聚合頁面不適合使用h1標(biāo)簽，因?yàn)轫撁鎯?nèi)容是文章列表：可能“沒重點(diǎn)”；
5.<h2>用于段落標(biāo)題，或者說副標(biāo)題。
6.<h3>表示段落的小節(jié)標(biāo)題，一般是用在段落小節(jié)。
7.<h4>-<h6>基本很少用到，是告訴搜索引擎這些不是很重要的內(nèi)容，當(dāng)一篇文章內(nèi)容較多的時候，可以用來說明一些內(nèi)容不是很重要的。
段落
段落是通過 <p> 標(biāo)簽定義的
折行：<br/>
鏈接
HTML 使用超級鏈接與網(wǎng)絡(luò)上的另一個文檔相連。
幾乎可以在所有的網(wǎng)頁中找到鏈接。點(diǎn)擊鏈接可以從一張頁面跳轉(zhuǎn)到另一張頁面。
超鏈接可以是一個字，一個詞，或者一組詞，也可以是一幅圖像，你可以點(diǎn)擊這些內(nèi)容來跳轉(zhuǎn)到新的文檔或者當(dāng)前文檔中的某個部分。
當(dāng)您把鼠標(biāo)指針移動到網(wǎng)頁中的某個鏈接上時，箭頭會變?yōu)橐恢恍∈帧?/p>
我們通過使用 <a> 標(biāo)簽在 HTML 中創(chuàng)建鏈接。
有兩種使用 <a> 標(biāo)簽的方式：
- 1.通過使用 href 屬性 - 創(chuàng)建指向另一個文檔的鏈接；
- 2.通過使用 name 屬性 - 創(chuàng)建文檔內(nèi)的書簽。
跳轉(zhuǎn)頁面：
超鏈接的語法：
<a href=“url”>Link text</a>
target 屬性：
標(biāo)簽的 target 屬性規(guī)定在何處打開鏈接文檔。
<a href=“http://www.baidu.com” target="_blank">歡迎訪問百度!</a>
該屬性有四個值:
4 個保留的目標(biāo)名稱用作特殊的文檔重定向操作：
_blank 瀏覽器總在一個新打開、未命名的窗口中載入目標(biāo)文檔。 _self 這個目標(biāo)的值對所有沒有指定目標(biāo)的 <a> 標(biāo)簽是默認(rèn)目標(biāo)，它使得目標(biāo)文檔載入并顯示在相同的框架或者窗口中作為源文檔。 _parent 這個目標(biāo)使得文檔載入父窗口或者包含超鏈接引用的框架的框架集。如果這個引用是在窗口或者在頂級框架中，那么它與目標(biāo) _self 等效。 _top 這個目標(biāo)使得文檔載入包含這個超鏈接的窗口，用 _top 目標(biāo)將會清除所有被包含的框架并將文檔載入整個瀏覽器窗口。 提示：這些 target 的所有 4 個值都以下劃線開始。。
此外，target屬性在使用框架frameset 和iframe時非常有用
跳轉(zhuǎn)錨點(diǎn)
<!-- 由A跳轉(zhuǎn)到B --> <a href="#標(biāo)記">A</a> <a name="標(biāo)記">B</a>
圖片
通過使用 HTML，可以在文檔中顯示圖像。
在 HTML 中，圖像由 <img> 標(biāo)簽定義。<img> 是空標(biāo)簽，意思是說，它只包含屬性，并且沒有閉合標(biāo)簽。
- 指定圖片源（src）
要在頁面上顯示圖像，你需要使用源屬性（src）。src 指 “source”。源屬性的值是圖像的 URL 地址。
定義圖像的語法是：<img src=“url” />
- 替換文本屬性（alt）
alt 屬性用來為圖像定義一串預(yù)備的可替換的文本。替換文本屬性的值是用戶定義的。
<img src=“boat.gif” alt=“Big Boat”>
在瀏覽器無法載入圖像時，替換文本屬性告訴讀者她們失去的信息。此時，瀏覽器將顯示這個替代性的文本而不是圖像。為頁面上的圖像都加上替換文本屬性是個好習(xí)慣，這樣有助于更好的顯示信息，并且對于那些使用純文本瀏覽器的人來說是非常有用的。
列表
有序列表
語法：
<ol>
<li>咖啡</li>
<li>牛奶</li>
<li>茶</li>
</ol>
無序列表
語法：
<ul>
<li>咖啡</li>
<li>茶</li>
<li>牛奶</li>
</ul>
定義列表
自定義列表不僅僅是一列項(xiàng)目，而是項(xiàng)目及其注釋的組合。自定義列表以 <dl> 標(biāo)簽開始。每個自定義列表項(xiàng)以 <dt> 開始。每個自定義列表項(xiàng)的定義以 <dd> 開始。
語法：
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dd>Black drink</dd>
<dd>hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
<dd>cold drink</dd>
<dd>White drink</dd>
</dl>
表格
表格由 <table> 標(biāo)簽來定義。每個表格均有若干行（由 <tr> 標(biāo)簽定義），每行被分割為若干單元格（由 <td> 標(biāo)簽定義）。字母 td 指表格數(shù)據(jù)（table data），即數(shù)據(jù)單元格的內(nèi)容。數(shù)據(jù)單元格可以包含文本、圖片、列表、段落、表單、表格等等。
- 表格的常用屬性
| 屬性 | 描述 |
|---|---|
| border | 隸屬于<table>標(biāo)簽，定義表格寬度 |
| cellspacing | 隸屬于<table>標(biāo)簽，單元格間距，定義單元格之間的距離 |
| cellpadding | 隸屬于<table>標(biāo)簽，單元格邊距，定義單元格內(nèi)容與邊框的距離 |
| bgcolor | 應(yīng)用于<table>、<td>、<th>標(biāo)簽，設(shè)置表格的背景色（過時） |
| background | 應(yīng)用于<table>、<td>、<th>標(biāo)簽，設(shè)置表格的背景圖片（過時） |
| align | 應(yīng)用于<table>、<td>、<th>標(biāo)簽，表格是設(shè)置表格在外部容器中的對齊方式，單元格是設(shè)置內(nèi)容的對其方式（過時） |
| colspan | 應(yīng)用于<td>、<th>標(biāo)簽，合并列 |
| rowspan | 應(yīng)用于<tr>標(biāo)簽，合并行 |
- 更為復(fù)雜的表格定義
| 標(biāo)簽 | 描述 |
|---|---|
| caption | 定義表格的標(biāo)題 |
| thead | 定義表格頭 |
| tfoot | 定義表格腳 |
| tbody | 定義表格主體 |
| colgroup | 為表格中的一個或多個列指定屬性值 |
| col | 為表格中的一列指定屬性值 |
塊
（1）塊元素和內(nèi)聯(lián)元素
HTML 元素被定義為塊級元素或內(nèi)聯(lián)元素。
塊元素：
塊級元素”譯為 block level element。塊級元素在瀏覽器顯示時，通常會以新行來開始（和結(jié)束）。
例子：<h1>, <p>,<ul>,<table>
內(nèi)聯(lián)元素：
內(nèi)聯(lián)元素”譯為 inline element。內(nèi)聯(lián)元素在顯示時通常不會以新行開始。
例子：<td>, <a>, <img>
（2）<div>和<span>
元素是塊級元素，它是可用于組合其他 HTML 元素的容器。
<div> 元素沒有特定的含義。除此之外，由于它屬于塊級元素，瀏覽器會在其前后顯示折行。
如果與 CSS 一同使用，<div> 元素可用于對大的內(nèi)容塊設(shè)置樣式屬性。
<div> 元素的另一個常見的用途是文檔布局。它取代了使用表格定義布局的老式方法。使用 <table> 元素進(jìn)行文檔布局不是表格的正確用法。<table> 元素的作用是顯示表格化的數(shù)據(jù)。
<span> 元素是內(nèi)聯(lián)元素，可用作文本的容器。
<span> 元素也沒有特定的含義。
當(dāng)與 CSS 一同使用時，<span> 元素可用于為部分文本設(shè)置樣式屬性。
表單及表單元素
表單
HTML 表單用于搜集不同類型的用戶輸入。
<form> 元素定義 HTML 表單。
語法如下：
<form>
.
form elements
.
</form>
表單屬性
Action 屬性
action 屬性定義在提交表單時執(zhí)行的動作。
向服務(wù)器提交表單的通常做法是使用提交按鈕。
通常，表單會被提交到 web 服務(wù)器上的網(wǎng)頁。
<form action=“action_page.php”>
在上面的例子中，指定了某個服務(wù)器腳本來處理被提交表單。如果省略 action 屬性，則 action 會被設(shè)置為當(dāng)前頁面。
method 屬性
method 屬性規(guī)定在提交表單時所用的 HTTP 方法（GET 或 POST）：
<form action=“action_page.php” method=“GET”>
或：
<form action=“action_page.php” method=“POST”>
何時使用 GET？
您能夠使用 GET（默認(rèn)方法）：
如果表單提交是被動的（比如搜索引擎查詢），并且沒有敏感信息。
當(dāng)您使用 GET 時，表單數(shù)據(jù)在頁面地址欄中是可見的：
action_page.php?firstname=Mickey&lastname=Mouse
注釋：GET 最適合少量數(shù)據(jù)的提交。瀏覽器會設(shè)定容量限制。
何時使用 POST？
如果表單正在更新數(shù)據(jù)，或者包含敏感信息（例如密碼）。
POST 的安全性更加，因?yàn)樵陧撁娴刂窓谥斜惶峤坏臄?shù)據(jù)是不可見的。
name屬性
如果要正確地被提交，每個輸入字段必須設(shè)置一個 name 屬性。
<form> 標(biāo)簽的所有屬性如下：
| 屬性 | 描述 |
|---|---|
| accept-charset | 規(guī)定在被提交表單中使用的字符集(默認(rèn):頁面字符集) |
| action | 規(guī)定向何處提交表單的地址(url)(提交頁面) |
| autocomplete | 規(guī)定瀏覽器應(yīng)該自動完成表單(默認(rèn):開啟) |
| enctype | 規(guī)定被提交數(shù)據(jù)的編碼(默認(rèn):url-encoded) |
| method | 規(guī)定在提交表單時所用的http方法(默認(rèn):GET) |
| name | 規(guī)定識別表單的名稱(對于DOM使用:document.forms.name) |
| novalidate | 規(guī)定瀏覽器不驗(yàn)證表單 |
| target | 規(guī)定action屬性中地址的目標(biāo)(默認(rèn):_self) |
表單元素
表單元素指的是不同類型的 input 元素、復(fù)選框、單選按鈕、提交按鈕等等。
input 元素
<input> 元素
<input> 元素是最重要的表單元素。
<input> 元素有很多形態(tài)，根據(jù)不同的 type 屬性區(qū)分出不同的表單元素。
| 類型 | 描述 |
|---|---|
| text | 定義常規(guī)的文本輸入 |
| password | 密碼框 |
| radio | 單選按鈕 |
| checkbox | 多選框 |
| submit | 提交按鈕 |
| button | 普通按鈕 |
實(shí)現(xiàn)單選框必須滿足的條件
<p>性別:
<input type="radio" value="boy" name="sex"/>男
<input type="radio" value="girl" name="sex"/>女
</p>
實(shí)現(xiàn)多選框必須滿足的條件
1.必須要有input type=" checkbox"
2.必須有value=“XXX” value:多選框的值
3.必須有name=“XXX” 且框的內(nèi)容相同 name:表示組
<p>愛好
<input type="checkbox" value="sleep" name="hobby"/>睡覺
<input type="checkbox" value="code" name="hobby"/>編碼
<input type="checkbox" value="chat" name="hobby"/>聊天
<input type="checkbox" value="game" name="hobby"/>游戲
</p>
表單元素格式
| 屬性 | 說明 |
|---|---|
| type | 指定元素的類型.text,password,checkbox,radio,submit,reset,file,hidden,image和button,默認(rèn)為text |
| name | 指定表單元素的名稱 |
| value | 元素的初始值.type為radio時必須指定一個值(在框里沒寫東西之前會顯示value) |
| size | 指定表單元素的初始寬度.當(dāng)type為text或password時,表單元素的大小以字符為單位.對于其他類型,寬度以像素為單位 |
| maxlength | type為text或password時,輸入的最大字符數(shù),多了就輸不進(jìn)去了 |
| checked | type為radio或checkbox時,指定按鈕是否是被選中 |
HTML5新增了很多的輸入類型，如下所示。
HTML5 增加了多個新的輸入類型：
l color
l date
l datetime
l datetime-local
l email
l month
l number
l range
l search
l tel
l time
l url
l week
注釋：老式 web 瀏覽器不支持的輸入類型，會被視為輸入類型 text。
<select> 元素（下拉列表）
<select name="cars">
<option value="volvo">Volvo\</option>
<option value="saab">Saab\</option>
<option value="fiat">Fiat\</option>
<option value="audi">Audi\</option>
</select>
<textarea> 元素(文本域)
<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>
文件域
<p>
<input type="file" name="files">
</p>
滑塊
<p>音量 <input type="range" name="voice" min="0" max="100" step="2"> </p>
搜索
<p>搜索: <input type="search" name="search"> </p>
按鈕
<p>按鈕: <input type="button" name="btn1" value="點(diǎn)擊變長"> </p> <!-- 按鈕 input type="button" 普通按鈕 input type="image" 圖像按鈕 input type="submit" 提交按鈕 input type="reset" 重置按鈕 -->
多媒體元素
在HTML中也提供了對于音頻和視頻的支持。
在 HTML 中播放聲音的方法有很多種。
在 HTML 中播放音頻并不容易！
您需要諳熟大量技巧，以確保您的音頻文件在所有瀏覽器中（Internet Explorer, Chrome, Firefox, Safari, Opera）和所有硬件上（PC, Mac , iPad, iPhone）都能夠播放。
使用插件
瀏覽器插件是一種擴(kuò)展瀏覽器標(biāo)準(zhǔn)功能的小型計算機(jī)程序。
插件有很多用途：播放音樂、顯示地圖、驗(yàn)證銀行賬號，控制輸入等等。
可使用<object>或<embed>標(biāo)簽來將插件添加到 HTML 頁面。
這些標(biāo)簽定義資源（通常非 HTML 資源）的容器，根據(jù)類型，它們即會由瀏覽器顯示，也會由外部插件顯示。
audio 標(biāo)簽
<audio>元素是一個 HTML5 元素，在 HTML 4 中是非法的，您的頁面無法通過 HTML 4 驗(yàn)證。但在瀏覽器中都有效（老式瀏覽器不起作用，比如IE6）。
<audio src=”” autoplay=”” controls=”” loop=””></audio>
屬性名：
src:音頻地址。
autoplay:是否裝載好后自動播放。
controls:是否顯示播放的控制條。
loop:是否重復(fù)播放。
實(shí)例:
<!DOCTYPEhtml> <html> <head> <metacharset="UTF-8"> <title></title> </head> <body> <audio src="../audio/閻維文 - 母親.mp3" autoplay="autoplay" loop="loop" controls="controls" > </audio> </body> </html>
音頻格式知識普及：
Ogg：全稱應(yīng)該是OGGVobis(oggVorbis)是一種新的音頻壓縮格式，類似于MP3等的音樂格式。Ogg是完全免費(fèi)、開放和沒有專利限制的。OggVorbis文件的擴(kuò)展名是.OGG。Ogg文件格式可以不斷地進(jìn)行大小和音質(zhì)的改良，而不影響舊有的編碼器或播放器。
MP3：是一種音頻壓縮技術(shù)，其全稱是動態(tài)影像專家壓縮標(biāo)準(zhǔn)音頻層面3（Moving Picture Experts Group Audio Layer III），簡稱為MP3。它被設(shè)計用來大幅度地降低音頻數(shù)據(jù)量。利用 MPEG Audio Layer 3 的技術(shù)，將音樂以1:10 甚至 1:12 的壓縮率，壓縮成容量較小的文件，而對于大多數(shù)用戶來說重放的音質(zhì)與最初的不壓縮音頻相比沒有明顯的下降。
WAV：為微軟公司(Microsoft)開發(fā)的一種聲音文件格式，它符合RIFF(Resource Interchange File Format)文件規(guī)范，用于保存Windows平臺的音頻信息資源，被Windows平臺及其應(yīng)用程序所廣泛支持，該格式也支持MSADPCM，CCITT A LAW等多種壓縮運(yùn)算法，支持多種音頻數(shù)字，取樣頻率和聲道，標(biāo)準(zhǔn)格式化的WAV文件和CD格式一樣，也是44.1K的取樣頻率，16位量化數(shù)字，因此在聲音文件質(zhì)量和CD相差無幾！
各種關(guān)聯(lián)：wav格式音質(zhì)最好，但是文件體積較大。mp3壓縮率較高，普及率高，音質(zhì)相比wav要差。ogg與mp3在相同位速率(Bit Rate)編碼的情況下，ogg體積更小。
上面的例子使用了兩個不同的音頻格式。HTML5 <audio>元素會嘗試以 mp3 或 ogg 來播放
| 音頻格式 | Chrome | Firefox | IE9 | Opera | Safari |
|---|---|---|---|---|---|
| OGG | 支持 | 支持 | 支持 | 支持 | 不支持 |
| MP3 | 支持 | 不支持 | 支持 | 不支持 | 支持 |
| WAV | 不支持 | 支持 | 不支持 | 支持 | 不支持 |
video 標(biāo)簽
<video src=”” autoplay=”” controls=”” loop=”” width=”” height=””></video>
屬性：
src：視頻的URL
poster：視頻封面，沒有播放時顯示的圖片
autoplay：自動播放
loop：循環(huán)播放
controls：瀏覽器自帶的控制條
width：視頻寬度
<!DOCTYPEhtml> <html> <head> <metacharset="UTF-8"> <title></title> </head> <body> <video src="../video/01 倒霉熊第三部_標(biāo)清.mp4" autoplay="autoplay" loop="loop" controls="controls" width="300px" height="200px" > </video> </body> </html>
HTML5對視頻的支持
一共支持三種格式： Ogg、MPEG4、WebM。但這三種格式對于瀏覽器的兼容性卻各不同。
注釋：Internet Explorer 8 以及更早的版本不支持 標(biāo)簽。
格式 IE Firefox Opera Chrome Safari
Ogg No 3.5+ 10.5+ 5.0+ No
MPEG4 9.0+ No No 5.0+ 3.0+
WebM No 4.0+ 10.6+ 6.0+ No
NO：代表不支持。
X.0+：表示支持這款及版本更高的瀏覽器。
后來為了各大瀏覽器對音頻和視頻的支持不同，有了元素。
屬性：
Src:音頻或者視頻的地址
Type視頻或音頻的類型。該屬性值是一個簡單的MIME字符串。例如：audio/ogg audio/mpeg audio/x_wav等等。
<!DOCTYPE html> <html> <head> <metacharset="UTF-8"> <title></title> </head> <body> <video autoplay="autoplay" loop="loop" controls="controls"> <source src="../video/01 倒霉熊第三部_標(biāo)清.avi" type="video/3gpp"></source> <source src="../video/01 倒霉熊第三部_標(biāo)清.mp4" type="video/mp4"></source> </video> </body> </html>
第一個不支持還可以第二個。
線
<Strong>加粗</Strong> <ins>下劃線</ins> <del>刪除線</del>
細(xì)節(jié)
文檔類型
聲明幫助瀏覽器正確地顯示網(wǎng)頁。
Web 世界中存在許多不同的文檔。只有了解文檔的類型，瀏覽器才能正確地顯示文檔。
HTML 也有多個不同的版本，只有完全明白頁面中使用的確切 HTML 版本，瀏覽器才能完全正確地顯示出 HTML 頁面。這就是 <!DOCTYPE> 的用處。
不是 HTML 標(biāo)簽。它為瀏覽器提供一項(xiàng)信息（聲明），即 HTML 是用什么版本編寫的。寫在HTML文檔的最上面。
常用的 DOCTYPE 聲明
HTML 5
<!DOCTYPE html>
頭文件
HTML<head> 元素
<head> 元素是所有頭部元素的容器。<head> 內(nèi)的元素可包含腳本，指示瀏覽器在何處可以找到樣式表，提供元信息，等等。
以下標(biāo)簽都可以添加到 head 部分：<title>、<base>、<link>、<meta>、<script> 以及 <style>
1. HTML <title> 元素
<title> 標(biāo)簽定義文檔的標(biāo)題。
title 元素在所有 HTML/XHTML 文檔中都是必需的。
title 元素能夠：
定義瀏覽器工具欄中的標(biāo)題
提供頁面被添加到收藏夾時顯示的標(biāo)題
顯示在搜索引擎結(jié)果中的頁面標(biāo)題
2.HTML <base> 元素
<base> 標(biāo)簽為頁面上的所有鏈接規(guī)定默認(rèn)地址或默認(rèn)目標(biāo)（target）：
<head>
<base href=“http://www.w3school.com.cn/images/” />
<base target="_blank" />
</head>
3.HTML <link> 元素
<link> 標(biāo)簽定義文檔與外部資源之間的關(guān)系。
<link> 標(biāo)簽最常用于連接樣式表：
<head>
<link rel=“stylesheet” type=“text/css” href=“mystyle.css” />
</head>
4.HTML <style> 元素
<style> 標(biāo)簽用于為 HTML 文檔定義樣式信息。
您可以在 style 元素內(nèi)規(guī)定 HTML 元素在瀏覽器中呈現(xiàn)的樣式：
<head>
<style type=“text/css”>
body {background-color:yellow}
p {color:blue}
</style>
</head>
5.HTML <meta> 元素
元數(shù)據(jù)（metadata）是關(guān)于數(shù)據(jù)的信息。
<meta> 標(biāo)簽提供關(guān)于 HTML 文檔的元數(shù)據(jù)。元數(shù)據(jù)不會顯示在頁面上，但是對于機(jī)器是可讀的。
典型的情況是，meta 元素被用于規(guī)定頁面的描述、關(guān)鍵詞、文檔的作者、最后修改時間以及其他元數(shù)據(jù)。
<meta> 標(biāo)簽始終位于 head 元素中。
元數(shù)據(jù)可用于瀏覽器（如何顯示內(nèi)容或重新加載頁面），搜索引擎（關(guān)鍵詞），或其他 web 服務(wù)。
針對搜索引擎的關(guān)鍵詞
一些搜索引擎會利用 meta 元素的 name 和 content 屬性來索引您的頁面。
meta標(biāo)簽分為兩部分。HTTP的頭部信息（http-equiv）和頁面描述信息（name）。
http-equiv類似于HTTP的頭部協(xié)議，它回應(yīng)給瀏覽器一些有用的信息，以幫助正確和精確地顯示網(wǎng)頁內(nèi)容。
meta的常用用法：
設(shè)置文檔的編碼：
<meta charset=“utf-8” />
<meta http-equiv=“Content-Type” content=“text/html; charset=utf-8” />
定義頁面的關(guān)鍵詞：
<meta name=“keywords” content=“HTML, CSS, XML” />
定義頁面的描述：
<meta name=“description” content=“Free Web tutorials on HTML, CSS, XML” />
name 和 content 屬性的作用是描述頁面的內(nèi)容。
自動刷新或跳轉(zhuǎn)頁面：
<meta http-equiv=“refresh” content=“5”>
這個表示當(dāng)前頁面每5秒鐘刷一下，刷一下~
<meta http-equiv=“refresh” content=“2; url='/'”>
這個表示當(dāng)前頁面2秒后跳到首頁~
<meta http-equiv=“refresh” content=“5; url=‘http://www.qq.com/'”>
定義頁面過期時間：
<meta http-equiv=“expires” content=“Sunday 26 October 2008 01:00 GMT” />
content中的時間必須是GMT格式（格林威治時間）。
設(shè)置cookie的過期時間：
<meta http-equiv=“set-cookie” contect=“Mon,12 May 2001 00:20:00 GMT”>cookie設(shè)定，如果網(wǎng)頁過期，存盤的cookie將被刪除。需要注意的也是必須使用GMT時間格式。
強(qiáng)制頁面在當(dāng)前窗口中以獨(dú)立頁面顯示：
<meta http-equiv=“windows-Target” contect="_top">，可以防止自己的網(wǎng)頁被別人當(dāng)作一個frame頁調(diào)用。
強(qiáng)制頁面不用緩存：
<meta content=“no-cache,must-revalidate” http-equiv=“Cache-Control”>
<meta content=“no-cache” http-equiv=“pragma”>
<meta content=“0” http-equiv=“expires”>
手機(jī)瀏覽器兼容性設(shè)置：
<meta content=“telephone=no, address=no” name=“format-detection”>
<meta content=“width=device-width, initial-scale=1.0” name=“viewport”>
<meta name=“apple-mobile-web-app-capable” content=“yes” />
<meta name=“apple-mobile-web-app-status-bar-style” content=“black-translucent” />
6.HTML <script> 元素
<script> 標(biāo)簽用于定義客戶端腳本，比如 JavaScript。
我們會在稍后的章節(jié)講解 script 元素。
案例
table
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.td_padding{
padding-left: 2em;
height: 30px;
}
.right_padding{
padding-left: 2em;
}
body{
font-size: 13px;
}
</style>
</head>
<body style="background-color: rgb(238,238,238);">
<table width="900px" cellpadding="0" cellspacing="0" align="center">
<tr>
<!-- 左側(cè)內(nèi)容區(qū)域 -->
<td width="300px" valign="top">
<!-- 嵌套一個帶有圖片的表格，該表格兩行一列 -->
<table cellpadding="0" cellspacing="0">
<!-- 單元格放入圖片 -->
<tr><td height="213px">
<img src="image/pig.jpg" width="300px" align="left"/>
</td></tr>
<!-- 繼續(xù)嵌套一個表格 -->
<tr><td>
<table width="100%" style="background-color: rgb(27,37,64);color: white;">
<tr><td class="td_padding"><h3>個人信息</h3></td></tr>
<tr><td class="td_padding">姓 名：張三</td></tr>
<tr><td class="td_padding">性 別：男</td></tr>
<tr><td class="td_padding">年 齡：22歲</td></tr>
<tr><td class="td_padding">電 話：136456878952</td></tr>
<tr><td class="td_padding">郵 箱：service@qq.com</td></tr>
<tr><td class="td_padding">工作年齡：7年</td></tr>
<tr><td class="td_padding">現(xiàn)在城市：北京</td></tr>
</table>
</td></tr>
</table>
<br />
<table width="100%" style="background-color: rgb(27,37,64);color: white;">
<tr><td class="td_padding"><h3>求職意向</h3></td></tr>
<tr><td class="td_padding">職位名稱：建筑結(jié)構(gòu)工程師</td></tr>
<tr><td class="td_padding">期望月薪：20K-25K</td></tr>
</table>
<br />
<table width="100%" style="background-color: rgb(27,37,64);color: white;">
<tr><td class="td_padding"><h3>教育背景</h3></td></tr>
<tr><td class="td_padding">學(xué)校名稱：背景某大學(xué)</td></tr>
<tr><td class="td_padding">學(xué)歷學(xué)位：本科</td></tr>
<tr><td class="td_padding">所屬專業(yè)：土木工程</td></tr>
<tr><td class="td_padding">就讀時間：2017.09———2021.07</td></tr>
</table>
<br />
<table width="100%" style="background-color: rgb(27,37,64);color: white;">
<tr><td class="td_padding"><h3>證 書</h3></td></tr>
<tr><td class="td_padding">職位名稱：建筑結(jié)構(gòu)工程師</td></tr>
<tr><td class="td_padding">期望月薪：20K-25K</td></tr>
</table>
</td>
<!-- 右側(cè)內(nèi)容區(qū)域 -->
<td valign="top" style="padding-left: 16px;">
<table width="100%">
<tr><td height="213px" class="right_padding">
<h3>自我評價</h3>
<p>
1.相關(guān)系統(tǒng)分析員向用戶初步了解需求，然后用word列出要開發(fā)的系統(tǒng)的大功能模塊，每個大功能模塊有哪些小功能模塊，對于有些需求比較明確相關(guān)的界面時，在這一步里面可以初步定義好少量的界面。
2.系統(tǒng)分析員深入了解和分析需求，根據(jù)自己的經(jīng)驗(yàn)和需求用WORD或相關(guān)的工具再做出一份文檔系統(tǒng)的功能需求文檔。這次的文檔會清楚列出系統(tǒng)大致的大功能模塊，大功能模塊有哪些小功能模塊，并且還列出相關(guān)的界面和界面功能。
3.系統(tǒng)分析員向用戶再次確認(rèn)需求。
</p>
</td></tr>
</table>
<table width="100%" style="background-color: rgb(210,205,202);">
<tr><td class="right_padding" colspan="2">
<h3>工作經(jīng)歷</h3>
</td></tr>
<tr><td class="right_padding" width="50%">公司名稱：北京某建筑設(shè)計院</td>
<td class="right_padding">在職時間：2010.07——至今</td></tr>
<tr><td class="right_padding">職位名稱：結(jié)構(gòu)工程師</td>
<td class="right_padding">稅前月薪：15K-20K</td></tr>
<tr><td class="right_padding" colspan="2">工作描述：<br />
1.相關(guān)系統(tǒng)分析員向用戶初步了解需求，然后用word列出要開發(fā)的系統(tǒng)的大功能模塊，每個大功能模塊有哪些小功能模塊，對于有些需求比較明確相關(guān)的界面時，在這一步里面可以初步定義好少量的界面。<br />
2.系統(tǒng)分析員深入了解和分析需求，根據(jù)自己的經(jīng)驗(yàn)和需求用WORD或相關(guān)的工具再做出一份文檔系統(tǒng)的功能需求文檔。這次的文檔會清楚列出系統(tǒng)大致的大功能模塊，大功能模塊有哪些小功能模塊，并且還列出相關(guān)的界面和界面功能。
<br/></td>
</tr>
</table>
<table width="100%" style="background-color: rgb(210,205,202);">
<tr><td class="right_padding" colspan="2">
<h3>工作經(jīng)歷</h3>
</td></tr>
<tr><td class="right_padding" width="50%">公司名稱：北京某建筑設(shè)計院</td>
<td class="right_padding">在職時間：2010.07——至今</td></tr>
<tr><td class="right_padding">職位名稱：結(jié)構(gòu)工程師</td>
<td class="right_padding">稅前月薪：15K-20K</td></tr>
<tr><td class="right_padding" colspan="2">工作描述：<br />
1.相關(guān)系統(tǒng)分析員向用戶初步了解需求，然后用word列出要開發(fā)的系統(tǒng)的大功能模塊，每個大功能模塊有哪些小功能模塊，對于有些需求比較明確相關(guān)的界面時，在這一步里面可以初步定義好少量的界面。<br />
2.系統(tǒng)分析員深入了解和分析需求，根據(jù)自己的經(jīng)驗(yàn)和需求用WORD或相關(guān)的工具再做出一份文檔系統(tǒng)的功能需求文檔。這次的文檔會清楚列出系統(tǒng)大致的大功能模塊，大功能模塊有哪些小功能模塊，并且還列出相關(guān)的界面和界面功能。
<br/></td>
</tr>
</table>
<table width="100%" style="background-color: rgb(210,205,202);">
<tr><td class="right_padding" colspan="2">
<h3>工作經(jīng)歷</h3>
</td></tr>
<tr><td class="right_padding" width="50%">公司名稱：北京某建筑設(shè)計院</td>
<td class="right_padding">在職時間：2010.07——至今</td></tr>
<tr><td class="right_padding">職位名稱：結(jié)構(gòu)工程師</td>
<td class="right_padding">稅前月薪：15K-20K</td></tr>
<tr><td class="right_padding" colspan="2">工作描述：<br />
1.相關(guān)系統(tǒng)分析員向用戶初步了解需求，然后用word列出要開發(fā)的系統(tǒng)的大功能模塊，每個大功能模塊有哪些小功能模塊，對于有些需求比較明確相關(guān)的界面時，在這一步里面可以初步定義好少量的界面。<br />
2.系統(tǒng)分析員深入了解和分析需求，根據(jù)自己的經(jīng)驗(yàn)和需求用WORD或相關(guān)的工具再做出一份文檔系統(tǒng)的功能需求文檔。這次的文檔會清楚列出系統(tǒng)大致的大功能模塊，大功能模塊有哪些小功能模塊，并且還列出相關(guān)的界面和界面功能。
<br/></td>
</tr>
</table>
<table width="100%" style="background-color: rgb(210,205,202);">
<tr><td class="right_padding" colspan="2">
<h3>工作經(jīng)歷</h3>
</td></tr>
<tr><td class="right_padding" width="50%">公司名稱：北京某建筑設(shè)計院</td>
<td class="right_padding">在職時間：2010.07——至今</td></tr>
<tr><td class="right_padding">職位名稱：結(jié)構(gòu)工程師</td>
<td class="right_padding">稅前月薪：15K-20K</td></tr>
<tr><td class="right_padding" colspan="2">工作描述：<br />
1.相關(guān)系統(tǒng)分析員向用戶初步了解需求，然后用word列出要開發(fā)的系統(tǒng)的大功能模塊，每個大功能模塊有哪些小功能模塊，對于有些需求比較明確相關(guān)的界面時，在這一步里面可以初步定義好少量的界面。<br />
2.系統(tǒng)分析員深入了解和分析需求，根據(jù)自己的經(jīng)驗(yàn)和需求用WORD或相關(guān)的工具再做出一份文檔系統(tǒng)的功能需求文檔。這次的文檔會清楚列出系統(tǒng)大致的大功能模塊，大功能模塊有哪些小功能模塊，并且還列出相關(guān)的界面和界面功能。
<br/></td>
</tr>
</table>
<table width="100%" style="background-color: rgb(210,205,202);">
<tr><td class="right_padding" colspan="2">
<h3>工作經(jīng)歷</h3>
</td></tr>
<tr><td class="right_padding" width="50%">公司名稱：北京某建筑設(shè)計院</td>
<td class="right_padding">在職時間：2010.07——至今</td></tr>
<tr><td class="right_padding">職位名稱：結(jié)構(gòu)工程師</td>
<td class="right_padding">稅前月薪：15K-20K</td></tr>
<tr><td class="right_padding" colspan="2">工作描述：<br />
1.相關(guān)系統(tǒng)分析員向用戶初步了解需求，然后用word列出要開發(fā)的系統(tǒng)的大功能模塊，每個大功能模塊有哪些小功能模塊，對于有些需求比較明確相關(guān)的界面時，在這一步里面可以初步定義好少量的界面。<br />
2.系統(tǒng)分析員深入了解和分析需求，根據(jù)自己的經(jīng)驗(yàn)和需求用WORD或相關(guān)的工具再做出一份文檔系統(tǒng)的功能需求文檔。這次的文檔會清楚列出系統(tǒng)大致的大功能模塊，大功能模塊有哪些小功能模塊，并且還列出相關(guān)的界面和界面功能。
<br/></td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
register
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>游戲注冊</title>
<style type="text/css">
/*
類選擇器：使用圓點(diǎn)來定義，定義一個類名
*/
.title{
font-size: 23px;
}
.small-font{
font-size: 12px;
color:darkgrey;
}
.td-height{
height: 65px;
}
.label-font{
font-size: 14px;
}
label{
color:darkgray;
}
input{
height: 30px;
border: 1px solid rgb(218,218,218);
width: 350px;
margin-left: 3px;
border-radius: 3px;
padding: 5px 15px;
font-size: 14px;
color: gainsboro;
}
/**
* 屬性選擇器
*/
.btn{
margin-left: 20px;
color: white;
width: 146px;
height: 42px;
border: 1px solid rgb(56,126,232);
background-color: rgb(56,126,232);
}
/**
* position屬性表示對當(dāng)前的這個標(biāo)簽在瀏覽器中的位置，進(jìn)行修飾，
*/
.potion-top{
position: relative;
top: -4px;
}
</style>
</head>
<body>
<table align="center" width="1190px" style="margin-top: 100px;">
<tr><td colspan="4" class="title">游戲賬號注冊說明</td></tr>
<tr><td colspan="4" style="height: 50px;"><hr width="100%" color="gainsboro"/></td></tr>
<tr><td colspan="4" class="small-font" style="height: 40px;">為響應(yīng)國家文化部實(shí)名認(rèn)證號召，自4月1日起用戶申請注冊網(wǎng)易云游戲中心務(wù)必請?zhí)顚懻鎸?shí)個人信息，以備網(wǎng)易云游戲中心配合國家相關(guān)部門核查身份信息。網(wǎng)易云游戲中心將會保證您的個人信息將不會泄露</td></tr>
<tr><td width="260px" class="td-height"></td>
<td width="220px" align="right" class="label-font"><label>*</label> 請輸入你的手機(jī)號</td>
<td width="450px"><input type="text" id="telphone" name="telphone" placeholder="11位手機(jī)號" /></td>
<td width="260px"></td></tr>
<tr><td class="td-height"></td>
<td align="right" class="label-font"><label>*</label> 請輸入收到的短信驗(yàn)證碼</td>
<td><input type="text" id="code" name="code" placeholder="收到的短信驗(yàn)證碼" style="width:180px;" />
<input type="button" class="btn" value="獲取驗(yàn)證碼" />
</td>
<td></td></tr>
<tr><td width="260px" class="td-height"></td>
<td width="220px" align="right" class="label-font"><label>*</label> 請輸入你的昵稱</td>
<td width="450px"><input type="text" id="nikeName" name="nikeName" placeholder="中英文,長度不超過12個字符" /></td>
<td width="260px"></td></tr>
<tr><td width="260px" class="td-height"></td>
<td width="220px" align="right" class="label-font"><label>*</label> 請輸入你的密碼</td>
<td width="450px"><input type="password" id="password" name="password" placeholder="中英文數(shù)字字符,區(qū)分大小寫" /></td>
<td width="260px"></td></tr>
<tr><td width="260px" class="td-height"></td>
<td width="220px" align="right" class="label-font"><label>*</label> 請確認(rèn)密碼</td>
<td width="450px"><input type="password" id="checkPass" name="checkPass" placeholder="再次輸入你的密碼" /></td>
<td width="260px"></td></tr>
<tr><td class="td-height"></td>
<td align="right" class="label-font"><label>*</label> 請輸入你的身份證號</td>
<td><input type="text" id="cardId" name="cardId" placeholder="18位身份證號碼" /></td>
<td></td></tr>
<tr><td class="td-height"></td>
<td align="right" class="label-font"><label>*</label> 請輸入你的真實(shí)姓名</td>
<td><input type="text" id="realName" name="realName" placeholder="你的真實(shí)姓名" /></td>
<td></td></tr>
<tr><td class="td-height"></td>
<td align="right" class="label-font"></td>
<td style="font-size: 12px;">
<input type="checkbox" id="xieOne" name="xieOne" style="width: 15px;height: 15px;"/>
<label class="potion-top">我同意《用戶協(xié)議》</label> <br/>
<input type="checkbox" id="xieOne" name="xieOne" style="width: 15px;height: 15px;"/>
<label class="potion-top">我同意《另外一個用戶協(xié)議》</label> <br/>
</td>
<td></td></tr>
<tr><td class="td-height"></td>
<td align="right" class="label-font"></td>
<td style="font-size: 12px;"><input type="button" value="注冊" class="btn" style="margin-left: 0px;width: 80px;" />
</td>
<td></td></tr>
</table>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</body>
</html>
學(xué)生信息表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
table {
border-collapse: collapse;
}
</style>
<body>
<!-- 不需要寫逗號 -->
<table border="1" width="400" height="400">
<!-- 表格大標(biāo)題 -->
<caption><h3>優(yōu)秀學(xué)生信息表格</h3></caption>
<!-- 表格頭部 -->
<thead>
<tr>
<!-- 使用th標(biāo)簽 -->
<th>年級</th>
<th>姓名</th>
<th>學(xué)號</th>
<th>班級</th>
</tr>
</thead>
<!-- 表格主體 -->
<tbody>
<tr>
<td rowspan="2">高三</td>
<td>張三</td>
<td>110</td>
<td>三年二班</td>
</tr>
<tr>
<td>趙四</td>
<td>120</td>
<td>三年三班</td>
</tr>
</tbody>
<!-- 表格尾部 -->
<tfoot>
<tr>
<td>評語</td>
<td colspan="3">你們都很優(yōu)秀</td>
</tr>
</tfoot>
</table>
</body>
</html>
會員注冊表單
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form >
<h1>
青春不常在，抓緊談戀愛
</h1>
<hr>
昵稱：<input type="text" placeholder="請輸入昵稱"><br><br>
性別：<input type="radio" name="sex">男
<input type="radio" name="sex">女
<br><br>
所在城市：<select >
<option value="">太原</option>
<option value="">北京</option>
<option value="">上海</option>
<option value="">深圳</option>
</select>
<br><br>
婚姻狀況：<input type="radio" name="hunyin">已婚
<input type="radio" name="hunyin">未婚
<input type="radio" name="hunyin">保密
<br><br>
喜歡的類型：<input type="checkbox">可愛
<input type="checkbox" checked>御姐
<input type="checkbox">性感
<input type="checkbox">蘿莉
<input type="checkbox">大叔
<br><br>
個人介紹：
<br><br>
<textarea name="" id="" cols="30" rows="10"></textarea>
<br><br>
<h3>我承諾</h3>
<ul>
<li>年滿十八</li>
<li>態(tài)度嚴(yán)肅</li>
<li>認(rèn)真負(fù)責(zé)</li>
</ul>
<input type="checkbox">我同意以上條款
<br><br>
<button type="submit">免費(fèi)注冊</button>
<button type="reset">重置</button>
</form>
</body>
</html>
新聞網(wǎng)頁
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 800px;
margin: 0 auto;
}
h1 {
text-align: center;
}
.one {
margin: 0 auto;
text-align: center;
}
span:nth-child(1) {
color: grey;
}
span:nth-child(2) {
font-weight: bold;
color: skyblue;
}
a {
text-decoration: none;
}
p {
text-indent: 2em;
}
</style>
</head>
<body>
<div>
<h1>《自然》評選改變科學(xué)的10個計算機(jī)代碼項(xiàng)目</h1>
<hr>
<p class="one">
<span>2077年01月28日14:58</span>
<span> 新浪科技</span>
<a href="#">收藏本文</a>
</p>
<p>2019年，事件視界望遠(yuǎn)鏡團(tuán)隊讓世界首次看到了黑洞的樣子。不過，研究人員公布的這張發(fā)光環(huán)形物體的圖像并不是傳統(tǒng)的圖片，而是經(jīng)過計算獲得的。利用位于美國、墨西哥、智利、西班牙和南極地區(qū)的射電望遠(yuǎn)鏡所得到的數(shù)據(jù)，研究人員進(jìn)行了數(shù)學(xué)轉(zhuǎn)換，最終合成了這張標(biāo)志性的圖片。研究團(tuán)隊還發(fā)布了實(shí)現(xiàn)這一壯舉所用的編程代碼，并撰文記錄這一發(fā)現(xiàn)，其他研究者也可以在此基礎(chǔ)上進(jìn)一步加以分析。</p>
<p>2019年，事件視界望遠(yuǎn)鏡團(tuán)隊讓世界首次看到了黑洞的樣子。不過，研究人員公布的這張發(fā)光環(huán)形物體的圖像并不是傳統(tǒng)的圖片，而是經(jīng)過計算獲得的。利用位于美國、墨西哥、智利、西班牙和南極地區(qū)的射電望遠(yuǎn)鏡所得到的數(shù)據(jù)，研究人員進(jìn)行了數(shù)學(xué)轉(zhuǎn)換，最終合成了這張標(biāo)志性的圖片。研究團(tuán)隊還發(fā)布了實(shí)現(xiàn)這一壯舉所用的編程代碼，并撰文記錄這一發(fā)現(xiàn)，其他研究者也可以在此基礎(chǔ)上進(jìn)一步加以分析。</p>
<p>2019年，事件視界望遠(yuǎn)鏡團(tuán)隊讓世界首次看到了黑洞的樣子。不過，研究人員公布的這張發(fā)光環(huán)形物體的圖像并不是傳統(tǒng)的圖片，而是經(jīng)過計算獲得的。利用位于美國、墨西哥、智利、西班牙和南極地區(qū)的射電望遠(yuǎn)鏡所得到的數(shù)據(jù)，研究人員進(jìn)行了數(shù)學(xué)轉(zhuǎn)換，最終合成了這張標(biāo)志性的圖片。研究團(tuán)隊還發(fā)布了實(shí)現(xiàn)這一壯舉所用的編程代碼，并撰文記錄這一發(fā)現(xiàn)，其他研究者也可以在此基礎(chǔ)上進(jìn)一步加以分析。</p>
<p>2019年，事件視界望遠(yuǎn)鏡團(tuán)隊讓世界首次看到了黑洞的樣子。不過，研究人員公布的這張發(fā)光環(huán)形物體的圖像并不是傳統(tǒng)的圖片，而是經(jīng)過計算獲得的。利用位于美國、墨西哥、智利、西班牙和南極地區(qū)的射電望遠(yuǎn)鏡所得到的數(shù)據(jù)，研究人員進(jìn)行了數(shù)學(xué)轉(zhuǎn)換，最終合成了這張標(biāo)志性的圖片。研究團(tuán)隊還發(fā)布了實(shí)現(xiàn)這一壯舉所用的編程代碼，并撰文記錄這一發(fā)現(xiàn)，其他研究者也可以在此基礎(chǔ)上進(jìn)一步加以分析。</p>
<p>2019年，事件視界望遠(yuǎn)鏡團(tuán)隊讓世界首次看到了黑洞的樣子。不過，研究人員公布的這張發(fā)光環(huán)形物體的圖像并不是傳統(tǒng)的圖片，而是經(jīng)過計算獲得的。利用位于美國、墨西哥、智利、西班牙和南極地區(qū)的射電望遠(yuǎn)鏡所得到的數(shù)據(jù)，研究人員進(jìn)行了數(shù)學(xué)轉(zhuǎn)換，最終合成了這張標(biāo)志性的圖片。研究團(tuán)隊還發(fā)布了實(shí)現(xiàn)這一壯舉所用的編程代碼，并撰文記錄這一發(fā)現(xiàn)，其他研究者也可以在此基礎(chǔ)上進(jìn)一步加以分析。</p>
</div>
</body>
</html>
卡片居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
background-color: #F0F0F0;
}
div {
width: 300px;
height: 400px;
margin: 0 auto;
text-align: center;
}
div img {
width: 200px;
}
.wanju {
font-size: 12px;
color: gray;
}
.jiage {
color: #FF5809;
}
</style>
</head>
<body>
<div>
<img src="./images/car.jpg" alt="">
<br>
<span>九號平衡車</span>
<p class="wanju">成年人玩具</p>
<p class="jiage"> 1999元</p>
</div>
</body>
</html>
到此這篇關(guān)于HTML相關(guān)知識點(diǎn)總結(jié)的文章就介紹到這了,更多相關(guān)HTML總結(jié)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
一個自動居中的導(dǎo)航條實(shí)例與相關(guān)問題 DIV+CSS
一個自動居中的導(dǎo)航條實(shí)例與相關(guān)問題 DIV+CSS...2006-09-09
漂亮的表格...2006-06-06
小三角的做法與使用...2006-11-11
表格隔行換色 css expression...2006-07-07
這篇文章主要介紹了webpack高級配置與優(yōu)化,其中包括了webpack打包多頁面，webpack跨域問題等相關(guān)內(nèi)容2020-02-02
布局遇到的問題 非常不錯的見解...2006-09-09
CSS經(jīng)典實(shí)用技巧18招...2006-09-09
css white-space:nowrap屬性用法（可以強(qiáng)制文字不換行輸出）
css強(qiáng)制文字不換行，可給指定的容器增加white-space:nowrap即，下面把CSS示例寫給大家,很簡單2013-11-11
利用相對定位及偏移量做精美輸入界面...2006-09-09
圖片翻轉(zhuǎn)菜單技術(shù)研究...2006-09-09