Web前端 -- HTML5 --- 杂记

最新推荐文章于 2024-09-11 10:06:17 发布

Evans_Y

最新推荐文章于 2024-09-11 10:06:17 发布

阅读量259

点赞数 4

文章标签：前端 html5 html

本文链接：https://blog.csdn.net/occasionally/article/details/127899805

版权

HTML5 --- 杂记

示例1
示例2

示例1

文本输入框密码输入框单选按钮复选框下拉列表提交按钮

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> Title  Two </title>
</head>
<body>

    <h2>表单</h2>

    <form action="/" method="post">
        <!-- 文本输入框 -->
        <label for="name">用户名:</label>
        <input type="text" id="name" name="name" required>

        <br>

        <!-- 密码输入框 -->
        <label for="password">密码:</label>
        <input type="password" id="password" name="password" required>

        <br>

        <!-- 单选按钮 -->
        <label>性别:</label>
        <input type="radio" id="male" name="gender" value="male" checked>
        <label for="male">男</label>
        <input type="radio" id="female" name="gender" value="female">
        <label for="female">女</label>

        <br>

        <!-- 复选框 -->
        <input type="checkbox" id="subscribe" name="subscribe" checked>
        <label for="subscribe">订阅推送信息</label>

        <br>

        <!-- 下拉列表 -->
        <label for="country">国家:</label>
        <select id="country" name="country">
            <option value="cn">CN</option>
            <option value="usa">USA</option>
            <option value="uk">UK</option>
        </select>

        <br>

        <!-- 提交按钮 -->
        <input type="submit" value="提交">
    </form>
</body>
</html>

运行结果 :
在这里插入图片描述

示例2

多级标题链接段落表格图片

<!DOCTYPE html>          <!-- 声明为 HTML5 文档 -->
<html lang="en">         <!-- 向搜索引擎表示该页面是html语言，并且语言为英文网站 -->
<head>                   <!-- 描述头部元素 -->
    <meta charset="UTF-8">          <!-- 定义网页编码格式为 utf-8 -->
    <title> This is title </title>  <!-- 页面标题 浏览器 页卡标题-->
</head>
<body>                    <!-- 只有 body 中的内容会在页面中显示 -->
    <h1>一级标题  <a href="https://www.baidu.com"> 百度 </a> </h1>

    <p>段落1</p>

    <hr>

    <h2>二级标题</h2>

    <p>段落2</p>

    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6>

    <p>
        <a href="https://www.baidu.com"> 百度 </a>
    </p>

    <p>
        <code>一段电脑代码 print("Hello World")</code>
    </p>

    <p>
        局部路径加载图片 限制图片显示大小 <br>  <!-- br标签为换行符 -->
        <img src="../src/faultMark.png" style="width: 22px" alt="PNG 图片不存在">
    </p>

    <p>
        局部路径加载图片 限制图片显示大小 <br>  <!-- br标签为换行符 -->
        <img src="../src/error.png" alt="PNG 图片不存在" width="22" height="22">  <!-- alt 为图片加载异常时的显示 -->
    </p>

    <p>
        使用网络地址的图片 <br>  <!-- br标签为换行符 -->
        断网 + 清除浏览器缓存后 = 会显示 PNG 图片不存在 <br>  <!-- br标签为换行符 -->
        <img src="https://www.runoob.com/images/pulpit.jpg" alt="PNG 图片不存在" width="304" height="228">
    </p>

    <table border="1">
        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
        </tr>
        <tr>
            <td>row 1, cell 1</td>
            <td>row 1, cell 2</td>
        </tr>
        <tr>
            <td>row 2, cell 1</td>
            <td>row 2, cell 2</td>
        </tr>
    </table>
</body>
</html>