zoukankan      html  css  js  c++  java
  • HTML自学之旅(一)基本元素与属性练习

    我是按照W3school上面的教程学习的,个人觉得教程很不错,每节都有小练习,加油!

    都是自己敲的代码,有的书上反对自己写代码,但是我觉得因为没有基础,自己写写还是有好处的,嘿嘿,个人意见不同吧。。

    练习1:

    <html>
    <body bgcolor="yellow">
    
    <h1 align="center">This is heading 1</h1>
    <h2 align = "left">This is heading 1</h2>
    <h3 align = "right">This is heading 1</h3>
    <h4>This is heading 1</h4>
    <h5>This is heading 1</h5>
    <h6>This is heading 1</h6>
    <!--<h7>This is heading 1</h7>-->
    <!--再来个注释,试一下效果 -->
    
    
    <p>This is the first paragraph
    </p>
    <hr />这是链接区域
    <br />
    <a href="http://www.baidu.com">This is baidu link</a>
    
    <br/>
    <a href="http://www.w3school.com.cn">This is w3school link</a>
    
    <hr />这是图片区域
    <br />
    <img src = "http://img.t.ifeng.com/201010/22/12/96x96_1758293e995c.jpg" />
    
    
    <hr />这是表格区域
    <table border="1">
      <tr>
        <th>Month</th>
        <th>Savings</th>
      </tr>
      <tr>
        <td>January</td>
        <td>$100</td>
      </tr>
    </table>
    
    <hr />换行功能
    <p>这句话<br />在这里换行
    </p>
    
    <p>
    这个段落    有很多
    空行
    或者空格
    但是浏览器自动  忽略
    了它们
    </p>
    
    <pre>
    这是预格式文本
    可以显示空行
    和空格
    还有代码
    </pre>
    
    <pre>
    while(true)
    {
        sum=a+b;
        return sum;
        cout<<sum;
    }
    </pre>
    
    
    </body>
    </html>

    练习2:

    <html>
    <body>
    
    <b>This text is bold</b>
    <br />
    <strong>This text is strong</strong>
    <br />
    <big>This text is big</big>
    <br />
    <small>This text is small</small>
    <br />
    <em>This text is emphasized</em>
    <br />
    <i>This text is italic</i>
    <br />
    This text contains<sub>下标</sub>
    <br />
    This text contains<sup>上标</sup>
    <hr />
    <pre>
    这是预格式文本
    哈哈
    可以输出空格
    空行吧
    </pre>
    
    <code>
    while(true)
    {
       computer code;
    }
    </code>
    
    <kbd>keyboard input</kbd>
    <br />
    <samp>Sample text</samp>
    <br />
    <var>Computer variable</var>
    <hr />
    地址练习:
    <address>
    天津市SHUDIP<br />
    FERT R<br />
    ABC(收)<br />
    邮编:123456
    </address>
    
    <hr />缩写练习<br />
    <abbr title = "etcetera">etc.</abbr> <br />
    <acronym title = "World Wide Web">www.</acronym>
    
    <hr />文字方向练习//这里不支持那个功能吧,本应该是从右向左输出文字
    <br />
    <bdo dir="rt1">Here is some text</bdo>
    
    <hr />块的引用练习<br />
    这是长引用
    <blockquote>这是长引用.这是长引用.这是长引用.这是长引用.这是长引用.这是长引用.这是长引用.这是长引用.这是长引用.这是长引用
    这是长引用.这是长引用.这是长引用.这是长引用.这是长引用.这是长引用。这是长引用.这是长引用.这是长引用.这是长引用.这是长引用.这是长引用.这是长引用.这是长引用.这是长引用.这是长引用
    这是长引用.这是长引用.这是长引用.这是长引用.这是长引用.这是长引用</blockquote>
    
    <br />这是短引用
    <q>短引用哇,短引用</q>
    
    <hr />删除或添加文字效果练习
    <p>一打有<del>二十</del><ins>十二</ins>个哦</p>
    
    
    
    </body>
    </html>

    肯定是超级简单啦,嘿嘿,坚持!

  • 相关阅读:
    Java实现 LeetCode 242 有效的字母异位词
    Java实现 LeetCode 212 单词搜索 II
    Java实现 LeetCode 212 单词搜索 II
    Java实现 LeetCode 212 单词搜索 II
    Java实现 LeetCode 212 单词搜索 II
    Java实现 LeetCode 344 反转字符串
    Java实现 洛谷 P1208 [USACO1.3]混合牛奶 Mixing Milk
    Java实现 洛谷 P1208 [USACO1.3]混合牛奶 Mixing Milk
    Java实现 洛谷 P1208 [USACO1.3]混合牛奶 Mixing Milk
    Java实现 洛谷 P1208 [USACO1.3]混合牛奶 Mixing Milk
  • 原文地址:https://www.cnblogs.com/lx09110718/p/HTML1.html
Copyright © 2011-2022 走看看