Html5 自學筆記

時間 2019-11-09

標籤 html5 html 自學筆記欄目 HTML5 简体版

原文原文鏈接

html的全稱

Hyper Text Markup Language

HTML的意義

使用標記標籤( Markup Tag)來描述網頁

HTML標籤必定成對嗎

是

它們之間的文本用來描述網頁

它們之間的文本描述網頁上的可見內容

html標題標籤

h1 到 h5

html段落

用<p>來定義的

html連接

html連接是用<a> 來定義的

好比 <a href="www.17zuoye.com">This is a link</a>

html圖像

用<img>來定義的

好比 <img src="avatar.jpg" width="100" height="80">

元素屬性舉例

1.超連接 <a href="www.17zuoye.com">link</a>
2.對齊 <h1 align="center">
3.背景顏色 <body bgcolor="yellow"></body>
4.表格邊框粗度 <table border="1">

html元素經常使用屬性

class 規定元素的類名
id 元素的惟一id
style 元素的行內樣式 inline style
title 元素的額外信息

h標籤的注意事項

請僅使用於標題

html水平線

<hr/>

html註釋

若是在不產生一個新段落的前提下換行

使用<br/>

全部連續的空格或空行

都會被認爲是一個空格

文本格式化

粗體 b
壯體 strong
大致 big
強調體 em
斜體 i
小體 small
上注 sup
下注 sub

預格式文本標籤

用於顯示計算機代碼的標籤舉例

描述地址

tooltips

用屬性title

覆蓋現有的文字方向

html元素

從開始標籤到結束續簽的全部代碼

元素內容

開始和結束標籤中間的部分

標籤名必定要用小寫

大多數html標籤是有屬性的

長引用或短引用

長引用和短引用的區別

長引用會插入換行 + 外邊距

刪除字效果和下劃線效果

定義縮寫詞

<abbr>

定義首字母縮寫詞

改變文本的外觀有兩類

基於內容的物理樣式

設定特定標籤的樣式

沒有下劃線的連接

<a href="http://www.baidu.com" style="text-decoration: none">go to baidu</a>

樣式的分類

外部樣式表內部樣式表內聯樣式

外部樣式表的引用方法

內聯樣式的寫法

<p style="color: #00cc00;margin-left: 20px">這是個人第一個段落</p>

定義文檔中的節或區域

<div>

超連接有兩種

1. 相對路徑的 href="/index.html"

2. 網站 href="http://www.baidu.com"

將圖片做爲連接

span

定義一個小的塊

<a>有兩種類型

把提供熱點和超連接地址的錨看做「連接」，而用於標記文檔的目標部分的錨稱爲「錨」.

「連接文本」

"連接文本" 沒必要必定是文本。圖片或其餘 HTML 元素均可以成爲連接。

如何定義連接的文檔在何處顯示

<a>標籤裏的 target屬性 . 好比 _blank 表示會在新的標籤頁顯示
_top會刷新本頁面(或者叫作跳出框架)

命名錨的用法

<a name="tips">我是目標錨</a>
<a href="url#tips">點擊我會跳轉</a>

在連接裏請始終將正斜槓添加到子文件夾緣由

由於當服務器發現末尾沒有/時，會自動再加一次，即會發生兩次請求

郵件連接

<a href="mailto:jianjun.xiao@foxmail.com?cc=jason@foxmaill.com&bcc=jeff@foxmaill.com&subject=Hello%20Message&body=hello!"> 點擊這裏發郵件</a>

<img>標籤，若是顯示圖片失敗，可顯示文字來作爲提示

給html頁面添加背景圖

<body background="img.jpeg"/>
若是圖片太小，則圖片則會重複顯示

在文字中排列圖片

<img src="test.jpeg" align="bottom"/> bottom是默認的，還有top middle

圖片浮動到文字的左右側

<img src="test.jpeg" align="left"/> 圖片會浮到在文字的最左側，上緣對齊文字的上緣

調整圖像尺寸

<img width height

建立圖像映射

這個較複雜，代碼見: http://www.w3school.com.cn/tiy/t.asp?f=html_areamap

在WebStrorm中命名包

vom/jason/view

Html中的圖片的相對路徑

../ 表示向上一級

把圖像轉換爲圖像映射
顯示圖像座標

http://www.w3school.com.cn/tiy/t.asp?f=html_ismap

