2018.10.30作业

第二章

1.无序列表、有序列表和定义列表适用场合分别是什么？
有序列表使用编号来记录项目的顺序比如热搜榜
无序列表使用项目符号来记录无序的项目比如广告框
自定义列表它由两个部分组成：定义条件和定义描述比如打印的试卷选择题或者百度词条

2.表格的跨行、跨列分别使用什么属性？要实现一个跨3行2列的单元格需要哪几个步骤？
colspan=“所跨的列数” rowspan=“所跨的行数”
1.创建一个大于3行2列的表格比如4行4列 2.在所需位置写入代码 colspan=“3” rowspan=“2” 3.删除多余的行列

3.HTML5中的媒体元素有哪些？怎么实现不同浏览器都能播放？
vide视频元素 audio音频元素
使用元素source

4.制作百度知道页面中的“品牌全知道”板块。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>品牌全知道</title>

</head>
<body>
<img src="images/iknowshouye.jpg">
    <h3>品牌全知道</h3>
    <ul>
        <li><img src="images/icon-1.jpg">理肤泉敏感全知道</li>
        <li><img src="images/icon-2.jpg">葳资健康肌肤全知道</li>
        <li><img src="images/icon-3.jpg">中信银行全知道</li>
        <li><img src="images/icon-4.gif">Windows7全知道</li>
        <li><img src="images/icon-5.jpg">海信电视全知道</li>
        <li><img src="images/icon-6.jpg">多美滋全知道</li>
        <li><img src="images/icon-7.jpg">三星手机全知道</li>
    </ul>
</body>
</html>

5.使用HTML5的结构元素布局贵美商城购物车页面。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<header>
    <h1>头部</h1>
</header>

<section>
    <h1>主体部分</h1>
</section>

<footer>
    <h1>尾部</h1>
</footer>
</body>
</html>

第三章

1.< label >标签的for属性表示什么？
表示指定当鼠标单击标注文本时，焦点对应的表单元素

2.哪些元素自身就有验证功能？
邮箱< email > 网址< url >

3.请用HTML5实现申请表单，相关要求如下：
>教育程度：默认选择硕士。
>国籍：有美国，澳大利亚，日本，新加坡，默认选中澳大利亚。
>单击文字相应的文本框得到焦点。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>申请表</title>
    <style>
        body{
            background-color: azure;
        }

    </style>
</head>
<body>
<center>
    <form method="post" action="">
    <h1>申请表</h1>
<table>
    <tr>
    <td> <p>
        <label for="name1">姓名：</label>
        <input name="name" type="text" value="" size="25" id="name1" required/>
    </p></td>
    </tr>
    <tr>
        <td>  <p>教育程度：<input name="xuewei" type="radio" value="硕士" id="xuewei1" checked/>
            <label for="xuewei1">硕士</label>
            &nbsp;&nbsp;<input name="xuewei" type="radio" value="博士" id="xuewei2">
            <label for="xuewei2">博士</label>
        </p></td>
    </tr>
    <tr>
        <td>  <p>
            <label for="email1">常用邮箱：</label>
            <input name="email" type="email" value="" id="email1" required/>
        </p></td>
    </tr>
    <tr>
        <td>
            <p>性别：<input name="sex" type="radio" value="男" id="sex1">
                <label for="sex1">男</label>
                &nbsp;&nbsp;<input name="sex" type="radio" value="女" id="sex2">
                <label for="sex2">女</label>
            </p></td>
    </tr>
    <tr>
        <td><p><label for="age1">年龄：</label><input name="age" type="text" value="" id="age1" required/></p></td>
    </tr>
    <tr>
        <td><p><label for="money1">月薪：</label><input name="money" type="text" value="" size="10" id="money1" required/></p></td>
    </tr>
    <tr>
        <td> <p><label for="fuzhu">附注：</label><textarea name="textarea" cols="25" rows="4" placeholder="请在这里输入附注" id="fuzhu"></textarea></p></td>
    </tr>
    <tr>
        <td>  <p>国籍：<select name="guoji">
            <option value="美国">美国</option>
            <option value="澳大利亚" selected/>澳大利亚</option>
            <option value="日本">日本</option>
            <option value="新加坡">新加坡</option>
        </select></p></td>
    </tr>
