欧美三级国产三级日韩三级_亚洲熟妇丰满大屁股熟妇_欧美亚洲成人一区二区三区_国产精品久久久久久模特

web前端開發(fā)（一）—HTML基礎(chǔ) - 新聞資訊 - 云南小程序開發(fā)|云南軟件開發(fā)|云南網(wǎng)站建設(shè)-昆明葵宇信息科技有限公司

159-8711-8523

云南網(wǎng)建設(shè)/小程序開發(fā)/軟件開發(fā)

知識(shí)

不管是網(wǎng)站，軟件還是小程序，都要直接或間接能為您產(chǎn)生價(jià)值，我們在追求其視覺表現(xiàn)的同時(shí)，更側(cè)重于功能的便捷，營銷的便利，運(yùn)營的高效，讓網(wǎng)站成為營銷工具，讓軟件能切實(shí)提升企業(yè)內(nèi)部管理水平和效率。優(yōu)秀的程序?yàn)楹笃谏?jí)提供便捷的支持！

您當(dāng)前位置>首頁 » 新聞資訊 » 網(wǎng)站建設(shè) >

web前端開發(fā)（一）—HTML基礎(chǔ)

發(fā)表時(shí)間：2018-7-31

發(fā)布人：葵宇科技

瀏覽次數(shù)：41

目錄

web前端簡介

什么是HTML？

HTML標(biāo)簽

HTML基本結(jié)構(gòu)

HTML 段落標(biāo)簽

HTML 換行標(biāo)簽

HTML標(biāo)題

HTML 水平線

HTML注釋

HTML 標(biāo)簽

HTML 列表標(biāo)簽

HTML表格

HTML超鏈接

HTML 圖片

HTML表單

表單元素-文本、密碼框

表單元素-多行文本框

表單元素-選擇框

表單元素-下拉選擇框

表單元素-按鈕

HTML-div

web前端簡介

web前端開發(fā)是從網(wǎng)頁制作演變而來，名稱上有很明顯的時(shí)代特征。在互聯(lián)網(wǎng)的演化進(jìn)程中，網(wǎng)頁制作是Web1.0時(shí)代的產(chǎn)物，早期網(wǎng)站主要內(nèi)容都是靜態(tài)，以圖片和文字為主，用戶使用網(wǎng)站的行為也以瀏覽為主。隨著互聯(lián)網(wǎng)技術(shù)的發(fā)展和HTML5、CSS3的應(yīng)用，現(xiàn)代網(wǎng)頁更加美觀，交互效果顯著，功能更加強(qiáng)大。

學(xué)習(xí)web前端開發(fā)基礎(chǔ)技術(shù)需要掌握：HTML、CSS、JavaScript語言。下面我們就來了解下這三門技術(shù)都是用來實(shí)現(xiàn)什么的：

1. HTML是網(wǎng)頁內(nèi)容的載體。內(nèi)容就是網(wǎng)頁制作者放在頁面上想要讓用戶瀏覽的信息，可以包含文字、圖片、視頻等。

2. CSS樣式是表現(xiàn)。就像網(wǎng)頁的外衣。比如，標(biāo)題字體、顏色變化，或?yàn)闃?biāo)題加入背景圖片、邊框等。所有這些用來改變內(nèi)容外觀的東西稱之為表現(xiàn)。

3. JavaScript是用來實(shí)現(xiàn)網(wǎng)頁上的特效效果。如：鼠標(biāo)滑過彈出下拉菜單?；蚴髽?biāo)滑過表格的背景顏色改變。還有焦點(diǎn)新聞（新聞圖片）的輪換?？梢赃@么理解，有動(dòng)畫的，有交互的一般都是用JavaScript來實(shí)現(xiàn)的。

什么是HTML？

HTML 指的是超文本標(biāo)記語言 (Hyper Text Markup Language)

HTML 不是一種編程語言，而是一種標(biāo)記語言 (markup language)

標(biāo)記語言是一套標(biāo)記標(biāo)簽 (markup tag)

HTML 使用標(biāo)記標(biāo)簽來描述網(wǎng)頁

HTML標(biāo)簽

HTML 標(biāo)簽是由尖括號(hào)包圍的關(guān)鍵詞，比如 <html>

HTML 標(biāo)簽通常是成對(duì)出現(xiàn)的，標(biāo)簽對(duì)中的第一個(gè)標(biāo)簽是開始標(biāo)簽，第二個(gè)標(biāo)簽是結(jié)束標(biāo)簽

http://img.mukewang.com/528960dc0001cb6802710128.jpg

標(biāo)簽與標(biāo)簽之間是可以嵌套的，但先后順序必須保持一致，如：<div>里嵌套<p>，那么</p>必須放在</div>的前面。

http://img.mukewang.com/5289611a0001469c05510206.jpg

