、認識WEB
網頁主要是由文字、圖像和超鏈接等元素構成,除了這些基本的元素以外,還包含一些多媒體元素等,比如音頻、視頻等。
比如我們常見的有小米商城、京東商城、以及淘寶等,都屬于我們的大型的購物平臺網站,而這些網站都包含了網頁中基本的元素。那么網頁是怎么形成的呢?
其實網頁的形參很簡單,當我們前端小姐姐將頁面通過代碼構建好以后,再通過瀏覽器(IE、谷歌等瀏覽器)將其渲染成為用戶眼中所能看得到的各種樣式的頁面。
既然我們的網頁是通過瀏覽器的渲染而顯示不同的頁面,那么常見的瀏覽器有哪一些呢?如常見的五大瀏覽器,分別是IE、火狐、谷歌、Safari以及Opera等。
五大瀏覽器
但是在開發過程中,谷歌和火狐用得比較多,可以更好地幫助開發人員進行調試。IE瀏覽器相對來說存在兼容性問題,所以很少去使用。
為什么網頁代碼通過瀏覽器的渲染就能顯示出各種不同的樣式的頁面呢?此處就不得不提到瀏覽器的內核,通常瀏覽器的內核分為如下幾種:
而五大瀏覽器之間的內核都是什么呢?如下圖所示:
五大瀏覽器的內核
二、Web標準
什么是Web標準?Web標準是由W3C組織和其它標準化組織,制定的一系列標準的集合。
W3C萬維網聯盟是國際最著名的標準化組織。他是1994年成立后,至今已發布了近百項相關萬維網的標準。
w3c組織
那為什么要制定Web標準呢?
作用:由于市場上誕生了許多不同類型的瀏覽器,而這些瀏覽器都存在不同的內核,導致前端小姐姐開發的頁面在不同的瀏覽器上顯示會存在不同的差異,這樣就會給前端開發者帶來了許多麻煩。而通過Web標準就會降低這種頁面之間的差異化,讓瀏覽器在解析前端代碼的時候,轉向W3C的標準,呈現出統一的效果。
優點:
那么一個漂亮的頁面是怎樣構成的呢?它的構成分別是如下幾種類型:
漂亮頁面的構成
好啦![微笑]本節就分享到這兒哦!對前端感興趣的小伙伴,可以關注我的,我會繼續給大家分享前端以及其它開發內容的知識,也歡迎大家給我在評論區留言[作揖]。
個人編寫HTML使用的軟件是dreamweaver,這個軟件的話,正版是要購買的,一開始學習HTML就是用的這個軟件了,挺好用的,而且代碼提示特別方便,不用擔心太多的標簽和屬性記勞~
除了HTML基本結構的幾個標簽以外,HTML還有一些比較常用的基本標簽;
(1)文本標簽:
(2)布局標簽:
(3)多媒體標簽:
(4)超鏈接標簽:
(5)序列化標簽:
(6)表格標簽:
(7)表單標簽:
果想開發一個網站,除了要精通后端開發語言(如:php)外,還要精通HTML代碼。那么,什么是HTML呢?HTML是一種超文本標記語言,它包含有眾多的標簽,我們可以通過這些標簽,把不同的internet資源(如:文字、圖片、視頻、音頻、表單等等)整合在一個統一的文檔中,這就形成了我們可以看得見的網頁。那么,HTML都有哪些常用的標簽呢?
html5文檔類型聲明:<!doctype html>
html4文檔類型聲明:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
這個標簽是html最外層的標簽,所有其它的HTML標簽都要放在這個標簽的內部。
<html>
<head></head>
<body></body>
</html>
在HTML標簽中,有的標簽是成雙成對的,如:<html></html>(如下圖);而有的標簽是單個的,如:<hr>橫線標簽。
head頭部有以下幾種常用標簽:
meta:主要提供有關頁面的元信息。
link:用來定義文檔與外部資源的關系,最常用的是調用CSS樣式文件。
title:頁面標題的標簽。
script:用來調用JS文件或JS代碼。當然,script標簽也可以在body主體中使用。
1、塊級標簽。
塊級標簽的特性是:獨自占有一行;標簽的高與寬、邊距可以修改;沒有設置寬與高時,默認繼承父標簽。例如:
<div>div1</div>
<div>div2</div>
<style>
.aa1{ border:1px solid #000; width:150px; height:100px; margin:30px; }
.aa2{ border:1px solid #000; width:150px; height:100px; margin:30px; }
</style>
前端頁面顯示的效果如下圖:
常用的塊級標簽有:div、h1、h2、h3、h4、h5、h6、hr、menu、ul、ol、li、dl、dt、dd、table、p、form 。
2、內聯標簽。
內聯標簽與塊級標簽不同,它不能獨自占有一行,會與其它內聯標簽在同一樣展示;內聯標簽的高與寬、上下邊距是不能修改的,它里面的文字或圖片有多高,它就是多高。例如如下代碼:
<style>
.aa1{ border:1px solid #000; width:150px; height:100px; margin:30px; }
.aa2{ border:1px solid #000; width:150px; height:100px; margin:30px; }
</style>
<span>span1</span>
<span>span2</span>
CSS樣式代碼跟塊級標簽的例子是一樣的,而顯示的效果就不一樣了,寬與高、上下邊距沒有效果。如下圖:
常用的內聯標簽有:span、a、b、strong、i、em 。
3、內聯塊級標簽。
內聯塊級標簽,既有一些內聯標簽的特性,也有一些塊級標簽的特點:它不能獨自占有一行,但是可以修改它的寬度和高度。例如下面這段代碼:
<style>
.aa1{ border:1px solid #000; width:150px; height:100px; margin:30px; }
.aa2{ border:1px solid #000; width:150px; height:100px; margin:30px; }
</style>
<img src="w5.jpg" alt="">
<img src="w5.jpg" alt="">
CSS樣式代碼跟塊級標簽的那個例子仍然是一樣的,圖片的寬和高、上下邊距修改成功,而2個圖片不能獨自占有一行,而是在同一行。如下圖:
常用的內聯塊級標簽有:img、input、textarea。
4、區域標簽。
所謂區域標簽,就是主要用來劃分布局頁面區域的。如:頭部、主體內容、側邊欄、底部。這樣劃分的好處是:讓頁面布局更加清晰明了。
常用的區域標簽有:header(頭部)、footer(底部)、nav(導航)、aside(側邊欄)、section(主體)、article(獨立內容)。
5、表單標簽。
這個表單標簽我們也是會經常用到的,如:登錄網站的時候、提交數據的時候。如下圖的評論表單:
?表單常用的標簽有:form、input、select、option、textarea 。
以上就是我們開發網頁時,會常用到的HTML標簽。當然,HTML標簽遠不止這些,尤其是html5出來后,新增了許多的新標簽。但是,有些標簽在我們開發中很少用到,所以,這里就沒有做相應的介紹。
*請認真填寫需求信息,我們會在24小時內與您取得聯系。