强哥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

静态资源地址问题：
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>