整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          「前端」HTML之認識網頁

          、認識WEB

          網頁主要是由文字、圖像和超鏈接等元素構成,除了這些基本的元素以外,還包含一些多媒體元素等,比如音頻、視頻等。

          比如我們常見的有小米商城、京東商城、以及淘寶等,都屬于我們的大型的購物平臺網站,而這些網站都包含了網頁中基本的元素。那么網頁是怎么形成的呢?

          其實網頁的形參很簡單,當我們前端小姐姐將頁面通過代碼構建好以后,再通過瀏覽器(IE、谷歌等瀏覽器)將其渲染成為用戶眼中所能看得到的各種樣式的頁面。

          既然我們的網頁是通過瀏覽器的渲染而顯示不同的頁面,那么常見的瀏覽器有哪一些呢?如常見的五大瀏覽器,分別是IE、火狐、谷歌、Safari以及Opera等。

          五大瀏覽器

          但是在開發過程中,谷歌和火狐用得比較多,可以更好地幫助開發人員進行調試。IE瀏覽器相對來說存在兼容性問題,所以很少去使用。

          為什么網頁代碼通過瀏覽器的渲染就能顯示出各種不同的樣式的頁面呢?此處就不得不提到瀏覽器的內核,通常瀏覽器的內核分為如下幾種:

          • 排版引擎
          • 解釋引擎
          • 渲染引擎

          而五大瀏覽器之間的內核都是什么呢?如下圖所示:

          五大瀏覽器的內核

          二、Web標準

          什么是Web標準?Web標準是由W3C組織和其它標準化組織,制定的一系列標準的集合。

          W3C萬維網聯盟是國際最著名的標準化組織。他是1994年成立后,至今已發布了近百項相關萬維網的標準。

          w3c組織

          那為什么要制定Web標準呢?

          作用:由于市場上誕生了許多不同類型的瀏覽器,而這些瀏覽器都存在不同的內核,導致前端小姐姐開發的頁面在不同的瀏覽器上顯示會存在不同的差異,這樣就會給前端開發者帶來了許多麻煩。而通過Web標準就會降低這種頁面之間的差異化,讓瀏覽器在解析前端代碼的時候,轉向W3C的標準,呈現出統一的效果。

          優點:

          • 遵循Web標準,讓頁面更標準統一。
          • 同時讓Web的發展變得越來越好。
          • 內容更容易被多種設備訪問。
          • 還容易被搜索引擎搜索。
          • 降低網站流量費用和提高頁面的加載速度。
          • 也讓頁面變得易維護。

          那么一個漂亮的頁面是怎樣構成的呢?它的構成分別是如下幾種類型:

          • 結構(Structure):通常在頁面中HTML就是一個頁面的結構,好比剛孵出來的小鳥寶寶。
          • 表現(Presentation):通常在頁面中CSS就是對一個頁面進行美化的,好比小鳥寶寶慢慢地長出了漂亮的羽毛。
          • 行文(Behavior):通常在頁面中會使用JavaScript(或JQuery)來完成行文,好比小鳥寶寶長大了,可以進行飛行、捕食等。

          漂亮頁面的構成

          好啦![微笑]本節就分享到這兒哦!對前端感興趣的小伙伴,可以關注我的,我會繼續給大家分享前端以及其它開發內容的知識,也歡迎大家給我在評論區留言[作揖]。

          個人編寫HTML使用的軟件是dreamweaver,這個軟件的話,正版是要購買的,一開始學習HTML就是用的這個軟件了,挺好用的,而且代碼提示特別方便,不用擔心太多的標簽和屬性記勞~

          1.什么是HTML?

          • HTML 是用來描述網頁的一種語言,指的是超文本標記語言: HyperText Markup Language;
          • HTML 不是一種編程語言,而是一種標記語言;
          • HTML文檔也叫做 web 頁面;

          2.HTML基本結構

          • <!DOCTYPE html>:文檔聲明;
          • <html>:HTML 頁面的根元素;
          • <head>:用于定義文檔的頭部,是所有頭部元素的容器;
          • <meta>:提供有關頁面的元信息,位于文檔的頭部,不包含任何內容;
          • <title>:文檔的標題;
          • <body>:定義文檔的主體,包含文檔的所有內容;

          3.HTML標簽使用?

          • HTML 標簽是由尖括號包圍的關鍵詞,且通常是成對出現的如<a></a>,當然也有單個的,只不過比較少如<hr>;
          • 標簽對中的第一個標簽表示開始標簽,第二個標簽表示結束標簽;

          4.HTML常用標簽介紹

          除了HTML基本結構的幾個標簽以外,HTML還有一些比較常用的基本標簽;

          (1)文本標簽:

          • h1-h6:用于定義標題,h1為最大標題,h6為最小標題;
          • p:定義段落;
          • span:組合文檔中的行內元素;
          • br:換行;
          • hr:水平線;
          • strong/b:加粗文字;
          • em/i:斜體;
          • u:下劃線;
          • s:刪除線;
          • pre:定義預格式化的文本,保持原有格式;
          • sub:下標;
          • sup:上標;
          • blockquote:塊引用;

          (2)布局標簽:

          • div:定義文檔中的分區或節,把文檔分割為獨立的、不同的部分;
          • header:定義頁面的頭部;
          • aside:用作文章的側欄;
          • section:定義文檔中的節;
          • footer:定義文檔或節的頁腳,通常包含文檔的作者、版權信息、使用條款鏈接、聯系信息等;
          • article:規定文章獨立的其他內容,如標題、內容、評論;

          (3)多媒體標簽:

          • img:用于在網頁中插入圖像;
          • audio:定義聲音,比如音樂或其他音頻流;
          • video:定義視頻,比如電影片段或其他視頻流;

          (4)超鏈接標簽:

          • a:定義超鏈接,指定頁面間的跳轉;

          (5)序列化標簽:

          • ul:定義無序列表;
          • ol:定義有序列表;
          • li:定義列表項目,可用在無序列表ul和有序列表ol中;
          • dl:定義了定義列表;
          • dt:定義了定義列表中的項目(即術語部分);
          • dd:在定義列表中定義條目的定義部分;

          (6)表格標簽:

          • table:定義 HTML 表格;
          • tr:定義表格的行;
          • td:定義表格的單元;
          • th:定義表頭;
          • caption:定義表格標題;
          • col:為表格中一個或多個列定義屬性值;
          • colgroup:用于對表格中的列進行組合,以便對其進行格式化;
          • thead:定義表格的表頭;
          • tbody:表格主體,也就是正文部分;
          • tfoot:定義表格的頁腳(腳注或表注);

          (7)表單標簽:

          • form:用于為用戶輸入創建 HTML 表單;
          • input:用于搜集用戶信息;
          • button:定義一個按鈕;
          • select:創建單選或多選菜單;
          • option:定義下拉列表中的一個選項;
          • textarea:定義多行的文本輸入控件;
          • label:為 input 元素定義標注(標記);
          • fieldset:用于將表單內的相關元素分組;
          • legend:為 fieldset 元素定義標題;

          5.HTML注意事項

          • HTML文件當以后綴名為 .html 或 .htm 來命名;
          • HTML標簽和屬性是不區分大小寫的,建議HTML標簽和屬性都小寫,屬性值必須用雙引號包圍;
          • HTML標簽都是以開始標簽起始,以結束標簽終止;
          • HTML標簽之間盡量縮進與換行,每行代碼不要過長,方便閱讀和維護;
          • HTML標簽使用必須符合標簽嵌套規則,如禁止a標簽嵌套a標簽,p標簽嵌套div標簽等;
          • 建議不使用HTML已經廢棄的或者不贊成使用的標簽,少使用table布局、iframe框架嵌套以及flash播放器;

          果想開發一個網站,除了要精通后端開發語言(如: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標簽都要放在這個標簽的內部。

          <html>

          <head></head>

          <body></body>

          </html>

          三、雙標簽和單標簽。

          在HTML標簽中,有的標簽是成雙成對的,如:<html></html>(如下圖);而有的標簽是單個的,如:<hr>橫線標簽。

          四、head頭部標簽。

          head頭部有以下幾種常用標簽:

          meta:主要提供有關頁面的元信息。

          link:用來定義文檔與外部資源的關系,最常用的是調用CSS樣式文件。

          title:頁面標題的標簽。

          script:用來調用JS文件或JS代碼。當然,script標簽也可以在body主體中使用。

          五、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出來后,新增了許多的新標簽。但是,有些標簽在我們開發中很少用到,所以,這里就沒有做相應的介紹。


          主站蜘蛛池模板: AA区一区二区三无码精片| 国产亚洲欧洲Aⅴ综合一区| 精品无码国产一区二区三区51安 | 天天看高清无码一区二区三区| 人妻少妇AV无码一区二区| 国产福利一区二区精品秒拍| 亚洲一区二区三区久久| 久久精品午夜一区二区福利 | 爆乳熟妇一区二区三区霸乳| 在线观看中文字幕一区| 亚洲熟女乱色一区二区三区 | 国模大胆一区二区三区| 日韩免费一区二区三区在线| 蜜桃视频一区二区三区在线观看| 三上悠亚一区二区观看| 亚洲毛片不卡av在线播放一区| 午夜AV内射一区二区三区红桃视| 国产精品一区二区久久| 亚洲一区二区三区国产精品无码| 日韩精品一区二区亚洲AV观看| 久久久久人妻一区精品果冻| 日本美女一区二区三区 | 国精品无码一区二区三区左线| 人妻无码一区二区三区| 亚洲AⅤ无码一区二区三区在线| 无码日韩人妻AV一区免费l| 亚洲乱码国产一区网址| 手机看片一区二区| 无码国产精品一区二区免费16| 亚洲无删减国产精品一区| 日韩精品一区二区三区中文 | 日本精品一区二区久久久| 一区二区三区美女视频| 无人码一区二区三区视频| 亚洲av鲁丝一区二区三区| 亚洲视频一区二区三区| 国产SUV精品一区二区88| 美女免费视频一区二区| 日韩精品无码视频一区二区蜜桃 | 国产美女一区二区三区| 无码人妻aⅴ一区二区三区|