HTML

2022-05-24 12:04:03 阅读：142 来源： 互联网

标签：2020211891 HTML 09 软件工程网页 table 100

HTML5

一、标签

提示信息

placehod

锚链接：

<a name="top">顶部</a>
<a href="#top">回到顶部</a>

空格：& nbsp;

序列

有序列表：

<ol>
    <li>java</li>
    <li>java</li>
</ol>

无序列表：

<ul>
<li>java</li>
</ul>

自定义列表

dl:标签

dt:列表名称

dd :列表内容

<dl>
    <dt>学科</dt>
    <dd>Java</dd>
    <dd>Python</dd>
    <dd>Linux</dd>
    <dd>C</dd>

    <dt>位置</dt>
    <dd>西安</dd>
    <dd>重庆</dd>
    <dd>新疆</dd>
</dl>

表格

表格table

行tr

列td

<style>
    table, table tr th, table tr td {
        border: 1px solid #000000;
    }


    table {
        width: 400px;
        border-collapse: collapse;
    }
</style>
<table style="text-align: center">
    <tr>
        <td>姓名</td>
        <td>学号</td>
        <td>班级</td>
    </tr>
    <tr>
        <td>小菜</td>
        <td>2020211891</td>
        <td>软件工程09班</td>
    </tr>
    <tr>
        <td>小陈</td>
        <td>2020211891</td>
        <td>软件工程09班</td>
    </tr>
</table>


<hr/>

<!--
跨列：colspan
跨行：rowspan

-->

<table style="text-align: center">
    <tr>
        <td colspan="3">班级信息表</td>
    </tr>
    <tr>
        <td>姓名</td>
        <td>学号</td>
        <td>班级</td>
    </tr>
    <tr>
        <td>小菜</td>
        <td>2020211891</td>
        <td>软件工程09班</td>
    </tr>
    <tr>
        <td>小陈</td>
        <td>2020211891</td>
        <td>软件工程09班</td>
    </tr>
</table>

<hr/>
<table style="text-align: center">
    <tr>
        <td colspan="3">学生成绩</td>
    </tr>
    <tr>
        <td rowspan="2">狂神</td>
        <td>语文</td>
        <td>100</td>
    </tr>
    <tr>
        <td>数学</td>
        <td>100</td>
    </tr>
    <tr>
        <td rowspan="2">秦疆</td>
        <td>语文</td>
        <td>100</td>
    </tr>
    <tr>
        <td>数学</td>
        <td>100</td>
    </tr>
</table>

</body>
</html>

媒体元素

<video src="../resources/video/自我介绍2.mp4" controls autoplay>酉阳视频</video>
<audio src="../resources/audio/tomorrow.mp3" controls >明天，你好</audio>

二、网页主体

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页面结构</title>
</head>
<body>
<header>
    <h2>网页头部</h2>
</header>

<section>
    <h2>网页主体</h2>
</section>
<aside>
    <h2>旁边栏</h2>
</aside>
<footer>
    <h2>网页脚部</h2>
</footer>

</body>
</html>

三、内联框架

<iframe src="http://www.4399.com/" name="Hello" frameborder="0" width="800px" height="600px" >4399</iframe>
<a href="http://www.4399.com/" target="Hello">点击跳转</a>

四、表单

单选框

    <!--单选框-->
    <p>
        性别：
        <input type="radio" value="boy" name="sex"/>男
        <input type="radio" value="girl" name="sex"/>女
    </p>

多选框

    <!--多选框-->
    <p>
        爱好：
        <input type="checkbox" value="sleep" name="hobby">睡觉
        <input type="checkbox" value="Basketball" name="hobby">篮球
        <input type="checkbox" value="Football" name="hobby">睡觉
    </p>

下拉框

    <!--下拉框，列表框-->
    <p>下拉框：
        <select name="列表名称">
            <option value="movie">电影</option>
            <option value="novel">小说</option>
            <option value="music">音乐</option>
            <option value="dance">跳舞</option>
        </select>
    </p>

文本域

<!--文本域-->
    <p>反馈：
        <textarea name="textarea" cols="50" rows="10">文本内容</textarea>
    </p>

文件域

<!--文件域-->
    <p>
        <input type="file" name="file">
        <input type="button" value="上传" name="upload">
    </p>

数字

    <!--数字-->
    <p>商品数量：
        <input type="number" name="number" min="0" max="100" step="1">
    </p>

增强鼠标可用性

    <!--增强鼠标可用性-->
    <p>
    <label for="mark">点击我</label>
        <input type="text" id="mark">
    </p>
    <p>
        <input type="submit" name="submit" value="提交"/>
        <input type="Reset" name="Reset" value="重填"/>
    </p>

标签：2020211891,HTML,09,软件工程,网页,table,100
来源： https://www.cnblogs.com/Alaskaboo/p/16305034.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9