一起學(xué)習(xí)HTML&amp;CSS（001）-

一起學(xué)習(xí)HTML&CSS（001）-簡介

TML

對于HTML，百度百科給出的介紹是：

超文本標(biāo)記語言，標(biāo)準(zhǔn)通用標(biāo)記語言下的一個應(yīng)用。
“超文本”就是指頁面內(nèi)可以包含圖片、鏈接，甚至音樂、程序等非文字元素。
超文本標(biāo)記語言的結(jié)構(gòu)包括“頭”部分（英語：Head）、和“主體”部分（英語：Body），其中“頭”部提供關(guān)于網(wǎng)頁的信息，“主體”部分提供網(wǎng)頁的具體內(nèi)容。

HTML是用來描述網(wǎng)頁的一種語言，換言之網(wǎng)頁的本質(zhì)就是超級文本標(biāo)記語言，通過結(jié)合使用其他的Web技術(shù)（如：腳本語言、公共網(wǎng)關(guān)接口、組件等），可以創(chuàng)造出功能強(qiáng)大的網(wǎng)頁。因而，超級文本標(biāo)記語言是萬維網(wǎng)（Web）編程的基礎(chǔ)，也就是說萬維網(wǎng)是建立在超文本基礎(chǔ)之上的。

HTML使用標(biāo)記標(biāo)簽來描述網(wǎng)頁，標(biāo)記標(biāo)簽通常被稱為HTML標(biāo)簽 (HTML tag)。HTML標(biāo)簽是尖括號“<”和">"包圍的關(guān)鍵詞（例如：<html>）,并且標(biāo)簽通常是成對出現(xiàn)的（注意我說的是通常情況），分為開始標(biāo)簽和結(jié)束標(biāo)簽。

HTML5

隨著移動設(shè)備的發(fā)展，為了在移動設(shè)備上支持多媒體，HTML5應(yīng)運(yùn)而生。

HTML5是萬維網(wǎng)的核心語言、標(biāo)準(zhǔn)通用標(biāo)記語言下的一個應(yīng)用超文本標(biāo)記語言（HTML）的第五次重大修改。HTML5和HTML沒有本質(zhì)區(qū)別，我們可以簡單的把HTML5理解為HTML的升級版，具體有何區(qū)別在學(xué)到的地方再重點(diǎn)提出來。

開發(fā)者可以使用 HTML 來建立自己的 WEB 站點(diǎn)，HTML 運(yùn)行在瀏覽器上，由瀏覽器來解析。

雖然僅僅是對HTML進(jìn)行了簡單的介紹，我們還是可以先做一個小Demo。

下面是Demo代碼：

創(chuàng)建文檔并命名為demo.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
</head>
<body bgcolor="white">
<h1 align="center">這是標(biāo)題1</h1>
<h2 align="right">這是標(biāo)題2</h2>
<p>這是段落1</p>
<p>這是段落2</p>
<a >這是一個鏈接</a>
<br />
</body>
</html>

下面是在瀏覽器打開的效果：

一篇介紹了網(wǎng)頁的基本結(jié)構(gòu)，那如何編寫網(wǎng)頁的內(nèi)容? 前提是要學(xué)會HTML標(biāo)簽的用法，本篇主要介紹HTML標(biāo)簽是什么，如何學(xué)習(xí)，需要大概多長時間學(xué)習(xí)。

本篇主要基于html5介紹，html5 是最新版的標(biāo)準(zhǔn)，之前的版本可以自己了解下。

HTML 簡介

HTML的英文全稱是Hyper Text Markup Language，直譯為超文本標(biāo)記語言。它是全球廣域網(wǎng)上描述網(wǎng)頁內(nèi)容和外觀的標(biāo)準(zhǔn)。HTML包含了一對打開和關(guān)閉的標(biāo)記，在當(dāng)中包含有屬性和值。標(biāo)記描述了每個在網(wǎng)頁上的組件，例如文本段落、表格或圖像等。

事實上，HTML是一種因特網(wǎng)上較常見的網(wǎng)頁制作標(biāo)注性語言，而并不能算做一種程序設(shè)計語言，因為它缺少程序設(shè)計語言所應(yīng)有的特征。HTML通過IE等瀏覽器的翻譯，將網(wǎng)頁中所要呈現(xiàn)的內(nèi)容、排版展現(xiàn)在用戶眼前。

