强哥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实体
<
<
>
>
空格
&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>