html基本操作，看了這些你就能做簡易網(wǎng)頁？

.HTML基本標(biāo)簽

HTML（HyperTextMark-upLanguage）即超文本標(biāo)記語言或超文本鏈接標(biāo)示語言，是WWW的描述語言。

HTML文檔的結(jié)構(gòu)

HTML標(biāo)簽由標(biāo)簽、屬性、內(nèi)容組成，屬性與內(nèi)容可選。
包含內(nèi)容的標(biāo)簽以<…>開始，</…>結(jié)束，不包含內(nèi)容的標(biāo)簽可以是如下格式：<…/>
屬性的值盡量用雙引號或單引號修飾
標(biāo)簽中的內(nèi)容可以是其他的標(biāo)簽，稱為原標(biāo)簽的子標(biāo)簽，子標(biāo)簽必須在父標(biāo)簽結(jié)束之前結(jié)束

2.頁面背景色或背景圖像

<body background="back_image.GIF" >

Hello World！

</body>

（網(wǎng)頁背景圖像）

<body bgcolor="#FFCCFF">

Hello World!

</body>

（網(wǎng)頁背景色彩）

3.文本相關(guān)標(biāo)簽

標(biāo)題標(biāo)簽<h1>－<h6>，<font>標(biāo)簽。

行的控制

段落標(biāo)簽<p>，換行標(biāo)簽<br>。

標(biāo)題標(biāo)簽

<h#> ... </h#>，#=1, 2, 3, 4, 5, 6 （說明：<h1>到<h6>字體大小依次遞減）

<sub>下標(biāo)文字，<sup>上標(biāo)文字，<del>刪除線。

段落標(biāo)簽<p>，換行標(biāo)簽<br>。

內(nèi)容分隔<HR>標(biāo)簽

<HR> 標(biāo)簽用于在頁面上繪制水平線。

圖像標(biāo)簽

圖像的基本語法：<img src=“images/adv_2.jpg” width=“300” height=“150” alt=“在線報名” >

頁面鏈接<A>標(biāo)簽

要鏈接到同一目錄 (C:\HTML) 下的頁面，可編寫 <A HREF = “Doc1.htm”> 或 <A HREF = “C:\html\Doc2.htm”>

鏈接到本頁面：

圖像鏈接

</a>

滾動<marquee>標(biāo)簽

滾動文字或圖像

</marquee>

說明：scrolldelay：表示滾動延遲時間，默認(rèn)值為90；direction：表示滾動的方向，默認(rèn)為從右向左。

2.HTML/CSS基礎(chǔ)

目標(biāo)：掌握列表的用法
使用表格的基本結(jié)構(gòu)實現(xiàn)簡單表格
使用表格相關(guān)標(biāo)簽實現(xiàn)跨行、跨列的復(fù)雜表格
會使用表單的基本結(jié)構(gòu)制作表單頁面
會使用各種表單元素實現(xiàn)注冊頁面
能理解post和get兩種提交方式的區(qū)別

無序列表標(biāo)簽<ul>用于頁面中沒有順序的列舉項。

格式： <ul type=“”>

type屬性設(shè)置標(biāo)號的類型，值可以取：

1 disc ：實心圓點

2 circle ：空心圓點

3 square ：實心方塊

無序列表

有序列表<ol>用于說明頁面中的某些成分，需要按特定的順序排列。有序列表的每項都有連續(xù)的編號。

格式：<ol type=“” start=“”>

type設(shè)置標(biāo)號的類型，值可以取：

1 1：顯示數(shù)字

2 A：顯示大寫字母

3 a：顯示小寫字母

4 I：顯示大寫羅馬數(shù)字

5 i：顯示小寫羅馬數(shù)字

有序列表

嵌套列表：一個列表作為另一個列表的一部分，即多層列表。

嵌套列表

表格<table>應(yīng)用場合

門戶網(wǎng)站應(yīng)用表格