一個html標(biāo)簽基本結(jié)構(gòu)如下：

<標(biāo)簽名稱  屬性="屬性值"></標(biāo)簽名稱> 或 <標(biāo)簽名稱 屬性="屬性值"/>

有以下特點(diǎn)：

由尖括“<”、“>”號包圍的標(biāo)記元素，比如 <html>和</html>就是一對標(biāo)記。
通常是成對出現(xiàn)的，比如 <div> 和 </div>，也有單獨(dú)呈現(xiàn)的標(biāo)簽，如：<img />、<input/>等。
標(biāo)簽對中的第一個標(biāo)簽是開始標(biāo)簽，第二個標(biāo)簽是結(jié)束標(biāo)簽；
一般成對出現(xiàn)的標(biāo)簽，其內(nèi)容在兩個標(biāo)簽中間，如<h1>標(biāo)題</h1>。單獨(dú)呈現(xiàn)的標(biāo)簽，則在標(biāo)簽屬性中賦值，如<input type="text" />。
網(wǎng)頁展示的內(nèi)容需寫在<body>標(biāo)簽中。
標(biāo)簽不區(qū)分大小寫，建議按規(guī)范小寫。

HTML標(biāo)簽按功能大體可分以下幾種類型：

構(gòu)成網(wǎng)頁基本架構(gòu)的標(biāo)簽，比如：<!DOCTYPE>（定義文檔類型）、<html>(根標(biāo)簽),<meta>（元信息）、<head> (網(wǎng)頁頭部區(qū)域)、<body> （網(wǎng)頁內(nèi)容區(qū)域）。
用于引入外部資源及客戶端腳本的標(biāo)簽，比如：<link>（外部資源，css樣式文件）， <script>（客戶端js腳本）。
用于描述布局的標(biāo)簽，比如： <div>、<ul>（無序列表）、<ol>（有序列表）、<h1>到<h6>（標(biāo)題1到6）、<table>（表格）、<footer>（頁腳）、<header>（頁頭）等。
用于描述文本格式的標(biāo)簽，比如：<p> (段落)、<strong>(加粗)、<q>（引用）、<span>等。
用于引入多媒體資源的標(biāo)簽，比如：<img>、<video>、<audio>等。
用于制作表單的標(biāo)簽，比如：<form>(表單),<input>(輸入框),<textarea>(文本域)，<select>(下拉菜單),<radio>(單選項),<checkbox>(多選項)等。
其它標(biāo)簽（不是很常用的）。

如何學(xué)習(xí)html的標(biāo)簽用法

沒有捷徑，需要多看，多練。在這里我不一一介紹每個標(biāo)簽的具體含義及用法，相關(guān)語法可以參考以下幾個網(wǎng)站：

https://www.w3cschool.cn/html5/
https://developer.mozilla.org/zh-CN/docs/Web/HTML

制定一個學(xué)習(xí)計劃,每天堅持下去

要求，每天花費(fèi)3到5個小時學(xué)習(xí)，至少1到2周掌握常用的html標(biāo)簽含義及用法，可以按照上面介紹的標(biāo)簽進(jìn)行分類學(xué)習(xí)，感謝關(guān)注，祝你學(xué)習(xí)愉快。

TML基礎(chǔ)簡介
超文本標(biāo)記語言（英語：HyperText Markup Language，簡稱：HTML）是一種用于創(chuàng)建網(wǎng)頁的標(biāo)準(zhǔn)標(biāo)記語言。您可以使用 HTML 來建立自己的 WEB 站點(diǎn)，HTML 運(yùn)行在瀏覽器上，由瀏覽器來解析。

HTML是一個網(wǎng)頁文件的拓展名，和txt、jpg、mp3一樣，是一個文件格。.html文件就是網(wǎng)頁文件。

2.html 的格式化標(biāo)簽

<!DOCTYPE>
<html>
--html是一個雙標(biāo)簽開始標(biāo)簽
<head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>
</title> --可能是標(biāo)題
</head>
<body>--用來存放頁面中的內(nèi)容
</body>
</html> --結(jié)束標(biāo)簽

