整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
<html>
<head>
標(biāo)題 ---此處放置標(biāo)題、導(dǎo)航、登錄等內(nèi)容
<!此處放置標(biāo)題、導(dǎo)航、登錄等內(nèi)容--->
</head>
<body>
<!此處放置頁面主要內(nèi)容--->
<! ：空格
<: 小于號(hào)
>: 大于號(hào)
": 引號(hào)--->
<p>第一段 世界大勢(shì)，合久必分，分久必合。</p>
<hr/> <!表示單行橫線顯示--->
<br/> <!表示換行--->
<h1> hello world, html is easy</h1>
<h2> hello world, html is easy</h2>
<h3> hello world, html is easy</h3>
<h4> hello world, html is easy</h4>
<h5> hello world, html is easy</h5>
<h6> hello world, html is easy</h6>
<p>普通字體</p>
<b>粗體</b> <i>斜體</i> <del>本文字已被刪除，請(qǐng)忽略</del>
<p> hello world</p> <!段落標(biāo)記--->
<a href="http://www.baidu.com" target="_self"> 點(diǎn)擊進(jìn)入百度</a>
<br/>
<img src="http://mysite.com/mypic.png" alt="網(wǎng)站作者照片">
<h3> 普通無邊框表格：</h3>
<table>
<tr>
<td>row 1 cell 1</td> <td>row 1 cell 2</td> <td>row 1 cell 3</td>
</tr>
<tr>
<td>row 2 cell 1</td> <td>row 2 cell 2</td> <td>row 2 cell 3</td>
</tr>
</table>
<h3>帶表頭，有邊框，有跨列單元:</h3>
<table border="1">
<tr>
<th>head1</th> <th>head2</th> <th>head3</th>
</tr>
<tr>
<td>row 1 cell 1</td> <td>row 1 cell 2</td> <td>row 1 cell 3</td>
</tr>
<tr>
<td>row 2 cell 1</td> <td>row 2 cell 2</td> <td>row 2 cell 3</td>
</tr>
</table>
<h3>三種列表的表達(dá)方式:</h3>
<table cellpadding="2" cellspacing="2">
<tr>
<td>
<ul><li>python</li> <li>c++</li> <li>java</li> <li>golang</li></ul>
</td>
<td>
<ol><li>python</li> <li>c++</li> <li>java</li> <li>golang</li></ol>
</td>
</tr>
</table>
<dl>
<dt>CPU</dt><dd>處理器</dd>
<dt>MEM</dt><dd>內(nèi)存</dd>
</dl>
<body bgcolor="#FF0000">
<body bgcolor="RGB(255,0,0)">
<body bgcolor="RED">
<p>視頻</p>
<object
classid="clsid:d27sfsfstqwetsasasdfsdfs"
codebase="http://fpdownload.macromedia.com/pub/shckwave/cabs/flash/swflash.cab">
<embed src="flashfile.swf" width="300" height="200"></embed>
</object>
<br/>
<p>音頻</p>
<audio controls="crontrols">
<source src="sample_song.mp3" type="audio/mp3" />
</audio>
<br/>
<p>視頻</p>
<video controls="controls"/>
<source src="sample_video.mp4" type="video/mp4">
</video>
<p>html表單---文本輸入</p>
<table>
<tr>
<td>用戶名：</td>
<td><input type="text" name="name"></td>
<td>密碼：</td>
<td><input type="password" name="pass"></td>
</tr>
<tr>
<tdcolspan="4"> <textarea name="comment" rows="5" cols="60"> </textarea></td>
</tr>
</table>
<table>
<tr>
<td>性別：</td>
<td>用戶名：</td>
<td>男性<input type="radio" checked='checked' name="sex" value="male" /></td>
<td>女性<input type="radio" checked='checked' value="female" /></td>
</tr>
<tr>
<tdcolspan="4"> <textarea name="comment" rows="5" cols="60"> </textarea></td>
</tr>
</table>
</body>
</html>
大家在瀏覽網(wǎng)頁的時(shí)候，是否思考過這樣一個(gè)問題：怎樣才能制作出一個(gè)網(wǎng)頁呢？制作出一個(gè)網(wǎng)頁是很簡(jiǎn)單的，只要知道什么是HTML并掌握HTML的基礎(chǔ)知識(shí)就可以制作出一個(gè)簡(jiǎn)單的網(wǎng)頁，今天我就為講解HTML的入門及結(jié)構(gòu)組成。
一、什么是HTML?
1、在我們開始學(xué)習(xí)HTML之前我們需要知道什么是HTML？
HTML的全稱為Hyper Text Markup Language，中文名稱為超文本標(biāo)記語言，閱覽方式為網(wǎng)頁瀏覽器，同時(shí)HTML也被稱為網(wǎng)頁。
2、一個(gè)簡(jiǎn)單的HTML文檔
二、HTML編輯器
我們?cè)诳梢允褂肨XT文本文檔或者專業(yè)的HTML編輯器來編輯HTML。
1、記事本
① 創(chuàng)建一個(gè)TXT文本
② 輸入HTML代碼
③ 點(diǎn)擊文件—另存為—輸入名稱+“html”的后綴名即可得到你的第一個(gè)HTML文件。
④ 然后雙擊這個(gè)文件運(yùn)行。
運(yùn)行結(jié)果
2、專業(yè)編輯器
① Sublime Text
② HBuilder
③ Adobe Dreamweaver
④ CoffeeCup HTML Editor
這其中我比較推薦HBuilder這款編輯器，界面簡(jiǎn)單，編輯起來很快。
三、HTML的組成部分
在上面的案例中我們可以看到HTML是由頭部（head）和身體（body）所組成的。
1、頭部（head）
通常包含標(biāo)題（title），也就是一個(gè)網(wǎng)頁的名稱
網(wǎng)頁標(biāo)題
2、身體（body）
body的部分是整個(gè)網(wǎng)頁的重要內(nèi)容部分，讓人一眼就瀏覽到這個(gè)網(wǎng)頁的內(nèi)容，可以插入文本、圖片、多媒體等內(nèi)容。
四、HTML元素
l HTML元素是指以開始標(biāo)簽起始，以結(jié)束標(biāo)簽終止的元素：元素內(nèi)容即為開始標(biāo)簽與結(jié)束標(biāo)簽之間的內(nèi)容。
l <head></head>、<body></body>、<p></p>、<h1></h2>等這些都是HTML元素，在上面的案例中就有六個(gè)元素。
l 也有部分元素只有開始標(biāo)簽，例如<br>,以開始標(biāo)簽的結(jié)束而結(jié)束。
五、HTML的屬性
l 一般來說HTML的屬性就是HTML元素的屬性，屬性可以在元素中添加附加信息。
l 屬性總是以名稱/值對(duì)的形式出現(xiàn)，比如：name=”value”。
l 屬性一般描述于開始標(biāo)簽。
l style中會(huì)有更多的屬性。
六、HTML格式化
HTML可定義很多供格式化輸出的元素，比如粗體字和斜體字。
HTML文本格式化標(biāo)簽
標(biāo)簽 | 描述 |
<b> | 定義粗體文本 |
<em> | 定義著重文字 |
<i> | 定義斜體字 |
<small> | 定義小號(hào)字 |
<strong> | 定義加重語氣 |
<sub> | 定義下標(biāo)字 |
<sup> | 定義上標(biāo)字 |
<ins> | 定義插入字 |
<del> | 定義刪除字 |
運(yùn)行結(jié)果示意圖
HTML“計(jì)算機(jī)輸出”標(biāo)簽
標(biāo)簽 | 描述 |
<code> | 定義計(jì)算機(jī)代碼 |
<kdd> | 定義鍵盤碼 |
<samp> | 定義計(jì)算機(jī)代碼樣本 |
<var> | 定義變量 |
<pre> | 定義預(yù)格式文本 |
HTML引文、引用及標(biāo)簽定義
標(biāo)簽 | 描述 |
<abbr> | 定義縮寫 |
<address> | 定義地址 |
<bdo> | 定義文字方向 |
<blockquote> | 定義長(zhǎng)的引用 |
<q> | 定義短的引用語 |
<cite> | 定義引用、引證 |
<dfn> | 定義一個(gè)定義項(xiàng)目 |
七、HTML超鏈接
超鏈接可以是圖片、文字、多媒體也可以是一個(gè)網(wǎng)址
示例：
結(jié)果：
點(diǎn)擊帶有下劃線的兩個(gè)字就可以進(jìn)入某度的網(wǎng)站
八、HTML CSS
1、CSS是一種層疊樣式表，可以修飾html元素的樣式并可以精確地進(jìn)行排版
2、CSS有三種方式：
l 內(nèi)部樣式，在HTML元素中使用“style”屬性
l 內(nèi)部樣式表，在頭部<head>區(qū)域使用<style>元素來包含CSS
l 外部引用，引用帶有后綴css的文件，示例：
html文檔
css文檔
如果你看到了這里，就說明你已經(jīng)打開了制作網(wǎng)頁的大門啦~
個(gè)網(wǎng)頁對(duì)應(yīng)于一個(gè)html文件，HTML文件以.htm或.html為擴(kuò)展名。可以使用任何能夠生成TXT類型源文件的文本編輯來產(chǎn)生HTML文件。標(biāo)準(zhǔn)的HTML文件都具有一個(gè)基本的整體結(jié)構(gòu)，即HTML文件的開頭與結(jié)尾標(biāo)志和HTML的頭部與實(shí)體2大部分。有3個(gè)雙標(biāo)記符用于頁面整體結(jié)構(gòu)的確認(rèn)。
1、HTML元素
a、從開始標(biāo)簽到結(jié)束標(biāo)簽的所有代碼
b、開始（開放）標(biāo)簽<p>、結(jié)束（閉合）標(biāo)簽</p>、標(biāo)簽內(nèi)的東西：元素內(nèi)容
c、<br/>空元素，換行的意思
d、用p標(biāo)簽行之間間隔較大，用br標(biāo)簽行之間間隔較小
e、HTML元素語法：
(1)元素內(nèi)容是開始標(biāo)簽與結(jié)束標(biāo)簽之間的內(nèi)容
(2)空元素在開始標(biāo)簽中進(jìn)行關(guān)閉
(3)大多數(shù)HTML元素可擁有屬性
f、嵌套的HTML元素：大多數(shù)的HTML元素都是可以嵌套使用的
2、HTML屬性
a、標(biāo)簽可以擁有屬性為元素提供更多信息
b、屬性以鍵值對(duì)的形式出現(xiàn)：例如a標(biāo)簽里面 href="www.baidu.com"
c、常用標(biāo)簽類型：
(1)<h1 align = " ">對(duì)齊方式，例如center中間
(2)<body bgcolor=" ">背景顏色
(3)<a target = " ">規(guī)定在何處打開鏈接，_self本地默認(rèn)打開
屬性：
(1)默認(rèn)，覆蓋原標(biāo)簽頁
(2)_blank，打開為新標(biāo)簽頁
(4)<body backgroud=" ">設(shè)置背景圖片
d、通用屬性：
(1)class：規(guī)定元素的類名
(2)id：規(guī)定元素的唯一ID
(3)style：規(guī)定元素的樣式，一般引用css
(4)title：規(guī)定元素的額外信息
3、HTML格式化
a、定義粗體文本
b、<big>定義大號(hào)字，HTML5會(huì)被css代替
c、<em>定義著重問題
d、定義斜體字
e、<small>定義小號(hào)字
f、<strong>定義加重語氣
g、<sub>定義下標(biāo)字
h、<sup>定義上標(biāo)字
i、<ins>定義插入字，有下劃線
j、<del>定義刪除字，有刪除線
每種HTML標(biāo)記符在使用中可帶有不同的屬性項(xiàng)，用于描述該標(biāo)記符說明的內(nèi)容顯示不同的效果。正文標(biāo)記符中提供以下屬性來改變文本的顏色及頁面背景。
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
