Web实习实验一 HTML基础

_孙孙孙孙孙SS

已于 2024-07-31 13:36:00 修改

阅读量389

点赞数 6

分类专栏： Web前端开发文章标签：前端 html

于 2024-07-31 13:32:27 首次发布

本文链接：https://blog.csdn.net/m0_73282541/article/details/140820132

版权

Web前端开发专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一、实验目的

掌握HBuilder X的基本操作方法
理解并掌握HTML常用标记的使用。

二、实习题目

1．通过查阅MDN网站（https://developer.mozilla.org/zh-CN/ 或 http://172.29.1.120 ），学习使用HTML中video标记、 audio标记、details和summary标记、fieldset标记。并请自行举例分别写出使用这标记的页面代码。

<video>:视频嵌入元素

示例代码如下：

<h1>这是一个video测试</h1>
    <video src = "90th.mp4" controls = "controls" loop = "loop" width = "420" poster="fm.png"></video>
    <br />
    <a href="90th.mp4" target = "_blank">这是一个video测试</a>
    <hr />
    <br />

<audio>:音频嵌入元素

示例代码如下：

<h1>这是一个audio测试</h1>

    <audio src = "xiaoge.mp3" controls = "controls" loop = "loop"></audio>

    <br/>

    <a href="xiaoge.mp3">这是一个audio测试</a>

    <hr />

    <br />

<details>:详细信息展现元素

<details>元素可创建一个挂件，仅在被切换成展开状态时，它才会显示内含的信息。<summary> 元素可为该部件提供概要或者标签。

<summary> 元素用作一个<details>元素的一个内容的摘要，标题或图例，是<details>元素的子元素

示例如下：

<h1>这是一个details测试</h1>

    <details>

        <summary>西北农林科技大学校训</summary>

        <strong><em>诚 朴 勇 毅</em></strong>

    </details>

    <hr />

<fieldset>:用于对表单中的控制元素进行分组

示例如下：

 <form>

        <fieldset>

        <legend align = "center"> 校训中你最喜欢的字是哪一个？</legend>

        <input type = "radio" name = "校训" value = "1">诚

        <input type = "radio" name = "校训" value = "2">朴

        <input type = "radio" name = "校训" value = "3">勇

        <input type = "radio" name = "校训" value = "4">毅

        <br/>

        <input type = "submit" value="提交" />

        <fieldset>

    </form>