DOCTYPE----文檔類型聲明
meta標(biāo)簽----設(shè)置頁面編碼格式，關(guān)鍵字，以及頁面的描述
<title></title>--------->標(biāo)題部分
<head></head>------>頁面的頭部分
<body></body>------>頁面的主體部分

2.內(nèi)容標(biāo)簽

這其中<hr> <br> 是單標(biāo)簽
<div></div> <span></span> 無意義區(qū)塊容器標(biāo)簽
eg:
<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">主要的網(wǎng)頁標(biāo)題</h1></div>

HTML標(biāo)記—注釋標(biāo)記

<!--注釋語句-->

標(biāo)題：
<h1>這是一個標(biāo)題</h1>
<h2>這是一個標(biāo)題</h2>
<h3>這是一個標(biāo)題</h3>

段落：
<p>這是一個段落。</p>
<p>這是另外一個段落。</p>

HTML 鏈接

<a >這是一個鏈接</a>
當(dāng)您點(diǎn)擊 HTML 頁面中的某個鏈接時，對應(yīng)的 <a> 標(biāo)簽指向萬維網(wǎng)上的一個地址。
一個統(tǒng)一資源定位器(URL) 用于定位萬維網(wǎng)上的文檔。
URL - 統(tǒng)一資源定位器
scheme - 定義因特網(wǎng)服務(wù)的類型。最常見的類型是 http
host - 定義域主機(jī)（http 的默認(rèn)主機(jī)是 www）
domain - 定義因特網(wǎng)域名，比如 runoob.com
:port - 定義主機(jī)上的端口號（http 的默認(rèn)端口號是 80）
path - 定義服務(wù)器上的路徑（如果省略，則文檔必須位于網(wǎng)站的根目錄中）。
filename - 定義文檔/資源的名稱

這里需要注意:使用超鏈接做下載,并不是超鏈接完成的下載功能,而是通過超鏈接跳轉(zhuǎn)到了一個有下載功能的頁面。

常見的 URL Scheme

HTML 圖像

alt 屬性用來為圖像定義一串預(yù)備的可替換的文本。

3.HTML屬性

屬性實例:

HTML 鏈接由 <a> 標(biāo)簽定義。鏈接的地址在 href 屬性中指定：<a >這是一個鏈接</a>

4.HTML 表格

表格由 <table> 標(biāo)簽來定義。每個表格均有若干行（由 <tr> 標(biāo)簽定義），每行被分割為若干單元格（由 <td> 標(biāo)簽定義）。字母 td 指表格數(shù)據(jù)（table data），即數(shù)據(jù)單元格的內(nèi)容。數(shù)據(jù)單元格可以包含文本、圖片、列表、段落、表單、水平線、表格等等。表格的表頭使用 <th> 標(biāo)簽進(jìn)行定義。

<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

5.HTML 表單

表單是一個包含表單元素的區(qū)域。

表單元素是允許用戶在表單中輸入內(nèi)容,比如：文本域(textarea)、下拉列表、單選框(radio-buttons)、復(fù)選框(checkboxes)等等。

文本域（Text Fields）

文本域通過<input type="text"> 標(biāo)簽來設(shè)定
當(dāng)用戶要在表單中鍵入字母、數(shù)字等內(nèi)容時，就會用到文本域
密碼字段
密碼字段通過標(biāo)簽<input type="password"> 來定義:
<form>
FirstName: <input type="text" name="firstname"><br>
Password: <input type="password" name="pwd">
</form>

單選按鈕（Radio Buttons）

<input type="radio"> 標(biāo)簽定義了表單單選框選項
<form>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>
單選有時需要設(shè)置默認(rèn)選項,需要設(shè)置checked屬性:
<input type="radio" name="sex" checked="checked"/>男

復(fù)選框（Checkboxes）

<input type="checkbox"> 定義了復(fù)選框. 用戶需要從若干給定的選擇中選取一個或若干選項。
<form>
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car
</form>
多選框一般不需要設(shè)置默認(rèn)選項,如果要設(shè)置,也是設(shè)置checked屬性

提交按鈕(Submit Button)

<input type="submit"> 定義了提交按鈕.

