前端学习--HTML5基础

最新推荐文章于 2024-09-14 21:53:48 发布

十尾人柱力.

最新推荐文章于 2024-09-14 21:53:48 发布

阅读量66

点赞数 1

分类专栏：前端文章标签：学习前端 html5 Powered by 金山文档

本文链接：https://blog.csdn.net/2203_75672359/article/details/129639675

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

这篇文章是关于H5基础的代码笔记，涵盖了HTML的基础结构，包括不同级别的标题、段落、加粗、斜体、下划线、删除线等文本格式，以及图片、音频的插入，超链接的使用，无序列表、有序列表和自定义列表的创建，表格的构建，以及表单元素如输入框、单选、多选、文件上传等的运用。

摘要由CSDN通过智能技术生成

简单的过了下H5基础，以代码的方式做笔记。

下面附上代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Study</title>
</head>
<body>
    <h1> 这是一个缝合怪--JC</h1>
    <hr>
    <br>

    <h1>
        1级标题
    </h1>
    <h2>
        2级标题
    </h2>
    <h3>3级标题</h3>
    <h4>4级标题</h4>
    <h5>5级标题</h5>
    <h6>6级标题</h6>

    <h2>格式</h2>
    <p>
        段落p
</p>
<strong> 加粗1 </strong>
    <b> 加粗  </b>

    <ins>下划线1 </ins>
    <u>下划线2 </u>

    <em>倾斜 </em>
    <i>倾斜2.0 </i>

    <del>删除线 </del>
    <s>删除线2.0 </s>

    横线
    <hr>
    换行
    <br>

    <h2>插入</h2>
    <img src="jc.gif" alt="图片" title="title文字" width="100" height="100">
    <br>
    <audio src="jc.mp3" controls loop> this is jay's song</audio>
<!--    自动autoplay-->
<!--    <video src="" controls></video>-->
    <br>
    <a href="href.html" target="_blank">跳转到超链接</a>
    <br>
    <a href="https://www.baidu.com/" target="_self">go to baidu</a>
    <br>
    <a href="#">这是一个空链接#</a>
    <br>

    <h2>列表</h2>
    <h3>无序列表</h3>
    <ul>
        <li>000</li>
        <li>jc</li>
    </ul>

    <h3>有序列表</h3>
    <ol>
        <li>000</li>
        <li>jc</li>
    </ol>

    <h3>自定义列表</h3>
    <dl>
        <dt>
            PK
</dt>
        <dd>000</dd>
        <dd>jc</dd>
    </dl>

    <h2>表格</h2>
    <br>
    <table border="1">
        <caption>information</caption>
        <thead>
            <tr>
                <th>name</th>
                <th>socre</th>
                <th rowspan="3"> 垂直合并 </th>
            </tr>
        </thead>

        <tbody>
            <tr>
                <td>000</td>
                <td>jc</td>
            </tr>
            <tr>
                <td>100</td>
                <td>60</td>
            </tr>
        </tbody>

        <tfoot>
            <tf>
                <td>god</td>
                <td>lj</td>
                <td colspan="3"> 水平合并 </td>
            </tf>
        </tfoot>
    </table>

    <h2>表单</h2>
    <br>
    <h3>input</h3>
    文本框:<input type="text">
    <br>
    密码框:<input type="password" placeholder="input your key...heiheihei">
    <br>
    单选框:<input type="radio">
    <br>
    多选框:<input type="checkbox">
    <br>
    文件选择:<input type="file">
    <br>
    提交按键:<input type="submit">
    <br>
    重置框:<input type="reset">
    <br>
    默认框:<input type="button">

    <br>
    <input type="text" placeholder="can you see me?">
    <br>
    请选择你的角色：<input type="radio" name="single">jc
<input type="radio" name="single" checked>000
<!--    加上name才是真正的单选-->
    <br>
    上传多个文件<input type="file" multiple></input>
    <br>

    <h3>按钮</h3>
    <h4>表单域</h4>
    <form action="">
        id<input type="text" name="" id="">
        <br>
        password<input type="password">
        <br>
        <input type="submit">
        <input type="reset">
        <input type="button" value="点我!!!">
    </form>
    <button type="submit">
        另一种写法
    </button>
    <br>

    <h3>下拉菜单</h3>
    <select name="">
        <option value="">jc</option>
        <option value="" selected>000</option>
        <option value="">wr</option>
    </select>

    <br>
    <h3>文本域</h3>
    <textarea cols="30" rows="10">文本域标签</textarea>
    <br>
    <h3>选择域</h3>
    <em style="color: blue">我可以点文字哦哦哦哦哦哦</em>
    <br>
    <br>
    性别：<input type="radio" name="sex" id="nan"> <label for="nan">男</label>
    <label> <input type="radio" name="sex"> 女</label>

<h2>语义化标签</h2>
    <h3>没有语义的标签</h3>
    <div>this is div</div>
    <div>我独占一行</div>
    <spar>this is spar </spar>
    <spar>我在一行显示</spar>

    <h3>有语义标签</h3>
    <header>网页头部</header>
    <nav>网页导航</nav>
    <footer>网页底部</footer>
    <aside>网页侧边框</aside>
    <section>网页区块</section>
    <article>网页文章</article>

    <h3>字符实体</h3>
    空格   只显示一个
    <br>
    但是&nbsp;&nbsp;可以转义
</body>
</html>