• 初学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.网页拼接

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

  • 相关阅读:
    SwiftUI extension Bundle for parse JSON file All In One
    如何清理 MacBook Pro 笔记本电脑外壳上贴纸残胶 All In One
    pure CSS carousel effect All In One
    SwiftUI custom MapAnnotation All In One
    Xcode code folding ribbon All In One
    技术人员副业赚钱之道 All In One
    图解算法数据结构 All In One
    js iterator protocol & next() All In One
    Vue 3 Transition All In One
    Bloom Filter js version All In One
  • 原文地址:https://www.cnblogs.com/Chenshuai7/p/5065251.html
Copyright © 2020-2023  润新知