HTML基本結(jié)構(gòu)

一個(gè)HTML文件是有自己固定的結(jié)構(gòu)，如下所示：

<html>

<head>...</head>

<body>...</body>

</html>

代碼講解：

1. <html></html>稱為根標(biāo)簽，所有的網(wǎng)頁標(biāo)簽都在<html></html>中。

2. <head> 標(biāo)簽用于定義文檔的頭部，它是所有頭部元素的容器。頭部元素有<title>、<script>、 <style>、<link>、 <meta>等標(biāo)簽，頭部標(biāo)簽在之后會(huì)詳細(xì)介紹。

3. 在<body>和</body>標(biāo)簽之間的內(nèi)容是網(wǎng)頁的主要內(nèi)容，如<h1>、<p>、<a>、<img>等網(wǎng)頁內(nèi)容標(biāo)簽，在這里的標(biāo)簽中的內(nèi)容會(huì)在瀏覽器中顯示出來。

在head中設(shè)置網(wǎng)頁標(biāo)題和字符集編碼

<head>

<title>這里是標(biāo)題</title>

<meta charset="utf-8"/>

</head>

HTML 段落標(biāo)簽

如果想在網(wǎng)頁上顯示文章，這時(shí)就需要<p>標(biāo)簽了，把文章的段落放到<p>標(biāo)簽中。

<p>段落 </p>

<p>標(biāo)簽的默認(rèn)樣式，段前段后都會(huì)有空白。

HTML 換行標(biāo)簽

如果希望在不產(chǎn)生一個(gè)新段落的情況下進(jìn)行換行（新行），請使用 <br /> 標(biāo)簽：

<p>This is<br/>a para<br/>graph with line breaks</p>

HTML標(biāo)題

標(biāo)題標(biāo)簽一共有6個(gè)，h1、h2、h3、h4、h5、h6分別為一級(jí)標(biāo)題、二級(jí)標(biāo)題、三級(jí)標(biāo)題、四級(jí)標(biāo)題、五級(jí)標(biāo)題、六級(jí)標(biāo)題。并且依據(jù)重要性遞減。<h1>是最高的等級(jí)。
語法： <hx>標(biāo)題文本</hx> (x為1-6)

題標(biāo)簽的樣式都會(huì)加粗，h1標(biāo)簽字號(hào)最大，h2標(biāo)簽字號(hào)相對(duì)h1要小，以此類推h6標(biāo)簽的字號(hào)最小。一個(gè)標(biāo)題標(biāo)簽要獨(dú)占一整行。

HTML 水平線

<hr /> 標(biāo)簽在 HTML 頁面中創(chuàng)建水平線,可用于分隔內(nèi)容。

<p>This is a paragraph</p>
 <hr />
<p>This is a paragraph</p>
<hr />
<p>This is a paragraph</p>

HTML注釋

么是代碼注釋？代碼注釋的作用是幫助程序員標(biāo)注代碼的用途，過一段時(shí)間后再看你所編寫的代碼，就能很快想起這段代碼的用途。代碼注釋不僅方便程序員自己回憶起以前代碼的用途，還可以幫助其他程序員很快的讀懂你的程序的功能，方便多人合作開發(fā)網(wǎng)頁代碼。

語法：

<!--注釋文字 -->

HTML <span>標(biāo)簽

<span>它的作用就是為了結(jié)合CSS設(shè)置單獨(dú)的樣式用的，本身沒有任何效果。

HTML 列表標(biāo)簽

1）無序列表

在瀏覽網(wǎng)頁時(shí)，你會(huì)發(fā)現(xiàn)網(wǎng)頁上有很多信息的列表，如新聞列表、圖片列表，如下圖所示。

http://img.mukewang.com/52d383cd0001085503320216.jpg

這些列表就可以使用ul-li標(biāo)簽來完成。ul-li是沒有前后順序的信息列表。

語法：

<ul>
  <li>...</li>
  <li>... </li>
   ......
</ul>

2）有序列表

如果想在網(wǎng)頁中展示有前后順序的信息列表，怎么辦呢？如，當(dāng)當(dāng)網(wǎng)上的書籍熱賣排行榜，如下圖所示。這類信息展示就可以使用<ol>標(biāo)簽來制作有序列表來展示。

http://img.mukewang.com/52d3884a00014b0702270264.jpg

語法：
<ol>
   <li>信息</li>
   <li>信息</li>
   ......
</ol>

HTML表格

有時(shí)候我們需要在網(wǎng)頁上展示一些數(shù)據(jù)，如某公司想在網(wǎng)頁上展示公司的庫存清單。如下表：

http://img.mukewang.com/52d38f0b00017e4305060133.jpg

想在網(wǎng)頁上展示上述表格效果可以使用以下代碼：

http://img.mukewang.com/52d38f83000160be02920445.jpg

