web 就是 world wide web 的縮寫,稱之為全球廣域網(wǎng),俗稱 WWW。對于用戶來說它其實(shí)就是由多個網(wǎng)頁組成在一起而形成的一種服務(wù)(Web).
我們可以將 web 理解為就是當(dāng)前的一種互聯(lián)網(wǎng)。對于我們來說更多的就是網(wǎng)站服務(wù)。網(wǎng)站我們可以認(rèn)是由多個網(wǎng)頁組合在一起而形成一種服務(wù)。
而 web 前端就是來負(fù)責(zé)一個網(wǎng)站當(dāng)中前臺網(wǎng)頁里的內(nèi)容。網(wǎng)頁是由前端工程師使用 HTML 語言編寫而成的一種文件,它里面會包含文字、圖片、超鏈接、音頻、視頻等等這些內(nèi)容。
注:超文本標(biāo)記語言(Hyper Text Markup Language , HTML)就是用來描述網(wǎng)頁內(nèi)容的一種計(jì)算機(jī)語言。
HTML 超文本標(biāo)記語言(Hyper Text Markup Language)就是用來描述網(wǎng)頁的一種計(jì)算機(jī)語言。
在互聯(lián)網(wǎng)最初的時候是沒有 HTML 的,我們只能通過網(wǎng)絡(luò)傳輸最簡單的文字內(nèi)容。 隨著用戶的要求越來越多,同時也是我們的技術(shù)的不斷發(fā)展,就出了一種可以表達(dá)文字內(nèi)容之外的語言 HTML1.0。后來又慢慢發(fā)展到了現(xiàn)在的 HTML5,也就是我們現(xiàn)在常說的 H5。
在測試過程中,我們有時候需要通過工具去查看對應(yīng)的 HTML 代碼。在這里我們可以用瀏覽器自帶的開發(fā)者工具,打開這個工具的快捷鍵是 F12。
開發(fā)者工具是一個相當(dāng)強(qiáng)大的工具。可以查看修改 HTML,還可以調(diào)試 js,可以修改 css,還可以查看網(wǎng)絡(luò)數(shù)據(jù),并且還能進(jìn)行性能測試。非常的全能。對于咱們 web 測試來說,是一個必須要掌握的工具。
要查看 HTML 源碼,我們只需要進(jìn)入開發(fā)者工具的 elements 界面。 在這里可以對 web 頁面上的元素進(jìn)行定位,并且查看整個 web 頁面的 HTML 源碼。
網(wǎng)頁是我們通過 HTML 語言來書寫。 用 HTML 語言去書寫網(wǎng)頁有一些結(jié)構(gòu)是默認(rèn)必須存在的, 這個結(jié)構(gòu)我們就叫做網(wǎng)頁(HTML)骨架。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
</html>
標(biāo)簽就是 HTML 語言的發(fā)明者人為定義好的一些"單詞",不同的標(biāo)簽代表了不同的功能。
標(biāo)簽有兩種常見的形式:
todo:加入 demo(done)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>網(wǎng)頁標(biāo)題</title>
</head>
<body>
<div>
<h1>我的第一個網(wǎng)頁</h1>
<p>網(wǎng)頁中的內(nèi)容</p>
</div>
</body>
</html>
todo:加入 demo(done)
HTML 標(biāo)簽可以擁有屬性。屬性提供了有關(guān) HTML 元素的更多的信息。屬性總是以名稱/值對的形式出現(xiàn),比如:name="value"。
屬性的基本格式為:<標(biāo)簽名 屬性1="屬性值1" 屬性2="屬性值2"></標(biāo)簽名>
每個標(biāo)簽都可以擁有多個屬性。屬性必須寫在開始標(biāo)簽中,位于標(biāo)簽名的后面。屬性之間不區(qū)分順序。標(biāo)簽名與屬性、屬性與屬性之間使用空格隔開。任何屬性都有默認(rèn)值,省略該屬性表示使用默認(rèn)值。
在 HTML 里,屬性也有很多中,比如首先有全局屬性,全局屬性是所有的標(biāo)簽都可以使用的。然后還有事件屬性,事件大家可以理解為不同的操作。在不同的操作中,也有特殊的屬性可以定義。最后還有各個標(biāo)簽的一些獨(dú)有的屬性。
比如常見的全局屬性有:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>網(wǎng)頁標(biāo)題</title>
</head>
<body>
<div id="first" class="content">網(wǎng)頁中的內(nèi)容</div>
</body>
</html>
搜索微信公眾號:TestingStudio霍格沃茲的干貨都很硬核
大家在瀏覽網(wǎng)頁的時候,是否思考過這樣一個問題:怎樣才能制作出一個網(wǎng)頁呢?制作出一個網(wǎng)頁是很簡單的,只要知道什么是HTML并掌握HTML的基礎(chǔ)知識就可以制作出一個簡單的網(wǎng)頁,今天我就為講解HTML的入門及結(jié)構(gòu)組成。
一、什么是HTML?
1、在我們開始學(xué)習(xí)HTML之前我們需要知道什么是HTML?
HTML的全稱為Hyper Text Markup Language,中文名稱為超文本標(biāo)記語言,閱覽方式為網(wǎng)頁瀏覽器,同時HTML也被稱為網(wǎng)頁。
2、一個簡單的HTML文檔
二、HTML編輯器
我們在可以使用TXT文本文檔或者專業(yè)的HTML編輯器來編輯HTML。
1、記事本
① 創(chuàng)建一個TXT文本
② 輸入HTML代碼
③ 點(diǎn)擊文件—另存為—輸入名稱+“html”的后綴名即可得到你的第一個HTML文件。
④ 然后雙擊這個文件運(yùn)行。
運(yùn)行結(jié)果
2、專業(yè)編輯器
① Sublime Text
② HBuilder
③ Adobe Dreamweaver
④ CoffeeCup HTML Editor
這其中我比較推薦HBuilder這款編輯器,界面簡單,編輯起來很快。
三、HTML的組成部分
在上面的案例中我們可以看到HTML是由頭部(head)和身體(body)所組成的。
1、頭部(head)
通常包含標(biāo)題(title),也就是一個網(wǎng)頁的名稱
網(wǎng)頁標(biāo)題
2、身體(body)
body的部分是整個網(wǎng)頁的重要內(nèi)容部分,讓人一眼就瀏覽到這個網(wǎng)頁的內(nèi)容,可以插入文本、圖片、多媒體等內(nèi)容。
四、HTML元素
l HTML元素是指以開始標(biāo)簽起始,以結(jié)束標(biāo)簽終止的元素:元素內(nèi)容即為開始標(biāo)簽與結(jié)束標(biāo)簽之間的內(nèi)容。
l <head></head>、<body></body>、<p></p>、<h1></h2>等這些都是HTML元素,在上面的案例中就有六個元素。
l 也有部分元素只有開始標(biāo)簽,例如<br>,以開始標(biāo)簽的結(jié)束而結(jié)束。
五、HTML的屬性
l 一般來說HTML的屬性就是HTML元素的屬性,屬性可以在元素中添加附加信息。
l 屬性總是以名稱/值對的形式出現(xiàn),比如:name=”value”。
l 屬性一般描述于開始標(biāo)簽。
l style中會有更多的屬性。
六、HTML格式化
HTML可定義很多供格式化輸出的元素,比如粗體字和斜體字。
HTML文本格式化標(biāo)簽
標(biāo)簽 | 描述 |
<b> | 定義粗體文本 |
<em> | 定義著重文字 |
<i> | 定義斜體字 |
<small> | 定義小號字 |
<strong> | 定義加重語氣 |
<sub> | 定義下標(biāo)字 |
<sup> | 定義上標(biāo)字 |
<ins> | 定義插入字 |
<del> | 定義刪除字 |
運(yùn)行結(jié)果示意圖
HTML“計(jì)算機(jī)輸出”標(biāo)簽
標(biāo)簽 | 描述 |
<code> | 定義計(jì)算機(jī)代碼 |
<kdd> | 定義鍵盤碼 |
<samp> | 定義計(jì)算機(jī)代碼樣本 |
<var> | 定義變量 |
<pre> | 定義預(yù)格式文本 |
HTML引文、引用及標(biāo)簽定義
標(biāo)簽 | 描述 |
<abbr> | 定義縮寫 |
<address> | 定義地址 |
<bdo> | 定義文字方向 |
<blockquote> | 定義長的引用 |
<q> | 定義短的引用語 |
<cite> | 定義引用、引證 |
<dfn> | 定義一個定義項(xiàng)目 |
七、HTML超鏈接
超鏈接可以是圖片、文字、多媒體也可以是一個網(wǎng)址
示例:
結(jié)果:
點(diǎn)擊帶有下劃線的兩個字就可以進(jìn)入某度的網(wǎng)站
八、HTML CSS
1、CSS是一種層疊樣式表,可以修飾html元素的樣式并可以精確地進(jìn)行排版
2、CSS有三種方式:
l 內(nèi)部樣式,在HTML元素中使用“style”屬性
l 內(nèi)部樣式表,在頭部<head>區(qū)域使用<style>元素來包含CSS
l 外部引用,引用帶有后綴css的文件,示例:
html文檔
css文檔
如果你看到了這里,就說明你已經(jīng)打開了制作網(wǎng)頁的大門啦~
TML文本是由 HTML命令組成的描述性文本,HTML 命令可以說明文字、 圖形、動畫、聲音、表格、鏈接等。 HTML的結(jié)構(gòu)包括頭部 (Head)、主體 (Body) 兩大部分。下面是什么是html內(nèi)容,希望對您有所幫助。
HTML(Hyper Text Mark-up Language )即超文本標(biāo)記語言,是 WWW 的描述語言,由 Tim Berners-lee提出。設(shè)計(jì) HTML 語言的目的是為了能把存放在一臺電腦中的文本或圖形與另一臺電腦中的文本或圖形方便地聯(lián)系在一起,形成有機(jī)的整體,人們不用考慮具體信息是在當(dāng)前電腦上還是在網(wǎng)絡(luò)的其它電腦上。這樣,你只要使用鼠標(biāo)在某一文檔中點(diǎn)取一個圖標(biāo),Internet就會馬上轉(zhuǎn)到與此圖標(biāo)相關(guān)的內(nèi)容上去,而這些信息可能存放在網(wǎng)絡(luò)的另一臺電腦中。
HTML文本是由 HTML命令組成的描述性文本,HTML 命令可以說明文字、 圖形、動畫、聲音、表格、鏈接等。 HTML的結(jié)構(gòu)包括頭部 (Head)、主體 (Body) 兩大部分。頭部描述瀏覽器所需的信息,主體包含所要說明的具體內(nèi)容。
html是什么文件
HTML就是超文件標(biāo)示語言(HyperText Markup Language)。主要是在瀏覽器中顯示一份文件的內(nèi)容。它本身并非程式設(shè)計(jì),只不過是標(biāo)示(Mark-up),用來強(qiáng)調(diào)及組織一般性的文字。HTML是由一些標(biāo)記(tags)所構(gòu)成,每個標(biāo)記對瀏覽器下一個特定的指令,這些指令會告訴瀏覽器如何顯示文件的內(nèi)容。
編輯HTML不需要多么高級的軟體配備,你只要有『記事本』這項(xiàng)軟體就可以了。但記得,HTML文件的副檔名有些奇怪,你必須設(shè)定為 .htm 或是.html 才行。
例如: index.htm是一個合法的HTML檔名,但index.txt就不是了。你可能聽過一些HTML的編輯程式如:HotDog 、CutrHTML ....等。對初學(xué)者而言,使用這些工具并不太好。雖然它們的設(shè)計(jì)目的是幫助你更容易使用HTML來工作。但不幸的是,其中有許多會將HTML的代碼隱覽起來,造成學(xué)習(xí)上的困難。
HTML由來
萬維網(wǎng)上的一個超媒體文檔稱之為一個頁面(外語:page)。作為一個組織或者個人在萬維網(wǎng)上放置開始點(diǎn)的頁面稱為主頁(外語:Homepage)或首頁,主頁中通常包括有指向其他相關(guān)頁面或其他節(jié)點(diǎn)的指針(超級鏈接),所謂超級鏈接,就是一種統(tǒng)一資源定位器(Uniform Resource Locator,外語縮寫:URL)指針,通過激活(點(diǎn)擊)它,可使瀏覽器方便地獲取新的網(wǎng)頁。這也是HTML獲得廣泛應(yīng)用的最重要的原因之一。
在邏輯上將視為一個整體的一系列頁面的有機(jī)集合稱為網(wǎng)站(Website或Site)。超級文本標(biāo)記語言(英文縮寫:HTML)是為“網(wǎng)頁創(chuàng)建和其它可在網(wǎng)頁瀏覽器中看到的信息”設(shè)計(jì)的一種標(biāo)記語言。
網(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ǔ)之上的。超級文本標(biāo)記語言之所以稱為超文本標(biāo)記語言,是因?yàn)槲谋局邪怂^“超級鏈接”點(diǎn)。
HTML特點(diǎn)
HTML(Hyper Text Mark-up Language)即超文本標(biāo)記語言或超文本鏈接標(biāo)示語言,是目前網(wǎng)絡(luò)上應(yīng)用最為廣泛的語言,也是構(gòu)成網(wǎng)頁文檔的主要語言。HTML文本是由HTML命令組成的描述性文本,HTML命令可以說明文字、圖形、動畫、聲音、表格、鏈接等。HTML的結(jié)構(gòu)包括頭部(Head)、主體(Body)兩大部分,其中頭部描述瀏覽器所需的信息,而主體則包含所要說明的具體內(nèi)容。
HTML文檔制作不是很復(fù)雜,且功能強(qiáng)大,支持不同數(shù)據(jù)格式的文件鑲?cè)耄@也是WWW盛行的原因之一,其主要特點(diǎn)如下:
1、 簡易性,HTML版本升級采用超集方式,從而更加靈活方便。
2、可擴(kuò)展性,HTML語言的廣泛應(yīng)用帶來了加強(qiáng)功能,增加標(biāo)識符等要求,HTML采取子類元素的方式,為系統(tǒng)擴(kuò)展帶來保證。
3、 平臺無關(guān)性。雖然PC機(jī)大行其道,但使用MAC等其他機(jī)器的大有人在,HTML可以使用在廣泛的平臺上.
*請認(rèn)真填寫需求信息,我們會在24小時內(nèi)與您取得聯(lián)系。