表格的基本語法

<table>...</ table >定義表格

如何創(chuàng)建表格

創(chuàng)建表格

表格表現(xiàn)

表頭與標(biāo)題

域名數(shù)量報表的創(chuàng)建

域名數(shù)量報表

什么是跨行跨列的表格

1.跨多列的表格

2.跨多行的表格

3.如何創(chuàng)建跨行跨列的表格

表格的尺寸和邊框

品牌商城表的創(chuàng)建

width用來設(shè)置表格的寬度；height用來設(shè)置表格的高度；border用來設(shè)置表格邊框尺寸大小；bordercolor用來設(shè)置表格邊框顏色。

品牌商城表

背景：background屬性用來設(shè)置表格的背景圖片；bgcolor屬性用來設(shè)置表格、行、列的背景色。

對其方式：align屬性用來設(shè)置表格、行、列的對齊方式。

文本框基本語法

文本框的建設(shè)

文本框

密碼框基本語法

密碼框的建設(shè)

密碼框，22個字符寬度

單選按鈕基本語法

單選按鈕的建設(shè)

單選按鈕框

復(fù)選框基本語法

列表框基本語法

多行文本框基本語法

按鈕基本語法

其他表單元素：<input type=“hidden”/>表單隱藏域
<input type=“image”/>表單圖片按鈕
<input type=“file”/>文件瀏覽

<label>標(biāo)簽

<label>標(biāo)簽可以綁定某個表單元素，用于擴展可以相應(yīng)點擊等事件的區(qū)域

如：當(dāng)點擊復(fù)選框右邊的提示文字時，該復(fù)選框也可被選中。

內(nèi)容有限，關(guān)于css，div和網(wǎng)頁布局的部分就下次在和大家分享吧！

TML，即超文本標(biāo)記語言Hyper Text Markup Language

在HTML中最重要的概念就是標(biāo)簽，或者說每一個你寫的語句都是一個標(biāo)簽。

通過這些標(biāo)簽可以將網(wǎng)絡(luò)上的文檔格式統(tǒng)一，使分散的Internet資源連接為一個邏輯整體。HTML文本是由HTML命令組成的描述性文本，HTML命令可以說明文字，圖形、動畫、聲音、表格、鏈接等。

以下是HTML基本（常用）標(biāo)簽：

<html></html> 定義 HTML

<head></head> 頭

<meta> 元信息

<title></title> 標(biāo)題

<body></body> 頁面主體

<h></h> 標(biāo)題（h1~h6）

<b></b> 加粗

<strong></strong> 加粗(兩者效果相同)

<i></i> 斜體

<em></em> 斜體(效果相同)

<u></u> 下劃線

<del></del> 刪除線

<ul></ul> 無序列表

<ol></ol> 有序列表

<li></li> 列表每一行

<a></a> 超鏈接（href內(nèi)容為跳轉(zhuǎn)地址）

<font> 字體

<sub> 下標(biāo)

<sup> 上標(biāo)

<br> 換行

<p> 段落

<img> 圖像（src內(nèi)容為資源地址，本地或網(wǎng)絡(luò)都可以）

<hr> 分割線

<table></table> 定義表格

<th></th> 表頭

<tr></tr> 一行數(shù)據(jù)

<td></td> 一格數(shù)據(jù)

<form></form> form表單

<frame> 框架

（后兩個初學(xué)用不到，以后會常用）

高興鐵鐵們能來看html網(wǎng)頁設(shè)計第二期~~~~撒花~~~~~

哎呀呀~實在是抱歉備注標(biāo)簽我記錯了QAQ

這個才是備注標(biāo)簽不是//

首先我們先來學(xué)習(xí)上節(jié)課留下的劇透，分別是:

1.標(biāo)題標(biāo)簽h1~h6

有人就說了標(biāo)題標(biāo)簽上次劇透不就只有h1標(biāo)簽嗎?