創(chuàng)建表格的四個(gè)元素：

table、tr、th、td

1、<table>…</table>：整個(gè)表格以<table>標(biāo)記開始、</table>標(biāo)記結(jié)束。

2、<tr>…</tr>：表格的一行，所以有幾對(duì)tr 表格就有幾行。

3、<td>…</td>：表格的一個(gè)單元格，一行中包含幾對(duì)<td>...</td>，說明一行中就有幾列。

4、<th>…</th>：表格的頭部的一個(gè)單元格，表格表頭。

5、表格中列的個(gè)數(shù)，取決于一行中數(shù)據(jù)單元格的個(gè)數(shù)。

表格標(biāo)題

<caption> 指定表格標(biāo)題，它顯示在表格上方。

語法：

<table>

<caption>標(biāo)題文本</caption>

<tr>

<td>…</td>

<td>…</td>

…

</tr>

…

</table>

合并單元格

有時(shí)候一些行和列需要合并，如下：

合并行使用rowspan屬性，合并列使用功能colspan屬性。

HTML超鏈接

使用<a>標(biāo)簽可實(shí)現(xiàn)超鏈接，它在網(wǎng)頁制作中可以說是無處不在，只要有鏈接的地方，就會(huì)有這個(gè)標(biāo)簽。

語法：

<a href="目標(biāo)網(wǎng)址" title="鼠標(biāo)滑過顯示的文本">鏈接顯示的文本</a>

例如：

<a href="http://www.baidu.com" title="點(diǎn)擊進(jìn)入百度">click here!</a>

上面例子作用是單擊click here!文字，網(wǎng)頁鏈接到http://www.baidu.com這個(gè)網(wǎng)頁。

title屬性的作用，鼠標(biāo)滑過鏈接文字時(shí)會(huì)顯示這個(gè)屬性的文本內(nèi)容。這個(gè)屬性在實(shí)際網(wǎng)頁開發(fā)中作用很大，主要方便搜索引擎了解鏈接地址的內(nèi)容（語義化更友好）

<a>標(biāo)簽在默認(rèn)情況下，鏈接的網(wǎng)頁是在當(dāng)前瀏覽器窗口中打開，有時(shí)我們需要在新的瀏覽器窗口中打開。

如下代碼：

<a href="目標(biāo)網(wǎng)址" target="_blank">click here!</a>

HTML 圖片

在網(wǎng)頁的制作中為使網(wǎng)頁炫麗美觀，肯定是缺少不了圖片，可以使用<img>標(biāo)簽來插入圖片。

語法：

<img src="圖片地址" alt="下載失敗時(shí)的替換文本" title = "提示文本">

舉例：

<img src = "myimage.gif" alt = "My Image" title = "My Image" />

講解：

1、src：標(biāo)識(shí)圖像的位置；

2、alt：指定圖像的描述性文本，當(dāng)圖像不可見時(shí)（下載不成功時(shí)），可看到該屬性指定的文本；

3、title：提供在圖像可見時(shí)對(duì)圖像的描述(鼠標(biāo)滑過圖片時(shí)顯示的文本)；

4、圖像可以是GIF，PNG，JPEG格式的圖像文件。

HTML表單

網(wǎng)站怎樣與用戶進(jìn)行交互？答案是使用HTML表單(form)。表單是可以把瀏覽者輸入的數(shù)據(jù)傳送到服務(wù)器端，這樣服務(wù)器端程序就可以處理表單傳過來的數(shù)據(jù)。

<form method="傳送方式" action="服務(wù)器文件">

講解：

1.<form> ：<form>標(biāo)簽是成對(duì)出現(xiàn)的，以<form>開始，以</form>結(jié)束。

2.action ：瀏覽者輸入的數(shù)據(jù)被傳送到的地方,比如一個(gè)PHP頁面(save.php)。

3.method ： 數(shù)據(jù)傳送的方式（get/post）。

<form method="post" action="save.php">

<label for="username">用戶名:</label>

<input type="text" name="username" />

<label for="pass">密碼:</label>

<input type="password" name="pass" />

</form>

注意:

1、所有表單控件（文本框、文本域、按鈕、單選框、復(fù)選框等）都必須放在 <form></form> 標(biāo)簽之間（否則用戶輸入的信息可提交不到服務(wù)器上哦！）。

2、method : post/get

表單元素-文本、密碼框

當(dāng)用戶要在表單中鍵入字母、數(shù)字等內(nèi)容時(shí)，就會(huì)用到文本輸入框。文本框也可以轉(zhuǎn)化為密碼輸入框。

語法：

<form>

<input type="text/password" name="名稱" value="文本" />

</form>

1、type：

當(dāng)type="text"時(shí)，輸入框?yàn)?strong>文本輸入框;

當(dāng)type="password"時(shí), 輸入框?yàn)?strong>密碼輸入框。

