• HTML2


    例子1

    <html>
        <body>
            <h1>英雄联盟(电子竞技类游戏)</h1>
            <p>
                <strong>《英雄联盟》</strong>(简称lol)是由美国<i>Riot games</i>开发, 中国大陆地区由腾讯游戏运营的网络游戏。
            </p>
            <p><strong>《英雄联盟》</strong>除了即时战略、团队作战外,还拥有一百多位特色各异的英雄,丰富的地图及玩法、自动匹配的战网平台,包括天赋树、召唤师系统、符文等元素。<ins>[1]</ins>
            </p>
            <p>2016年1月,根据官方数据显示,LOL全球最高同时在线已经突破<del>750</del>900万,全球日活跃高达2700万,全球月活跃已达6700万,注册用户亿计,LOL已经成为当今世界最具人气和影响力的网络游戏之一。<ins>[2]</ins></p>
        </body>
    </html>

    标题

    <h1>....<h5>

    段落

    <p>  </p>

    粗体

    <strong>或者<b>

    斜体

    <em>或者<i>

    删除效果

    <del>

    下划线

    <ins>

    表格

            <table border="1" width="200px">
                <tr align="middle">
                    <td width="30%" valign="top">1</td>
                    <td>2</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>4</td>
                </tr>
                <tr>
                    <td>a<br/>c<br/>d</td>
                    <td>b</td>
                </tr>
            </table>

    表格:由<table>标签包含。tr表示行(table row),td(table data)定义这一行中的每一个元素。有3个元素则该<tr>中包括3个<td>

    表格边框:border属性可以设置表格的边框宽度

    表格宽度:table的width属性表示整个表格的宽度。而在td中设置width属性,其同一列的td元素会继承该td的宽度。width属性可以使用px,也可使用百分比

    单元格水平对齐:align为水平对齐属性,取值为left center right。水平对齐即控制元素的左右移动。在td内设置水平对齐则仅仅控制该格子本身,在tr设置水平对齐则控制整行元素。

    单元格垂直对齐:属性为valign,取值为top middle  bottom。 垂直对齐即控制元素的上下移动。

    表格2

            <table border="1" width="200px">
                <tr align="middle">
                    <td  colspan="2">1</td>
                </tr>
                <tr >
                    <td>3</td>
                    <td>4</td>
                </tr>
            </table>

    横跨两列:设置td的属性colspan,取值为跨的列数,表示该td元素横着占两列。对应的,该行的td元素应该只有1个。

            <table border="1" width="200px">
                <tr align="middle" >
                    <td rowspan="2">1</td>
                    <td>2</td>
                </tr>
                <tr >
                    <td>4</td>
                </tr>
            </table>

    横跨两行:仍然是在td上设置属性,只是设置属性为rowspan,表示该td元素竖着占两行。对应的列应该少一个元素。

    背景色:bgcolor属性,可在td或tr上设置。

    列表

    <ol>
        <li>aaa</li>
        <li>bbb</li>
    </ol>
    <ul>
        <li>ccc</li>
        <li>ddd</li>
    </ul>

    有序列表:ol

    无序列表:ul

    span和div

    1)都是布局元素,本身没有意义也不会显示在页面中。

    2)两者的区别:div是块元素,两个div之间会自动换行;类似的块元素还有h1,table,p

               span是内联元素,不会自动换行,类似的还有img,a,b,strong

                               内联元素的宽度随着内容长度的变化而变化,而块元素则不会

    内联框架<iframe>

    iframe可以使得浏览器中有一个小浏览器,打开新的页面。

    <iframe src="baidu.com" width="200px" height="150px"> </iframe>

    例子2

    <h3>英雄技能</h3>
    <table border="2" width="900px">
        <tr>
            <td witdh="6%"><strong>技能名</strong></td>
            <td width="5%"><strong>触发</strong></td>
            <td width="15%"><strong>技能属性</strong></td>
            <td width="50%"><strong>技能效果</strong></td>
            <td width="10%" align="middle"><strong>图标</strong></td>
        </tr>
        <tr>
            <td><strong>坚韧</strong></td>
            <td><strong>被动</strong></td>
            <td colspan="2">概论在如果在9秒内不受到任何伤害,之后的每秒都会回复自己最大生命值的0.4%。小兵的伤害不会中断坚韧效果。</td>
            <td align="middle"><img src="images/skill1.png"/></td>
        </tr>
        <tr>
            <td><strong>致命打击</strong></td>
            <td><strong>Q</strong></td>
            <td>冷却时间</td>
            <td>盖伦移除身上的所有减速效果,并获得30%移动速度加成,持续1.5/2/2.5/3/3.5秒。在接下来的4.5秒内,他的下次普通攻击会造成30/60/90/120/150(+1.4AD)物理伤害,并沉默目标1.5秒。</td>
            <td align="middle"><img src="images/skill2.png"/></td>
        </tr>
        <tr>
            <td><strong>勇气</strong></td>
            <td><strong>W</strong></td>
            <td>冷却时间:24</td>
            <td><strong>被动:</strong>击杀一个单位会永久提供0.25护甲和魔法抗性加成,最大值:40。<br/><strong>主动:</strong>盖伦加固他的勇气2/3/4/5/6秒。在最初的0.75秒里,他少承受60%伤害并获得60%韧性。在剩余的持续时期里,他少承受30%伤害。
            </td>
            <td align="middle"><img src="images/skill3.png"/></td>
        </tr>
        <tr>
            <td><strong>审判</strong></td>
            <td><strong>E</strong></td>
            <td>冷却:9</td>
            <td>盖伦快速地旋舞大剑,持续3/3/3/3/3秒,在持续期间对周围敌人总共造成物理伤害——14/18/22/26/30上他总攻击力的36/37/38/39/40%,5次(英雄每升3级加1次)。【审判】会在攻击单个敌人时造成33/33/33/33/33%额外伤害。取消【审判】会返还相当于剩余持续时长的冷却时间。审判可以暴击,并造成额外伤害。审判对小兵的伤害会减少25%.能够在旋转时使用【提亚玛特】/【贪欲九头蛇】现在,在旋转时右键到目标身上,会让你更靠近你的目标。</td>
            <td align="middle"><img src="images/skill4.png"/></td>
        </tr>
        <tr>
            <td><strong>德玛西亚正义</strong></td>
            <td><strong>R</strong></td>
            <td>冷却:120</td>
            <td><strong>被动:</strong>最近获得最多击杀数的敌人会成为大反派。盖伦的E【审判】和普攻会对大反派造成额外真实伤害,伤害值为大反派1%的最大生命值。<br/><strong>主动:</strong>盖伦召唤德玛西亚之力,试图斩杀一名敌方英雄,目标损失的生命越多,则此技能造成的伤害越高。造成175/350/525魔法伤害加上目标已损失生命值的28/33/40%。对大反派造成真实伤害。</td>
            <td align="middle"><img src="images/skill5.png"/></td>
        </tr>
    </table>
    View Code

    图像

    插入图像:<img src="..abc.png" />

    同级目录图片:src="文件名"

    上级目录图片:src=“../文件名”

    绝对路径:src="file://c:/abc/文件名"

    设置图片大小:width和height属性

    图像居中:一般将图像放在div中,然后设置div的水平对齐和垂直对齐

    alt属性:当图像无法显示时,alt会出现作为提醒。<img src="abc.png" alt="图像无法显示">

     外部链接

    建立外链:<a href="http://baidu.com"> 百度</a>

    鼠标在链接上悬停时显示提示:tittle属性,<a href="http://baidu.com" title="跳转到百度">百度</a>

    用图片作为外链:<a href="http://baidu.com" > <img src="c://pic.png"/></a>

  • 相关阅读:
    个人阅读作业+个人总结
    个人作业Week3-案例分析
    个人作业Week2-代码复审
    个人作业-Week1
    个人项目-数独
    第0次个人作业
    团队项目-游戏引擎的考察
    Week3结对项目-数独游戏
    个人作业Week3-案例分析
    代码复审
  • 原文地址:https://www.cnblogs.com/zhuqiwei-blog/p/10208675.html
Copyright © 2020-2023  润新知