嘿嘿，其實他還有兄弟姐妹啦~

看圖，代碼是從上往下從左往右執(zhí)行的請記住這個順序哦~

還有,左邊是代碼右邊是網(wǎng)頁上面的效果哦~

源代碼:

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<h1>1</h1>

<h2>2</h2>

<h3>3</h3>

<h4>4</h4>

<h5>5</h5>

<h6>6</h6>

</body>

</html>

如圖所示，h1標(biāo)簽是最大的，h6標(biāo)簽是最小的

是不是很簡單呀,現(xiàn)在已經(jīng)學(xué)會了一個知識點了哦~

2.段落標(biāo)簽 p標(biāo)簽

源代碼:

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<p>第一條p標(biāo)簽</p>

<p>第二條p標(biāo)簽</p>

<p>第三條p標(biāo)簽</p>

</body>

</html>

3.鏈接標(biāo)簽 a標(biāo)簽

鏈接標(biāo)簽是什么?顧名思義就是一個鏈接看代碼：

href是什么東西啊？是a標(biāo)簽的屬性啦~里面用來輸入你需要跳轉(zhuǎn)到的網(wǎng)頁的鏈接

屬性里面的東西是不會出現(xiàn)在網(wǎng)頁上面的出現(xiàn)的只有在a標(biāo)簽里面的內(nèi)容哦

當(dāng)我點擊百度這兩個字后就給我跳轉(zhuǎn)到了我們href屬性里面的https://www.baidu.com

當(dāng)然我們也可以跳轉(zhuǎn)到我們自己制作的網(wǎng)頁上面但要求是同一個項目下面的網(wǎng)頁

是不是很有趣~

看視頻:

視頻中我們點擊鏈接后就跳轉(zhuǎn)到了山這個網(wǎng)頁出現(xiàn)了一張山的圖片，是不是有點小意思~

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<a href="new_file3.html">跳轉(zhuǎn)到山的網(wǎng)頁</a>

</body>

</html>

4.圖像標(biāo)簽 img標(biāo)簽

圖像標(biāo)簽標(biāo)簽如其意，就是用來上傳圖像的一個標(biāo)簽~~

我們這里介紹一下img的兩個屬性:

src就是用來放圖片的地址的，他會根據(jù)地址去找圖片然后把圖片放到網(wǎng)頁上面。

alt有什么用啊就是當(dāng)圖片顯示失敗的時候就會顯示alt里面的文字

看視頻:

我們把圖片的地址破壞后，就會顯示一個圖片錯誤的圖標(biāo)和alt里面的內(nèi)容

怎么拖圖片到img文件下，老師~~~我不知道

看視頻

嘿嘿就直接把文件拖進來就ok了是不是很簡單~

okk，好快啊怎么一下就學(xué)完了今天的知識點~~~

嘻嘻今天可是有作業(yè)的~

請根據(jù)下面的網(wǎng)頁仿寫一下:

完成后作業(yè)發(fā)再評論區(qū)哦，有什么不懂的可以留言包回答的。

加油呀，每天學(xué)一點爭取做出屬于自己的一個網(wǎng)頁~

上一期

在線咨詢

上一篇：分享一個大數(shù)據(jù)可視化大屏看板案例（echarts實現(xiàn)含中國地圖）
下一篇：七小時帶你入門HTML+CSS網(wǎng)頁設(shè)計，編寫網(wǎng)頁代碼的思路（三）

您的項目需求

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

整合營銷服務(wù)商

html基本操作，看了這些你就能做簡易網(wǎng)頁？

.HTML基本標(biāo)簽

2.HTML/CSS基礎(chǔ)

1.標(biāo)題標(biāo)簽h1~h6

2.段落標(biāo)簽 p標(biāo)簽

3.鏈接標(biāo)簽 a標(biāo)簽

4.圖像標(biāo)簽 img標(biāo)簽

您的項目需求