软件开发培训日记7_20

HTML基本标签

<!DOCTYPE>

<html>     

<head>

<meta>

<title></title>

</head>

<body>

</body>

</html>

 

<!DOCTYPE>

是对版本号的说明 ;

Etc.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 

<head></head>

头部,一般包含<meta> <title>两个标签,CSS样式也可以写在头部;

 

<meta>

设置当前页面字符集编码,支持中文编码的有

gbk/gb2312/UTF-8/big5(繁体中文);

Etc.

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

 

<title></title>

设置网页的标题,就是浏览网页时显示在浏览器标签栏的信息;

Etc.

<title>个人主页</title>

<body> </body>

网页主体部分,大多数标签都应该写在<boby>之间;

直接设置<body>的属性就是对页面整体属性进行设置,背景颜色bgcolor,背景图片background等;

Etc.

<body bgcolor="#FFCCCC" background=”image/1_1.jpg”>

在这里如果同时设置了背景颜色和背景图片,优先显示背景图片;

 

字体、字号:

<h1></h1>

设置为一级标题,html中有6级标题,1级最大,6级最小;

Etc.

<h1>一级标题</h1>

<h2>二级标题</h2>

<h3>三级标题</h3>

<h4>四级标题</h4>

<h5>五级标题</h5>

<h6>六级标题</h6>

 

<font></font>

设置文本属性,字体颜色font color,字体大小size,字形face等;

Etc.

<font color="#FFCCCC" size="4" face="宋体">我设置的字体属性</font>

其中字体大小应该设置成1-7的值,网页默认字体size为3;

也可以写成-1,即3-1;+1,即3+1;

<b></b>

加粗;

<u></u>

下划线;

<i></i>

  倾斜;

<br />

换行;

<hr />

分割线,默认平铺 水平居中;可以设置宽度width,高度size(单位像素),水平对齐方式align,颜色color;

Etc.

<hr color="#FF0000width="90%"/>

特殊符号:

空格   引号(“”) "

小于(<) &it 大于(>) >

版权号(©)©

段落标签:

<p></p>

包含文本,可以对不同的段落分开操作;

常见图片格式:

*.jpg 网页图片

*.gif 网页图片

*.swf 网页动画

*.bmp 桌面墙纸

每种格式的图片都有适合他们应用的场合,实际开发是根据需要选择适当的格式;

图像的基本语法:

<img />

设置图片路径,图片的宽度width,高度height等;

Etc.

<img src="image/s1.jpg" align="middle" />书皮设计

在网页中添加图片时会用到很多不同的属性,在不设置宽高的时候,直接显示图片默认大小,也可以手动设置width和height来放大或缩小图片,但是有可能会导致图片不清晰,失真。

alt、title属性设置当鼠标悬停在图片上显示的信息,为了考虑浏览器的兼容性,一般两个都写,但两者的效果是一样的。

当图片后面需要添加文字的时候,我们需要考虑文字的对齐方式,<img />标签中align就是设置文字对齐方式的;border属性设置图片边框粗细一般为0,hspace设置图像与文字间距;

文字布局:

有序列表:

<ol></ol>

<li></li>

列表内容写在<li>标签内;

Etc.

<0l>

            <li>page</li>

            <li>page</li>

        </ol>

无序列表:

<ul></ul>

Etc.

<ul>

            <li>page</li>

            <li>page</li>

        </ul>

可以通过设置type属性改变列表之前标记的样子,对有序列表可以设置1、a、i,无序列表可以设置circle空心圆、square实心方形、disc实心圆;

超链接:

<a href=”*.html”></a>

Etc.

<a href=”mailto:suisui@163.com”>发送邮件</a>

超练级可以用来发送邮件;

<a name=”top”></a>

<a href=”#top>回到顶部</a>

第一行在页面当前位置设置锚点;

第二行单击链接时回到刚才的锚点;

#表示的是当前页面;

使用相对路径链接到另外一个网页;在实际开发中一般不会使用绝对路径;

需要注意的是在选择路径时往往不知道如何该写,比如如何从当前目录选择别的文件;其实我们只要记得../表示源文件所在目录的上一级目录,../../表示源文件所在目录的上上级目录,以此类推。

Etc.

假设info.html路径是:

c:\Inetpub\wwwroot\sites\blabla\info.html 
假设index.html路径是:

c:\Inetpub\wwwroot\sites\wowstory\index.html 
在info.html加入index.html超链接的代码应该这样写: 
<a href = "../wowstory/index.html">index.html</a> 

 

滚动效果,跑马灯:

<marquee></marquee>

可以设置滚动的方向direction,延时scrolldelay,滚动方式behavior,滚动次数loop;

Etc.

<marquee direction=”left” scrolldelay=”200” behavior=”alterrate” loop=”3”>我是滚动的内容</marquee>

滚动延时单位是毫秒,loop=-1时无滚动次数;

 

 

 

 

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值