整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
程序員HTML5培訓教程-html和css基礎知識，Html是超文本標記語言（英語全稱：HyperText Markup Language，簡稱：HTML）是一種用于創建網頁的標準標記語言。
Css是層疊樣式表(英文全稱：Cascading Style Sheets)是一種用來html和xml等文件樣式的計算機語言，CSS不僅可以靜態地修飾網頁，還可以配合各種腳本語言動態地對網頁各元素進行格式化。
一.基礎內容：
標記=開始標記+內容+結束標記
標記可以嵌套使用，例如：頁面主體標記中含有標題標記，段落標記。
有些標記有屬性，具體格式，以a標記為例，xxxx其中make為標記的屬性。
設計為沒有任何內容的元素稱為void元素，需要使用void元素時，只需要使用一個開始標記，這是一種方便的簡寫，可以減少html中的標記數量
二.常用標記的使用與意義：
<!doctype html>html5的文檔類型定義，這一行要寫到html文件開頭
<html></html>標記html頁面的開始和結束
<head></head>標記頁面的有關信息
<meta charset="utf-8">標記指定字符編碼，這一行要寫到<head>元素中所有其他元素上面
<title></title>為頁面指定一個標題，標記中的內容出現在瀏覽器的頂部
<body></body>標記頁面的主體內容
<!--xxxxx-->中間xxx的內容為注釋的內容
編寫html時要把首部和頁面主體分開
<h1></h1>為主標題，從<h2>到<h6>依次為副標題，字體由大到小
<p></p>開始一個段落
<blockquote> </blockquote> 標簽定義塊引用，之間的所有文本都會從常規文本中分離出來，經常會在左、右兩邊進行縮進（增加外邊距），而且有時會使用斜體。也就是說，塊引用擁有它們自己的空間
插入一個換行符
<q> 標簽定義一個短的引用，瀏覽器經常會在這種引用的周圍插入引號
需要了解的內容（一些老版本棄置的元素與不建議使用的元素，做到看見了要明白其含義）
<ol></ol>定義一個有序列表
<ul> 標簽定義無序列表
<li> 標簽定義列表項目，<li> 標簽可用在有序列表 (<ol>) 和無序列表 (<ul>) 中
<dl> 標簽定義一個描述列表，<dl> 標簽與 <dt>（定義項目/名字）和 <dd>（描述每一個項目/名字）一起使用
標簽告訴瀏覽器把其中的文本表示為強調的內容，對于所有瀏覽器來說，這意味著要把這段文字用斜體來顯示
<body bgcolor="xxx" text="xxxx">,bgcolor屬性設置頁面顏色，text屬性設置文本顏色
<font face="arial">xxxx</font>利用font元素改變字體
<center></center>對其包圍的文本進行水平居中處理
一些字符實體
<顯示為<
>顯示為>
?right顯示為?
三.一個簡單的html框架
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Hello Wrld!</title>
</head>
<body>
<h1>演示文件，頁面顯示hello world！</h1>
<p>
Hello Wrld !
</p>
</body>
</html>
四.在頁面中插入一個鏈接
用于創建指向其它頁面的鏈接，元素中的內容就是鏈接文本，在瀏覽器中鏈接文本會顯示有下劃線，指示這是可單擊的，例如：
<a href="(鏈接目標文件的路徑或url)"
title="文本描述">（鏈接文本）
href屬性指向鏈接文件的路徑
rirle屬性所需鏈接頁面的文本描述
加入id屬性用于具體指向某個鏈接的某個標題，例如：
<a href="index.html#標識符">xxxxx</a>
并同步頁面中的標題,鏈接所使用的標識符要與標題的標識符設置一致
<h2 id="標識符">xxxxx</h2>
加入target屬性，使瀏覽器打開鏈接時為單獨的窗口，而不是同一窗口，例如：
<a target="_blank" href="xxxxxxxx"
title="xxxxxxxxx">xxxxxxxxx</a>
如果不加入target屬性，點擊鏈接時瀏覽器會在同一窗口打開鏈接，加入此屬性，瀏覽器會在單獨窗口打開鏈接
五.在頁面中插入圖像
<img src="xxxxx">標記為在頁面中顯示圖像，xxx為圖片的路徑或url
alt=“xxx”屬性為描述這個圖像內容的文本，如果圖像未能顯示，就會使用這個文本來取代它。
width-"xxx"屬性告訴瀏覽器在頁面中顯示圖像的寬度
height="xxx"屬性告訴瀏覽器在頁面中顯示圖像的高度
未完待續，歡迎繼續關注好程序員前端教程分享!
HTML（HyperText Markup Language，超文本標記語言）是用來描述網頁的一種語言，它不是一種編程語言，而是一種標記語言。
HTML5是構建Web內容的一種語言描述方式，HTML5是互聯網的下一代標準，是構建以及呈現互聯網內容的一種語言方式，被認為是互聯網的核心技術之一。HTML產生于1990年，1997年HTML4成為互聯網標準，并廣泛應用于互聯網應用的開發。
HTML5是Web中核心語言HTML的規范，用戶使用任何手段進行網頁瀏覽時看到的內容原本都是HTML格式的，在瀏覽器中通過一些技術處理將其轉換成為了可識別的信息，HTML5在從前HTML4.01的基礎上進行了一定的改進。
由于HTML5只是在HTML的基礎上進行了新增或者廢棄一些標簽或者特性，本文默認均為HTML5語法，被廢棄的部分就不再提起，HTML一般用于描述網頁的結構，所以一些樣式和腳本方面的標簽和屬性以及關于JavaScript部分的特性也不再提及，重點在于梳理常用標簽體系。
現今瀏覽器的許多新功能都是從HTML5標準中發展而來的。目前常用的瀏覽器有IE、火狐、谷歌、Safari和Opera等等，通過對這些主流web瀏覽器的發展策略調查，發現它們都支持HTML5上采取了措施。
（1）IE瀏覽器
2010年3月16日，微軟MIX10技術大會上宣布其推出的IE9瀏覽器已經支持HTML5。同時還聲稱，隨后將會更多的支持HTML新標準和CSS3新特性。
（2）FireFox瀏覽器
2010年7月，Mozilla基金會發布了即將推出的Firefox4瀏覽器的第一個早期測試版，該版本中Firefox瀏覽器中進行了大幅改進，包括新的HTML5語法分析器，以及支持更多的HTML5語法分析器，以及支持更多的HTML5形式的控制等。從官方文檔來看，Firefox4對HTML5是完全級別的支持。目前，包括在線視頻，在線音頻在內的多種應用都已經在版本中實現。
（3）Google瀏覽器
2010年2月19日，谷歌Gears項目經理通過微博宣布，谷歌將放棄對Gears瀏覽器插件項目的支持，以重點開發HTML5項目。據費特表示，目前在谷歌看來，Gears應用用于HTML5的諸多創新非常相似，并且谷歌一直積極發展HTML5項目。因此只要谷歌不斷以加強網絡標準的應用功能為工作重點，那么為Gears增加新功能就無太大意義了。另外，Gears面臨的需求也在日益下降，這也是谷歌做出吊證的重要原因。
（4）Safari瀏覽器
2010年6月7日，蘋果在開發者發布會公布Safari5，這款瀏覽器支持10個以上的HTML5新技術，包括全屏幕播放、HTML5視頻、HTML5地理位置、HTML5切片元素、HTML5的可拖動屬性、HTML5的形式驗證、HTML5的Ruby、HTML5的Ajaxl.ishi和WebSocket字幕。
（5）Opera瀏覽器
2010年5月5日，Opera軟件公司首席技術官，號稱“CSS之父”的Hakon Wium Lie認為，HTML5和CSS3，將會是全球互聯網發展的未來趨勢，包括目前Opera在內的諸多瀏覽器廠商，紛紛研發HTML5的相關產品，web未來屬于HTML5。
綜上所述，目前這些瀏覽器紛紛朝著HTML5的方向邁進，HTML5的時代即將來臨。
●Notepad++
●Visual Studio Code
●HBuilderX
●Dreamweaver
●Sublime Text
●Webstorm
Webstorm為本文使用的工具，請自行購買激活，也可以使用以上的免費工具，安裝步驟都較為簡單，在此省略！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>
單標簽：
<標簽名 [屬性名=屬性值,...]>
成對標簽：
<標簽名 [屬性名=屬性值,...]></標簽名>
<h1>這是一級標題</h1>
<h2>這是二級標題</h2>
<h3>這是三級標題</h3>
<h4>這是四級標題</h4>
<h5>這是五級標題</h5>
<h6>這是六級標題</h6>
<p>這是一個段落</p>
使用示例：
<a href="百度一下，你就知道">打開百度，你就知道！</a>
常見屬性：
屬
<img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="百度LOGO">
<table border="1px" cellpadding="0px" cellspacing="0px">
<tr>
<th>表頭一</th>
<th>表頭二</th>
<th>表頭三</th>
<th>表頭四</th>
</tr>
<tr>
<td>單元格一</td>
<td>單元格二</td>
<td>單元格三</td>
<td>單元格四</td>
</tr>
</table>
無序列表：
<ul>
<li>列表項</li>
<li>列表項</li>
<li>列表項</li>
<li>列表項</li>
</ul>
有序列表：
<ol>
<li>列表項</li>
<li>列表項</li>
<li>列表項</li>
<li>列表項</li>
</ol>
自定義列表：
<dl>
<dt>+</dt><dd>列表項</dd>
<dt>+</dt><dd>列表項</dd>
<dt>+</dt><dd>列表項</dd>
</dl>
<div>具體內容</div>
<span>具體內容</span>
常見標簽：
基本布局：
常見標簽：
案例演示：
1、form、input、label演示
<form action="" method="get">
<p>
<label for="username">賬戶：</label>
<input type="text" name="username" id="username">
</p>
<p>
<label for="password">密碼：</label>
<input type="password" name="password" id="password">
</p>
<p><input type="submit"></p>
</form>
2、textarea演示
<form action="" method="post">
<textarea name="mycontext" cols="30" rows="10"></textarea>
<input type="submit">
</form>
3、fieldset、legend、select、optgroup、option演示
<form action="" method="post">
<fieldset>
<legend>請選擇你的愛好：</legend>
<select name="myhobby" id="myhobby">
<optgroup label="運動">
<option value="籃球">籃球</option>
<option value="足球">足球</option>
</optgroup>
<optgroup label="電子">
<option value="看電影">看電影</option>
<option value="看電視">看電視</option>
</optgroup>
</select>
</fieldset>
</form>
4、datalist演示
<form action="" method="post">
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
</form>
5、單選框演示
<form action="" method="post">
<input type="radio" name="sex" id="male" value="male" checked>
<label for="male">Male</label>
<input type="radio" name="sex" id="female" value="female">
<label for="female">female</label>
</form>
6、復選框演示
<form action="" method="post">
<input type="checkbox" name="vehicle" id="bike" value="bike">
<label for="bike">I have a bike</label>
<input type="checkbox" name="vehicle" id="car" value="car">
<label for="car">I have a car</label>
</form>
<iframe src="百度一下，你就知道" frameborder="0" width="500px" height="500px"></iframe>
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
您的瀏覽器不支持 Audio 標簽。
</audio>
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
您的瀏覽器不支持 Video 標簽。
</video>
水平線：<hr>
換行：<br>
<b>粗體文本</b>
<code>計算機代碼</code>
<em>強調文本</em>
<i>斜體文本</i>
<kbd>鍵盤輸入</kbd>
<pre>預格式化文本</pre>
<small>更小的文本</small>
<strong>重要的文本</strong>
<abbr>縮寫詞或者首字母縮略詞</abbr>
<address>聯系信息</address>
<bdo>文字方向</bdo>
<blockquote>從另一個源引用的部分</blockquote>
<cite>工作的名稱</cite>
<del>刪除的文本</del>
<ins>插入的文本</ins>
<sub>下標文本</sub>
<sup>上標文本</sup>
HTML標簽可以設置屬性，屬性總是以名稱/值對的形式出現，比如：name=“value”，它的主要作用是控制或修飾標簽。
HTML事件可以觸發瀏覽器中的行為，比方說當用戶點擊某個 HTML 元素時啟動一段 JavaScript。
由窗口觸發該事件 (同樣適用于 <body> 標簽)：
表單事件在HTML表單中觸發 (適用于所有 HTML 元素，但該HTML元素需在form表單內)：
通過鍵盤觸發事件，類似用戶的行為：
通過鼠標觸發事件，類似用戶的行為：
通過視頻（videos），圖像（images）或音頻（audio） 觸發該事件，多應用于HTML媒體元素比如：<embed>，<object>，<img>，<audio>和<video>。
課件資料?騰訊文檔
聯網時代，程序員無疑是走在時代前沿，在職場十分吃香的一個群體。無論外行小白還是初級碼農，都想進階成為程序員大牛，分互聯網紅利的一杯羹。近一段時間，尤其是小程序上線以來，HTML5技術成為了掀起互聯網浪潮的主角，HTML5技術得到了更廣泛的應用，相應的，H5程序員也成了缺口極大的互聯網人才，是每個互聯網公司都樂意花重金聘請的對象。
人才爭奪大戰愈演愈烈，H5人才卻是樂哉其中，因為這對于他們來說是千載難逢的大好機會，意味著離名企高薪又進一步。圈外人卻都是羨慕嫉妒恨的目光，多想來跟你分這塊大蛋糕，可惜是個門外漢，入門難啊！初級H5程序員想進階，有什么方法嗎？
小編搜集了一些有用靠譜的方法，希望能對大家有所幫助
適合自學的網站
W3C
全稱“W3School”，被很多人成為學習網站中的“戰斗機”
Dive into HTML5
這里的內容差不多都是跟HTML5相關的文檔，知識點比較基礎，簡潔清新。在這里不僅能學習知識，還能提高你的英語閱讀能力。類似的英文網站還有woorkup。如果英文水平不夠硬，只能百度翻譯了，也就看個大概意思吧。
H5之家
據說這是裝B必進的網站，因為這里不僅有死知識，還有專家對行業的解讀和相關新聞的調侃。
HTML5案例網站
HTML5xCSS3
這里有大量的HTML5案例和模板，隨便點開一個案例都好看到讓人震驚。
360HTML5基地
這是360旗下的一個用來展示HTML5作品的網站，大部分是HTML5游戲展示，可愛有趣。
HTML5技術網站
whatwg
網絡超文本應用技術工作小組（Web Hypertext Application Technology Working Group）的博客，里面一些文章能讓人受益匪淺。
HTML5技術網
絕對滿滿的都是硬貨，甚至極其邊緣的問題你都能在這里找到答案。
HTML5測試網站
HTMLDemos
測試HTML5標簽在各瀏覽器的兼容性，還可以查看HTML5的標準Demo演示。
網站類的工具就先為大家推薦這么多，很多人可能在學習的時候如果能有工具書的輔助效果會更明顯，小編也認為，這種搭配是極其正確和明智的，理論結合實踐。那就再為大家推薦兩本入門級必備兩本教材《Head first HTML&CSS》和《JavaScript DOM編程藝術》。相信有了這兩大法寶你也可以很快進階成為技術大牛的。你有更好的方法推薦嗎？歡迎留言討論。
歡迎關注微信公眾號【中軟卓越北京EEC】
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