表格表格行表格數據

表格邊框

空格佔位符

表頭格

<th>

表格的標題

跨行或跨列的表格單元格

在td裏嵌套table或list

表格內的文字在上下左右方向離邊界線的距離

單元格間距

給表格添加背景顏色或背景圖片

格子裏文本的對齊

<td align="left"/> 可選 left right 默認就是居中

table最外邊緣的五種類型

<table frame="box"/>
above below hsides vsides

區分table的頁眉行主體頁腳行

thead tbody tfoot

在table中，經過col來設置寬度

<table> <col align="left"/>
colgroup

無序列表

有序列表

有序列表的type可有的值

ol type = A a I i

無序列表的type可有的值

ul type= circle disc square

元素可分兩類

塊元素 <h1>, <p>, <ul>, <table> 這些在顯示上都會先換行
內聯元素 <b>, <td>, <a>, <img>

input
password

文本域的缺省寬度

20個字符

Radio Buttons

<form>
<input type="radio" name="sex" value="male" /> Male
<br />
<input type="radio" name="sex" value="female" /> Female
</form>

複選框（Checkboxes）

表單的動做屬性（Action）

<form name="input" action="MapHref.html" method="get">
Username:
<input type="text" name="user">
<input type="submit" value="Submit">
</form>
</body>

input的類型有哪些

text password submit radio checkbox

radio標籤默認選中一個

下拉選項

<select name="nation_select">
<option value="1">China</option>
<option value="2">Japan</option>
<option value="2" selected="selected">USA</option>

</select>

按鈕

在數據週末圍一個帶文字的邊框

點擊標籤，觸發相關控件

<form>
<label for="china" >China</label>
<input type="radio" name="nation" value="china" id="china">
<br/>
<label for="japan">Japan</label>
<input id="japan" name="nation" type="radio" value="japan">
</form>

radio checkbox用什麼來控制組

name

選項組用什麼標籤

optgroup

垂直框架

frameset cols=「25%,25%,50%」 frameset不能在body裏面

水平框架

frameset rows=「25%,25%,50%」

noframes的使用方法

<noframes>
<body>您的瀏覽器沒法處理框架！</body>
</noframes>

禁止手動拖動改變frame的寬度

ifame標籤內聯框架

跳轉至框架內的一個指定的節錨點

Iframe - 刪除邊框

在iframe中打開連接

圖像文件不該該超過

10k

Definition list

<dl>
<dt>First term</dt>
<dd>Definition</dd>
<dt>Next term</dt>
<dd>Definition</dd>
</dl>

Entities

< is the same as <
> is the same as >
© is the same as ©

如何使用 base 標籤使頁面中的全部標籤在新窗口中打開。

用meta來記錄文檔信息

5 秒內被重定向到新的地址

<base>的做用

<base> 標籤爲頁面上的全部連接規定默認地址或默認目標（target）：

外聯樣式表的方法

noscript的使用

如何應付老式的瀏覽器

若是瀏覽器壓根無法識別 <script> 標籤，那麼 <script> 標籤所包含的內容將以文本方式顯示在頁面上。爲了不這種狀況發生，你應該將腳本隱藏在註釋標籤當中。那些老的瀏覽器（沒法識別 <script> 標籤的瀏覽器）將忽略這些註釋，因此不會將標籤的內容顯示到頁面上。而那些新的瀏覽器將讀懂這些腳本並執行它們，即便代碼被嵌套在註釋標籤內。

HTML 實體

如需顯示小於號，咱們必須這樣寫：< 或 <
http://www.w3school.com.cn/html/html_entities.asp

不間斷空格

non-breaking space

嵌入flash

嵌入mp3

html5中的audio標籤

最好的音頻播放方式

使用雅虎的媒體播放器向網頁添加音頻

video

最好的html解決方案

HTML 5 + <object> + <embed>

優酷解決方案

使用超連接

「輔助應用程序

<a href="movie.swf">Play a video file</a>

XHTML

是以xml格式編寫的html

xhtml檢查器

https://validator.w3.org/nu/

xhtml文件的文檔聲明

文本區標籤

HTML5是什麼的新標準

html xhtml dom

html5的video支持三種視頻文件

ogg mpeg4 webM

video

<video src="/i/movie.ogg" width="320" height="240" controls="controls">
Your browser does not support the video tag.
</video>

video的屬性

