web前端開發（一）—HTML基礎

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

發布人(rén)：融晨科技

浏覽次數：41

web前端簡介

什麽是(shì)HTML？

HTML标簽

HTML基本結構

HTML 段落标簽

HTML 換行标簽

HTML标題

HTML 水平線

HTML注釋

HTML 标簽

HTML 列表标簽

HTML表格

HTML超鏈接

HTML 圖片

HTML表單

表單元素-文本、密碼框

表單元素-多行文本框

表單元素-選擇框

表單元素-下拉選擇框

表單元素-按鈕

HTML-div

web前端簡介

web前端開發是(shì)從網頁制作演變而(ér)來(lái)，名稱上(shàng)有很明顯的(de)時(shí)代特征。在(zài)互聯網的(de)演化進程中，網頁制作是(shì)Web1.0時(shí)代的(de)産物，早期網站主要(yào / yāo)内容都是(shì)靜态，以(yǐ)圖片和(hé / huò)文字爲(wéi / wèi)主，用戶使用網站的(de)行爲(wéi / wèi)也(yě)以(yǐ)浏覽爲(wéi / wèi)主。随着互聯網技術的(de)發展和(hé / huò)HTML5、CSS3的(de)應用，現代網頁更加美觀，交互效果顯著，功能更加強大(dà)。

學習web前端開發基礎技術需要(yào / yāo)掌握：HTML、CSS、JavaScript語言。下面我們就(jiù)來(lái)了(le／liǎo)解下這(zhè)三門技術都是(shì)用來(lái)實現什麽的(de)：

1. HTML是(shì)網頁内容的(de)載體。内容就(jiù)是(shì)網頁制作者放在(zài)頁面上(shàng)想要(yào / yāo)讓用戶浏覽的(de)信息，可以(yǐ)包含文字、圖片、視頻等。

2. CSS樣式是(shì)表現。就(jiù)像網頁的(de)外衣。比如，标題字體、顔色變化，或爲(wéi / wèi)标題加入背景圖片、邊框等。所有這(zhè)些用來(lái)改變内容外觀的(de)東西稱之(zhī)爲(wéi / wèi)表現。

3. JavaScript是(shì)用來(lái)實現網頁上(shàng)的(de)特效效果。如：鼠标滑過彈出(chū)下拉菜單。或鼠标滑過表格的(de)背景顔色改變。還有焦點新聞（新聞圖片）的(de)輪換。可以(yǐ)這(zhè)麽理解，有動畫的(de)，有交互的(de)一般都是(shì)用JavaScript來(lái)實現的(de)。

什麽是(shì)HTML？

HTML 指的(de)是(shì)超文本标記語言 (Hyper Text Markup Language)

HTML 不(bù)是(shì)一種編程語言，而(ér)是(shì)一種标記語言 (markup language)

标記語言是(shì)一套标記标簽 (markup tag)

HTML 使用标記标簽來(lái)描述網頁

HTML标簽

HTML 标簽是(shì)由尖括号包圍的(de)關鍵詞，比如 <html>

HTML 标簽通常是(shì)成對出(chū)現的(de)，标簽對中的(de)第一個(gè)标簽是(shì)開始标簽，第二個(gè)标簽是(shì)結束标簽

标簽與标簽之(zhī)間是(shì)可以(yǐ)嵌套的(de)，但先後順序必須保持一緻，如：<div>裏嵌套<p>，那麽</p>必須放在(zài)</div>的(de)前面。

HTML基本結構

一個(gè)HTML文件是(shì)有自己固定的(de)結構，如下所示：

<html>

</html>

代碼講解：

1. <html></html>稱爲(wéi / wèi)根标簽，所有的(de)網頁标簽都在(zài)<html></html>中。

2. <head> 标簽用于(yú)定義文檔的(de)頭部，它是(shì)所有頭部元素的(de)容器。頭部元素有<title>、<script>、 <style>、<link>、 <meta>等标簽，頭部标簽在(zài)之(zhī)後會詳細介紹。

