整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
html概述
HTML是 HyperText Mark-up Language 的首字母簡寫，意思是超文本標記語言，超文本指的是超鏈接，標記指的是標簽，是一種用來制作網頁的語言，這種語言由一個個的標簽組成，用這種語言制作的文件保存的是一個文本文件，文件的擴展名為html或者htm，一個html文件就是一個網頁，html文件用編輯器打開顯示的是文本，可以用文本的方式編輯它，如果用瀏覽器打開，瀏覽器會按照標簽描述內容將文件渲染成網頁，顯示的網頁可以從一個網頁鏈接跳轉到另外一個網頁。
html基本結構
一個html的基本結構如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>網頁標題</title> </head> <body> 網頁顯示內容 </body> </html>
第一行是文檔聲明，第二行“”標簽和最后一行“”定義html文檔的整體，“”標簽中的‘lang=“en”’定義網頁的語言為英文，定義成中文是’lang=“zh-CN”’,不定義也沒什么影響，它一般作為分析統計用。 “”標簽和“”標簽是它的第一層子元素，“”標簽里面負責對網頁進行一些設置以及定義標題，設置包括定義網頁的編碼格式，外鏈css樣式文件和javascript文件等，設置的內容不會顯示在網頁上，標題的內容會顯示在標題欄，“”內編寫網頁上顯示的內容。
HTML文檔類型
目前常用的兩種文檔類型是xhtml 1.0和html5
xhtml 1.0
xhtml 1.0 是html5之前的一個常用的版本，目前許多網站仍然使用此版本。
此版本文檔用sublime text創建方法： html:xt + tab
文檔示例：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title> xhtml 1.0 文檔類型 </title> </head> <body> </body> </html>
html5
pc端可以使用xhtml 1.0，也可以使用html5，html5是向下兼容的
此版本文檔用sublime text創建方法： html:5 + tab 或者 ! + tab
文檔示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> html5文檔類型 </title> </head> <body> </body> </html>
兩種文檔的區別
1、文檔聲明和編碼聲明
2、html5新增了標簽元素以及元素屬性
html注釋：
html文檔代碼中可以插入注釋，注釋是對代碼的說明和解釋，注釋的內容不會顯示在頁面上，html代碼中插入注釋的方法是：
<!-- 這是一段注釋 -->
通過
、
、
、
、
,標簽可以在網頁上定義6種級別的標題。6種級別的標題表示文檔的6級目錄層級關系，比如說：
，再其次是
，以此類推。搜索引擎會使用標題將網頁的結構和內容編制索引，所以網頁上使用標題是很重要的。
<h1>這是一級標題</h1> <h2>這是二級標題</h2> <h3>這是三級標題</h3>
html段落標簽
標簽定義一個文本段落，一個段落含有默認的上下間距，段落之間會用這種默認間距隔開，代碼如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>段落</title> </head> <body> <p>HTML是 HyperText Mark-up Language 的首字母簡寫，意思是超文本標記語言，超 文本指的是超鏈接，標記指的是標簽，是一種用來制作網頁的語言，這種語言由一個個的 標簽組成，用這種語言制作的文件保存的是一個文本文件，文件的擴展名為html或者htm。 </p> <p>一個html文件就是一個網頁，html文件用編輯器打開顯示的是文本，可以用文本的方 式編輯它，如果用瀏覽器打開，瀏覽器會按照標簽描述內容將文件渲染成網頁，顯示的網 頁可以從一個網頁鏈接跳轉到另外一個網頁。</p> </body> </html>
html換行標簽
代碼中成段的文字，直接在代碼中回車換行，在渲染成網頁時候不認這種換行，如果真想換行，可以在代碼的段落中插入
來強制換行，代碼如下：
<p> 一個html文件就是一個網頁，html文件用編輯器打開顯示的是文本，可以用<br /> 文本的方式編輯它，如果用瀏覽器打開，瀏覽器會按照標簽描述內容將文件<br /> 渲染成網頁，顯示的網頁可以從一個網頁鏈接跳轉到另外一個網頁。 </p>
html字符實體
代碼中成段的文字，如果文字間想空多個空格，在代碼中空多個空格，在渲染成網頁時只會顯示一個空格，如果想顯示多個空格，可以使用空格的字符實體,代碼如下：
<!-- 在段落前想縮進兩個文字的空格，使用空格的字符實體： --> <p> 一個html文件就是一個網頁，html文件用編輯器打開顯示的是文本，可以用<br /> 文本的方式編輯它，如果用瀏覽器打開，瀏覽器會按照標簽描述內容將文件<br /> 渲染成網頁，顯示的網頁可以從一個網頁鏈接跳轉到另外一個網頁。</p>
在網頁上顯示 “<” 和 “>” 會誤認為是標簽，想在網頁上顯示“<”和“>”可以使用它們的字符實體，比如：
<!-- “<” 和 “>” 的字符實體為 < 和 > --> <p> 3 < 5 <br> 10 > 5 </p>
html塊標簽
1、
標簽 塊元素，表示一塊內容，沒有具體的語義。
2、 標簽 行內元素，表示一行中的一小段內容，沒有具體的語義。
含樣式和語義的標簽
1、 標簽 行內元素，表示語氣中的強調詞
2、 標簽 行內元素，表示專業詞匯
3、 標簽 行內元素，表示文檔中的關鍵字或者產品名
4、 標簽 行內元素，表示非常重要的內容
語義化的標簽
語義化的標簽，就是在布局的時候多使用有語義的標簽，搜索引擎在爬網的時候能認識這些標簽，理解文檔的結構，方便網站的收錄。比如：h1標簽是表示標題，p標簽是表示段落，ul、li標簽是表示列表，a標簽表示鏈接，dl、dt、dd表示定義列表等，語義化的標簽不多。
html圖像標簽
標簽可以在網頁上插入一張圖片，它是獨立使用的標簽，它的常用屬性有：
src屬性 定義圖片的引用地址
alt屬性 定義圖片加載失敗時顯示的文字，搜索引擎會使用這個文字收錄圖片、盲人讀屏軟件會讀取這個文字讓盲人識別圖片，所以此屬性非常重要。
<img src="images/pic.jpg" alt="產品圖片" />
絕對路徑和相對路徑
像網頁上插入圖片這種外部文件，需要定義文件的引用地址，引用外部文件還包括引用外部樣式表，javascript等等，引用地址分為絕對地址和相對地址。
絕對地址：相對于磁盤的位置去定位文件的地址
相對地址：相對于引用文件本身去定位被引用的文件地址
絕對地址在整體文件遷移時會因為磁盤和頂層目錄的改變而找不到文件，相對路徑就沒有這個問題。相對路徑的定義技巧：
“ ./ ” 表示當前文件所在目錄下，比如：“./pic.jpg” 表示當前目錄下的pic.jpg的圖片，這個使用時可以省略。
“ …/ ” 表示當前文件所在目錄下的上一級目錄，比如：“…/images/pic.jpg” 表示當前目錄下的上一級目錄下的images文件夾中的pic.jpg的圖片。
標簽可以在網頁上定義一個鏈接地址，它的常用屬性有：
href屬性 定義跳轉的地址
title屬性 定義鼠標懸停時彈出的提示文字框
target屬性 定義鏈接窗口打開的位置
target="_self" 缺省值，新頁面替換原來的頁面，在原來位置打開
target="_blank" 新頁面會在新開的一個瀏覽器窗口打開
TML基礎簡介
超文本標記語言（英語：HyperText Markup Language，簡稱：HTML）是一種用于創建網頁的標準標記語言。您可以使用 HTML 來建立自己的 WEB 站點，HTML 運行在瀏覽器上，由瀏覽器來解析。
HTML是一個網頁文件的拓展名，和txt、jpg、mp3一樣，是一個文件格。.html文件就是網頁文件。
2.html 的格式化標簽
<!DOCTYPE>
<html>
--html是一個雙標簽 開始標簽
<head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>
</title> --可能是標題
</head>
<body>--用來存放頁面中的內容
</body>
</html> --結束標簽
DOCTYPE----文檔類型聲明 meta標簽----設置頁面編碼格式，關鍵字，以及頁面的描述 <title></title>--------->標題部分 <head></head>------>頁面的頭部分 <body></body>------>頁面的主體部分
2.內容標簽
這其中<hr> <br> 是單標簽
<div></div> <span></span> 無意義區塊容器標簽
eg:
<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">主要的網頁標題</h1></div>
HTML標記—注釋標記
<!--注釋語句-->
標題： <h1>這是一個標題</h1> <h2>這是一個標題</h2> <h3>這是一個標題</h3>
段落： <p>這是一個段落。</p> <p>這是另外一個段落。</p>
HTML 鏈接
<!--提示:在 href 屬性中指定鏈接的地址。-->
<a >這是一個鏈接</a>
當您點擊 HTML 頁面中的某個鏈接時，對應的 <a> 標簽指向萬維網上的一個地址。
一個統一資源定位器(URL) 用于定位萬維網上的文檔。
URL - 統一資源定位器
scheme - 定義因特網服務的類型。最常見的類型是 http
host - 定義域主機（http 的默認主機是 www）
domain - 定義因特網域名，比如 runoob.com
:port - 定義主機上的端口號（http 的默認端口號是 80）
path - 定義服務器上的路徑（如果省略，則文檔必須位于網站的根目錄中）。
filename - 定義文檔/資源的名稱
這里需要注意:使用超鏈接做下載,并不是超鏈接完成的下載功能,而是通過超鏈接跳轉到了一個有下載功能的頁面。
常見的 URL Scheme
HTML 圖像
alt 屬性用來為圖像定義一串預備的可替換的文本。
3.HTML屬性
屬性實例:
HTML 鏈接由 <a> 標簽定義。鏈接的地址在 href 屬性中指定：<a >這是一個鏈接</a>
4.HTML 表格
表格由 <table> 標簽來定義。每個表格均有若干行（由 <tr> 標簽定義），每行被分割為若干單元格（由 <td> 標簽定義）。字母 td 指表格數據（table data），即數據單元格的內容。數據單元格可以包含文本、圖片、列表、段落、表單、水平線、表格等等。表格的表頭使用 <th> 標簽進行定義。
<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 表單
表單是一個包含表單元素的區域。
表單元素是允許用戶在表單中輸入內容,比如：文本域(textarea)、下拉列表、單選框(radio-buttons)、復選框(checkboxes)等等。
文本域（Text Fields）
文本域通過<input type="text"> 標簽來設定
當用戶要在表單中鍵入字母、數字等內容時，就會用到文本域
密碼字段
密碼字段通過標簽<input type="password"> 來定義:
<form>
FirstName: <input type="text" name="firstname"><br>
Password: <input type="password" name="pwd">
</form>
單選按鈕（Radio Buttons）
<input type="radio"> 標簽定義了表單單選框選項
<form>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>
單選有時需要設置默認選項,需要設置checked屬性:
<input type="radio" name="sex" checked ="checked"/>男
復選框（Checkboxes）
<input type="checkbox"> 定義了復選框. 用戶需要從若干給定的選擇中選取一個或若干選項。
<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>
多選框一般不需要設置默認選項,如果要設置,也是設置checked屬性
提交按鈕(Submit Button)
<input type="submit"> 定義了提交按鈕.
當用戶單擊確認按鈕時，表單的內容會被傳送到另一個文件。表單的動作屬性定義了目的文件的文件名。由動作屬性定義的這個文件通常會對接收到的輸入數據進行相關的處理。:
<form name="input" action="html_form_action.php" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>
這里需要注意的是: Submit必須要和form一起使用才能達到效果
action 設置表單提交參數路徑
method 當前請求方式(同iOS開發網絡請求一樣,get/post)
假如您在上面的文本框內鍵入幾個字母，然后點擊確認按鈕，那么輸入數據會傳送到 "html_form_action.php" 的頁面。該頁面將顯示出輸入的結果。
圖片按鈕(使用不多)
Select下拉框
selected默認選項
<select>
<option selected="selected" >選項一</option>
<option>選項二</option>
</select>
Textarea文本域
<textarea></textarea>
6.HTML 列表
HTML 支持有序、無序和定義列表:
無序列表使用 <ul> 標簽
<ul>
<li>列表項</li>
<li>列表項</li>
<li>列表項</li>
</ul>
有序列表始于 <ol> 標簽。每個列表項始于 <li> 標簽。
列表項項使用數字來標記。
<ol>
<li>第一個列表項</li>
<li>第二個列表項</li>
<li>第三個列表項</li>
</ol>
自定義列表以 <dl> 標簽開始。每個自定義列表項以 <dt> 開始。每個自定義列表項的定義以 <dd> 開始。
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
去除點去除下劃線
a {
text-decoration: none;
}
ul {
list-style: none;
}
7.內聯樣式- 在HTML元素中使用"style" 屬性
HTML樣式實例 - 背景顏色
<body style="background-color:yellow;">
<h2 style="background-color:red;">這是一個標題</h2>
<p style="background-color:green;">這是一個段落。</p>
</body>
HTML 樣式實例 - 字體, 字體顏色 ，字體大小
我們可以使用font-family（字體），color（顏色），和font-size（字體大小）屬性來定義字體的樣式:
HTML 樣式實例 - 文本對齊方式
<h1 style="text-align:center;">居中對齊的標題</h1>
而關于其他CSS內容,這里就簡單介紹一下:
內部樣式表
當單個文件需要特別樣式時，就可以使用內部樣式表。你可以在<head> 部分通過 <style>標簽定義內部樣式表:
<head>
<style type="text/css">
body {background-color:yellow;
}
p {color:blue;}
</style>
</head>外部樣式表
當樣式需要被應用到很多頁面的時候，外部樣式表將是理想的選擇。使用外部樣式表，你就可以通過更改一個文件來改變整個站點的外觀。
<head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head>
HTML 樣式標簽
最后提一下什么是Web安全色?
數年以前，當大多數計算機僅支持 256 種顏色的時候，一系列 216 種 Web 安全色作為 Web 標準被建議使用。其中的原因是，微軟和 Mac 操作系統使用了 40 種不同的保留的固定系統顏色（雙方大約各使用 20 種）。
216 跨平臺 web 安全色被用來確保：當計算機使用 256 色調色板時，所有的計算機能夠正確地顯示所有的顏色。
全棧攻城獅-每日更新原創IT編程技術及日常實用視頻。
主要內容：正式引入HTML網頁開發，學習并了解HTML的相關知識。變身Web開發達人，做全棧程序員。這是以第一課，希望以我的方式，你將學會HTML這門課程。
今天的話，主要講解一下HTML相關知識，同樣在接下來的一段時間的安排中，也以HTML為主。崇尚全棧，也就意味著我們，需要學習主流的技術知識。在前一段時間內，主要講解了.Net的只是教程。當然.NET并沒有完畢。
C#語言
只是在這里把HTML穿插進來，一則鞏固自己所得，二來學習一下這門非常簡單的HTML技術。學習完畢HTML之后則會，繼續進行基礎加強、數據庫、MVC等教程的協作工作。
PDF文檔
同時在前一個階段內，講解的并不是很好，在這個HTML階段內，則會吸取教訓，爭取寫出更符合初學者學習的技術教程。當然前面的課程也會不斷的修正，最后我會生成PDF的文檔，發給大家。
HTML概述
HTML，超文本標記語言，超文本就意味著有多于文字的形式，比如包含超鏈接、圖片、視頻、動畫等形式。HTML是應用在網站網頁展現的一種語法結構。我們在使用瀏覽器瀏覽網頁的時候，看到的界面都是由HTML代碼表現出來的。HMTL可以說是一種展示文字圖片視頻等元素的一種方式。通過特定的標記就能展示出來自己想要的效果。如何展現？就讓我一步步教你。
物聯網
互聯網的飛速發展，導致了形形色色的網站應用被創建。云計算、物聯網仿佛唾手可得。把諸多應用建立在云上，通過這種瀏覽器與用戶交互的形式讓人們使用。這些所有網絡應用，只要是通過瀏覽器進行使用的情況，都是需要HTML技術。當然HTML作為基礎之用。這就要求我們程序員，必須學習并熟悉HTML語言。能在這個基礎上進行Web的開發。
HTML是解釋性語言，不需編譯，直接書寫之后，就可以運行。
HTML是純文本類型的語言，你完全可以通過記事本程序進行創建書寫。
雖然HTML可以通過記事本來創建寫代碼，但是并不推薦，因為以前學習過.Net，所以依舊使用Visual Studio。VS也是前端的開發神器。
自己寫的HTML代碼，在不同的瀏覽器內，可能會有不同的展示效果。這是由瀏覽器的渲染引擎決定的。
HTML具有平臺無關性，在任何平臺只要擁有一款瀏覽器，你就可以打開HTML網頁。
HTML代碼運行在瀏覽器中，也就是需要使用瀏覽器進行測試。
HTML
今天就先說一下HTML的基本知識，電腦編程系列教程，下節繼續。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
