• 初学HTML


    1.标签

    主要是对网页内的文本,段落进行修改

    <body>
    <h1>标题一</h1>  标题大小递减
    <p>紫陌红尘,蓦然回首。多少的春花秋月;多少的逝水沉香;多少的海誓山盟,如沿途的风景花开花谢。人世间的情缘触痛了多少无言的感慨,情深缘浅的风吹散了多 少相聚离散。花开是有情,花落是无意。</p>  与上面段落和下面段落之间空一行的间距
    来者是萍水相逢,去者是江湖相忘。缘起时,我在人群中看到你。缘灭时,你消失在人群中。
    
    <h2>标题二</h2>
    <div>用心聆听</div>   层标签:默认占一行
    用心聆听,深深呼吸,烟花雨,梨花月,寄一缕风的香魂,远离喧嚣。
    <ol>     有序列表
    <li>静心,静语。</li>  列表1
    <li>轻轻闭上眼睛,用耳去捕捉交织在身旁的声波,用心去细细勾勒身边的世界,这就是倾听的感觉。</li>列表2
    </ol>
    倾听——静心的乐曲。
    <h3>标题三</h3>
    <span>窗外</span>   层标签:默认多大空间占多大空间
    <ul>     无序列表
    <li>窗外,一片烟水迷离,不远处灯光璀璨,喧闹之声清晰可辩,</li>  
    <li>那些记忆里的爱与哀愁,千丝万缕,交织成殇,仿佛今日连绵的秋雨一般,没有尽头。</li>
    </ul>
    </body/>

    2.表格

    制作表格,并在对应的文字上加上超链接

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>360标签</title>
    </head>
    
    <body>
    <table align="center" width="100%" border="0" cellspacing="0" cellpadding="8">
      <tr align="center"><font size="+4" face="楷体">
        <td><a href="http://www.autohome.com.cn">汽车之家</a></td>
        <td><a href="http://zibo.bitauto.com">易 车 网</a></td>
        <td><a href="http://www.pcauto.com.cn">太平洋汽车</a></td>
        <td><a href="http://www.anjuke.com">安 居 客</a></td>
        <td><a href="http://out.zhe800.com">折800</a></td>
        <td><a href="http://www.suning.com"><font color="#00CC33">苏宁易购</a></font></td>
      </tr>
      <tr align="center"><font size="+4" face="楷体">
        <td><a href="http://www.12306.cn">12306官网</a></td>
        <td><a href="http://www.people.com.cn">人民</a><span></span><a href="http://www.xinhuanet.com">新华</a></td>
        <td><a href="http://www.ganji.com">赶 集 网</a></td>
        <td><a href="http://union.dangdang.com">当 当 网</a></td>
        <td><img src="360小图标/途牛.jpg" width="15" /><a href="http://www.tuniu.com">途牛旅游网</a></td>
        <td><font color="#00CC33"><i><b>1号店</b></i>&nbsp;<img src="360小图标/抢福袋.jpg" width="40"/></td></font>
      </tr>
      <tr align="center"><font size="+4" face="楷体">
        <td><a href="http://www.zhenai.com">真爱婚恋网</a></td>
        <td><a href="http://www.moonbasa.com">梦 芭 莎</a></td>
        <td><a href="http://www.baidu.com">亚 马 逊</a></td>
        <td><a href="http://www.baidu.com">艺 龙 网</a></td>
        <td><a href="http://www.baidu.com">去哪儿网</a></td>
        <td><a href="http://www.baidu.com">美 丽 说</a></td></font>
      </tr>
      <tr align="center"><font size="+4" face="楷体">
        <td><a href="http://www.baidu.com">美 团 网</a></td>
        <td><a href="http://www.baidu.com">乐视视频</a></td>
        <td><img src="360小图标/唯品会.jpg" width="15"/><a href="http://www.baidu.com">唯 品 会</a></td>
        <td><a href="http://www.baidu.com"><font color="#CC6600">聚美优品</a></td></font>
        <td><a href="http://www.baidu.com">搜 房 网</a></td>
        <td><a href="http://www.baidu.com">蘑 菇 街</a></td></font>
      </tr>
      <tr align="center"><font size="+4" face="楷体">
        <td><a href="http://www.baidu.com">猎 聘 网</a></td>
        <td><a href="http://www.baidu.com">1 药 网</a></td>
        <td><a href="http://www.baidu.com">陆金所理财</a></td>
        <td><a href="http://www.baidu.com">六 间 房</a></td>
        <td><a href="http://www.baidu.com">携程机票</a></td>
        <td><a href="http://www.baidu.com">12306·抢票</a></td></font>
      </tr>
    </table>
    
    </body>
    </html>

    3.图片热点和网页画区(iframe)

    图片热点:在图片的特定位置划出一定区域,在这个特定位置加入超链接,可以跳转到链接界面

    网页画区:在一个网页里,规划出一个区域用来展示另一个网页的内容。

    注释:在点第一个图片的12345数字时会显示超链接

    <body bgcolor="#999999" text="#3333CC">
    <img usemap="#name" src="360小图标/1234.jpg" name="12345" title="这是一张图片"/>
    <map name="name">
    <area shape="rect" coords="110,116,332,166" href="http://www.baidu.com"/>
    </map><br />
    <iframe src="http://www.baidu.com" width="400" height="300" frameborder="1" scrolling="yes"></iframe><br />

    4.网页拼接

    在一个网络页面内,规划出多个页面窗口,以表格拼接的形式展示出来。

  • 相关阅读:
    Java基础教程:面向对象编程[3]
    Java拓展教程:文件DES加解密
    JavaScript:学习笔记(4)——This关键字
    jQuery:[2]百度地图开发平台实战
    Android开发——减小APK大小
    玩转ButterKnife注入框架
    Java技术——多态的实现原理
    RxAndroid结合Retrofit,看看谁才是最佳拍档!
    Android开发——AsyncTask的使用以及源码解析
    10本比较鸡肋的技术类书籍,简要回顾
  • 原文地址:https://www.cnblogs.com/Chenshuai7/p/5065251.html
Copyright © 2020-2023  润新知