zoukankan      html  css  js  c++  java
  • 网页入门

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

     

    3Imagemap的组合使用:

    <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.

  • 相关阅读:
    团队项目第一阶段-意见评论
    团队项目第一阶段-意见汇总
    团队项目第一阶段-项目评审
    团队第一阶段冲刺成果展示
    2020年12月13日
    2020年12月12日
    2020年12月11日
    2020年12月10日
    2020年12月9日
    《代码大全2》阅读笔记06
  • 原文地址:https://www.cnblogs.com/letben/p/5185082.html
Copyright © 2011-2022 走看看