HTML

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>

二、网页主体

image

<!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>
posted @ 2022-05-24 11:49  Alaskaboo  阅读(40)  评论(0)    收藏  举报