3. 在(zài)<body>和(hé / huò)</body>标簽之(zhī)間的(de)内容是(shì)網頁的(de)主要(yào / yāo)内容，如<h1>、<p>、<a>、<img>等網頁内容标簽，在(zài)這(zhè)裏的(de)标簽中的(de)内容會在(zài)浏覽器中顯示出(chū)來(lái)。

在(zài)head中設置網頁标題和(hé / huò)字符集編碼

<head>

</head>

HTML 段落标簽

如果想在(zài)網頁上(shàng)顯示文章，這(zhè)時(shí)就(jiù)需要(yào / yāo)<p>标簽了(le／liǎo)，把文章的(de)段落放到(dào)<p>标簽中。

<p>标簽的(de)默認樣式，段前段後都會有空白。

HTML 換行标簽

如果希望在(zài)不(bù)産生一個(gè)新段落的(de)情況下進行換行（新行），請使用 <br /> 标簽：

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

HTML标題

标題标簽一共有6個(gè)，h1、h2、h3、h4、h5、h6分别爲(wéi / wèi)一級标題、二級标題、三級标題、四級标題、五級标題、六級标題。并且依據重要(yào / yāo)性遞減。<h1>是(shì)最高的(de)等級。
語法： <hx>标題文本</hx> (x爲(wéi / wèi)1-6)

題标簽的(de)樣式都會加粗，h1标簽字号最大(dà)，h2标簽字号相對h1要(yào / yāo)小，以(yǐ)此類推h6标簽的(de)字号最小。一個(gè)标題标簽要(yào / yāo)獨占一整行。

HTML 水平線

<hr /> 标簽在(zài) HTML 頁面中創建水平線,可用于(yú)分隔内容。

<p>This is a paragraph</p>

 <hr />

<p>This is a paragraph</p>

<hr />

<p>This is a paragraph</p>

HTML注釋

麽是(shì)代碼注釋？代碼注釋的(de)作用是(shì)幫助程序員标注代碼的(de)用途，過一段時(shí)間後再看你所編寫的(de)代碼，就(jiù)能很快想起這(zhè)段代碼的(de)用途。代碼注釋不(bù)僅方便程序員自己回憶起以(yǐ)前代碼的(de)用途，還可以(yǐ)幫助其他(tā)程序員很快的(de)讀懂你的(de)程序的(de)功能，方便多人(rén)合作開發網頁代碼。

語法：

HTML <span>标簽

<span>它的(de)作用就(jiù)是(shì)爲(wéi / wèi)了(le／liǎo)結合CSS設置單獨的(de)樣式用的(de)，本身沒有任何效果。

HTML 列表标簽

1）無序列表

在(zài)浏覽網頁時(shí)，你會發現網頁上(shàng)有很多信息的(de)列表，如新聞列表、圖片列表，如下圖所示。

這(zhè)些列表就(jiù)可以(yǐ)使用ul-li标簽來(lái)完成。ul-li是(shì)沒有前後順序的(de)信息列表。

語法：

<ul>

  <li>...</li>

  <li>... </li>

   ......

</ul>

2）有序列表

如果想在(zài)網頁中展示有前後順序的(de)信息列表，怎麽辦呢？如，當當網上(shàng)的(de)書籍熱賣排行榜，如下圖所示。這(zhè)類信息展示就(jiù)可以(yǐ)使用<ol>标簽來(lái)制作有序列表來(lái)展示。

語法：

<ol>

   <li>信息</li>

   <li>信息</li>

   ......

</ol>

HTML表格

有時(shí)候我們需要(yào / yāo)在(zài)網頁上(shàng)展示一些數據，如某公司想在(zài)網頁上(shàng)展示公司的(de)庫存清單。如下表：

想在(zài)網頁上(shàng)展示上(shàng)述表格效果可以(yǐ)使用以(yǐ)下代碼：

創建表格的(de)四個(gè)元素：

table、tr、th、td

1、<table>…</table>：整個(gè)表格以(yǐ)<table>标記開始、</table>标記結束。

