国产成人精品无码青草_亚洲国产美女精品久久久久∴_欧美人与鲁交大毛片免费_国产果冻豆传媒麻婆精东

15158846557 在線咨詢 在線咨詢
15158846557 在線咨詢
所在位置: 首頁 > 營銷資訊 > 網(wǎng)站運(yùn)營 > HTML零基礎(chǔ)入門教程(詳細(xì))

HTML零基礎(chǔ)入門教程(詳細(xì))

時(shí)間:2023-08-29 16:42:01 | 來源:網(wǎng)站運(yùn)營

時(shí)間:2023-08-29 16:42:01 來源:網(wǎng)站運(yùn)營

HTML零基礎(chǔ)入門教程(詳細(xì)):

1 什么是HTML

HTML 是用來描述網(wǎng)頁的一種語言。HTML 是一種在 Web 上使用的通用標(biāo)記語言。HTML 允許你格式化文本,添加圖片,創(chuàng)建鏈接、輸入表單、框架和表格等等,并可將之存為文本文件,瀏覽器即可讀取和顯示。

2 入門實(shí)例

新建一個(gè)test.html文件,內(nèi)容如下

<!DOCTYPE html><html><head><meta charset="utf-8"><title>ZONGXP</title></head><body> <h1>我的第一個(gè)標(biāo)題</h1><p>我的第一個(gè)段落。</p> </body></html>其中:

保存后運(yùn)行,即可在瀏覽器中打開如下界面

3 各部分詳解

3.1 標(biāo)題

HTML 標(biāo)題(Heading)是通過<h1> - <h6> 標(biāo)簽來定義的.

<!DOCTYPE html><html><head><meta charset="utf-8"><title>ZONGXP</title></head><body> <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></html>

3.2 段落

HTML 段落是通過標(biāo)簽 <p> 來定義的

<!DOCTYPE html><html><head><meta charset="utf-8"><title>ZONGXP</title></head><body> <p>這是一個(gè)段落。</p><p>這是一個(gè)段落。</p><p>這是一個(gè)段落。</p> </body></html>

3.3 鏈接

HTML 鏈接是通過標(biāo)簽 <a> 來定義的

<!DOCTYPE html><html><head><meta charset="utf-8"><title>ZONGXP</title></head><body> <a href="https://zhuanlan.zhihu.com/p/524452867/edit">這是一個(gè)鏈接使用了 href 屬性</a> </body></html>

3.4 圖像

HTML 圖像是通過標(biāo)簽 <img> 來定義的。注意: 圖像的名稱和尺寸是以屬性的形式提供的。

<!DOCTYPE html><html><head><meta charset="utf-8"><title>ZONGXP</title></head><body> <img src="zongxp.jpg" width="640" height="640" /> </body></html>

3.5 表格

表格由 <table> 標(biāo)簽來定義。每個(gè)表格均有若干行(由 <tr> 標(biāo)簽定義),每行被分割為若干單元格(由 <td> 標(biāo)簽定義)。字母 td 指表格數(shù)據(jù)(table data),即數(shù)據(jù)單元格的內(nèi)容。數(shù)據(jù)單元格可以包含文本、圖片、列表、段落、表單、水平線、表格等等。表格的表頭使用 <th> 標(biāo)簽進(jìn)行定義。如果不定義邊框?qū)傩裕砀駥⒉伙@示邊框。有時(shí)這很有用,但是大多數(shù)時(shí)候,我們希望顯示邊框。使用邊框?qū)傩詠盹@示一個(gè)帶有邊框的表格:

<table border="1"> <tr> <th>Header 1</th> <th>Header 2</th> </tr> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr></table>

4 速查列表

4.1 基本文檔

<!DOCTYPE html><html><head><title>文檔標(biāo)題</title></head><body>可見文本...</body></html>

4.2 基本標(biāo)簽

<h1>最大的標(biāo)題</h1><h2> . . . </h2><h3> . . . </h3><h4> . . . </h4><h5> . . . </h5><h6>最小的標(biāo)題</h6> <p>這是一個(gè)段落。</p><br> (換行)<hr> (水平線)<!-- 這是注釋 -->

4.3 文本格式化

<b>粗體文本</b><code>計(jì)算機(jī)代碼</code><em>強(qiáng)調(diào)文本</em><i>斜體文本</i><kbd>鍵盤輸入</kbd> <pre>預(yù)格式化文本</pre><small>更小的文本</small><strong>重要的文本</strong><abbr> (縮寫)<address> (聯(lián)系信息)<bdo> (文字方向)<blockquote> (從另一個(gè)源引用的部分)<cite> (工作的名稱)<del> (刪除的文本)<ins> (插入的文本)<sub> (下標(biāo)文本)<sup> (上標(biāo)文本)

4.4 鏈接

普通的鏈接:<a href="http://www.example.com/">鏈接文本</a>圖像鏈接: <a href="http://www.example.com/"><img src="URL" alt="替換文本"></a>郵件鏈接: <a href="mailto:webmaster@example.com">發(fā)送e-mail</a>書簽:

<a id="tips">提示部分</a><a href="#tips">跳到提示部分</a>

4.5 圖片

<img src="URL" alt="替換文本" height="42" width="42">

4.6 樣式/區(qū)塊

<style type="text/css">h1 {color:red;}p {color:blue;}</style><div>文檔中的塊級元素</div><span>文檔中的內(nèi)聯(lián)元素</span>

4.7 無序列表

<ul> <li>項(xiàng)目</li> <li>項(xiàng)目</li></ul>

4.8 有序列表

<ol> <li>第一項(xiàng)</li> <li>第二項(xiàng)</li></ol>

4.9 定義列表

<dl> <dt>項(xiàng)目 1</dt> <dd>描述項(xiàng)目 1</dd> <dt>項(xiàng)目 2</dt> <dd>描述項(xiàng)目 2</dd></dl>

4.10 表格

<table border="1"> <tr> <th>表格標(biāo)題</th> <th>表格標(biāo)題</th> </tr> <tr> <td>表格數(shù)據(jù)</td> <td>表格數(shù)據(jù)</td> </tr></table>

4.11 框架

<iframe src="demo_iframe.htm"></iframe>

4.12 表單

<form action="demo_form.php" method="post/get"><input type="text" name="email" size="40" maxlength="50"><input type="password"><input type="checkbox" checked="checked"><input type="radio" checked="checked"><input type="submit" value="Send"><input type="reset"><input type="hidden"><select><option>蘋果</option><option selected="selected">香蕉</option><option>櫻桃</option></select><textarea name="comment" rows="60" cols="20"></textarea></form>

4.13 實(shí)體

&lt; 等同于 <&gt; 等同于 >&#169; 等同于 ?————————————————

在自學(xué)的伙伴也可以加入我組建的零基礎(chǔ)前端學(xué)習(xí)營,我會(huì)督促大家打卡學(xué)習(xí),遇到問題可以一起探討解決;還整理了一些學(xué)習(xí)資料,免費(fèi)分享給大家學(xué)習(xí)使用;平時(shí)還會(huì)組織小項(xiàng)目,大家可以練習(xí)鞏固基礎(chǔ)。

關(guān)鍵詞:教程,詳細(xì),入門,基礎(chǔ)

74
73
25
news

版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。

為了最佳展示效果,本站不支持IE9及以下版本的瀏覽器,建議您使用谷歌Chrome瀏覽器。 點(diǎn)擊下載Chrome瀏覽器
關(guān)閉