controls 顯示播放控制
autoplay="autoplay"自動播放
loop="loop"循環播放
preload="preload"預備加載

video的方法屬性事件請見：

http://www.w3school.com.cn/html5/html_5_video_dom.asp

方法	屬性	事件
play()	currentSrc	play
pause()	currentTime	pause
load()	videoWidth	progress
canPlayType	videoHeight	error
	duration	timeupdate
	ended	ended
	error	abort
	paused	empty
	muted	emptied
	seeking	waiting
	volume	loadedmetadata
	height
	width

在全部屬性中，只有 videoWidth 和 videoHeight 屬性是當即可用的。在視頻的元數據已加載後，其餘屬性纔可用。

audio能夠播放的音頻格式有哪些

mp3 ogg wav

ogg文件適用的瀏覽器

使用一個 Ogg 文件，適用於Firefox、Opera 以及 Chrome 瀏覽器

MPEG4文件適用的瀏覽器

Safari

我發現Ogg 文件

在chrome裏好像播放不了

設置元素爲可拖放

HTML5 定了 8 個新的 HTML 語義（semantic）元素

header, section, footer, aside, nav, main, article, figure

爲 HTML 添加新的元素

document.createElement("myHero")

樣式裏的 display:block;

表示是塊級元素，即會佔領一整行到邊緣

若是ie6到ie8並不支持html5

能夠在<head>里加上

html5包括的新多媒體元素

audio video source embed track

新表單元素

datalist keyken output

新的語義和結構元素

article 獨立的內容區域
aside 定義頁面的側邊欄內容
bdi 文本方向
command 定義命令按鈕
details 描述細節
dialog 定義對話框
summary 標籤包括details元素的標題
figure 規定獨立的流內容
figcaption figure元素的標題
footer 定義section 或 document的頁腳
header 定義文檔的頭部區域
mark 定義帶有標記的文檔
meter 定義度量衡
nav 定義運行中的進度
progress 定義任務進度
ruby 定義ruby註釋
rt 定義字符的解釋或發音
rp 定義不支持ruby註釋

section

定義文檔中的節

time

定義日期或時間

wbr

規定在文本中的何處適合添加換行符

canvas

繪圖
如下代碼得放到<canvas>標籤以後

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);

canvas畫直線

var canvas =document.getElementById("myCanvas");
var context = canvas.getContext("2d") ;
context.moveTo( 0, 10 ) ;
context.lineTo( 50, 50 ) ;
context.stroke() ;

canvas畫圓圈

canvas畫實心文本

context.font = "50px Arial" ;
context.fillText( "我是測試員", 10,50 ) ;

canvas畫空心文本

context.font = "50px Arial" ;
context.strokeText( "我是測試員", 10,50 ) ;

canvas畫漸變色

var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d") ;

var gradient = context.createLinearGradient(0,0,200,100) ;
gradient.addColorStop( 0, "red" );
gradient.addColorStop( 1, "white" ) ;

context.fillStyle = gradient ;
context.fillRect( 10,10,200,90 ) ;

canvas 徑向圓漸變

var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d") ;

var gradient = context.createRadialGradient(100,50,50,100,50,100);
gradient.addColorStop( 0, "#ff0000" ) ;
gradient.addColorStop( 1, "#ffffff" ) ;
context.fillStyle = gradient ;
context.fillRect( 0, 0, 200, 100 ) ;

把一幅圖放置在畫布上

var canvas0 = document.getElementById("myCanvas") ;
var context0 = canvas0.getContext("2d") ;

var imgGirl = document.getElementById("img_girl") ;

context0.drawImage( imgGirl, -100, 0 ) ;

爲毛刷新一下頁面，才能看到效果!!

什麼是svg

是 scalable vector graphics
定義網絡的基於矢量的圖形
使用xml來定義圖形
在放在或縮小情形小圖片質量不會發生變化
它是W3C標準

canvas和svg

Canvas	SVG
依賴分辨率不支持事件處理器弱的文本渲染能力可以以 .png 或 .jpg 格式保存結果圖像最適合圖像密集型的遊戲，其中的許多對象會被頻繁重繪	不依賴分辨率支持事件處理器最適合帶有大型渲染區域的應用程序（好比谷歌地圖）複雜度高會減慢渲染速度（任何過分使用 DOM 的應用都不快）不適合遊戲應用