1. 程式人生 > >強哥HTML學習筆記

強哥HTML學習筆記

文字標簽 borde develop rds 數據 cccccc 返回 a標簽 frame

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

靜態資源地址問題:
1、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>

強哥HTML學習筆記