简单网页案例练习
案例1
<!DOCTYPE html>
<html>
<head>
    <title>标题</title>
</head>
<body>
<h2>清平乐</h2>
朝代<em>宋代</em>      作者：<b>李清照</b>
<hr/>
    原文：
    <p>
    年年雪里，常插梅花醉。挼尽梅花无好意，赢得满衣清泪。
    <br>
    今年海角天涯，萧萧两鬓生华。看取晚来风势，故应难看梅花。
    <p/>
</body>
</html>
案例2
<!DOCTYPE html>
<html>
<head>
    <title>申请表</title>
    <meta charset="utf-8">
</head>
<body>
    <h3>申请表</h3>
    <form>
      姓名：<input type="text" size="20" maxlength="6" value=""/>
      <br/>
      密码：<input type="password" size="20">
      <br/>
      照片：<input type="file"/>
      <br/>
      感兴趣的职位：
      <input type="radio" value="1" name="work" />Web设计
      <input type="radio" value="0" name="work" />Web开发
      <br/>
      向往的城市：
      <select size="1">
      <option>--请选择--</option>
      <option>北京</option>
      <option>上海</option>
      <option>广东</option>
      <option>天津</option>
      </select>
      <br/>
      协议：
      <br/>
      <div >
      求职信息必须真实，准确。<br/>本网站只负责向企业推荐。
      </div>
      <input type="checkbox" value="shuoming" name="shuoming" />我已认真阅读病接受以上的协议。
      <br/>
      经验：
      <br/>
      <select size="1">
      <option>--请选择--</option>
      <option>无经验</option>
      <option>一年</option>
      <option>五年</option>
      <option>十年以上</option>
      </select>
      <br/>
      <input type="submit" name="">
      <input type="reset" name="">
    </form>
</body>
</html>
案例3
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd">
html制作一个网页<html xmlns="/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>id选择器</title>
<style type="text/css">
#bold {font-weight: bold;}
#font24 {font-size: 24px;}
</style>
</head>
<body>
<p id="bold">段落1：id="bold"，设置粗体文字。</p>
<p id="font24">段落2：id="font24"，设置字号为24px。</p>
<p id="font24">段落3：id="font24"，设置字号为24px。</p>
<p id="bold font24">段落4：id="bold font24"，同时设置粗体和字号24px。</p>
</body>
</html>
案例4
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>新闻列表</title>
<link rel="stylesheet" href="css/style05.css" type="text/css" />
</head>
<body>
<div class="all">
    <h2 class="head">招聘信息</h2>
    <ul class="content">
        <li><a href="#">北京厚石人和信息科技招聘人才</a></li>
        <li><a href="#">上海微甲网络科技招聘工程师</a></li>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。