你的位置:首页 > 网页设计

[网页设计]网页入门


今天就是一个网页的入门,说实话我不太想当前端工程师。因为 那些东西 不会按照我的想法来实现对应的效果。我只想做一个大概。我想做后端开发。如果能是服务器端就很happy。如果能有 android的部分 就很happy。

 

然后现在就只是单单来写一些对应属性就好:

1、基本属性:

<font> 字体标签,在里面对应可以写一些字体样式,颜色,大小的属性</font>

<br/>回车换行

<i>斜体字效果</i>

<u>下划线效果</u>

20<sup>2</sup>可以用来显示20的平方这样一个效果

H<sub>2</sub>O   可以用来显示水分子这样一个效果

<s>删除线,或者称之为贯穿线</s>

<p align="left">

段落具有自动换行的属性,我们添加了一个 向左对齐的方式。

</p>

<p align="center">

本段落居中对齐

</p>

<img src="文件路径" width = "宽度"  height="高度" title="当鼠标悬于此图片之上时,显示的内容" alt="当图片未加载完成,或者加载出错时,显示此部分内容"  border="图片边框的粗细">

 

2、超级链接

超级链接这个标签采用 <a></a> anchor 锚点的意思代表 这里是一个链接操作,href是其中的属性,代表我们将会取得地方,这对标签之间可以添加对应的内容。

(1)文本链接

(2)图片链接

(3)页内链接

(1)

标签之间的内容如果是文本的话就是 文本链接

<a name = "跳转接收位置" >hello</a> <br/>

<a href ="链接1.html">相册</a>

<a href ="链接2.html">说说</a>

<a href ="没有定好的位置就先写#">日志</a>

<a href ="#表示当前页">留言板</a>

<a href ="#">个人中心</a>

<a href ="3">系统设置</a>

(2)

标签之间的内容如果是图片的话就是 图片链接

<a href="index.html" ><img src="图片资源路径" width="图片的款" height="图片的高"></a>

(3)

页内链接,单击此链接回到当前页的对应位置

<a href="#">如果只是个#号就回到页面最顶端</a>回到当前页最顶端

<a href="#跳转接受位置">如果href后面跟了#号并且#后面是某一个标签儿元素的name的值,那么就会跳转到对应位置</a>

 

3、Image与map的组合使用:

<img src ="planets.gif" alt="Planets" usemap ="#planetmap" />

 

<map id ="planetmap">

 <area shape ="rect" coords ="0,0,82,126" href ="sun.htm" alt="Sun" />

 <area shape ="circle" coords ="90,58,3" href ="mercur.htm" alt="Mercury" />

 <area shape ="circle" coords ="124,58,8" href ="venus.htm" alt="Venus" />

</map>

这是人家官方文档里面的例子,注意的是google chrome 和360 都不支持 只能用ie显示,我也不知道 我的ie的版本是多少。Wow!竟然是 11竟然是版本号 11.

 

 

这算是做成了老师没弄出来的东西。

 

4、滚动区域

同样的这个 属性在360里面被屏蔽了,不能显示,但是在ie里面是可以显示的。

<marquee  behavior="alternate" direction="up" bgcolor="blue" height="200" width="200">

滚动区域

</marquee>

这个属性老师讲解的还是 比较清楚。就不太多赘述了

直接复制一个靠谱的 示例就可以了

<marquee> ... </marquee>

<marquee>移动文字!</marquee> 

方向 <direction=#> #=left, right

<marquee direction=left>啦啦啦,我从右向左移!</marquee> <P>
<marquee direction=right>啦啦啦,我从左向右移!</marquee> 

啦啦啦,我从右向左移!

啦啦啦,我从左向右移!

方式 <bihavior=#> #=scroll, slide, alternate

<marquee behavior=scroll>啦啦啦,我一圈一圈绕着走!</marquee> <P>
<marquee behavior=slide>啦啦啦,我只走一次就歇了!</marquee> <P>
<marquee behavior=alternate>啦啦啦,我来回走耶!</marquee> 

 

5、列表

有序列表,无序列表。列表项。

注意层级嵌套关系就是了,这里不做过多讲述,等到创建一个电子笔记本的时候可以详细练习一下。

<ul type="circle">

     <li>水浒传</li>

 <li>三国演义</li>

 <li>西游记</li>

 <li>红楼梦</li>

  </ul>

  <ol type="b" start="2">

     <li>捉妖记</li>

 <li>港囧</li>

 <li>夏洛特烦恼</li>

 <li>等自己拍是</li>

  </ol>

  列表嵌套:

  <br/>

  中国省份:

  <ul>

     <li>北京</li>

 <ol >

    <li>海淀</li>

<li>朝阳</li>

<li>昌平</li>

 </ol>

 <li>河北

    <ul>

   <li>石家庄</li>

   <li>张家口</li>

   <li>保定</li>

</ul>

 </li>

 <li>河南</li>

  </ul>

 

 

6、表格

利用它实在做过一些东西,这里面也不再过多赘述。

cellspacing 是指单元格之间的距离

celladding 是指单元格中的内容距离单元格边框的距离。

 

Body中 内容顶格显示:

<body topmargin="0"> 采用topmargin的属性 并设置为0.