</table>
        <p><input name="tijiao" type="submit" value="提交">&nbsp;<input name="chozhi" type="reset" value="重置"></p>
    </form>
</center>
</body>
</html>

4.请用HTML5实现电子产品调查表表单。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>电子产品调查表</title>
    <style>

        body{
            background-color: cornsilk;
        }
        h1{
            color: #66CCFF;
        }
    </style>
</head>
<body>
<h1>American Metric电子产品调查表</h1>
<form action="" method="post">
<p><label for="name1">姓名：</label><input type="text" name="name" id="name1" value="" placeholder="输入必须是2-6位字符"pattern="[-\w\u4E00-\u9FA5]{2,6" required/></p>
<p><label>购买日期：</label>
<select required/>
    <option value="">----</option>
    <option value="1996">1996</option>
    <option value="1997">1997</option>
    <option value="1998">1998</option>
</select>年
    <select required/>
        <option value="">----</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
    </select >月
    <select required/>
        <option value="">----</option>
        <option value="10">10</option>
        <option value="11">11</option>
        <option value="12">12</option>
    </select>日
</p>
    <p><label for="email1">电子邮件地址：</label><input type="email" name="email" value="" id="email1" placeholder="www.baidu.com" required/></p>
    <p><label for="shouji1">手机号码：</label><input type="text" name="shouji" value="" id="shouji1" size="32" pattern="1[13578]\d{9}" placeholder="输入必须是以13/15/17/18开头的11位数字" required/></p>
    <p>您是否查看过我们的在线产品目录？<input type="radio" name="flag" value="是" checked/>是<input type="radio" name="flag" value="否">否</p>
    <p>如果查看过，您对哪些产品有兴趣购买？（选择提供的产品）</p>
    <p><input type="checkbox" name="chanping" value="大屏幕电视" id="dianshi"><label for="dianshi">大屏幕电视</label>&nbsp;
        <input type="checkbox" name="chanping" value="音频设备" id="yin"><label for="yin">音频设备</label>&nbsp;
        <input type="checkbox" name="chanping" value="视频设备" id="shi"><label for="shi">视频设备</label>&nbsp;
        <input type="checkbox" name="chanping" value="相机" id="xiangji"><label for="xiangji">相机</label>&nbsp;
    </p>
    <p><label for="fuzhu">在填写订单之前，您还有什么问题，意见或建议？</label></p>
    <p><textarea id="fuzhu" placeholder="您的输入：" rows="5" cols="45" required/></textarea></p>
    <p><input type="submit" value="提交">&nbsp;<input type="reset" value="重置" disabled/></p>
</form>
</body>
</html>

第四章

1.使用CSS制作网页有哪些优势?
页面的读取速度快、制作方便、美观、好优化。

2.使用style标签和style属性引入CSS样式有哪些相同点和不同点？
两者的相同点在于都可以达到修饰的作用,唯一不同点在于当出现相同属性后会以行内样式为准
3.说明E F：nth-child（n）和 E F：nth-of-type（n）两种选择器的区别与各自的使用场景。
E F：nth-child（n）是对父元素E的第n个 E F：nth-of-type（n）是对父元素E的第n个F元素指定了类型

4.制作总裁致辞页面。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>总裁致辞页面</title>
    <link href="CSS/common.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<h1>总裁致辞</h1>
