首页 > 代码库 > 两天笔记

两天笔记

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="http://www.mamicode.com/#bottom">跳转到首页尾部</a>

<a name=”bottom”></a>

(2)跨页跳转

<a href="http://www.mamicode.com/index.html#bottom">跳转到首页尾部</a>

<a name=”bottom”></a>

2.路径

(1)绝对路径

以电脑盘符为路径基准查找所需文件

<img src="D:/image/logo.gif"/>

(2)相对路径

以文件之间的相对位置为基准进行查找

  • 如果想要进行查找的文件和本身在同级目录直接写文件地址
  • 如果想要查找的文件在当前文件的上级目录写法(”../”)…..

3. 音频文件引入方法:

<audio controls="controls">sss

     <source src="http://www.mamicode.com/medias/Truth of the Legend.mp3" type="audio/mp3">

</audio>

4.视频文件引入方法

<video controls="controls" width="50%"  playcount="2" poster="a.jpg" onm ouseOver="this.pause()" onm ouseOut="this.play()">

            <source src="http://www.mamicode.com/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="http://www.mamicode.com/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="http://www.mamicode.com/18"/>

        <input type="button" value="http://www.mamicode.com/确定"/>

        <input type="reset" name="res" value="http://www.mamicode.com/取消"/>

        

</form>

7.frameset框架

后台框架:

<frameset rows="20%,80%">

<frame src="http://www.mamicode.com/top.html"/>

    <frame src="http://www.mamicode.com/bottom.html"/>

</frameset><noframes></noframes>

两天笔记