2、<tr>…</tr>：表格的(de)一行，所以(yǐ)有幾對tr 表格就(jiù)有幾行。

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

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

5、表格中列的(de)個(gè)數，取決于(yú)一行中數據單元格的(de)個(gè)數。

表格标題

<caption> 指定表格标題，它顯示在(zài)表格上(shàng)方。

語法：

<table>

<caption>标題文本</caption>

<tr>

…

</tr>

…

</table>

合并單元格

有時(shí)候一些行和(hé / huò)列需要(yào / yāo)合并，如下：

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

HTML超鏈接

使用<a>标簽可實現超鏈接，它在(zài)網頁制作中可以(yǐ)說(shuō)是(shì)無處不(bù)在(zài)，隻要(yào / yāo)有鏈接的(de)地(dì / de)方，就(jiù)會有這(zhè)個(gè)标簽。

語法：

<a href="目标網址" title="鼠标滑過顯示的(de)文本">鏈接顯示的(de)文本</a>

例如：

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

上(shàng)面例子(zǐ)作用是(shì)單擊click here!文字，網頁鏈接到(dào)http://www.baidu.com這(zhè)個(gè)網頁。

title屬性的(de)作用，鼠标滑過鏈接文字時(shí)會顯示這(zhè)個(gè)屬性的(de)文本内容。這(zhè)個(gè)屬性在(zài)實際網頁開發中作用很大(dà)，主要(yào / yāo)方便搜索引擎了(le／liǎo)解鏈接地(dì / de)址的(de)内容（語義化更友好）

<a>标簽在(zài)默認情況下，鏈接的(de)網頁是(shì)在(zài)當前浏覽器窗口中打開，有時(shí)我們需要(yào / yāo)在(zài)新的(de)浏覽器窗口中打開。

如下代碼：

<a href="目标網址" target="_blank">click here!</a>

HTML 圖片

在(zài)網頁的(de)制作中爲(wéi / wèi)使網頁炫麗美觀，肯定是(shì)缺少不(bù)了(le／liǎo)圖片，可以(yǐ)使用<img>标簽來(lái)插入圖片。

語法：

舉例：

講解：

1、src：标識圖像的(de)位置；

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

3、title：提供在(zài)圖像可見時(shí)對圖像的(de)描述(鼠标滑過圖片時(shí)顯示的(de)文本)；

4、圖像可以(yǐ)是(shì)GIF，PNG，JPEG格式的(de)圖像文件。

HTML表單

網站怎樣與用戶進行交互？答案是(shì)使用HTML表單(form)。表單是(shì)可以(yǐ)把浏覽者輸入的(de)數據傳送到(dào)服務器端，這(zhè)樣服務器端程序就(jiù)可以(yǐ)處理表單傳過來(lái)的(de)數據。

講解：

1.<form> ：<form>标簽是(shì)成對出(chū)現的(de)，以(yǐ)<form>開始，以(yǐ)</form>結束。

2.action ：浏覽者輸入的(de)數據被傳送到(dào)的(de)地(dì / de)方,比如一個(gè)PHP頁面(save.php)。

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

</form>

注意:

1、所有表單控件（文本框、文本域、按鈕、單選框、複選框等）都必須放在(zài) <form></form> 标簽之(zhī)間（否則用戶輸入的(de)信息可提交不(bù)到(dào)服務器上(shàng)哦！）。

2、method : post/get

表單元素-文本、密碼框

當用戶要(yào / yāo)在(zài)表單中鍵入字母、數字等内容時(shí)，就(jiù)會用到(dào)文本輸入框。文本框也(yě)可以(yǐ)轉化爲(wéi / wèi)密碼輸入框。

語法：

<form>

</form>

1、type：

當type="text"時(shí)，輸入框爲(wéi / wèi)文本輸入框;

當type="password"時(shí), 輸入框爲(wéi / wèi)密碼輸入框。

2、name：爲(wéi / wèi)文本框命名，以(yǐ)備後台程序ASP 、PHP使用。

3、value：爲(wéi / wèi)文本輸入框設置默認值。(一般起到(dào)提示作用)