當(dāng)用戶單擊確認(rèn)按鈕時，表單的內(nèi)容會被傳送到另一個文件。表單的動作屬性定義了目的文件的文件名。由動作屬性定義的這個文件通常會對接收到的輸入數(shù)據(jù)進(jìn)行相關(guān)的處理。:

<form name="input" action="html_form_action.php" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>
這里需要注意的是: Submit必須要和form一起使用才能達(dá)到效果
action 設(shè)置表單提交參數(shù)路徑
method 當(dāng)前請求方式(同iOS開發(fā)網(wǎng)絡(luò)請求一樣,get/post)

假如您在上面的文本框內(nèi)鍵入幾個字母，然后點(diǎn)擊確認(rèn)按鈕，那么輸入數(shù)據(jù)會傳送到 "html_form_action.php" 的頁面。該頁面將顯示出輸入的結(jié)果。

圖片按鈕(使用不多)

Select下拉框

selected默認(rèn)選項
<select>
<option selected="selected" >選項一</option>
<option>選項二</option>
</select>

Textarea文本域

<textarea></textarea>

6.HTML 列表

HTML 支持有序、無序和定義列表:

無序列表使用 <ul> 標(biāo)簽
<ul>
<li>列表項</li>
<li>列表項</li>
<li>列表項</li>
</ul>
有序列表始于 <ol> 標(biāo)簽。每個列表項始于 <li> 標(biāo)簽。
列表項項使用數(shù)字來標(biāo)記。
<ol>
<li>第一個列表項</li>
<li>第二個列表項</li>
<li>第三個列表項</li>
</ol>
自定義列表以 <dl> 標(biāo)簽開始。每個自定義列表項以 <dt> 開始。每個自定義列表項的定義以 <dd> 開始。
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
去除點(diǎn)去除下劃線
a {
text-decoration: none;
}
ul {
list-style: none;
}

7.內(nèi)聯(lián)樣式- 在HTML元素中使用"style" 屬性

HTML樣式實例 - 背景顏色
<body style="background-color:yellow;">
<h2 style="background-color:red;">這是一個標(biāo)題</h2>
<p style="background-color:green;">這是一個段落。</p>
</body>

HTML 樣式實例 - 字體, 字體顏色，字體大小

我們可以使用font-family（字體），color（顏色），和font-size（字體大小）屬性來定義字體的樣式:

HTML 樣式實例 - 文本對齊方式

<h1 style="text-align:center;">居中對齊的標(biāo)題</h1>

而關(guān)于其他CSS內(nèi)容,這里就簡單介紹一下:

內(nèi)部樣式表

當(dāng)單個文件需要特別樣式時，就可以使用內(nèi)部樣式表。你可以在<head> 部分通過 <style>標(biāo)簽定義內(nèi)部樣式表:

<head>
<style type="text/css">
body {background-color:yellow;
}
p {color:blue;}
</style>
</head>

外部樣式表

當(dāng)樣式需要被應(yīng)用到很多頁面的時候，外部樣式表將是理想的選擇。使用外部樣式表，你就可以通過更改一個文件來改變整個站點(diǎn)的外觀。

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

HTML 樣式標(biāo)簽

最后提一下什么是Web安全色?

數(shù)年以前，當(dāng)大多數(shù)計算機(jī)僅支持 256 種顏色的時候，一系列 216 種 Web 安全色作為 Web 標(biāo)準(zhǔn)被建議使用。其中的原因是，微軟和 Mac 操作系統(tǒng)使用了 40 種不同的保留的固定系統(tǒng)顏色（雙方大約各使用 20 種）。

216 跨平臺 web 安全色被用來確保：當(dāng)計算機(jī)使用 256 色調(diào)色板時，所有的計算機(jī)能夠正確地顯示所有的顏色。

在線咨詢

上一篇：網(wǎng)頁全屏與鎖屏顯示效果
下一篇：script 的三種加載模式：默認(rèn)加載、defer、

您的項目需求

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

整合營銷服務(wù)商

一起學(xué)習(xí)HTML&amp;amp;CSS（001）-

TML

HTML5

HTML 簡介

HTML標(biāo)簽按功能大體可分以下幾種類型：

如何學(xué)習(xí)html的標(biāo)簽用法

您的項目需求

一起學(xué)習(xí)HTML&CSS（001）-