整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
全棧攻城獅-每日更新原創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的基本知識，電腦編程系列教程，下節繼續。
1. HTML的代碼文件
（1）打開Hbuilder開發工具，新建項目，點擊右鍵新建一個HTML文檔。
（2）在文檔中寫HTML代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>產品列表</title>
</head>
<body>
這是產品頁面
<b>好好學習，天天向上</b>
<h1>好好學習，天天向上</h1>
</body>
</html>
溫馨提示：
常用的快捷鍵：
Ctrl+s:保存
ctrl+c:復制
ctrl+x：剪切
ctrl+v：粘貼
2. HTML的基本結構
對于HTML文件的后綴名一般為“html”或“htm”
2.1HTML的標簽格式
（1）什么是HTML標簽？
HTML標簽是有開始標簽和結束標簽組成
開始標簽：是被尖括號包圍的元素名。
結束標簽：是被尖括號包圍的斜杠和元素名
<元素>內容 </元素>
例如：<b>好好學習天天向上</b>
注意：有些HTML標簽是沒有結束標簽的, <hr/>
(2)單標簽和雙標簽
雙標簽：例如：<b></b>
單標簽：<hr/> <br/>
(3) 標簽的屬性
<font size="1">好好學習</font>
<font size="7">好好學習</font>
<h1 title="h1" style="color: red;">
我是一個標題標簽
</h1>
3. HTML基本結構的認識
<!--<!DOCTYPE html>:文檔聲明，告知瀏覽器文檔使用哪種HTML或XHTML規范，讓瀏覽器通過正確的方式解析我們的網頁，讓網頁能夠正確的顯示。-->
<!DOCTYPE html>
<!-- <html>標簽：是網頁的跟標簽-->
<html>
<!--head是網頁頭，一般表示網頁中描述信息-->
<head>
<!--
meta：提供網頁的相關信息，有利于搜索引擎收錄
charset="UTF-8"： 設置網頁編碼方式為utf-8
name="Keywords" ：設置網頁關鍵字
name="viewport": 設置網頁視窗大小
-->
<meta name="Keywords" content="HTML5前端開發工程師入門到精通課程"/>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<!-- <title></title>：表示網頁的標題 -->
<title></title>
</head>
<body>
<!--
<body></body>：網頁的主體內容，用戶呈現的內容，比如文字，圖片，鏈接，視頻……
-->
</body>
</html>
4. HTML的注釋
<!--這里是注釋的內容-->
5. HTML的編碼問題
常見編碼個格式：
UTF-8:國際通用的編碼格式
GBK/GB2312:中文編碼字符
HTML的編碼：<meta charset="UTF-8">
6. HTML規范
（1）html標簽都是有尖括號包圍的標簽，比如<b>
（2）標簽通常是成對存在，<b></b>,<h1></h1>
（3）HTML不區分大小寫，我們建議小寫。
（4）HTML可以嵌套，但是允許交叉嵌套
正確寫法：<b> <h1>我很粗</h1> </b>
錯誤寫法：
<b> <h1>我很粗 </b></h1>
今天，前端工程師已經成為研發體系中的重要崗位之一。
可是與此相對的是，極少大學的計算機專業愿意開設前端課程，大部分前端工程師的知識，也都是在實踐和工作中不斷學習的。
最近收到很多同學的后臺留言，說希望多推出一些前端方向的教程。
今天我們就帶來一門適合前端初學者的課程，可以帶你從零入門 HTML、CSS、JS、React 等前端核心技能，并創建一個待辦事項的管理應用～
項目效果：
課程從最基礎的 HTML/ CSS/JS 講起，還包含了 TypeScript/React/Fabric 等常用技能的講解。由淺入深，層層遞進，如果你想快速上手 React 框架，這門課會是你非常好的選擇。
訪問“實驗樓”官網，搜索“從 0 到 1 構建待辦事項應用”就能學習全部課程內容。
以下是課程第一節的內容 —— 「HTML 簡介」，帶你快速入門HTML，讓我們一起進入前端的大門看看吧：
「HTML 簡介」
本實驗是對 HTML 進行學習，并且較詳細的說明了 Web 是如何工作的。主要內容有：HTML 常見標簽、HTML 文檔結構、HTML 表格和表單、HTML 有序列表和無序列表。通過本節學習，可以構建簡單的 HTML 網頁。
HTML（超文本標記語言）是一種用于創建網頁的標準標記語言。HTML 不需要編譯，可以直接由瀏覽器執行，它的解析依賴于瀏覽器的內核。它不是一種編程語言，而是一種標記語言。
下面我們來演示用戶是如何看到一個網頁顯示的。
具體來講：
首先我們來看一個例子：
<!DOCTYPE html>
<html>
<head>
<title>HTML 簡介</title>
<meta charset="utf-8" />
</head>
<body></body>
</html>這是一個 HTML 的基本骨架，我們將逐步介紹這些是什么意思。
文檔類型聲明
<!DOCTYPE html> 是我們的文檔聲明頭。他告訴了瀏覽器，本文檔處理的是 HTML 文檔。
html 標簽
html 標簽即根元素，此處表示文檔的開始，該標簽包含兩個子標簽：head 和 body。
head 元素
head 標簽下面所包含的標簽由 title、meta、link、style、script 等（后面會講到）。
title 標簽
作用：設置文檔的標題或者名稱。瀏覽器通常將該標簽的內容顯示在窗口頂部或者標簽頁上。每個 HTML 文檔只能有一個，必須有一個 title 標簽。
meta 標簽
<metacharset="UTF-8"> 聲明字符的編碼格式為 utf-8。
body 標簽
body 標簽定義文檔的主體，也就是我們的主要內容（比如文本、超鏈接、圖像、表格和列表等）。
1.h 系類標簽
h 標簽有六種 h1，h2，h3，h4，h5，h6，它代表著我們的標題。
<!DOCTYPE html>
<html>
<head>
<title>HTML 簡介</title>
<meta charset="utf-8" />
</head>
<body>
<h1>我是一級標題</h1>
<h2>我是二級標題</h2>
<h3>我是三級標題</h3>
<h4>我是四級標題</h4>
<h5>我是五級標題</h5>
<h6>我是六級標題</h6>
</body>
</html>為了大家能更有效的學習，請使用實驗樓的環境。首先我們新建一個文件，點擊 File，然后 New File，命名為 index.html。
然后輸入上面的代碼。
讓我們來看一下運行效果吧。鼠標右鍵 index.html 文件，點擊 Open With，然后點擊 Preview。
最終效果為：
2.p 標簽
p 標簽是我們的文本標簽，p 標簽會自動在其兩個標簽之間創建一些空白。刪掉上段代碼 <body> 標簽里的內容，把下面的內容放到 <body> 標簽里面去。
<p>我是第一段文字，實驗樓，做實驗，學編程</p>
<p>我是第二段文字，實驗樓，做實驗，學編程</p>3. 圖片標簽
HTML 的圖像是通過標簽 <img> 來定義的。語法: <imgsrc="圖片地址"/> 刪掉上段代碼 <body> 標簽里的內容，把下面的內容放到 <body> 標簽里面去。
<p>實驗樓圖片：</p>
<img src="https://static.shiyanlou.com/frontend/dist/img/9f43b00.svg" />4.a 標簽
<a> 標簽是超鏈接標簽，意思就是我們點擊它可以跳轉到一個網頁。刪掉上段代碼 <body> 標簽里的內容，把下面的內容放到 <body> 標簽里面去。
<a href="https://www.shiyanlou.com/">實驗樓</a>點擊文字：
跳轉到指定網頁：
篇幅有限，后續的課程內容，請在“實驗樓”邊敲代碼邊學習～
訪問“實驗樓”官網，搜索“從 0 到 1 構建待辦事項應用”，就能找到課程，繼續學習啦！
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
