网页入门
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了网页入门相关的知识，希望对你有一定的参考价值。
今天就是一个网页的入门，说实话我不太想当前端工程师。因为 那些东西 不会按照我的想法来实现对应的效果。我只想做一个大概。我想做后端开发。如果能是服务器端就很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.
以上是关于网页入门的主要内容，如果未能解决你的问题，请参考以下文章
HTML5期末大作业：餐饮美食网站设计——咖啡(10页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 咖啡网页设计 美食餐饮网页设计...(代码片段