文章目录

  • 整理大一时期的前端html、css的实训练习

1、练习常用标签的使用

<!DOCTYPE html>
<html>
  <head>
    
    <meta charset="utf-8" />
    <title>这是我做的一个网页</title>
  </head>
  <style>p{font-size: 14px;text-indent: 28px;}
         div{
          width: 700px;
         
          }</style>
  <body>
    <div><center><h2>各科小常识</h2></center>
    <dl>
    <dt><h3>语文</h3></dt>
    <dd>三国演义是中国四大古典名著之一，元末明初小说家罗贯中所著，是中国第一部章回体历史演义的小说，描写了从东汉末年到西晋初年近100年的历史风云</dd><hr /></dl>
    <h3>数学</h3>
    <p>勾股定理直角三角形：a<sup>2</sup>=b<sup>2</sup>+c<sup>2</sup></p><hr />
    <h3>英语</h3>
    <p>No pain ,No gain </p><hr />
    <h3>化学</h3>
    <p>H<sub>2</sub>SO<sub>4</sub>是一种重要的工业原料，可用与制作肥料、洗涤剂等</p><hr />
    <h3>经济</h3>
    <p>版权符号:©</p>
    <p>注册商标：®</p><hr />
  </div>
    </body>  
      
</html>
  • 测试结果

    • 前端网页练习_前端

2、无序列表和有序列表练习

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title><h1>问卷调查</h1></title>
    
  </head>
  <body><div>
    <h1><caption>问卷调查</caption></h1>
    <h3>1、你是通过什么途径来到绿叶学习网的？</h3><br />
    <ol type="A">
      <li>百度搜素</li><br />
      <li>谷歌搜素</li><br />
      <li>其他途径</li><br />
    </ol>
    <h3>2、你觉得绿叶学习网网页面设计怎么样？</h3><br />
    <ol type="A">
      <li>酷炫大方</li><br />
      <li>比较普通</li><br />
      <li>非常粗糙</li><br />
    </ol>
    <h3>你觉得这本书怎么样？（多选）</h3><br />
    <ul type="disc">
      <li>通俗易懂，轻松幽默</li><br />
      <li>内容丰富，技巧很多</li><br />
      <li>三个字，非常好</li><br />
    </ul>
    </div>
  </body>
</html>
  • 运行结果

    • 前端网页练习_h5_02

  • 3、表格
3、<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <style>table,tr,td,th{border: 1px solid silver;}</style>
  </head>
  <body>
  <table>
    <caption>学生成绩表</caption>
    <tr><th>姓名</th><th>性别</th><th>成绩</th></tr>
    <tr><td>张三</td><td>男</td><td>250</td></tr>
    <tr><td>李四</td><td>男</td><td>520</td></tr>
    <tr><td>平均分</td><td colspan="2">385</td><</tr>
  </table>
  </body>
</html>
  • 运行结果

    • 前端网页练习_前端_03

4、表格的使用

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <style >body{background:#eee;}
      table{width: 100%;
            height: 300px;
            border: 1px solid gainsboro;
            }
    td{width: 18%;
      border: 2px solid gainsboro;}
      img{width: 100%;}
      a{text-decoration: none;}
      span{color: blue;}</style>
  </head>
  <body>
    <table>
      <tr>
    <td><h5>大家电年度盛典</h5><h6><span>疯抢300元优惠卷</span></h6></br><img src="img/冰箱.jpg" /></td>
    <td><h5>大家电年度盛典</h5><h6><span>疯抢300元优惠卷</span></h6><img src="img/孕妇.jpg" /></td>
    <td><h5>大家电年度盛典</h5><h6><span>疯抢300元优惠卷</span></h6><img src="img/鞋子.jpg" /></td>
    <td><h5>大家电年度盛典</h5><h6><span>疯抢300元优惠卷</span></h6><img src="img/小汽车.jpg" /></td>
    <td><h5>大家电年度盛典</h5><h6><span>疯抢300元优惠卷</span></h6><img src="img/花.jpg" /></td></tr>
    
    </table>
  </body>
</html>
  • 运行结果

    • 前端网页练习_h5_04

5、表单的使用

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
  </head>
  <body>
    <center><h3>注册页面</h3></center>
    <form method="post">
      昵称：<input type="text" size="27" maxlength="9"/><br />
      密码：<input type="password"  size="27" maxlength="9" /><br />
      邮箱：<input type="text"   size="27"  maxlength="9"/><select>
        <option>qq.com</option>
        <option>萱蕚</option>
        <option>选择</option>
      </select><br />
    性别：<input type="radio" name="age" value="男" />男
      <input type="radio" name="age" value="女" />女<br />
      爱好：<input type="checkbox" name="fruit" value="man" />旅游
      <input type="checkbox" name="fruit" value="" />摄影
      <input type="checkbox" name="fruit" value="orange" />运动<br />
    个人简介：<br />
    <textarea rows="10"cols="36">
    </textarea><br />
      上传个人照片：<br />
      <input type="submit"  value="上传文件" />未选择任何文件<br /><hr />
      <center>
        <input type="button" value="立即注册" /><br />
      </center>
      
    </form>
  </body>
</html>
  • 运行结果

    • 前端网页练习_常用标签_05