<hr/>
<p><img src="image/icon.jpg"></p>
<p>目前北大青鸟IT教育全体系员工<strong>10000</strong>余名、授权培训中心<strong>180</strong>余家、合作院校<strong>500</strong>余所、覆盖全国<strong>90</strong>余座城市，市场占有率达到<strong>39.8%</strong>。<br/><br/>
  作为IT职业教育的先行者，北大青鸟IT教育创新的职业教育理念和业务经营模式得到了社会的广泛认可：国家人力资源和社会保障部
  与北大青鸟IT教育实施课程联合认证制度；公司两度入选中华人民共和国商务部评选的“中国连锁经营百强企业”，是迄今为止教育培训领域唯一上榜品牌。公司
  连续两年荣获 “中国服务业十大优秀特许品牌”称号，并获得中国特许经营协会颁发的中国连锁经营百强和中国特许经营年度大奖；获得新浪颁发的“中国教育杰出贡
  献奖”和“中国十大品牌教育集团”称号；并赢得 “中国IT公众认知企业金奖”、“本土最具知名度认证奖”、“最佳就业认同奖”、“质量放心用户满意双优品牌”、
  “最佳实用课程奖”等数十个奖项。人民日报、光明日报、经济日报、解放日报、中国青年报、中国计算机报等几十家权威媒体对公司进行了多方面的报道。<br/><br/>
  <em>2000年</em>，北大青鸟IT教育创造性地将特许经营模式引入到IT职业教育领域，在全国建立“北大青鸟APTECH计算机授权培训中心”。所有中心实行统一经营管理、严格保证教
  学质量，受到社会和业界的高度认可。发展速度之快、经营规模之大、学员人数之多，在全国众多IT职业培训机构中一枝独秀。成立至今，北大青鸟IT教育先后培养45万名学
  员进入IT行业。</p>
</body>
</html>

h1{
  font-size: 18px;
}
p{
  font-size: 12px;
}
p>strong{
  color: red;
}
em{
  font-size: 16px;
  color: blue;
}

5.制作员工团队风采页面。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>员工团队风采页面</title>
  <link href="CSS/common2.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<p><img src="image/recruit-01.jpg"><img src="image/recruit-02.jpg"></p>
<p>北大青鸟始终以人才作为企业的核心资本。为了吸引、激励和保留优秀人才，公司为员
  工提供完善的培训与发展体系，关注员工成长，同时在兼顾市场竞争力和内部公平的基
  础上为员工提供全面、富有竞争力的薪酬福利体系。良好的企业发展前景、 广阔的个人发
  展平台、快乐向上的工作环境，是青鸟人一直秉承的核心要素
</p>
<h1 class="biaoti1">我们的管理团队</h1>
<p><img  id="image1" src="image/recruit-03.jpg"><img  id="image2" src="image/recruit-04.jpg"></p>
<p>北大青鸟始终以人才作为企业的核心资本。为了吸引、激励和保留优秀人才，公司为员工提供完善的培训与
  发展体系，关注员工成长，同时在兼顾市场竞争力和内部公平的基础上为员工提供全面、富有竞争力的薪酬
  福利体系。良好的企业发展前景、 广阔的个人发展平台、快乐向上的
</p>
<h1>我们的部门风采</h1>
<p><img src="image/recruit-05.jpg"></p>
<p>北大青鸟始终以人才作为企业的核心资本。为了吸引、激励和保留优秀人才，公司为员工提供完善的培训与
  发展体系，关注员工成长，同时在兼顾市场竞争力和内部公平的基础上为员工提供全面、富有竞争力的薪酬福
  利体系。良好的企业发展前景、 广阔的个人发展空间。
</p>
<ul>
  <li><a href="#">联系我们</a></li>
  <li><a href="#">关于我们</a></li>
  <li><a href="#">版权声明</a></li>
  <li><a href="#">招商加盟</a></li>
</ul>
</body>
</html>

.biaoti1{
  font-size: 18px;
  color: red;
}
h1:nth-of-type(2){
  font-size: 18px;
  color: green;
}
body{
  font-size: 14px;
}
img[id]{
  width: 300px;
  height: 200px
}
p:last-of-type{
  color: blue;
}

li>a{
  font-size: 14px;
  color: #640000;
}

猜你喜欢