舉例：

<form>

姓名：

<br/>

密碼：

</form>

在(zài)浏覽器中顯示的(de)結果：

表單元素-多行文本框

當用戶需要(yào / yāo)在(zài)表單中輸入大(dà)段文字時(shí)，需要(yào / yāo)用到(dào)文本輸入域。

語法：

<textarea  rows="行數" cols="列數">文本</textarea>

1、<textarea>标簽是(shì)成對出(chū)現的(de)，以(yǐ)<textarea>開始，以(yǐ)</textarea>結束。

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

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

4、在(zài)<textarea></textarea>标簽之(zhī)間可以(yǐ)輸入默認值。

舉例：

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

        <label>聯系我們</label>

        <textarea cols="50" rows="10" >在(zài)這(zhè)裏輸入内容...</textarea>

</form>

注意：代碼中的(de)<label>标簽在(zài)本章5-9中講解。

在(zài)浏覽器中顯示結果：

表單元素-選擇框

在(zài)使用表單設計調查表時(shí)，爲(wéi / wèi)了(le／liǎo)減少用戶的(de)操作，使用選擇框是(shì)一個(gè)好主意，html中有兩種選擇框，即單選框和(hé / huò)複選框，兩者的(de)區别是(shì)單選框中的(de)選項用戶隻能選擇一項，而(ér)複選框中用戶可以(yǐ)任意選擇多項，甚至全選。請看下面的(de)例子(zǐ):

語法：

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

1、type:

當 type="radio" 時(shí)，控件爲(wéi / wèi)單選框

當 type="checkbox" 時(shí)，控件爲(wéi / wèi)複選框

2、value：提交數據到(dào)服務器的(de)值（後台程序PHP使用）

3、name：爲(wéi / wèi)控件命名，以(yǐ)備後台程序 ASP、PHP 使用

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

如下面代碼：

注意：代碼中的(de)<label>标簽在(zài)本章 5-9 中有講解。

在(zài)浏覽器中顯示的(de)結果：

注意:同一組的(de)單選按鈕，name 取值一定要(yào / yāo)一緻，比如上(shàng)面例子(zǐ)爲(wéi / wèi)同一個(gè)名稱“radioLove”，這(zhè)樣同一組的(de)單選按鈕才可以(yǐ)起到(dào)單選的(de)作用。

表單元素-下拉選擇框

下拉列表在(zài)網頁中也(yě)常會用到(dào)，它可以(yǐ)有效的(de)節省網頁空間。既可以(yǐ)單選、又可以(yǐ)多選。如下代碼：

講解：

1、value：

2、selected="selected"：

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

在(zài)浏覽器中顯示的(de)結果：

表單元素-按鈕

在(zài)表單中有兩種按鈕可以(yǐ)使用，分别爲(wéi / wèi)：提交按鈕、重置。這(zhè)一小節講解提交按鈕：當用戶需要(yào / yāo)提交表單信息到(dào)服務器時(shí)，需要(yào / yāo)用到(dào)提交按鈕。

語法：

type：隻有當type值設置爲(wéi / wèi)submit時(shí)，按鈕才有提交作用

value：按鈕上(shàng)顯示的(de)文字

舉例：

HTML-div

在(zài)網頁制作過程過中，可以(yǐ)把一些獨立的(de)邏輯部分劃分出(chū)來(lái)，放在(zài)一個(gè)<div>标簽中，這(zhè)個(gè)<div>标簽的(de)作用就(jiù)相當于(yú)一個(gè)容器。

語法：

确定邏輯部分：

什麽是(shì)邏輯部分？它是(shì)頁面上(shàng)相互關聯的(de)一組元素。如網頁中的(de)獨立的(de)欄目版塊，就(jiù)是(shì)一個(gè)典型的(de)邏輯部分。如下圖所示：圖中用紅色邊框标出(chū)的(de)部分就(jiù)是(shì)一個(gè)邏輯部分，就(jiù)可以(yǐ)使用<div>标簽作爲(wéi / wèi)容器。