前端入門-什么是HTML，如何快速學習

一篇介紹了網頁的基本結構，那如何編寫網頁的內容? 前提是要學會HTML標簽的用法，本篇主要介紹HTML標簽是什么，如何學習，需要大概多長時間學習。

本篇主要基于html5介紹，html5 是最新版的標準，之前的版本可以自己了解下。

HTML 簡介

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

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

一個html標簽基本結構如下：

<標簽名稱  屬性="屬性值"></標簽名稱> 或 <標簽名稱 屬性="屬性值"/>

有以下特點：

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

HTML標簽按功能大體可分以下幾種類型：

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

如何學習html的標簽用法

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

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

制定一個學習計劃,每天堅持下去

要求，每天花費3到5個小時學習，至少1到2周掌握常用的html標簽含義及用法，可以按照上面介紹的標簽進行分類學習，感謝關注，祝你學習愉快。

覽html網頁，查看其源代碼，可以幫助我們了解該版網頁的信息以及架構，每個瀏覽器都是允許用戶查看他們訪問的任何網頁的HTML源代碼的。以下編程獅小師妹就介紹幾個常見瀏覽器的查看網頁 HTML 源代碼的方法。

谷歌瀏覽器 Google Chrome

僅查看源代碼

方法一

要僅查看源代碼，請按計算機鍵盤上的Ctrl+U。

方法二

右鍵單擊網頁的空白部分，然后從出現的彈出菜單中選擇“查看網頁源代碼(V)”。

查看包含元素的頁面源

打開 Chrome 瀏覽器，然后瀏覽要查看其源代碼的網頁。
點擊瀏覽器窗口右上角的“自定義及控制Google Chrome” 圖標。
在出現的下拉菜單中，選擇更多工具(L)，然后選擇開發者工具(D)（快捷鍵：Ctrl+Shift+I）。
單擊屏幕底部出現的新部分左上角的“元素(Elements)”選項卡。

提示：
在 Chrome 中，按 F12 或 Ctrl+ Shift+I 也會調出交互式開發人員工具。此工具提供了與源代碼和 CSS 設置的更多交互，使用戶可以查看代碼中的更改如何立即影響網頁。

火狐瀏覽器 Mozilla Firefox

僅查看源代碼

方法一

要僅查看源代碼，請按計算機鍵盤上的 Ctrl+U。

方法二

右鍵單擊網頁的空白部分，然后從出現的彈出菜單中選擇“查看頁面源代碼(V)”。

查看包含元素的頁面源

打開 Firefox 并瀏覽您要查看其源代碼的網頁。
單擊屏幕右上角的菜單圖標。
在下拉菜單中選擇Web開發者，然后從展開的菜單中選擇切換工具箱（快捷鍵：Ctrl+ Shift+I）。
單擊顯示在屏幕底部的部分左上角的“查看器”選項卡。

提示：
在 Firefox 中，按 F12 或 Ctrl+ Shift+I也會調出交互式開發人員工具。該工具提供了與源代碼和 CSS 設置的交互，使用戶可以實時查看代碼中的更改如何影響網頁。

查看頁面的部分源代碼

突出顯示網頁中您要查看其源代碼的部分。
右鍵單擊突出顯示的部分，然后選擇檢查元素(Q)。

提示：
您可以使用 Firebug 附加組件查看和編輯頁面的源代碼，并通過瀏覽器實時查看更改。

微軟 Edge

僅查看源代碼

方法一

要僅查看源代碼，請按計算機鍵盤上的Ctrl+U。

方法二

右鍵單擊網頁的空白部分，然后從出現的彈出菜單中選擇“查看頁面源代碼(V)”。

查看包含元素的頁面源

打開 Microsoft Edge 并瀏覽您要查看其源代碼的網頁。
點擊屏幕右上角的設置和更多 圖標。
將鼠標移到更多工具(L)在下拉菜單中，在展開的菜單選擇開發人員工具(D)。
單擊屏幕右側出現的窗口頂部的“元素(Elements)”選項卡。

提示：
在Microsoft Edge中，按F12或 Ctrl+ Shift+I 也會調出交互式開發人員工具。該工具提供了與源代碼和 CSS 設置的交互，使用戶可以實時查看代碼中的更改如何影響網頁。

IE瀏覽器 Microsoft Internet Explorer

僅查看源代碼

方法一

要僅查看源代碼，請按計算機鍵盤上的Ctrl+U。

方法二

右鍵單擊網頁的空白部分，然后從出現的彈出菜單中選擇查看源(V)。

查看包含元素的頁面源

打開 Internet Explorer 并瀏覽您要查看其源代碼的網頁。
單擊右上角的工具。
從下拉菜單中選擇F12開發人員工具。
單擊開發人員工具菜單左上角的 DOM 資源管理器 選項卡。

提示：
在 Internet Explorer 中，按 F12 會彈出 DOM 工具。該工具提供了與源代碼和 CSS 設置的交互，使用戶可以查看代碼中的更改如何立即影響網頁。

360安全瀏覽器

僅查看源代碼

方法一

要僅查看源代碼，請按計算機鍵盤上的Ctrl+U。

