整合營銷服務商

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

          免費咨詢熱線:

          跨平臺開發課程01-HTML基礎知識

          程大綱

          • 什么是瀏覽器

          • 什么是服務器

          • 瀏覽器請求數據的過程

          • 什么是URL

          • 什么是HTTP協議

          • 其它知識儲備

          什么是瀏覽器

          • 瀏覽器是安裝在電腦里面的一個軟件, 能夠讓將網頁內容呈現給用戶查看,并讓用戶與網頁交互的一種軟件。 就好比QQ一樣都是安裝在電腦里面的一個軟件, 只不過功能不同而已

          • 常見主流瀏覽器

          • 瀏覽器市場份額-國內統計

          • 瀏覽器市場份額-國外統計

          • 不同的瀏覽器不同的瀏覽器內核, 瀏覽器內核也就是瀏覽器所采用的渲染引擎,渲染引擎決定了瀏覽器如何顯示網頁的內容,從而導致了瀏覽器兼容性問題出現

            • IE內核 Trident

            • 谷歌內核 WebKit / Blink

            • 火狐內核 Gecko

            • Safarri內核 WebKit

            • 歐朋內核 Presto

          • 前期上課以后面谷歌瀏覽器為主,后面將專門詳細介紹瀏覽器兼容問題

          什么是服務器

          • 服務器也是電腦,只不過是比我們的電腦配置更高的電腦,并且24小時不斷電不關機的計算機

          • 服務器是專門用于存儲數據電腦, 訪問者可以訪問服務器獲得服務器上存儲的資源

          • 服務器一旦關機,訪問者就無法訪問

          <h2 id="title3">訪問網頁原理</h2>

          <h3 id="title4">瀏覽器請求數據的原理</h3>

          • 我們是如何通過瀏覽器查看網頁上的內容的?

          • 1.打開IE緩存文件夾

            • Jonathan_Lee為個人電腦用戶名名稱

          • 2.清空該文件夾

          • 3.用IE打開網頁

          • 4.發現文件夾下多了很多文件(.html、.css、.js、.png等), 仔細觀察不難發現其實這些文件都是被訪問網頁上的內容

          • 5.結論

            • 訪問網頁時是有真實的、物理的文件傳輸的

            • 網頁不是一個文件,而是一堆文件組成的

            • 我們之所以平常感覺第二次訪問比第一次訪問快的原因就是,第一次訪問時已經將所有文件緩存到了本地

          瀏覽器請求數據的過程

          • 1.按下回車時瀏覽器根據輸入的URL地址發送請求報文

          • 2.服務器接收到請求報文,會對請求報文進行處理

          • 3.服務器將處理完的結果通過響應報文返回給瀏覽器

          • 4.瀏覽器解析服務器返回的結果,將結果顯示出來

          • 請求過程驗證

            • 3.1請求報文

            • 一個HTTP請求報文由請求行(request line)、請求頭部(header)、空行和請求數據4個部分

            • 3.2響應報文

            • 一個HTTP響應報文由響應行、響應頭、響應體組成

            • 1.利用chome瀏覽器打開一個網頁

            • 2.打開開發人員工具

            • 3.打開Network查看請求報文和響應報文

          什么是URL

          • 1.我們在瀏覽器的地址欄中輸入的地址其實就是URL

          • 2.URL格式:

            • 127.0.0.1/index.html (瀏覽器會自動補全http:和:80)

            • http://127.0.0.1/index.html (瀏覽器會自動補全:80)

            • http://127.0.0.1:80/index.html (完整格式)

            • 協議類型://ip地址:端口號/資源路徑/資源名稱

          • 3.URL拆分

            • 網絡協議類型 http://

            • 服務器IP地址 127.0.0.1

            • 服務器端口號 :80

            • 資源路徑 網頁在服務器上的路徑

            • 資源名稱 index.html

          • 4.URL拆分后每一部分的作用

          • 4.1服務器IP地址 和 服務器端口號它們兩的作用:

            • 告訴瀏覽器要去什么地方才能找到對應的服務器, 也就是告訴瀏覽器服務器的詳細地址

            • 服務器IP地址相當于現實生活中的地址; 例如:廣州市天河區棠安苑

            • 服務器端口號相當于現實生活中的門牌號碼; 例如: 9棟909室

            • 那么如果將地址和門牌號碼結合在一起, 就是我的詳細地址

          • 4.2資源名稱它的作用:

            • 告訴服務器我需要獲取哪一個文件

          • 4.3資源名稱

            • 需要訪問的文件名稱

          • 5.補充

            • URL全稱Uniform Resource Locator(統一資源定位符), 互聯網上的每一個資源都有一個唯一的URL地址

            • 由于IP地址全都是數字, 沒有任何的含義,比較難以記憶。 所以在訪問網頁時最常見的不是IP地址而是“域名”(一串有含義的字母OR數字)

            • 好比: http://www.baidu.com AND http://111.13.100.92:80/

          什么是HTTP協議

          • 1.HTTP是Hypertext Transfer Protocol的縮寫, 超文本傳輸協議

          • 2.什么是協議?

            • 在現實生活中有很多的協議, 例如租房協議/買賣協議/離婚協議

            • 無論是什么協議他們都是一個共同點, 就是用來規范/約束某一類事物

          • 3.溝通問題?

            • 溝通最常見的問題就是語言不通, 例如中國人和美國人溝通, 一個人說中文, 一個人說英文, 如果兩個人都不懂中文或者英文, 那么就會出現溝通問題

            • 如果要想解決溝通文件, 是不是需要先擬定規定, 兩個人都說中文, 或者兩個人都說英文, 或者請一個既懂中文又懂英文的翻譯

          • 4.HTTP協議是用來規范/約束哪一類事物?

            • 瀏覽器訪問網頁其實就是去服務器請求數據, 所以瀏覽器需要和服務器溝通, 所以也會存在溝通問題

            • HTTP協議就相當于我們讓兩個人都說中文或者都說英文一樣, 就是提前規范兩個人之間如何溝通, 也就是規范/約束瀏覽器和服務器之間如何溝通

          其它知識儲備

          • 1.在Windows系統中如何查看文件的擴展名

            • 默認情況下Windows系統是不顯示文件的擴展名的, 但是作為一個開發者而言, 查看文件的擴展名是我們的必備技能

            • win10: 隨便打開一個文件夾—>點擊查看—>將文件擴展名的選項勾選上

          • 2.電腦上的一個文件是可以”同時”被多個軟件打開的, 不同的軟件打開可能會有不同的效果

            • 例如: 同一個index.html文件可以被多個瀏覽器和記事本一起打開

            • 例如: .html文件通過瀏覽器打開不可以編輯, 通過記事本打開可以編輯

          • 3.什么是純文本文件?

            • 我們Windows電腦上有一款默認安裝好的軟件叫做記事本. 這款軟件就是專門用來打開純文本文件的, 所以只要能夠被記事本打開, 并且能夠正常顯示的文件都是純文本文件

            • .html的文件可以被記事本打開, 并且能夠正常顯示,所以.html文件是一個純文本文件

          些初學web前端的小伙伴會比較迷惑,HTML到底是什么呢?

          這里解釋一下,HTML稱為超文本標記語言,是一種標識性的語言。

          它包括一系列標簽,通過這些標簽可以將網絡上的文檔格式統一,使分散的Internet資源連接為一個邏輯整體。HTML文本是由HTML命令組成的描述性文本,HTML命令可以說明文字,圖形、動畫、聲音、表格、鏈接等。

          HTML的學習也是要由淺到深一步一步學習,對于很多小伙伴來說,HTML的學習路線一直是一個問題,下邊我列出HTML需要學習的幾個知識點,大家可以作為參考。

          HTML學習路線:

          ⒈ html概述

          html基本標簽

          ⒊ 圖片標簽

          ⒋ 超鏈接標簽

          ⒌ 表格標簽

          ⒍ 無序列表標簽

          ⒎ 有序列表標簽

          ⒏ 定義列表標簽

          ⒐ div標簽

          ⒑ 語義化標簽

          ⒒ 表單標簽

          ⒓ 語義化表單元素

          ⒔ 框架標簽

          ⒕ 特殊字符

          ⒖ 綜合案例

          針對以上的html知識點,動力節點也有非常適合初學者的HTML學習教程,相信大家通過HTML視頻課程的學習以后,會對HTML有一個深入的了解。

          HTML教程內容涵蓋:

          • HTML基礎語法
          • HTML概述
          • W3C概述
          • B/S架構系統原理
          • table
          • 背景色與背景圖片
          • 超鏈接
          • 列表
          • 表單
          • 框架等知識點

          通過該視頻的學習之后,可以開發基本的網頁,并且可以看懂別人編寫的HTML頁面。

          HTML學習資料:http://www.bjpowernode.com/?toutiaohtml.chai

          html區塊

          區塊元素

          大多數html元素被定義為塊級元素或內聯元素.

          塊級元素在瀏覽器顯示時,通常以新行來開始(和結束)

          例如:<h1>,<p>,<ul>,<table>,<div>等

          內聯元素

          內聯元素在顯示時通常不會以新行開始

          例如:<b>,<td>,<a>,<img>等

          div元素

          html<div>元素是塊級元素,它可用于組合其他html元素的容器.

          <div>元素沒有特定的含義.除此之外,由于它屬于塊級元素,瀏覽器會在其前后顯示折行.

          如果與css一同使用,<div>元素可用于對大的內容塊設置樣式屬性.

          <span>元素

          html<span>元素是內聯元素,可用作文本的容器.

          <span>元素也沒有特定的含義.

          當與css一同使用時,<span>元素可用于為部分文本設置樣式屬性.

          二 html表單

          html表單用于搜集不同類型的用戶輸入.

          <form>標簽用于創建供用戶輸入的html表單.

          <form>

          ...

          </form>

          使用action屬性規定:當提交表單時,向何處發送表單數據.

          <form action="url">

          </form>

          method屬性

          method屬性指定在提交表單時使用的http方法:get或post

          下面是兩個示例:

          <form action="url" method="get">

          <form action="url" method="post">

          提示:

          當你使用get時,表單數據將在頁面地址中使用.

          如果表單正在更新數據或使用敏感信息(密碼),請使用post.post提供更好的安全性,因為提交的數據不會再頁面地址中顯示.

          name屬性

          name屬性指定表單的名稱

          要接手用戶的輸入,你需要相應的表單元素,如文本字段.而輸入類型是由類型屬性(type)定義的,大多數經常被用到的輸入類型有:text,password,radio,checkbox,submit等

          下面是一個請求用戶名和密碼的表單例子:

          <form>

          <input type="text" name="username" /><br/>

          <input type="password" name="password" />

          </form>

          單選框

          <input type="radio">標簽定義了表單單選框選項

          下面是一個單選框的例子:

          <form>

          <input type="radio" name="sex" value="male">Male<br>

          <input type="radio" name="sex" value="female">Female

          </form>

          運行效果如下:

          注意:沒有結束標簽,也能正常顯示,但是有時候會出現意想不到的情況.所以建議還是要加上結束標簽.

          復選框

          <input type="checkbox">定義了復選框,用戶需要從若干給定的選擇中選取一個或若干選項.

          下面是一個復選框的例子:

          <form>

          <input type="checkbox" name="vehicle" value="Bike">I have a bike<br/>

          <input type="checkbox" name="vehicle" value="Car">I have a Car

          </form>

          運行效果如下:

          提交按鈕將表單提交到其action屬性:

          <input type="submit" value="Submit">

          運行效果如下:

          表單提交后,應該使用服務器端語言(如php)進行數據處理.當完成html和css課程后,你可以試著學習php課程.

          三 html顏色

          html顏色由一個十六進制符號來定義,這個符號由紅色,綠色和藍色的值組成(rgb)

          rgb顏色的最小值是0(十六進制:#000).最大值是255(十六進制:#FFF)

          四 html框架

          通過使用框架,你可以在同一個瀏覽器窗口中顯示不止一個頁面

          <iframe>標簽規定一個內聯框架

          一個內聯框架被用來在當前html文檔中嵌入另一個文檔

          標記一個內聯框架:

          <iframe src="url"></iframe>

          提示:你可以把需要的文本放置在<iframe>和</iframe>之間,這樣就可以應對不支持<iframe>的瀏覽器.html5中不支持<frame>標簽.

          定義iframe標簽的高度與寬度

          height和width屬性用來定義iframe標簽的高度與寬度.

          屬性默認以像素為單位,但是你可以指定其按比例顯示(如:80%)

          下面是一個例子:

          <iframe src="url" width="200" height="200"></iframe>

          定義iframe表示是否顯示邊框

          frameborder屬性用來定義iframe表示是否顯示邊框

          設置屬性值為"0"移除iframe的邊框:

          <iframe src="url" frameborder="0"></iframe>


          主站蜘蛛池模板: 久久国产一区二区| 国产美女一区二区三区| 亚洲AV无码一区二区三区网址| 蜜臀AV免费一区二区三区| 精品无码一区在线观看| 日韩美女在线观看一区| 国产精品成人国产乱一区| 97人妻无码一区二区精品免费| 亚洲AV无码一区二区三区性色| 精品一区二区三区在线播放| 国产成人精品一区二区秒拍| 中文字幕无线码一区2020青青 | 国模无码视频一区二区三区| 国偷自产av一区二区三区| 国产在线观看91精品一区| 亚洲高清日韩精品第一区| 国产精品被窝福利一区| 全国精品一区二区在线观看| 69久久精品无码一区二区| 久久人做人爽一区二区三区| 国产一区麻豆剧传媒果冻精品| 日韩一区二区三区免费播放| 久久青青草原一区二区| 亚洲中文字幕一区精品自拍| 亚洲视频一区二区三区| 88国产精品视频一区二区三区| 亚洲线精品一区二区三区| 久久精品一区二区三区中文字幕 | 久久婷婷色一区二区三区| 国产在线无码视频一区二区三区| 黑人大战亚洲人精品一区| 亚洲AV午夜福利精品一区二区| 日本一区二区不卡视频| 国产91久久精品一区二区| 天堂一区二区三区在线观看| 日本免费电影一区| 日韩人妻无码一区二区三区久久99| 少妇无码一区二区三区免费| 国产在线一区二区| 国产在线乱子伦一区二区| 精品国产毛片一区二区无码|