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

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

159-8711-8523

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

知識

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

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

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

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

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

瀏覽次數(shù)：41

目錄

web前端簡介

什么是HTML？

HTML標簽

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

HTML 段落標簽

HTML 換行標簽

HTML標題

HTML 水平線

HTML注釋

HTML 標簽

HTML 列表標簽

HTML表格

HTML超鏈接

HTML 圖片

HTML表單

表單元素-文本、密碼框

表單元素-多行文本框

表單元素-選擇框

表單元素-下拉選擇框

表單元素-按鈕

HTML-div

web前端簡介

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

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

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

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

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

什么是HTML？

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

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

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

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

HTML標簽

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

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

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

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

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

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

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

<html>

<head>...</head>

<body>...</body>

</html>

代碼講解：

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

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

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

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

<head>

<title>這里是標題</title>

<meta charset="utf-8"/>

</head>

HTML 段落標簽

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

<p>段落 </p>

<p>標簽的默認樣式，段前段后都會有空白。

HTML 換行標簽

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

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

HTML標題

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

題標簽的樣式都會加粗，h1標簽字號最大，h2標簽字號相對h1要小，以此類推h6標簽的字號最小。一個標題標簽要獨占一整行。

HTML 水平線

<hr /> 標簽在 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注釋

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

語法：

<!--注釋文字 -->

HTML <span>標簽

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

HTML 列表標簽

1）無序列表

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

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

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

語法：

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

2）有序列表

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

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

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

HTML表格

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

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

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

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

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

table、tr、th、td

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

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

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

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

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

表格標題

<caption> 指定表格標題，它顯示在表格上方。

語法：

<table>

<caption>標題文本</caption>

<tr>

<td>…</td>

<td>…</td>

…

</tr>

…

</table>

合并單元格

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

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

HTML超鏈接

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

語法：

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

例如：

<a href="http://www.baidu.com" title="點擊進入百度">click here!</a>

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

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

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

如下代碼：

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

HTML 圖片

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

語法：

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

舉例：

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

講解：

1、src：標識圖像的位置；

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

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

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

HTML表單

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

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

講解：

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

2.action ：瀏覽者輸入的數(shù)據(jù)被傳送到的地方,比如一個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、所有表單控件（文本框、文本域、按鈕、單選框、復選框等）都必須放在 <form></form> 標簽之間（否則用戶輸入的信息可提交不到服務器上哦！）。

2、method : post/get

表單元素-文本、密碼框

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

語法：

<form>

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

</form>

1、type：

當type="text"時，輸入框為文本輸入框;

當type="password"時, 輸入框為密碼輸入框。

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

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

舉例：

<form>

姓名：

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

<br/>

密碼：

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

</form>

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

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

表單元素-多行文本框

當用戶需要在表單中輸入大段文字時，需要用到文本輸入域。

語法：

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

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

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

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

4、在<textarea></textarea>標簽之間可以輸入默認值。

舉例：

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

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

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

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

表單元素-選擇框

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

語法：

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

1、type:

當 type="radio" 時，控件為單選框

當 type="checkbox" 時，控件為復選框

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

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

4、checked：當設置 checked="checked" 時，該選項被默認選中

如下面代碼：

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

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

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

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

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

表單元素-下拉選擇框

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

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

講解：

1、value：

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

2、selected="selected"：

設置selected="selected"屬性，則該選項就被默認選中。

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

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

表單元素-按鈕

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

語法：

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

type：只有當type值設置為submit時，按鈕才有提交作用

value：按鈕上顯示的文字

舉例：

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

HTML-div

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

語法：

<div>…</div>

確定邏輯部分：

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

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

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