Web课Html笔记

作者： 作者的头像   蓬蒿人 ,  2024-10-18 16:31:43 ,  所有人可见 ,  阅读 6

1 


<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Acwing-Web应用课</title>
    <meta name="description" content="属性声明了">
    <meta name="s=keywords" content="计算机，编程">
    <!-- 这是logo -->
    <link rel="icon" href="/images/logo.png">
</head>
<body>
    <!-- 一个div就是一个块自带回车 亚当 -->
     <!-- span就是行类 不带回车 夏娃 -->
    <div>Hello</div>
    <div>World!</div>
    <span>Hello </span>
    <span>World!</span>
    <!-- h1最大标题 -->
    <h1>Hello World</h1>
    <h2>Hello World</h2>
    <h7>Hello World</h7>
    <!-- p段落标签就是多了些上下间距,内部的空格回车(要用<br>)会被过滤掉还有些别的 -->
    <p>HTML body 元素表&nbsp;示文档的内容。<br>document.body 属性提供了可以轻松访问文档的 body 元素的脚本。</p>
    <p>charset：这个<mark>属性</mark>声明了文档的字符编码。如果使用了这个属性，其值必须是与 ASCII 大小写无关（ASCII case-insensitive）的”utf-8”。charset：这个属性声明了文档的字符编码。如果使用了这个属性，其值必须是与 ASCII 大小写无关（ASCII case-insensitive）的”utf-8”。charset：这个属性声明了文档的字符编码。如果使用了这个属性，其值必须是与 ASCII 大小写无关（ASCII case-insensitive）的”utf-8”。charset：这个属性声明了文档的字符编码。如果使用了这个属性，其值必须是与 ASCII 大小写无关（ASCII case-insensitive）的”utf-8”。charset：这个属性声明了文档的字符编码。如果使用了这个属性，其值必须是与 ASCII 大小写无关（ASCII case-insensitive）的”utf-8”。charset：这个属性声明了文档的字符编码。如果使用了这个属性，其值必须是与 ASCII 大小写无关（ASCII case-insensitive）的”utf-8”。</p>
    <!-- pre是等宽自己，包容回车空格 -->
    <pre>
        11111
        22222
        33333
        44444
        55555
    </pre>
    <!--img行内标签不换行  宽 高 路径 说明 -->
    <img width="300" height="150" src="/images/background.png" alt="背景">

    <h2>Audios</h2>
    <!-- controls给了一个控制 
        autoplay自动播放 
        可以一起加
    -->
    <audio controls src="/audios/bgm.mp3">无法播放</audio>
    <audio controls>
        <source src="/audios/sounds1.mp3" type="audio/mpeg">
        <source src="/audios/sounds2.mp3" type="audio/mpeg">
    </audio>
    <br>
    <video controls width="600" src="/videos/video2.mp4"></video>
    <video controls>
        <source src="/videos/video1.mp4" type="video/mp4">
        <source src="/videos/video2.mp4" type="video/mp4">
    </video>

    <h2>超链接</h2>
    <!-- target="_blank"打开新页面 -->
    <a href="https://acwing.com" target="_blank">Acwing下面是About</a>
    <a href="/about.html">
        <!-- 
        里面连图片也可加 -->
        <img src="/images/background.png" alt="logo">
    </a>

    <br><br><br><br><br>
    <h2>表单</h2>
    <!-- 
        HTML <form> 元素表示文档中的一个区域，此区域包含交互控件，用于向 Web 服务器提交信息。
        form里面的提交，默认是所有的input一起提交的
        lable的for与input的id互相对应
        id是整个html文档唯一的，name仅仅是标识，比如性别的button勾选框，他们的name可以是同一个sex，
        radio之间是互斥的
        required表示必填
        placeholder文本显示到输入框框内
        action处理表单提交的 URL。
        textareas可拉动输入框

    -->
    <form action="/about.html">
        <label for="username"></label>
        <input type="text" required placeholder="用户名" maxlength="23" minlength="3" name="username2" id="username">

        <br>
        <label for="age"></label>
        <input type="number" placeholder="年龄" name="age2" id="age">
        <br>
        <label for="email"></label>
        <input type="email" placeholder="E-mail" name="email2" id="email">
        <br>
        <label for="password"></label>
        <input type="password" placeholder="密码" id="password">
        <br>
        <br>
        <label for="cpp">Cpp</label>
        <input type="radio" name="lang" value="cpp" id="cpp">
        <br>
        <label for="java">Java</label>
        <input type="radio" name="lang" value="java" id="java">
        <br>
        <label for="python">Python</label>
        <input type="radio" name="lang" value="python" id="python">
        <br>
        <br>
        <label for="lang2">语言</label>
        <select name="lang2" id="lang2">
            <!-- 默认空选择 seleted默认选好 <option value="">请选择</option> -->
            <option selected value="cpp">Cpp</option>
            <option value="java">Java</option>
            <option value="python">Python</option>
        </select>
        <label for="code">Code:</label>
        <textarea rows="10" cols="30" id="code"></textarea>

        <h1>列表 List 亚当Div之子</h1>
        ul-li ol-li 无序列表和有序列表
        <ol>
            <li>
                知识点
                <ul>
                    <li>1.1VsCode安装</li>
                    <li>1.2Html基础</li>
                </ul>
            </li>
            <li>
                作业
                <ol>
                    <li>HomeWork1</li>
                    <li>HomeWork2</li>
                </ol>
            </li>
        </ol>
        dl元素 （或 HTML 描述列表元素）是一个包含术语定义以及描述的列表，通常用于展示词汇表或者元数据 (键 - 值对列表)。
        <!-- dd是有缩进的
        dt是没有缩进的 -->
        <dl>
            <dt>Scp-682</dt>
            <dd>不灭孽蜥巴拉巴拉巴拉</dd>
            <dt>Scp-cn-985</dt>
            <dd>大学鲨</dd>
            <dt>Birthplace</dt>
            <dd>Japan</dd>
            <dt>其他性少数</dt>
            <dd>TS</dd>
            <dd>MTF</dd>
        </dl>
        <br>
        <button type="submit">提交</button>
        <br>
        <br>
    </form>
</body>

</html>

0 评论