博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
两天笔记
阅读量:5080 次
发布时间:2019-06-12

本文共 2545 字,大约阅读时间需要 8 分钟。

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>

转载于:https://www.cnblogs.com/mary-chrisima/p/6940148.html

你可能感兴趣的文章
magento 自定义订单前缀或订单起始编号
查看>>
ACM_拼接数字
查看>>
计算机基础作业1
查看>>
Ubuntu 深度炼丹环境配置
查看>>
C#中集合ArrayList与Hashtable的使用
查看>>
从一个标准 url 里取出文件的扩展名
查看>>
map基本用法
查看>>
poj-1163 动态规划
查看>>
Golang之interface(多态,类型断言)
查看>>
Redis快速入门
查看>>
BootStrap---2.表格和按钮
查看>>
Linear Algebra lecture 2 note
查看>>
CRC计算模型
查看>>
Ajax之404,200等查询
查看>>
Aizu - 1378 Secret of Chocolate Poles (DP)
查看>>
csv HTTP简单表服务器
查看>>
OO设计的接口分隔原则
查看>>
数据库连接字符串大全 (转载)
查看>>
java类加载和对象初始化
查看>>
对于负载均衡的理解
查看>>