一篇文章了解HTML5
市面上的html5教程冗長(zhǎng)且難于理解，實(shí)際上html5是一門非常容易入門的語(yǔ)言向叉，本篇文章讓你初步了解html5锥腻，進(jìn)入建立網(wǎng)站的大門
認(rèn)識(shí)基本結(jié)構(gòu)
<!DOCTYPE html>
<!-- 這個(gè)是頭文件 -->
<html>
<!-- 這個(gè)是html的標(biāo)志 -->
<head>
<!-- 這兒填你需要引入的文件，以后再講 -->
<meta charset="utf-8">
<!-- 這個(gè)理解為引入的字符 -->
<title></title>
<!-- 兩個(gè)title之間可以填入網(wǎng)站的名字 -->
</head>
<body>
<!-- body母谎，顧名思義瘦黑，網(wǎng)頁(yè)的主體 -->
<h1>認(rèn)識(shí)h5基本結(jié)構(gòu)</h1>
<p>兩個(gè)p之間可以插入文字，也就是段落</p>
</body>
<!-- 結(jié)束網(wǎng)頁(yè)內(nèi)容 -->
</html>
處理文字
- HTML使用
<p>標(biāo)簽定義段落奇唤，具體使用方法如下：
<p>This is a paragraph.</p>
- 如果你想高亮段落中的某一段文字供璧，可以使用
<mark>標(biāo)簽
<mark>我是被高亮的部分</mark>
- 如果想加粗某一段文字，可以使用
<b>標(biāo)簽
<b>Bold Text Here</b>
- 如果想實(shí)現(xiàn)某一段文字的傾斜冻记，可以使用
<i>或者<em>標(biāo)簽
<i>Italicized Text Here</i>
<em>Italicized Text Here</em>
- 如果想給文字添加下劃線，可以使用
<u>標(biāo)簽
<u>mispelled</u>
- 如果想標(biāo)記某段文字讓他顯示省略形式来惧，可以使用
<abbr>
<abbr title="Hypertext Markup Language">HTML</abbr>
- 如果要標(biāo)記某段文字被刪除冗栗，可以使用
<del>
<del>Deleted Text</del>
- 如果要插入某段文字，使用
<ins>
<ins>New Text</ins>
- 文字的上標(biāo)和下標(biāo)
<sup>superscript here</sup>
<!-- 這是上標(biāo) -->
<sub>subscript here</sub>
<!-- 這是下標(biāo) -->
處理鏈接
- HTML鏈接使用
<a>標(biāo)簽定義你想定義的東西，東西鏈接地址在href屬性中進(jìn)行指定隅居。
- 比如你想實(shí)現(xiàn)點(diǎn)擊某一段文字钠至，打開(kāi)網(wǎng)頁(yè)的效果，可以敲入如下代碼
<a href="https://我的網(wǎng)站地址">我想去的網(wǎng)站</a>
上文的鏈接改成你喜歡的網(wǎng)站鏈接胎源，即可實(shí)現(xiàn)上文所說(shuō)的效果棉钧。
如果要鏈接另外一個(gè)標(biāo)題的話，可以寫下如下的代碼
<h2 id="Topic1">First topic</h2>
<p>Content about the first topic</p>
<h2 id="Topic2">Second topic</h2>
<p>Content about the second topic</p>
<h1>Table of Contents</h1>
<a href='#Topic1'>Click to jump to the First Topic</a>
<a href='#Topic2'>Click to jump to the Second Topic</a>
這段話的意思就是點(diǎn)擊jump to first/second Topic 可以跳轉(zhuǎn)到第一/二個(gè)標(biāo)題肋联。
當(dāng)然活翩，鏈接的內(nèi)容還可以是電話幌蚊，例如下面這行代碼：
<a href="tel:1234567890">Call us</a>
當(dāng)有用戶點(diǎn)擊上面這行代碼的時(shí)候，他的設(shè)備會(huì)為他自動(dòng)跳轉(zhuǎn)電話界面
- 如果想在一個(gè)新的窗口打開(kāi)跳轉(zhuǎn)的網(wǎng)頁(yè)的話佑钾，可以這么處理
<a href="example.com" target="_blank">Text Here</a>
這樣就能夠在一個(gè)新窗口里面跳轉(zhuǎn)了
也可以通過(guò)href來(lái)鏈接javascript(并不建議這樣做)
<a href="javascript:myFunction();">Run Code</a>
<a href="#" onclick="myFunction(); return false;">Run Code</a>
- 如果還沒(méi)有決定好要鏈接什么，可以用
#來(lái)代替要鏈接的內(nèi)容
<a href="#!" onclick="myFunction();">Run Code</a>
- 鏈接到郵箱地址
<a href="郵箱地址:example@example.com">Send email</a>
<a href="郵箱地址：example@example.com?cc=example2@example.com&bcc=example2@example.com">Send email</a>
- 如果要在郵箱中省去再打一遍郵件內(nèi)容和主題的過(guò)程烦粒，可以加入如下代碼
<a href="郵件地址:example@example.com?subject=主題&body=內(nèi)容">Send email</a>
處理列表
在網(wǎng)頁(yè)中肯定會(huì)有用到列表的時(shí)候休溶，那么用h5該怎么去表示呢？
- 有條理的列表
<ol>
<li>Item</li>
<li>Another Item</li> <li>Yet Another Item</li>
</ol>
這個(gè)在網(wǎng)頁(yè)中的顯示效果大致如下
- Item
- Another Item
- Yet Another Item
- 如果想改成不是1開(kāi)頭的列表的話扰她，在開(kāi)頭加入如下的代碼
<ol start="你希望列表開(kāi)始的數(shù)字">
- 無(wú)序列表
<ul>
<li>Item</li>
<li>Another Item</li> <li>Yet Another Item</li>
</ul>
- 縮進(jìn)列表
<ul>
<li>item 1</li> <li>item 2
<ul>
<li>sub-item 2.1</li> <li>sub-item 2.2</li>
</ul> </li>
<li>item 3</li> </ul>
表格
在網(wǎng)頁(yè)中也有需要用到表格的地方兽掰，畢竟你總不能直接截個(gè)Excel之類的軟件的圖放在網(wǎng)頁(yè)上吧
- 簡(jiǎn)單表格
<table> <tr>
<th>Heading 1/Column 1</th>
<th>Heading 2/Column 2</th> </tr>
<tr>
<td>Row 1 Data Column 1</td> <td>Row 1 Data Column 2</td>
</tr> <tr>
<td>Row 2 Data Column 1</td>
<td>Row 2 Data Column 2</td> </tr>
</table>
- 這種簡(jiǎn)單的表格看上去并不美觀，我們可以給他增加行數(shù)和列數(shù)
<table> <tr>
<td>row 1 col 1</td> <td>row 1 col 2</td> <td>row 1 col 3</td>
</tr> <tr>
<td colspan="3">This second row spans all three columns</td> </tr>
<tr>
<td rowspan="2">This cell spans two rows</td> <td>row 3 col 2</td>
<td>row 3 col 3</td>
</tr> <tr>
<td>row 4 col 2</td>
<td>row 4 col 3</td> </tr>
</table>
- 如果你覺(jué)得還是不夠詳細(xì)徒役，并想把列祖組合在一起的話孽尽，可以用下面的代碼
<table>
<colgroup span="2"></colgroup> <colgroup span="2"></colgroup> ...
</table>
當(dāng)然我覺(jué)得h5自帶的表格樣式其實(shí)挺不好用的，表格相關(guān)的我們到了css再說(shuō)
插入圖片和視頻
- 插入圖片
<img src="圖片地址及名字" alt="圖片名字"style="width:寬度數(shù)字px;height:高度數(shù)字px;>
- 插入視頻
<video width="320" height="240" controls>
<!-- 高度和寬度 -->
<source src="視頻名字" type="video/mp4">
</video>
關(guān)于html5最最最基本的東西基本就是這些廉涕，了解后可以輕松編寫一些簡(jiǎn)單的網(wǎng)頁(yè)泻云，但是如果想要做好一個(gè)網(wǎng)站，還是需要css和js的幫助.
