整合營銷服務商

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

          免費咨詢熱線:

          HTML基礎

          TML的作用

          HTML是用來開發網頁的,它是開發網頁的語言

          HTML的定義

          全稱HyperText Mark-up Language,超文本標記語言

          標記就是標簽

          <標簽名稱></標簽名稱> 比如 <html></html> <h1></h1>等,標簽大多數都是成對出現的。

          超文本 兩層含義:

          1. 因為網頁中還可以有圖片、視頻、音頻等內容(超越文本限制)
          2. 它還可以在網頁中跳轉到另一個網頁,與世界各地主機的網頁鏈接(超鏈接文本)

          HTML的基本結構

          <!DOCTYPE html>
          <html>
              <head>
                  <meta charset="UTF-8">
                  <title>網頁標題</title>
              </head>
              <body>
                  網頁顯示內容
              </body>
          </html>

          第一行<!DOCTYPE html>是文檔聲明

          用來指定頁面所使用的html的版本, 這里聲明的是一個html5的文檔

          <html>...</html>標簽是開發人員在告訴瀏覽器

          整個網頁是從<html>這里開始的,到</html>結束

          也就是html文檔的開始和結束標簽

          <head>...</head>標簽用于定義文檔的頭部

          是負責對網頁進行設置標題、編碼格式以及引入css和js文件的

          <body>...</body>標簽是編寫網頁上顯示的內容

          網頁文件的后綴是.html, 一個html文件就是一個網頁,html文件用編輯器打開顯示的是文本,可以用文本的方式編輯它,如果用瀏覽器打開,瀏覽器會按照標簽描述內容將文件渲染成網頁

          VS Code 安裝

          VS Code全拼是 Visual Studio Code 是由微軟研發的一款免費、開源的跨平臺代碼編輯器

          目前是前端(網頁)開發使用最多的一款軟件開發工具

          下載網址: https://code.visualstudio.com/Download

          選擇對應的安裝包進行下載:

          安裝一切默認

          VS Code 的插件安裝

          • Chinese(Simplified) Language Pack for VS Code 中文漢化包
          • open in browser 右擊在瀏覽器打開html

          常用的HTML標簽

          1 標簽不區分大小寫,但是推薦使用小寫

          2 根據標簽的書寫形式,標簽分為雙標簽(閉合標簽)和單標簽(空標簽) 2.1 雙標簽是指由開始標簽和結束標簽組成的一對標簽,這種標簽允許嵌套和承載內容,比如: div標簽 2.2 單標簽是一個標簽組成,沒有標簽內容, 比如: img標簽

          標簽的使用形式

          1. 成對出現的標簽
          2. 標簽的嵌套
          3. 單個出現的標簽
          4. 帶屬性的標簽


          列表標簽

          1. 無序列表標簽(ul標簽)
          2. 有序列表標簽(ol標簽)

          網頁效果

          表格標簽

          <table>標簽:表示一個表格

          <tr>標簽:表示表格中的一行

          <td>標簽:表示表格中的列

          <th>標簽:表示表格中的表頭

          屬性設置

          border: 1px solid black:設置邊框和顏色

          border-collapse: collapse:設置邊框合并



          網頁效果

          表單標簽

          表單用于搜集不同類型的用戶輸入的數據,然后可以把用戶數據提交到web服務器

          <form>標簽 表示表單標簽,定義整體的表單區域

          一個表單中有很多信息組成,比如 姓名,愛好,地址等,這些內容有很多其他標簽來承載

          這些標簽稱為表單元素標簽

          網頁效果

          表單提交

          表單用于搜集不同類型的用戶輸入的數據,然后可以把用戶數據提交到web服務器

          • action屬性 設置表單數據提交地址
          • method屬性 設置表單提交的方式,一般有“GET”方式和“POST”方式, 不區分大小寫

          兩種方式的區別:

          • “GET”方式 : 沒有請求體
          • “POST”方式 : 有請求體

          表單元素屬性設置

          • name: 表單元素的名稱,用于作為提交表單數據時的參數名
          • value: 表單元素的值,用于作為提交表單數據時參數名所對應的值

          <!DOCTYPE html>

          <html lang="en">

          <head>

          <meta charset="UTF-8">

          <meta name="viewport" content="width=device-width, initial-scale=1.0">

          <meta http-equiv="X-UA-Compatible" content="ie=edge">

          <title>Document</title>

          </head>

          <body>

          <!--

          姓名 type="text" 定義單行文本輸入框

          密碼 type="password" 定義密碼輸入框

          性別 type="radio" 定義單選框

          愛好 type="checkbox" 定義復選框

          照片 type="file" 定義上傳文件

          個人描述 <textarea></textarea> 定義多行文本輸入框

          地址 <select></select> 定義下拉列表

          提交 type="submit" 定義提交按鈕

          重置 type="reset" 定義重置按鈕

          按鈕 type="button" 定義一個普通按鈕

          -->

          <form action="http://192.168.1.106:8080" method="POST">

          <label>姓名:</label>

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

          <br>

          <label>密碼:</label>

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

          <br>

          <label>性別:</label>

          <input type="radio" name="sex" value="1">男

          <input type="radio" name="sex" value="0">女

          <br>

          <label>愛好:</label>

          <input type="checkbox" name="like" value="睡覺">睡覺

          <input type="checkbox" name="like" value="吃飯">吃飯

          <input type="checkbox" name="like" value="打豆豆">打豆豆

          <br>

          <label>照片:</label>

          <input type="file" name="pic">

          <br>

          <label>個人描述:</label>

          <textarea name="desc"></textarea>

          <br>

          <label>地址:</label>

          <select name="addr">

          <option value="1">北京</option>

          <option value="2">上海</option>

          <option value="3">廣州</option>

          <option value="4">深圳</option>

          </select>

          <br>

          <input type="submit" value="提交">

          <input type="reset" value="重置">

          <input type="button" value="按鈕">

          </form>

          </body>

          </html>


          點擊提交:

          可以看到服務器收到了請求報文。

          站開發入門指南:媒體資源格式。

          我們帶著大家來簡單的了解一下在網頁開發中常用的這些媒體資源的一些文件格式。

          ·首先是圖片資源,圖片的這個文件格式在講圖片標簽的時候其實也給大家去展示過有哪幾種常用的圖片格式。這里我就把這些格式的一些優缺點都先列在這里了,大家可以暫停先看。在網頁當中去使用圖片是有兩個核心的這樣的使用場景。

          →那首先是非常常見的就是具體去展示的這種圖片,這些圖片都是展示的圖片,還有就是像這些功能型的圖片,功能型的這種小圖標的圖片。

          →像這兩種場景理論上來講用任何一種圖片格式都是可以的。但是目前來講最常用的就是這兩種格式,這兩種格式大家注意看。這個SVG的圖片格式就是現在是經常會用在這種功能型的一種場景。因為現在很多在線的設計軟件都可以快速的方便的去復制這個設計好的圖標的一個 SVG的版本。

          而且SVG它本身是一個矢量,它任意縮放都不會有這種模糊的問題,所以它其實非常適合來做圖標的這樣效果。而且它圖標本身一般來說都是比較簡單的圖形,所以也不會說牽扯到這種復雜圖片導致文件過大的這樣的一個問題。

          ·然后像展示型的文件現在很多的網站都用這種web.p的格式,VIP它是谷歌開發的一種圖片的格式,它支持透明度和動畫,還有就是它的這種圖像質量會比這種PNG的更好,它的文件還比這個PNG的小很多,所以就是在現在很多的網站上都會大量的采用這個webp的格式來作為這種展示型圖片的這樣的一種格式。

          然后像這種不同的圖片格式,其實很多的設計軟件都是可以導出的。

          目前來說webp的格式可能就是很多軟件并不支持直接的去導出這個格式。但是網上有很多可以轉換的格式、轉換的工具或者在線的工具都可以很方便的。比如說可以把JPG的格式、GIF的格式轉換成webp的格式。然后是這個視頻文件格式,主流的常用的就是這幾種。

          最常用的就是MP4格式和Web.m格式。Webm格式也是谷歌開發的這樣一種視頻格式。目前來說主流的瀏覽器對這兩種視頻格式支持度都已經非常不錯。這兩種視頻文件格式都能在保證比較小的文件大小的前提下提供比較高的視頻質量。

          一個視頻文件的文件大小是受很多因素去影響的,比如說像視頻本身的幀率、分辨率還有碼率等一些因素。如果你想更加深入的去研究,這塊東西可以自行的查找一些資料去了解一下。

          這里給大家補充一個很小的知識點,就是平常說的這些視頻文件格式,其實它是一種容器格式就是我們的視頻文件。內部其實包裹著兩種重要的數據,一種就是我們所謂的這種視頻的數據,另外一種就是音頻的數據,它們兩者其實是分開的。

          有的同學可能聽說過這樣的一種視頻格式叫做H.264。像這種其實是一種視頻數據的編碼標準。這個視頻文件容器內的視頻文件,這個視頻數據才是真正的按照這些編碼,視頻的編碼標準編碼出來的這樣一些視頻數據。

          像這個視頻數據就是純視頻,也就是純圖像,它是沒有任何聲音的,只有跟音頻的資源。音頻的數據結合到一塊之后才是看到的這種整體的打包好的、有聲音、有圖像的一種視頻文件。所以我們要明白這些視頻文件是一種容器的格式。

          最后就是音頻資源,音頻資源其實核心常用的也就是這四種,最常用的肯定就是MP3。

          像一般場景來說MP3的格式完全就夠用了,像WAV它是一種無損的,所以文件一般來說會比較大。如果某一些特別的需要一些高保真的這樣一種高質量音頻的場景可能會用到這種格式。一般來說絕大部分的時候一般用MP3的格式就夠了。

          TML的英語意思是:HypertextMarkupLanguage,即超文本標記語言,是一種用來制作超文本文檔的簡單標記語言。接下來將帶領讀者從語言、超文本、標記三部分進行理解HTML。下面和千鋒廣州小編一起來看看吧!

          ?1.語言

          HTML一種編程語言,有指定的語法規則。超文本傳輸協議規定了瀏覽器在運行HTML文檔時所遵循的規則和進行的操作。協議的制定使瀏覽器在運行超文本時有了統一的規則和標準。用HTML編寫的超文本文檔稱為HTML文檔,它能獨立于各種操作系統平臺,自1990年以來HTML就一直被用作WWW(是WorldWideWeb的縮寫,也可簡寫WEB、中文叫做萬維網)的信息表示語言,使用HTML語言描述的文件,需要通過WEB瀏覽器HTTP顯示出效果。

          2.超文本

          所謂超文本,是因為它可以加入圖片、聲音、動畫、影視等內容,事實上每一個HTML文檔都是一種靜態的網頁文件,這個文件里面包含了HTML指令代碼,這些指令代碼并不是一種程序語言,它只是一種排版網頁中資料顯示位置的標記結構語言,易學易懂,非常簡單。

          HTML的普遍應用就是通過單擊鼠標從一個主題跳轉到另一個主題,從一個頁面跳轉到另一個頁面與世界各地主機的文件鏈接。直接獲取相關的主題。如下所示:

          通過HTML可以通過圖片格式和文字格式的設計實現出豐富多彩的風格:

          文字

          通過HTML可以實現頁面之間的跳轉:

          通過HTML可以展現多媒體的效果:

          從上面我們可以看到HTML超文本文件時需要用到的一些標簽。

          3.標記

          對于剛剛接觸超文本的讀者,可能不能理解一些用“<”和“>”括起來的句子,它們稱為標記,也稱標簽,是用來劃分網頁的元素,以形成文本的布局、文字的格式及五彩繽紛的畫面。標簽通過指定某塊信息為段落或標題等來標識文檔某個部件。

          在HTML中每個用來作標簽的符號都是一條命令、它告訴瀏覽器如何顯示文本。這些標簽均由"<"和">"符號以及一個字符串組成。如、等。而瀏覽器的功能是對這些標記進行解釋,顯示出文字、圖像、動畫、播放聲音。這些標簽符號用“<標簽名字屬性>”來表示。標簽分為單標簽和雙標簽兩大類,具體介紹如下:

          單標簽指的是只存在一個標簽的寫法,如 、等。

          雙標簽指的是存在一對標簽的寫法,如、等。注意在雙標簽中第一個標簽叫做起始標簽,第二個標簽叫做結束標簽,結束標簽需要在左尖括號后添加一個關閉符“/”。

          HTML只是一個純文本文件。創建一個HTML文檔,需要HTML編輯器和WEB瀏覽器兩個工具。HTML編輯器是用于生成和保存HTML文檔的應用程序。WEB瀏覽器是用來打開WEB網頁文件,提供給我們查看WEB資源的客戶端程序。


          主站蜘蛛池模板: 国产AⅤ精品一区二区三区久久 | 国产AV午夜精品一区二区入口 | 亚洲国产精品一区二区第一页| 夜夜精品视频一区二区| 美女视频一区三区网站在线观看| 97久久精品一区二区三区| 亚洲国产精品一区二区久| 日本视频一区在线观看免费| 中文字幕人妻第一区| 亚洲综合色一区二区三区| 色欲AV蜜桃一区二区三| 国产精品一区二区无线| 亚洲午夜日韩高清一区| 亚洲午夜福利AV一区二区无码| 国产亚洲综合一区柠檬导航| 台湾无码一区二区| 韩国福利影视一区二区三区| 亚洲av色香蕉一区二区三区| 国产精品一区二区久久乐下载| 一区视频免费观看| 亚洲成AV人片一区二区| 亚洲一区二区三区乱码在线欧洲| 色一情一乱一伦一区二区三欧美| 国产日韩精品一区二区在线观看播放 | 国产一区高清视频| 国产激情一区二区三区成人91| 成人免费区一区二区三区| 少妇特黄A一区二区三区| 国产精品无码一区二区三区不卡| 精品无码一区二区三区水蜜桃| 狠狠色婷婷久久一区二区三区| 久久久久人妻一区精品色| 久久精品成人一区二区三区| aⅴ一区二区三区无卡无码| 久久久一区二区三区| 性色av闺蜜一区二区三区| 亚洲中文字幕无码一区| 一本大道在线无码一区| 精品国产AⅤ一区二区三区4区| 久久久无码精品国产一区| 日韩成人一区ftp在线播放|