2、name：為文本框命名，以備后臺(tái)程序ASP 、PHP使用。

3、value：為文本輸入框設(shè)置默認(rèn)值。(一般起到提示作用)

舉例：

<form>

姓名：

<input type="text" name="myName">

<br/>

密碼：

<input type="password" name="pass">

</form>

在瀏覽器中顯示的結(jié)果：

http://img.mukewang.com/52e4e9be000152ca05250275.jpg

表單元素-多行文本框

當(dāng)用戶需要在表單中輸入大段文字時(shí)，需要用到文本輸入域。

語法：

<textarea  rows="行數(shù)" cols="列數(shù)">文本</textarea>

1、<textarea>標(biāo)簽是成對(duì)出現(xiàn)的，以<textarea>開始，以</textarea>結(jié)束。

2、cols ：多行輸入域的列數(shù)。

3、rows ：多行輸入域的行數(shù)。

4、在<textarea></textarea>標(biāo)簽之間可以輸入默認(rèn)值。

舉例：

<form  method="post" action="save.php">
        <label>聯(lián)系我們</label>
        <textarea cols="50" rows="10" >在這里輸入內(nèi)容...</textarea>
</form>

注意：代碼中的<label>標(biāo)簽在本章5-9中講解。

在瀏覽器中顯示結(jié)果：

http://img.mukewang.com/52e5b4040001f4af05760367.jpg

表單元素-選擇框

在使用表單設(shè)計(jì)調(diào)查表時(shí)，為了減少用戶的操作，使用選擇框是一個(gè)好主意，html中有兩種選擇框，即單選框和復(fù)選框，兩者的區(qū)別是單選框中的選項(xiàng)用戶只能選擇一項(xiàng)，而復(fù)選框中用戶可以任意選擇多項(xiàng)，甚至全選。請看下面的例子:

語法：

<input   type="radio/checkbox"   value="值"    name="名稱"   checked="checked"/>

1、type:

當(dāng) type="radio" 時(shí)，控件為單選框

當(dāng) type="checkbox" 時(shí)，控件為復(fù)選框

2、value：提交數(shù)據(jù)到服務(wù)器的值（后臺(tái)程序PHP使用）

3、name：為控件命名，以備后臺(tái)程序 ASP、PHP 使用

4、checked：當(dāng)設(shè)置 checked="checked" 時(shí)，該選項(xiàng)被默認(rèn)選中

如下面代碼：

http://img.mukewang.com/52e5f7c60001a23f07360267.jpg

注意：代碼中的<label>標(biāo)簽在本章 5-9 中有講解。

在瀏覽器中顯示的結(jié)果：

http://img.mukewang.com/52e5f8010001159804900257.jpg

注意:同一組的單選按鈕，name 取值一定要一致，比如上面例子為同一個(gè)名稱“radioLove”，這樣同一組的單選按鈕才可以起到單選的作用。

表單元素-下拉選擇框

下拉列表在網(wǎng)頁中也常會(huì)用到，它可以有效的節(jié)省網(wǎng)頁空間。既可以單選、又可以多選。如下代碼：

http://img.mukewang.com/52e604590001ae4005270185.jpg

講解：

1、value：

http://img.mukewang.com/52e6037300015a9905030165.jpg

2、selected="selected"：

設(shè)置selected="selected"屬性，則該選項(xiàng)就被默認(rèn)選中。

在瀏覽器中顯示的結(jié)果：

http://img.mukewang.com/52e605340001014804520288.jpg

表單元素-按鈕

在表單中有兩種按鈕可以使用，分別為：提交按鈕、重置。這一小節(jié)講解提交按鈕：當(dāng)用戶需要提交表單信息到服務(wù)器時(shí)，需要用到提交按鈕。

語法：

<input type="submit" value="提交">

type：只有當(dāng)type值設(shè)置為submit時(shí)，按鈕才有提交作用

value：按鈕上顯示的文字

舉例：

http://img.mukewang.com/52e613350001461604820109.jpg

HTML-div

在網(wǎng)頁制作過程過中，可以把一些獨(dú)立的邏輯部分劃分出來，放在一個(gè)<div>標(biāo)簽中，這個(gè)<div>標(biāo)簽的作用就相當(dāng)于一個(gè)容器。

語法：

<div>…</div>

確定邏輯部分：

什么是邏輯部分？它是頁面上相互關(guān)聯(lián)的一組元素。如網(wǎng)頁中的獨(dú)立的欄目版塊，就是一個(gè)典型的邏輯部分。如下圖所示：圖中用紅色邊框標(biāo)出的部分就是一個(gè)邏輯部分，就可以使用<div>標(biāo)簽作為容器。

http://img.mukewang.com/52d38c41000163e210120455.jpg

相關(guān)案例查看更多