整合營銷服務商

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

          免費咨詢熱線:

          HTML基礎回顧

          HTML基礎回顧

          文主要內容

          • html 的常見元素
          • html 元素的分類
          • html 元素的嵌套關系
          • html 元素的默認樣式和 CSS Reset
          • html 常見面試題

          html 的常見元素

          html 的常見元素主要分為兩類:head 區域的元素、body 區域的元素。下面來分別介紹。

          1、head 區域的 html 元素

          head 區域的 html 元素,不會在頁面上留下直接的內容。

          • meta
          • title
          • style
          • link
          • script
          • base

          base元素的介紹

          <base href="/">
          

          base 標簽用于指定基礎的路徑。指定之后,所有的 a 鏈接都是以這個路徑為基準。

          2、html 元素(body 區域)

          body 區域的 html 元素,會直接出現在頁面上。

          • div、section、article、aside、header、footer
          • p
          • span、em、strong
          • 表格元素:table、thead、tbody、tr、td
          • 列表元素:ul、ol、dl、dt、dd
          • a
          • 表單元素:form、input、select、textarea、button

          div 是最常見的元素,大多數場景下,都可以用div(實在不行就多包幾層div)。可見,div 是比較通用的元素,這也決定了 div 的的語義并不是很明確

          常見標簽的重要屬性

          • a[href,target]
          • img[src,alt]
          • table td[colspan,rowspan]。設置當前單元格占據幾行幾列。在合并單元格時,會用到。
          • form[target,method,enctype]
          • input[type,value]
          • button[type]
          • selection>option[value]
          • label[for]

          html 文檔的大綱

          我們平時在寫論文或者其他文檔的時候,一般會先列出大綱,然后再寫具體的內容。

          同樣,html 網頁也可以看成是一種文檔,也有屬于它的大綱。

          一個常見的html文檔,它的結構可以是:

              <section>
                  <h1>一級標題</h1>
          
                  <section>
                      <h2>二級標題</h2>
                      <p>段落內容</p>
                  </section>
          
                  <section>
                      <h2>二級標題</h2>
                      <p>段落內容</p>
                  </section>
          
                  <aside>
                      <p>廣告內容</p>
                  </aside>
          
              </section>
          
              <footer>
                  <p>某某公司出品</p>
              </footer>
          

          查看網頁大綱的工具

          我們可以通過 http://h5o.github.io/ 這個工具查看一個網頁的大綱。

          使用方法

          (1)將網址 http://h5o.github.io/ 保存到書簽欄

          (2)去目標網頁,點擊書簽欄的網址,即可查看該網頁的大綱。

          這個工具非常好用,既可以查看網頁的大綱,也可以查看 markdown 在線文檔的結構。

          html 元素的分類

          按照樣式分類:

          • 塊級元素
          • 行內元素
          • inline-block:比如form表單元素。對外的表現是行內元素(不會獨占一行),對內的表現是塊級元素(可以設置寬高)。

          按照內容分類:

          html 元素的嵌套關系

          • 塊級元素可以包含行內元素。
          • 塊級元素不一定能包含塊級元素。比如 div 中可以包含 div,但 p 標簽中不能包含 div。
          • 行內元素一般不能包含塊級元素。比如 span 中不能包含 div。但有個特例:在 HTML5 中, a 標簽中可以包含 div。

          注意:在 HTML5 中 a > div 是合法的, div > a > div是不合法的 ;但是在 html 4.0.1 中, a > div 仍然是不合法的。

          html 元素的默認樣式和 CSS Reset

          比如下拉框這種比較復雜的元素,是自帶默認樣式的。如果沒有這個默認樣式,則該元素在頁面上不會有任何表現,則必然增加一些工作量。

          同時,默認樣式也會帶來一些問題:比如,有些默認樣式我們是不需要的;有些默認樣式甚至無法去掉。

          如果我們不需要默認的樣式,這里就需要引入一個概念:CSS Reset

          常見的 CSS Reset 方案

          方案一

          CSS Tools: Reset CSS

          方案二

          雅虎的 CSS Reset

          我們可以直接通過 CDN 的方式引入:

          <link rel="stylesheet" type="text/css" href=">
          

          方式三:(比較有爭議)

          *{
              margin: 0;
              padding: 0;
          }
          
          

          上面何種寫法,比較簡潔,但也有爭議。有爭議的地方在于,可能會導致 css 選擇器的性能問題。

          Normalize.css

          上面的幾種 css reset 的解決思路是:將所有的默認樣式清零。

          但是,Normalize.css 的思路是:既然瀏覽器提供了這些默認樣式,那它就是有意義的。既然不同瀏覽器的默認樣式不一致,那么,Normalize.css就將這些默認樣式設置為一致

          html 常見面試題

          doctype 的意義是什么

          • 讓瀏覽器以標準模式渲染
          • 讓瀏覽器知道元素的合法性

          HTML、XHTML、HTML5的區別

          • HTML 屬于 SGML
          • XHTML 屬于 XML,是 HTML 進行 XML 嚴格化的結果
          • HTML5 不屬于SGML,也不屬于 XML(HTML5有自己獨立的一套規范),比 XHTML 寬松。

          HTML5 有什么新的變化

          • 新的語義化元素
          • 表單增強
          • 新的API:離線、音視頻、圖形、實時通信、本地存儲、設備能力等。

          em 和 i 的區別

          共同點:二者都是表示斜體。

          區別:

          • em 是語義化的標簽,表示強調。
          • i 是純樣式的標簽,表示斜體。HTML5 中不推薦使用。

          語義化的意義是什么

          • 開發者容易理解,便于維護。
          • 機器(搜索引擎、讀屏軟件等)容易理解結構
          • 有助于 SEO

          哪些元素可以自閉和

          自閉和的元素中不能再嵌入別的元素。且 HTML5 中要求加斜杠。

          • 表單元素 input
          • 圖片 img
          • br、hr
          • meta、link

          form 表單的作用

          • 直接提交表單
          • 使用 submit / reset 按鈕
          • 便于瀏覽器保存表單
          • 第三方庫(比如 jQuery)可以整體獲取值
          • 第三方庫可以進行表單驗證

          所以,如果我們是通過 Ajax 提交表單數據,也建議加上 form。

          TML元素

          這一節以及以后幾節我們將對HTML中<body>標簽中的各種元素進行一個概述,并對一些基本元素進行練習。

          HTML元素:指的是從開始標簽到結束標簽的所有代碼。

          舉個例子,在《第一個HTML頁面如何寫?——零基礎自學網頁制作》這一節中,我們寫了這樣一個頁面"第一個頁面.html"。后面的練習我們都在這個文件中進行。

          <!DOCTYPE HTML> 
            <html> 
            <head> 
            </head> 
            <body> 
            <h>第一個網頁</h>
            <p>千里之行始于足下</p> 
            </body>
            </html>

          其中"<h>第一個網頁</h>"整個代碼就可以看做是一個html元素,<h></h>叫做標題標簽,加上"第一個網頁"這段文字共同構成一個HTML元素。

          HTML元素非常多,因為我們可以在頁面中顯示各種各樣的信息,不同的信息載體對應不同的元素。

          下面我們就介紹幾個常用的html元素。

          HTML常用元素使用練習1

          NO.1:<h></h>與<hr>

          <h></h>這個用來添加標題的元素大家比較熟悉了,這里要介紹一個新的用法。示例代碼如下:

          <!DOCTYPE HTML>
            <html>
            <head> 
            <title>第一個網頁</title>
            </head> 
            <body>
            <h1>第一個網頁</h1>
            <h2>第一個網頁</h2>
            <h3>第一個網頁</h3>
            <h4>第一個網頁</h4>
            <h5>第一個網頁</h5>
            <h6>第一個網頁</h6>
            <p>千里之行始于足下</p>
            </body> 
            </html>

          頁面顯示效果如圖:

          大家通過觀察可以看出h后面的編號用來控制標題字號大小,僅僅是標題有這種預設,其他元素如果要調整字號的話我們放在以后CSS里講。

          下面看<hr>,示例代碼如下:

          <!DOCTYPE HTML>
            <html>
            <head> 
            <title>第一個網頁</title>
            </head> 
            <body>
            <h1>第一個網頁</h1><hr>
            <h2>第一個網頁</h2><hr>
            <h3>第一個網頁</h3><hr>
            <h4>第一個網頁</h4><hr>
            <h5>第一個網頁</h5><hr>
            <h6>第一個網頁</h6><hr>
            <p>千里之行始于足下</p><hr>
            </body> 
            </html>

          效果如下:

          <hr>標簽可以為它前面的元素添加分割線,大家注意的是分割線不是下劃線,添加下劃線的操作我們會在CSS樣式表中詳細講解。

          NO.2:<p></p>與<br>

          <p></p>元素是添加段落的。示例代碼如下:

          <!DOCTYPE HTML>
            <html>
            <head> 
            <title>第一個網頁</title>
            </head> 
            <body>
            <h1>第一個網頁</h1><hr>
            <p>千里之行始于足下值得注意的是我們沒有必要一一講解HTML中的所有元素以及每個元素的各個屬性,
          因為每個元素的使用都是大同小異,我們完全可以通過幾個常用案例對HTML全部元素及屬性的指定形成一
          個整體認識,以后可以根據需求通過查詢手冊來自己學習其他元素及其屬性的用法。</p><hr>
          </body>
          </html>

          效果如圖所示:

          通過觀察發現,即使我們在代碼中對段落的文字進行回車操作,但是出現在頁面中是沒有回車的效果的,文字按照順序長長的排列在顯示器上,非常不利于閱讀,因此我們就要介紹常常和p標簽連用的<br>換行標簽。

          示例代碼如下:

          <!DOCTYPE HTML>
            <html>
            <head>
            <title>第一個網頁</title>
          </head> 
          <body>
            <h1>第一個網頁</h1><hr>
          <p>千里之行始于足下<br>
            值得注意的是我們沒有必要一一講解HTML中的所有元素以及每個元素的各個屬性,<br>
            因為每個元素的使用都是大同小異,我們完全可以通過幾個常用案例對HTML全部元<br>
            素及屬性的指定形成一個整體認識,以后可以根據需求通過查詢手冊來自己學習其他<br>
            元素及其屬性的用法。</p><hr>
          </body>
          </html>

          效果如圖所示:

          喜歡的小伙伴請關注我,閱讀中遇到任何問題請給我留言,如有疏漏或錯誤歡迎大家斧正,不勝感激!

          HTML完整學習目錄

          HTML序章(學習目的、對象、基本概念)——零基礎自學網頁制作

          HTML是什么?——零基礎自學網頁制作

          第一個HTML頁面如何寫?——零基礎自學網頁制作

          HTML頁面中head標簽有啥用?——零基礎自學網頁制作

          初識meta標簽與SEO——零基礎自學網頁制作

          HTML中的元素使用方法1——零基礎自學網頁制作

          HTML中的元素使用方法2——零基礎自學網頁制作

          HTML元素中的屬性1——零基礎自學網頁制作

          HTML元素中的屬性2(路徑詳解)——零基礎自學網頁制作

          使用HTML添加表格1(基本元素)——零基礎自學網頁制作

          使用HTML添加表格2(表格頭部與腳部)——零基礎自學網頁制作

          使用HTML添加表格3(間距與顏色)——零基礎自學網頁制作

          使用HTML添加表格4(行顏色與表格嵌套)——零基礎自學網頁制作

          16進制顏色表示與RGB色彩模型——零基礎自學網頁制作

          HTML中的塊級元素與內聯元素——零基礎自學網頁制作

          初識HTML中的<div>塊元素——零基礎自學網頁制作

          在HTML頁面中嵌入其他頁面的方法——零基礎自學網頁制作

          封閉在家學網頁制作!為頁面嵌入PDF文件——零基礎自學網頁制作

          HTML表單元素初識1——零基礎自學網頁制作

          HTML表單元素初識2——零基礎自學網頁制作

          HTML表單3(下拉列表、多行文字輸入)——零基礎自學網頁制作

          HTML表單4(form的action、method屬性)——零基礎自學網頁制作

          HTML列表制作講解——零基礎自學網頁制作

          為HTML頁面添加視頻、音頻的方法——零基礎自學網頁制作

          音視頻格式轉換神器與html視頻元素加字幕——零基礎自學網頁制作

          HTML中使用<a>標簽實現文本內鏈接——零基礎自學網頁制作

          大家在瀏覽網頁的時候,是否思考過這樣一個問題:怎樣才能制作出一個網頁呢?制作出一個網頁是很簡單的,只要知道什么是HTML并掌握HTML的基礎知識就可以制作出一個簡單的網頁,今天我就為講解HTML的入門及結構組成。

          一、什么是HTML?

          1、在我們開始學習HTML之前我們需要知道什么是HTML?

          HTML的全稱為Hyper Text Markup Language,中文名稱為超文本標記語言,閱覽方式為網頁瀏覽器,同時HTML也被稱為網頁。

          2、一個簡單的HTML文檔

          二、HTML編輯器

          我們在可以使用TXT文本文檔或者專業的HTML編輯器來編輯HTML。

          1、記事本

          ① 創建一個TXT文本

          ② 輸入HTML代碼

          ③ 點擊文件—另存為—輸入名稱+“html”的后綴名即可得到你的第一個HTML文件。

          ④ 然后雙擊這個文件運行。

          運行結果

          2、專業編輯器

          ① Sublime Text

          ② HBuilder

          ③ Adobe Dreamweaver

          ④ CoffeeCup HTML Editor

          這其中我比較推薦HBuilder這款編輯器,界面簡單,編輯起來很快。

          三、HTML的組成部分

          在上面的案例中我們可以看到HTML是由頭部(head)和身體(body)所組成的。

          1、頭部(head)

          通常包含標題(title),也就是一個網頁的名稱

          網頁標題

          2、身體(body)

          body的部分是整個網頁的重要內容部分,讓人一眼就瀏覽到這個網頁的內容,可以插入文本、圖片、多媒體等內容。

          四、HTML元素

          l HTML元素是指以開始標簽起始,以結束標簽終止的元素:元素內容即為開始標簽與結束標簽之間的內容。

          l <head></head>、<body></body>、<p></p>、<h1></h2>等這些都是HTML元素,在上面的案例中就有六個元素。

          l 也有部分元素只有開始標簽,例如<br>,以開始標簽的結束而結束。

          五、HTML的屬性

          l 一般來說HTML的屬性就是HTML元素的屬性,屬性可以在元素中添加附加信息。

          l 屬性總是以名稱/值對的形式出現,比如:name=”value”。

          l 屬性一般描述于開始標簽。

          l style中會有更多的屬性。

          六、HTML格式化

          HTML可定義很多供格式化輸出的元素,比如粗體字和斜體字。

          HTML文本格式化標簽

          標簽

          描述

          <b>

          定義粗體文本

          <em>

          定義著重文字

          <i>

          定義斜體字

          <small>

          定義小號字

          <strong>

          定義加重語氣

          <sub>

          定義下標字

          <sup>

          定義上標字

          <ins>

          定義插入字

          <del>

          定義刪除字


          運行結果示意圖

          HTML“計算機輸出”標簽

          標簽

          描述

          <code>

          定義計算機代碼

          <kdd>

          定義鍵盤碼

          <samp>

          定義計算機代碼樣本

          <var>

          定義變量

          <pre>

          定義預格式文本

          HTML引文、引用及標簽定義

          標簽

          描述

          <abbr>

          定義縮寫

          <address>

          定義地址

          <bdo>

          定義文字方向

          <blockquote>

          定義長的引用

          <q>

          定義短的引用語

          <cite>

          定義引用、引證

          <dfn>

          定義一個定義項目

          七、HTML超鏈接

          超鏈接可以是圖片、文字、多媒體也可以是一個網址

          示例:

          結果:

          點擊帶有下劃線的兩個字就可以進入某度的網站

          八、HTML CSS

          1、CSS是一種層疊樣式表,可以修飾html元素的樣式并可以精確地進行排版

          2、CSS有三種方式:

          l 內部樣式,在HTML元素中使用“style”屬性

          l 內部樣式表,在頭部<head>區域使用<style>元素來包含CSS

          l 外部引用,引用帶有后綴css的文件,示例:

          html文檔

          css文檔

          如果你看到了這里,就說明你已經打開了制作網頁的大門啦~


          主站蜘蛛池模板: 无码人妻一区二区三区免费视频 | 中文字幕一区二区日产乱码| 亚洲av无码一区二区三区乱子伦| 国产一区二区三区免费观在线| 福利一区福利二区| 久久国产高清一区二区三区| 精品国产乱子伦一区二区三区| 怡红院一区二区在线观看| 无码午夜人妻一区二区三区不卡视频| 精品一区二区三区在线播放视频| 丰满爆乳一区二区三区| 一区二区三区日本电影| 夜夜爽一区二区三区精品| 美女视频一区二区三区| 日本内射精品一区二区视频| 精品一区二区久久| 国产成人久久精品麻豆一区| 人妻精品无码一区二区三区| 国产高清一区二区三区| 色欲AV无码一区二区三区| 琪琪see色原网一区二区| 无码人妻精品一区二区蜜桃网站| 久久久久人妻一区精品色| 色狠狠色噜噜Av天堂一区| 一区二区三区在线视频播放| 久久精品一区二区影院| 亚洲成AV人片一区二区| 亚洲性色精品一区二区在线| 人妻av无码一区二区三区| 久久久久久人妻一区二区三区| 蜜桃AV抽搐高潮一区二区| 国产一区二区三区小向美奈子| 国产精品亚洲一区二区无码| 相泽亚洲一区中文字幕| 色婷婷一区二区三区四区成人网 | 国产拳头交一区二区| 国产视频一区在线播放| 亚洲爆乳精品无码一区二区三区| 精品国产一区AV天美传媒 | 亚洲一区精品视频在线| 国产suv精品一区二区6|