方法二

右鍵單擊網頁的空白部分，然后從出現的彈出菜單中選擇“查看網頁源代碼(V)”。

查看包含元素的頁面源

打開 360 安全瀏覽器，然后瀏覽要查看其源代碼的網頁。
點擊瀏覽器窗口右上角的打開菜單圖標。
在出現的下拉菜單中，選擇更多工具(L)，然后選擇開發者工具(D)（快捷鍵：Ctrl+Shift+I）。
單擊屏幕底部出現的新部分左上角的“元素(Elements)”選項卡。

提示：
在 360 安全瀏覽器中，按 F12 或 Ctrl+ Shift+I 也會調出交互式開發者工具。此工具提供了與源代碼和 CSS 設置的更多交互，使用戶可以查看代碼中的更改如何立即影響網頁。

如何關閉源代碼頁或工具

查看完網頁上的源代碼后，您可能想要退出或關閉它。關閉源代碼取決于您用來打開源代碼的方法。

如果您使用了Ctrl+U 方法（Edge 除外）或右鍵單擊方法，請關閉在瀏覽器窗口頂部打開的新選項卡。
如果您使用過開發人員方法（使用 F12 或Ctrl+ Shift+I），請再次按相同的鍵，或單擊工具窗口右上角的圖標。

使用在線工具查看源代碼

除了使用瀏覽器外，還有一些在線工具可讓您查看任何網頁的源代碼。這些工具可能會有所幫助，因為大多數工具都可以格式化，樣式化和突出顯示代碼，以使其易于閱讀。

以上就是編程獅W3Cschool為你整理的關于《如何在瀏覽器賬中查看網頁的HTML源代碼？》的全部內容，希望對你有所幫助~

、系統結構：

① B/S架構：Browser/Server（瀏覽器/服務器的交互形式。）

Browser支持的語言：HTML、CSS、JavaScript；S是服務器端Server支持的語言有：C、C++、Java等
B/S架構系統有什么優點和缺點？ 優點：升級方便，只升級服務器代碼即可，維護成本低。缺點：速度慢、體驗不好、界面不炫酷
企業大部分使用B/S架構
B/S架構的系統代表有：京東、百度、天貓等

② C/S架構：Client/Server（客戶端/服務器的交互形式。）

C/S架構的優點和缺點？
優點：速度快、體驗好、界面炫酷（娛樂性多數是C/S架構）
缺點：升級麻煩、維護成本較高。
C/S架構的系統代表有：QQ、微信、支付寶等

2、 HTML概述

① 什么是HTML？② 怎么開發HTML？③ 怎么運行HTML?

① HTML：Hyper Text Markup Language（超文本標記語言）

?由大量的標簽組成，每一個標簽都有開始標簽和結束標簽。

?超文本：圖片、聲音、視頻等

② HTML開發使用普通的文本編輯器就行，創建擴展名是.html或.htm

?編輯器有：HBuilder、vscode等

③ 直接采用瀏覽器打開HTML文件就能運行

④ HTML是誰制定的？

④ W3C：世界萬維網聯盟

?W3C制定了HTML的規范：每個瀏覽器生產廠家都會遵守規范。HTML也會按照規范去寫代碼

?HTML規范目前最高的版本是：HTML5.0，簡稱H5

?我們現在主要學的HTML4.0（基本用法）

為了方便中國Web前端程序員開發，提供了大量幫助文檔。為開發提供方便。

?w3school：先出現的，和W3C無關

?w3cschool：后出現的，和W3C無關

?W3C制定了很多規范：HTML/XML/http協議/https協議……

3、第一個HTML

4、基本標簽

p：段落標記
h1~h6：標題字，與word的標題字相同
br：換行標記（獨目標記）
hr：橫線（獨目標記）
color：橫線顏色
width：橫線寬度（可以px和%）
pre：預留格式
del：刪除字
ins：插入字（有下劃線）
b：粗體字
i：斜體字
sup：上標
sub：下標
font：字體標簽
color：字體顏色
size：字體大小（1~7）

頁面效果圖：

5、實體符號：為了避免和標簽沖突，所以需要使用實體符號

<：<
>：>
空格：
注：html中按多個空格鍵，在網頁中只顯示一個空格。

6、HTML表格

table：表格
tr：行
td：列
th：列（比td加粗居中）
合并行：rowspan（一個格占兩個位置）
注：row合并的時候，刪除下面的單元格
合并列：colspan（一個格占兩個位置）
注：col合并的時候，刪除哪個沒有要求

7、thead、tbody、tfoot標簽

thead、tbody、tfoot不是必須的，便于后期JS編寫。

8、body的背景顏色和背景圖片

bgcolor：背景色
background：背景圖片
背景圖片在背景色的上面

9、img標簽

src：圖片的路徑
只設置width，height會等比例縮放
只設置height，不起作用
title：鼠標懸停時顯示的信息
alt：設置圖片加載失敗時顯示的提示信息

10、超鏈接或熱鏈接

