強哥HTML學習筆記

html

瀏覽器的選擇：
1.火狐
2.ie
3.chrome
4.mac
5.opera

安裝兩款插件：
1.firebug
2.web develope

html頁面元素：
1.doctype
2.html
head
//編碼
//樣式
//事件
body
//正文

sublime
notepad++
zend studio
dreamware
gvim

vim模式：
1.輸入模式
2.命令模式
3.末行模式

命令模式：
命令模式 > 輸入模式 按asio鍵
a 當前字符的後面插入
A當前行末尾
s 刪掉當前字符並插入數據
S刪除當前行插入
i 當前字符前插入
I 當前航首入
o 下一行行插入
O 上一行插入
輸入模式 -> 命令模式 esc

輸入模式 -> 末行模式

:x 保存並退出
:q 不保存退出
:w 保存

命令模式
h 左
j 下
k 上
l 右

yy 複製當前行
nyy 複製當前行向下n行
p 往下面粘貼
P 往上面粘貼
dd 刪除當前行
ndd 刪除當前行向下n行
nG 第n行
G 最後一行
dG 從當前行刪除到最後
^ 行首
$ 行末
d^ 從當前光標刪到行首
d$ 從當前光標刪除到行末
u 恢復
ctrl+y 撤銷

tab 右縮進
shift+tab 右縮進
//視圖模式選中

line_numbers:true/false
//行號

auto_match_enabled:false/true
//格式補全

highlight_line:true/false
//背景線

auto_complete:true/false
//命令補全

設置 -> 用戶 改變字體大小

ctrl+/
//添加註釋

html實體

<
&lt;
>
&gt;
空格
&bnsp;

#ff00ff 紫色
#ff0000 紅色
#

白色 ffffff
黑色 000000
紅色 ff0000
綠色 00ff00
藍色 0000ff
黃色 ffff00
紫色 ff00ff
青色 00ffff
灰色 cccccc

body //屬性
text //字體顏色
bgcolor //背景顏色

br //換行
nobr //不換行
p //段落
center //居中
pre //代碼原樣輸出
hr //導航線

列表：
有序列表 ol
無序列表 ul
自定列表 dl

align //獨佔一行的纔有這個屬性

文字標籤：

h1
font
p
span
b 加粗
i 斜體
u 下劃線
sup 上標
sub 下標

無心義塊標籤：
div

圖片img:
屬性
src
width
height
title
alt

全部標籤都有的屬性：
1.title
2.style
3.id
4.class

熱點地圖：
usemap
00座標在圖片左上角
area標籤：
shape
coords
href

靜態資源地址問題：
一、img/cai.gif
2./test/img/a.jpg

加載靜態資源的標籤：
1.<img src="cai.gif">
2/<link rel="stylesheet" type="a.css">
3.<script scr="a.js"></script>
4.<a href="a.html"></a>

錨點-a標籤
<a name="top"></a> //返回網頁頂層

 

超連接-a標籤
<a href="www.baidu.com">百度</a>
<a href="#top">top</a>

表格-table標籤：
tables
tr
td

表單-form標籤
action="reg.php"
method="get"

文本元素
<input type="text" name="">
密碼元素
<input type="password" name="">
提交
<input type="submit" value="提交">
重置
<input type="reset" value="重置">
單選
<input type="radio" name="">
1.名字和值必須有
2.名字必須相同
3.必須有id
4.label用for鏈接到前面的input的id上

多選
<input type="checkbox" name="">
1.名字和值必須有
2.名字相同必須是數組，要麼名字不能相同
3.必須有id
4.label用for鏈接到前面的inputid上

下拉框
<select name=""><option value="">選擇城市</option></select>

區域框
<textarea name=""></textarea>
1.name
2.不能寫value

表單元素：
name
value
maxlength //最大字符數
readonly //只讀,不能改，能提交
disabled //不能改，不能提交

 

框架-frameset標籤：

內嵌框架-iframe標籤：

複習
格式標籤
1.br 換行
2.p 段落
3.h1 加粗
4.hr 導航線
5.nobr 不換行
6.pre 源碼輸出
7.center 居中
8.b 加粗
9.i 斜體
10.u 下劃線

 

文本標籤
1.font
2.span
3.p 段落
4.h1 加粗

A標籤和錨點
1.<a href="" target="_blank">打開新窗口</a>
2.<a name="top"></a>
target屬性的值：
1._top
2._self
3._blank
4._parent
5.窗口名稱

圖片標籤
<img src="" />

表格標籤
<table border="1px" width="500px">
<tr>
<td></td>
<td></td>
</tr>
<tr>
</tr>
</table>

表單標籤
<form action="">
<input type="text">
<input type="password">
<input type="radio">
<input type="reset">
<input type="checkbox">
<select>
<option value=""></option>
</select>
<textarea>文本域</textarea>
</form>

frame
<frameset>
<frame src="">
<frame src="">
</frameset>

框架屬性
frameborder 1|0 是否有邊框
border 30px 邊框的寬度
bordercolor blue 邊框的顏色（chrome支持）

frame屬性
1.name 窗口名稱
2.src 在本窗口打開的頁面
3.noresize 不能改變大小
4.scrolling no|auto

iframe 內嵌框架
<iframe src="myflash/index.html" frameborder="0" width="200px" height="300px" scrolling="no"></iframe>
屬性
1.src
2.frameborder 0|1 有沒有邊框
3.width 寬
4.height 高
5.scrolling no|auto|yes 滾動條

 

H5視頻標籤
<video src="movie.ogg" controls="controls"></video>

當前，video 元素支持三種視頻格式：
Ogg MPEG4 WebM

autoplay 若是出現該屬性，則視頻在就緒後立刻播放。
controls 若是出現該屬性，則向用戶顯示控件，好比播放按鈕。
height 設置視頻播放器的高度。
loop 若是出現該屬性，則當媒介文件完成播放後再次開始播放。
preload 若是出現該屬性，則視頻在頁面加載時進行加載，並預備播放。
若是使用 "autoplay"，則忽略該屬性。
src 要播放的視頻的 URL。
width 設置視頻播放器的寬度。

視頻控制play() pause() load()

H5音頻標籤<audio src="song.ogg" controls="controls"></audio>