級版HTML視頻教程(全網原創首發!)
什么是HTML?HTML指的是超文本標記語言,它是從事網頁設計工作的基礎,也是網站開發者必須熟練掌握的一門標記語言。應廣大學員的強烈要求,我愛自學網特推出《HTML基礎教程》,希望能得到廣大學員的支持。
學習交流
標 題
第一課:HTML語言框架和相關標簽95 1-1 學習html的前提和必要性53662 1-2 什么是HTML33819 1-3 HTML語言的整體框架135783 1-4 HTML語言的整體框架231727 1-5 行標簽和段標簽29866 1-6 文字屬性標簽28853 1-7 文字格式化標簽26888 1-8 body標簽27570 1-9 標題標簽25212
第二課:常用標簽代碼0 2-1 圖片37992 2-2 超鏈接127213 2-3 超鏈接223253 2-4 iframe標簽25784 2-5 橫線22900 2-6 列表22740 2-7 無序列表20544 2-8 有序列表21073 2-9 滾動標簽23217 2-10 轉義字符22227
第三課:表格標簽83 3-1 表格31370 3-2 表格屬性123819 3-3 表格屬性223066
您說說看 我發明的...是不是很牛逼呀[滑稽]
總 高級版學習資料文件高達10G!!!
總 高級版學習高清視頻資料的高達35G!!!
需要的話我后期會更新,所以關注我,學到的好東西都是你自己的哦[滑稽]
那么大概內容就更新到這里
本教程后期會逐一更新高清視頻學習資料+超詳細的學習資料教程!
別忘了四連!!【點贊 收藏 關注 投幣】
我怕你到時候想找我都找不到了~[鮮花]
注:本人原創首發,未經允許禁止轉載/抄襲,如有違法,本人將有權追究法律責任!!!
TML是制作網頁的基礎,我們在網站建設中談論的靜態網頁就是基于HTML的網頁。
早期的網頁直接用HTML代碼編寫,但現在有許多智能網頁制作軟件(常用的如frontpage,dream weaver等)通常不需要手動編寫代碼,而是由這些軟件自動生成。雖然不需要自己寫,但是理解HTML代碼仍然是非常重要的。
了解HTML是什么?它是學習網站建設的重要技術基礎知識
下面我們自己可以動手創建一個非常簡單的網頁,首先我們讓計算機顯示擴展,方法是打開我的電腦,然后現在欄目工具》文件夾選項》查看》高級設置中找到《隱藏已知文件類型的擴展名》將其不勾選,并單擊“應用”以確認設置。然后在桌面上創建一個新的TXT文件,將此文件命名為“xxx.html”(擴展名也可以是htm),這樣你就可以用瀏覽器打開它,你就會看到自己制作的最簡單的頁面。
html是一種超文本標記語言,即html(hypertext markup language),是一種用來描述網絡文檔的標記語言。在頁面的開頭和結尾使用<html></html>標簽。
總結:
1)HTML是我們常說的靜態網頁;
2)HTML是以Html或htm為擴展名的文件;
3)HTML某些標簽代碼規則,讓內容在瀏覽器中呈現出我們所需要的樣式;
4)HTML可以使用記事本創建,并以.html或.htm為擴展名保存。
html文件中的代碼由具有一定的規則規律標簽與內容組成。以指定的HTML結構和內容形成完整的html文件。我們可以直接使用瀏覽器來打開,查看網頁效果。
如果您想在瀏覽器中顯示各式各樣的網頁,我們就需要html文件(HTML基本結構+內容+標簽)和css文件(css樣式)來實現我們需要的漂亮網頁。
動力節點老杜講解的html學習教程,非常詳細全面,完全適合小白入門
內容:講解了HTML基礎語法、HTML概述、W3C概述、B/S架構系統原理、table、背景色與背景圖片、超鏈接、列表、表單、框架等知識點。
通過html教程的學習之后,不但可以開發基本的網頁,還可以看懂別人編寫的HTML頁面。
HTML完整資料下載:
http://www.bjpowernode.com/?toutiaoweb.chai
1.HTML教程:課程內容概述
2.HTML教程:BS結構介紹
3.HTML教程:軟件環境準備
4.HTML教程:HTML概述
5.HTML教程:我的第一個HTML
6.HTML教程:HTML的基本標簽
7.HTML教程:HTML的實體符號
8.HTML教程:HTML的表格
9.HTML教程:HTML的單元格合并1
10.HTML教程:HTML的單元格合并2
11.HTML教程:thead tbody tfoot
12.HTML教程:背景色和背景圖片
13.HTML教程:HTML圖片img標簽
14.HTML教程:HTML超鏈接
15.HTML教程:超鏈接的作用-request和response的概念
16.HTML教程:HTML列表
17.HTML教程:form表單初步
18.HTML教程:用戶注冊表單的實現
19.HTML教程:下拉列表支持多選
20.HTML教程:form的file控件
21.HTML教程:隱藏域hidden控件
22.HTML教程:隱藏域hidden控件2
23.HTML教程:readonly和disabled
24.HTML教程:控件的maxlength屬性
25.HTML教程:HTML文檔中節點的id屬性
26.HTML教程:div和span在網頁中的應用
頻、視頻的格式
開始學習之前,我們要下載些素材用來測試使用,地址如下:https://pan.baidu.com/s/1reRWno0ibYRcYXjw4MClqw
提取碼:td80
其中包括兩個視頻一個音頻和一個安裝程序。
學習如何在頁面中添加音頻、視頻之前應該了解一點基礎知識。
我們應該都有在互聯網上下載電影、視頻、音樂的經歷,大家會注意到,有的視頻文件名的后綴是.avi,有的視頻是.mp4,還有.mov的,據不完全統計,常見的各種視頻格式有十幾種之多。
常見的音頻的格式比起視頻來會顯得少一些,一般是.wav和.mp3格式。
為什么存儲相同的內容可以有這么多不同的格式呢?
格式產生的核心在于對音頻、視頻等多媒體文件進行的不同編碼方式。
那什么是編碼呢?
簡單來說我們可以把"編碼"這個詞分成兩個部分,第一個是"編",也就是"整理、組織"的意思,第二個是"碼",也就是我們平時所說的"數碼"。
首先說"碼",我們的計算機中的數據最終都是通過二進制的數字(0和1)來存儲或計算的,這些0或1就是數碼。無論代碼、程序、圖片、音樂、視頻、文字等的存儲與計算都不例外。不管多么復雜或簡單的文件,在計算機看來,都是一大堆0和1。
一個0或1被稱為1比特,圖片或視頻中的一個黑白像素通常是8比特(八位),如果一張1080乘720個像素的圖片所占內存的大小就是1080*720*8=6220800字節,約等于0,74mb。如果一個視頻每秒中有25幀,也就是一秒鐘在我們眼前閃過25張圖片(視頻播放實際上就是在我們眼前快速的更替圖片,這些圖片在大腦中會被自動連成動作,這也是小的時候在課本的角上畫好一套走路的小人的不同動作后,快速翻動書頁,畫面中的小人會走路的原因,大家可以自行百度"視覺暫留原理")。
一秒鐘25張1080乘720的圖片的視頻,一秒鐘就會占0.74*25=18.5mb的內存。如果是一分鐘呢,18.5*60=1110mb約等于1.08gb。這樣的數據量是不是很嚇人。
但事實上我們下載的1080*720的一小時三十分鐘左右的視頻的體積往往也沒有超過1gb,這又是為什么呢?
這就是"編"的功勞!對數碼進行整理和組織的主要目的是壓縮體積,壓縮數據體積既能節省磁盤又能方便傳播與攜帶,是信息技術的關鍵技術之一,壓縮的方法一般有兩類,一類叫做無損壓縮,也就是通過對這一大堆數碼進行一個特殊的組合使其占有更小的空間,一類叫做有損壓縮,是在無損壓縮的基礎上剔除掉人眼睛識別不到的冗余信息。具體的壓縮過程涉及到很多數學知識,這里大家簡單了解一下即可。
壓縮后的視頻或音頻文件最終通過播放器對該文件的壓縮算法進行逆向運算后,還原成計算機可以解讀的畫面和聲音再呈現給觀眾,這個過程叫做"解碼"。
通過"編"的方式壓縮文件體積,通過"解"的方式再還原出文件內容成了處理大規模數據的通用手法。
不同的編碼和解碼方式催生出不同的文件格式,這種情況下,瀏覽器在播放視頻的時候就要有應對不同格式的不同解碼方式,在15年以前,瀏覽器為了能夠播放不同格式的視頻,就要調用電腦中不同的播放器,這個過程的寫法非常麻煩。隨著技術不斷地整合,時至今日,在頁面中播放視頻不需要這么復雜的寫法了,但是因為每個瀏覽器都不是包打一切,因此,雖然不用指定播放器,但是也要預設不同格式的視頻來應對不同的瀏覽器。
因此,我們在這一部分的學習中除了講解如何向頁面添加不同格式的音視頻外還會告訴大家如何為音視頻轉換格式。
為頁面添加音頻、視頻
添加音頻使用<audio></audio>標簽,這個標簽被所有瀏覽器支持,是html5推薦的音頻導入標簽,但是遺憾的是在html4標準中是不被支持的或者說是非法的。
這里給大家簡要介紹一下html5和html4的區別。
簡單來說呢,一個html文件的第一條語句是<!DOCTYPE HTML>,它就是HTML5標準的文件。如果是html4,它的第一條聲明語句有三種寫法,像這樣
一:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
二:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
三:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
版權聲明:本文為CSDN博主「痦子」的原創文章,遵循 CC 4.0 BY-SA 版權協議,轉載請附上原文出處鏈接及本聲明。
原文鏈接:https://blog.csdn.net/yh1061632045/article/details/81518141
這讓我想到了孔乙己的"茴"字的多種寫法
是不是很麻煩,其實html5比html4更簡單,功能更強大,而且我們一直以html5的標準進行學習,所以大家不必糾結。
下面我們導入一個音頻試試吧。示例代碼如下:
<!DOCTYPE HTML>
<html>
<head>
<title>音視頻導入</title>
</head>
<body>
<audio controls="controls">
<source src="audio/千年的祈禱.mp3" type="audio/mp3" />
</audio>
</body>
</html>
頁面效果如下:
其中controls屬性就是用來顯示播放控制界面的,就是這個:(偷懶的話可以寫成"controls"就ok,不必加"="以及后面的內容了。)
如果以后您使用自己編寫的控制界面,就可以不添加這個屬性。
刪掉這個屬性后就是這樣:這樣為自定義的播放控制界面留出了位置。
<audio></audio>標簽夾著<source>標簽,一個<audio></audio>標簽中可以添加多個<source>用以支持不同的格式要求。示例代碼如下:(這段代碼來自w3school)
<audio controls="controls">
<source src="song.ogg" type="audio/ogg" />
<source src="song.mp3" type="audio/mpeg" />
Your browser does not support the audio element.<!--你的瀏覽器不支持這個音頻元素-->
</audio>
type屬性是告訴瀏覽器音樂文件的類型。
不同格式的文件的生成需要我們自己去做,這就涉及到如何給一個音頻文件進行格式轉化的問題。這個問題我們明天再說,今天先學習為頁面添加音頻和視頻。
下面我們來看一下視頻的導入方法,示例代碼如下:
<video controls>
<source src="video/阿塔麗.mp4" type="video/mp4" />
</video>
頁面效果如下:
我們可以通過設置height和width屬性來控制視頻的面積。實例代碼如下:
<video controls width="850" height="500" >
<source src="video/阿塔麗.mp4" type="video/mp4" />
</video>
頁面效果如下:
視頻畫面變小了,和視頻并排的是我們之前添加的音頻文件,由此可知,這兩個元素都是內聯元素。
今天的內容結束了,明天我們繼續學習格式轉換和為不同瀏覽器預設不同音視頻格式的方法。
如果您有任何疑問請給我留言,如有問題或錯誤請予以斧正!
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>標簽實現文本內鏈接——零基礎自學網頁制作
*請認真填寫需求信息,我們會在24小時內與您取得聯系。