2. 完成“太阳系行星数据”表设计。（如下图所示）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>太阳系行星数据</title>
</head>
<body>
   <pre>
    <table border="1" cellspacing = "1">
        <caption><strong>太阳系中行星的一些数据。 （资料取自<a href="http://nssdc.gsfc.nasa.gov/planetary/factsheet/" target="_blank">NASA 行星数据 - 公制</a>，图片取自<a href="https://www.nasa.gov/multimedia/imagegallery/" target="_blank">NASA 照片库</a>。）</strong></caption>
        <thead>
            <tr>
                <th colspan =" 2"></th>
                <th><strong>名字</strong></th>
                <th><strong>图片</strong></th>
                <th><strong>质量(10<sup>24</sup>kg)</strong></th>
                <th><strong>直径(km)</strong></th>
                <th><strong>密度(kg/m<sup>3</sup>)</strong></th>
                <th><strong>重力(m/s<sup>2</sup>)</strong></th>
                <th><strong>天长(hours)</strong></th>
                <th><strong>与太阳距离(10<sup>6</sup>km)</strong></th>
                <th><strong>平均温度(°C)</strong></th>
                <th><strong>卫星数量</strong></th>
                <th><strong>备注</strong></th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td rowspan="4" colspan="2"><div style="text-align:center;"><strong>类地行星</strong></div></td>
                <td><strong>水星</strong></td>
                <td><img src = "mercury.jpg" /></td>
                <td>0.330</td>
                <td>4,879</td>
                <td>5427</td>
                <td>3.7</td>
                <td>4222.6</td>
                <td>57.9</td>
                <td>167</td>
                <td>0</td>
                <td>与太阳最近</td>
            </tr>
            <tr>
                <td><strong>金星</strong></td>
                <td><img src = "venus.jpg" /></td>
                <td>4.87</td>
                <td>12,104</td>
                <td>5243</td>
                <td>8.9</td>
                <td>2802.0</td>
                <td>108.2</td>
                <td>464</td>
                <td>0</td>
                <td></td>
            </tr>
            <tr>

                <td><strong>地球</strong></td>
                <td><img src = "earth.png" /></td>
                <td>5.97</td>
                <td>12,756</td>
                <td>5514</td>
                <td>9.8</td>
                <td>24.0</td>
                <td>149.6</td>
                <td>15</td>
                <td>1</td>
                <td>我们的世界</td>
            </tr>
            <tr>

                <td><strong>火星</strong></td>
                <td><img src = "mars.jpg" /></td>
                <td>0.642</td>
                <td>6,792</td>
                <td>3933</td>
                <td>3.7</td>
                <td>24.7</td>
                <td>227.9</td>
                <td>-65</td>
                <td>2</td>
                <td>红色星球</td>
            </tr>
            <tr>
                <td rowspan="4"><strong>类木行星</strong></td>
                <td rowspan="2"><strong>气巨星</strong></td>
                <td><strong>木星</strong></td>
                <td><img src = "jupiter.jpg"></td>
                <td>1898</td>
                <td>142,984</td>
                <td>1326</td>
                <td>23.1</td>
                <td>9.9</td>
                <td>778.6</td>
                <td>-110</td>
                <td>67</td>
                <td>太阳系最大</td>
            </tr>
            <tr>
                <td><strong>土星</strong></td>
                <td><img src="saturn.jpg"></td>
                <td>568</td>
                <td>120,536</td>
                <td>687</td>
                <td>9.0</td>
                <td>10.7</td>
                <td>1433.4</td>
                <td>-140</td>
                <td>62</td>
                <td></td>
            </tr>
            <tr>
                <td rowspan="2"><strong>冰巨星</strong></td>
                <td><strong>天王星</strong></td>
                <td><img src="uranus.jpg"</td>
                <td>86.8</td>
                <td>51,118</td>
                <td>1271</td>
                <td>8.7</td>
                <td>17.2</td>
                <td>2872.5</td>
                <td>-195</td>
                <td>27</td>
                <td></td>
            </tr>
            <tr>
                <td><strong>海王星</strong></td>
                <td><img src="neptune.jpg"></td>
                <td>102</td>
                <td>49,528</td>
                <td>1638</td>
                <td>11.0</td>
                <td>16.1</td>
                <td>4495.1</td>
                <td>-200</td>
                <td>14</td>
                <td></td>
            </tr>
            <tr>
                <td colspan="2"><div style="text-align:center;"><strong>矮巨星</strong</div>></td>
                <td><strong>冥王星</strong></td>
                <td><img src="pluto.jpg"></td>
                <td>0.0146</td>
                <td>2,370</td>
                <td>2095</td>
                <td>0.7</td>
                <td>153.3</td>
                <td>5906.4</td>
                <td>-225</td>
                <td>5</td>
                <td>2006年降格，但 <a href="http://www.usatoday.com/story/tech/2014/10/02/pluto-planet-solar-system/16578959/" target="_blank">尚存争议</a>.
                </td>
            </tr>
           
        </tbody>
    </table>
    </pre>
</body>
</html>

3. 请查阅教材、MDN或W3School网站，学习input、textarea、select / option、fieldset / legend 标记的使用，并完成如下表单。

将表单标记form的action属性设置为：https://mock.apifox.cn/m1/1893392-0-default/form/process1 ， method属性设置为：get 或 post ，并在表单中输入不同的数据后提交，体会其差别。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<form	method="get" action="https://mock.apifox.cn/m1/1893392-0-default/form/process1">
   <fieldset>
    <legend align = "center">个人资料</legend>
    姓名：  <input type=" text" name="username" placeholder="请输入姓名" /><br/>
    性别：  
    男 <input type="radio"  value="boy" name="gender" checked = "checked" />
    女 <input type="radio"  value="girl" name="gender"/><br />
    出生日期： <input type="date" value="yyyy-mm-日" name="birthday" /><br/>
    主要经历： <textarea name="history" cols="50" rows="5"></textarea> <br />
    兴趣爱好： 
    <input type="checkbox" name="hobby" value="1" />唱歌
    <input type="checkbox" name="hobby" value="2" />打球
    <input type="checkbox" name="hobby" value="3" />下棋
    <input type="checkbox" name="hobby" value="4" />上网
    <input type="checkbox" name="hobby" value="5" />购物
</fieldset>
    <fieldset>
        <legend align ="center">专业与课程</legend>
        所学专业：
        <select name = "major">
            <option selected = "selected">计算机及应用</option>
            <option>软件工程</option>
            <option>大数据与数据科学</option>
        </select>
        <hr/>
        最喜欢的课程：
        <select name="course" size="4">
            <option selected = "selected">计算机网络</option>
            <option>数据库原理与应用</option>
            <option>计算机组成原理</option>
            <option>C语言程序设计</option>
            <option>C++面向对象程序设计</option>
            <option>Web前端开发</option>
        </select>
    </fieldset>
  <br/>
  <input type="submit" value="提交" />
  <input type="reset" value="重置" />
    </form>
