day01:
1.前端开发工具
开发:记事本 editplus dw webstorm
调试: google firefox
2.创建html代码文件
注意:后缀html
(1)Html内容信息编写规范
- 标签有开始就要有结束
- 标签不要交叉嵌套
<html>
<head>
<title>
welcome to oracle
</title>
</head>
<body>
hello everyone!
</body>
</html>
3.访问原理
- 颜色调试
#红绿蓝(#FFFFFF)
- 设置属性和样式
Background=”图片地址”;
Bgcolor=”颜色”;(#......)
Text=”颜色”;(#......) 注:非可连接文字颜色
- 版本划分
HTML4.01
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
</html>
Html5:
<!doctype html>
<html>
<head></head>
<body></body>
</html>
4.编码方式
- 文件编码(文件->另存为->设置编码方式)
- 通知浏览器如何解析(<meta charset="utf-8">)
Utf-8 gbk gb2312 big5
Utf-8(国际统一编码)
Gbk(gb2312)国内编码
Big5(繁体中文)
5.标尺线(分割线)
<hr color="#FF0000" size="10" width="50%"/>
Hr是标签名字:
Color:颜色
Size:厚度
Width:宽度
6.标题标签
<h1></h1>
<h6></h6>
依次变小
7.标签分类
内联标签(行标签):<font></font> <>…. 按照文档流顺序依次排列
块标签:独自占一行的标签<h1></h1> <br/> <hr/><p></p>
8.列表
- 有序列表:
<ol type="I">
<li>诸葛亮</li>
<li>赵云</li>
<li>张飞</li>
</ol>
- 无序列表:
<ul type="square">
<li>英雄联盟</li>
<li>穿越火线</li>
<li>大话西游</li>
</ul>、
自定义列表:
day02:
1.锚点
(1)本页跳转
<a href=" #bottom">跳转到首页尾部</a>
<a name=”bottom”></a>
(2)跨页跳转
<a href=" index.html#bottom">跳转到首页尾部</a>
<a name=”bottom”></a>
2.路径
(1)绝对路径
以电脑盘符为路径基准查找所需文件
<img src="D:/image/logo.gif"/>
(2)相对路径
以文件之间的相对位置为基准进行查找
- 如果想要进行查找的文件和本身在同级目录直接写文件地址
- 如果想要查找的文件在当前文件的上级目录写法(”../”)…..
3. 音频文件引入方法:
<audio controls="controls">sss
<source src="medias/Truth of the Legend.mp3" type="audio/mp3">
</audio>
4.视频文件引入方法
<video controls="controls" width="50%" playcount="2" poster="a.jpg" onMouseOver="this.pause()" onMouseOut="this.play()">
<source src="medias/volcano.mp4" type="video/mp4">
</video>
5. 表格
<table>
<tr>
<td></td>
</tr>
</table>
6.表单类标签
<form action="" method="" id="" name="">
用户名:<input type="text" name="uname" size="20" value="XXX"/><br/>
密码域:<input type="password" name="pwd"><br/>
兴趣:<input type="checkbox" name="football">足球
<input type="checkbox" name="basketball" disabled
checked="checked">蓝球
<input type="checkbox" name="pingpang">乒乓球
<br/>
性别:<input type="radio" name="sex">男
<input type="radio" name="sex" checked="checked">女
<hr/>
<input type="hidden" name="age" value="18"/>
<input type="button" value="确定"/>
<input type="reset" name="res" value="取消"/>
</form>
7.frameset框架
后台框架:
<frameset rows="20%,80%">
<frame src="top.html"/>
<frame src="bottom.html"/>
</frameset><noframes></noframes>