Html:第二周内容

 对之前内容的复习并尝试将不同功能标签进行组合

学习新标签select、map与area

用css进行了一次很随意的页面布局和设计,太随意了就不发了/_ \     o( ̄┰ ̄*)ゞ

<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<main>
<body>
    <section class="s1">
        <form action="f1" id="001">
            <fieldset>
                <legend>密码登录</legend>
                账号/用户名:<input type="text"><br>
                密码 :<input type="text"><br>
                验证码    :<input type="text"><br>
                <button class="b1">登陆</button>
                <button class="b2">注册</button>
            </fieldset>
        </form>
    </section>

    <section class="s2">
        <h2><select id="002" onchange="self.location.href=options[selectedIndex].value" name="select">
            <OPTION selected>=== 选择 ===</OPTION> 
            <optgroup label="一组">
            <option value="https://www.w3cschool.cn/htmltags/tag-select.html">更多文章</option>
            </optgroup>
            <optgroup label="二组">
            <option value="https://www.bilibili.com/">随便写点</option></optgroup>
        </select></h2>
    </section>

    <section class="s3">
        <div>
            <table ><caption ><p><strong>想不出来写什么了</strong></p></caption>
                <thead>
                <tr>
                <th>Month</th>
                <th>Savings</th>
                </tr>
                </thead>
                <tfoot>
                <tr>
                <td>Sum</td>
                <td>$180</td>
                </tr>
                </tfoot>
                <tbody>
                <tr>
                <td>January</td>
                <td>$100</td>
                </tr>
                <tr>
                <td>February</td>
                <td>$80</td>
                </tr>
                </tbody>
                </table>
    </section></div>

    <section class="s4" id="004">
       <menu>
        <li><p></p></li>
       </menu></p>
    </section>
    
    
    
    <section class="s5" id="005">
        <h1>HTML</h1>
<p>HTML 是用于描述 web 页面的一种语言。</p>
<hr>

<h1>CSS</h1>
<p>CSS 定义如何显示 HTML 元素。</p> 
    </section>

    <section class="s6" id="006">
        <img src="E:\网页设计储存\Edemo\Screenshot 2023-11-17 152747.jpg" width="20" height="20" alt="wenhao" usemap="#要用井号哦">
        <map name="要用井号哦">
            <area shape="rect" coords="20,20" href="Edemo\demo2.png" alt="other">
        </map>

        <p><abbr title="世界卫生组织"><b><em>WHO</em></b></abbr> 成立于 1948。</p>
        <p title="W3Cschool">W3Cschool</p>
    </section>

    <section class="s7" id="007">
    <p>该段落文字从左到右显示。</p>
    <p><bdo dir="rtl">该段落文字从右到左显示。</bdo></p> 
    </section>

    <section class="s7" id="007">
        <p>我的母亲有 <span style="color:blue">蓝色</span> 的眼睛。</p>
    </section>

    
    
</body></main>
</html>

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值