</body>
</html>

4. 分析如图4-1所示网页的内容，写出合适的HTML代码，效果如图4-2（不包括红色的外框）。说明：只要选取合适的HTML标记，完成内容结构即可，不关注显示效果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>经发集团-经发地产</title>
</head>
<body>
    <h1>经发集团-经发地产</h1>
    <ul>
        <li>首页</li>
        <li>新闻中心</li>
        <li>项目中心</li>
        <li>党建专栏</li>
        <li>品牌文化</li>
        <li>关于我们</li>
    </ul>
    <img src="search.png" />
    <h2>项目动态</h2>
    <h2>Projects News</h2>
    <img src="16899299511113263.jpg" /><br />
    2023.07.12
    <h3>引流获客，玩转直播</h3>
    <p>7月10日下午，经发地产营销策划部与销售分公司、三六五房产网团队在白桦林溪销售中心召开经发地产6月线上直播复盘会，共同回顾并分析过去一个月内以来直播开展情况。</p>

    <ul>
        <li>
            2023.06.02
            <h3>白桦林溪 | 大境已成 心归家至</h3>
            6月1日—3日，白桦林溪迎来最后一批次房源22#-28#、31#、32#楼的完美交付，让所有等待都迎来缤纷光彩，更让理想中的幸福，成为触手可及的美好家园！
        </li>
        <br />
        <li>
            2023.05.08
            <h3>一封家书丨白桦林漫步四月工程进度播报</h3>
            亲爱的漫步家人们：时光悠然，初夏已至美好生活伴随着阳光翩翩而来家的消息也在这个美丽的季节里传来回音从蓝图到呈现每一处精雕细琢都是为了兑现您对于未来的期待和憧憬。
        </li>
        <li>
            2023.04.25
            <h3>白桦林溪南区22-28、31、32号楼工地开放日|精工匠筑，品质亲鉴</h3>
            2023年4月21日下午，由客户关系部牵头组织开展的“白桦林溪南区22-28、31、32#楼工地开放日”活动如期举行。
        </li>
        <br />
        <li>
            2023.04.20
            <h3>白桦林FIC | 走出格子间，未来办公回归花园</h3>
            从美国硅谷到慕尼黑伊萨办公区从北京的金融街到成都CBP高效办公与自然生态相结合的花园式办公正在成为更多企业家择址的理想之选。
        </li>
        <br />
        <li>
            2023.03.23
            <h3>项目直播间丨白桦林金融创新中心最新工程进度</h3>
            暖春三月，万物葱郁，美好正待经发地产躬耕不辍，匠心精筑，不负您的信任和期许现呈上工程进度播报。
        </li>
    </ul>
    <ul>
        <li>联系我们</li>
        <li>加入我们</li>
        <li>法律声明</li>
    </ul>
    <p>关注我们<img src="wx.png" /></p>
    <p>西安经发地产 版权所有 ©2021 JINGFA REAL ESTATE All Rights Reserved. 陕ICP备19019882号 [+]Powered by Zenith.</p>
</body>
</html>

三、实习总结

经过了本次实习，我初步学会了利用MDN工具来了解、查询HTML中标签的作用，提高了自主学习的能力。熟悉了<video>、<audio>、<fieldset>、<form>等等标签的作用。熟练掌握了<a>、<img>等标签的使用，以及进行了链接跳转形式的练习。在行星表格制作中，在不断的尝试中，明白了rowspan和colspan这两个属性如何来使用。熟悉联系了<input>中，不同type类型的作用，以及value、name属性的作用，还有对于无序列表<ul>的练习使用。经过本次实习，我对于HTML以及Web制作的理解更深了一步，完成作业的同时，也在不断加强我的自主学习能力，编码能力。

_孙孙孙孙孙SS

关注

6
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
Web实习实验一 HTML基础

经过了本次实习，我初步学会了利用MDN工具来了解、查询HTML中标签的作用，提高了自主学习的能力。熟悉了、、、等等标签的作用。熟练掌握了、等标签的使用，以及进行了链接跳转形式的练习。在行星表格制作中，在不断的尝试中，明白了rowspan和colspan这两个属性如何来使用。熟悉联系了中，不同type类型的作用，以及value、name属性的作用，还有对于无序列表的练习使用。
复制链接

扫一扫