href：hot references 熱引用；
后面一定是一個資源的地址。
后面的路徑可以是絕對路徑也可以是相對路徑，可以是網絡某個資源的路徑。
target：
_blank：新窗口
_self：當前窗口（默認）
_top：頂級窗口
_parent：父級窗口

超鏈接的作用：

通過超鏈接可以從瀏覽器向服務器發送請求。

11、request與response的概念

request：瀏覽器向服務器發送數據（請求）
B --》S
response：服務器向瀏覽器發送數據（響應）
S--》B

12、列表

有序列表：ol
type：1、A、a、I、i
無序列表：ul
type：circle（○）、square（□）、disc（●）

13、表單（重點）

action：寫提交的URL地址
method：默認get；還有post
表單有什么用？
答：收集用戶的信息。表單展現之后，用戶填寫表單，點擊提交。（submit）
怎么畫一個表單？
答：用form標簽
一個網頁可以有多個表單form
表單最終是需要提交數據給服務器的，form標簽有一個action屬性，這個屬性用來指定服務器地址。
action屬性用來指定數據提交給哪個服務器
action屬性和超鏈接中的href屬性一樣。都可以向服務器發送請求（request）
http://192.168.111.3:8080/oa/save 這是請求路徑，
表單提交數據最終提交給192.168.111.3機器上的8080端口對應的軟件。
input中的type取值:
radio：單選控件
checkbox：多選控件
submit：提交控件
reset：重置控件
button：普通控件
text：文本控件
password：密碼控
file：文件控件
上傳文件專用
hidden：隱藏域
網頁上看不到，但是表單提交的時候數據會自動提交給服務器。
input中的value屬性用來指定按鈕上顯示的文本信息。
超鏈接a與表單form的區別？
答：表達form可以收集信息，而超鏈接a無法收集信息。
表單提交里面的按鈕input中屬性必須定義name，不然提交不了。
表單是以什么格式提交數據給服務器的？
格式：action?name=value&name=value&name=value..
HTTP協議規定的，必須以這種格式提交給服務器
java中String split('&');
重點強調：表單項寫了name屬性的，一律會提交給服務器。不想提交就不要寫name屬性。
文本框和密碼框的value不需要程序員指定，用戶輸入什么value就是什么。
當name沒有寫的時候，該項不會提交給服務器
但是當value沒有寫的時候，value的默認值是空字符串"",將空字符串提交給服務器。java代碼得到的是：String s = "";

效果圖：

地址欄提交的信息：

?username=abc&userpassowrd=1234&sex=1&aihao=study&aihao=dream&myText=我沒有value屬性；&position=ln&myFile=&myHidden=

14、表單的說明：

① 用戶手動輸入的文本框，都不需要給value賦值
② textarea沒有value屬性
③ radio、checkbox默認選項需要使用，checked="checked"（簡寫：checked）
④ select中的option屬性：? selected="selected" 為默認選中 ?size：顯示條目數量
multiple="multiple" 支持多選(select的屬性)
⑤ input的屬性
readonly和disabled：
都是只讀不能修改
數據不會提交
maxlength：設置文本框中輸入的字符數量。

15、HTML中的結點

在HTML文檔中，任何元素（結點）都有id屬性，id屬性是該節點的唯一標識。所以在同一個HTML文檔中id值不能重復。
注意：表單提交數據的時候，只和name有關系，和id無關
id有什么作用？
javascript語言：可以對HTML文檔中的任何節點進行增刪改操作。
獲取節點時，通常通過id來獲取節點
HTML文檔是一棵樹，樹上有很多節點，每一個節點都有唯一的id（DOM樹）

16、div和span

div和span有什么用？
div和span都可以稱為圖層。
有什么用？
圖層的作用為了保證頁面可以靈活的布局。
div和span是可以定位的，只要定下div的左上角的x軸和y軸坐標即可。
div和span的區別？
di獨占一行
span不會獨占一行

在線咨詢

上一篇：10個免費的HTML在線編輯工具
下一篇：幾個有意思的小眾網站，喜歡就收藏吧

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

前端入門-什么是HTML，如何快速學習

HTML 簡介

HTML標簽按功能大體可分以下幾種類型：

如何學習html的標簽用法

谷歌瀏覽器 Google Chrome

僅查看源代碼

查看包含元素的頁面源

火狐瀏覽器 Mozilla Firefox

僅查看源代碼

查看包含元素的頁面源

查看頁面的部分源代碼

微軟 Edge

僅查看源代碼

查看包含元素的頁面源

IE瀏覽器 Microsoft Internet Explorer

僅查看源代碼

查看包含元素的頁面源

360安全瀏覽器

僅查看源代碼

查看包含元素的頁面源

如何關閉源代碼頁或工具

使用在線工具查看源代碼

、系統結構：

2、 HTML概述

3、 第一個HTML

4、基本標簽

5、實體符號：為了避免和標簽沖突，所以需要使用實體符號

6、HTML表格

7、thead、tbody、tfoot標簽

8、body的背景顏色和背景圖片

9、img標簽

10、 超鏈接或熱鏈接

11、request與response的概念

12、列表

13、表單（重點）

15、HTML中的結點

16、div和span

您的項目需求

3、第一個HTML

10、超鏈接或熱鏈接