百度前端实战训练营1.5日代码笔记

当家的小黄

已于 2023-01-05 11:58:50 修改

阅读量546

点赞数 2

文章标签：前端 html

于 2023-01-05 11:56:19 首次发布

本文链接：https://blog.csdn.net/m0_48622773/article/details/128560771

版权

该文档展示了HTML的基本元素用法，包括段落、无序和有序列表、超链接、图像、文本格式化、输入框、复选框、单选按钮、范围控制以及提交按钮等交互元素。

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

<!DOCTYPE html>
<html>
    <head>

    </head>
    <body>
        <p>
            hello world
        </p>
        <!-- 列表元素嵌套超链接target="_blank//在新窗口打开链接 -->
        <ul>
            <li><a href="https://www.w3school.com.cn/" target="_blank">无序列表</a></li>
            <li>无序列表</li>
            <li>无序列表</li>
        </ul>

        <ol>
            <li>有序列表</li>
            <li>有序列表</li>
            <li>有序列表</li>
        </ol>

        <img
        height="60"
        width="60"
        src="./001.jpg"
        alt="壁纸"
        >
        <!-- 图片显示失败则显示alt的内容//语义化 -->
        <br>

        <!-- 超链接嵌套图片 -->
        <a href="https://www.w3school.com.cn/">
        <img
        height="60"
        width="60"
        src="./001.png"
        ></a>
        <br>

        <!-- 超链接 -->
        <a href="http://www.baidu.com">baidu</a>

        <p>普通文本 <em>em标签变斜体</em></p>

        <p>普通文本 <strong>strong标签加粗</strong></p>
        
        <!-- 文本嵌套超链接 -->
        <p>普通文本 <a href="https://www.w3school.com.cn/">超链接</a></p>

        <!-- 文本输入框 -->
        <input type="text" placeholder="提示填写什么信息，填写信息后隐藏">
        <br>

        <!-- 复选框 label标签，可以实现点击文字选中按钮-->
        <label><input type="checkbox" value="checkbox1">checkbox1</label>
        <label><input type="checkbox" value="checkbox2">checkbox2</label>
        <br>

        <!-- 选择文件 -->
        <input type="file">
        <br>

        <!-- 单选框 label标签，可以实现点击文字选中按钮-->
        <label>女<input type="radio" name="sex" value="female"></label>
        <label>男<input type="radio" name="sex" value="male"></label>
        <label>跨性别<input type="radio" name="sex" value="male"></label>
        <br>

        <!-- 控制范围类似进度条 -->
        <input type="range">
        <br>

        <!-- 提交按钮 -->
        <input type="submit">
        <br>

        <!-- 多行纯文本 cols表示文本域的可视宽度，rows表示文本显示的行数-->
        <textarea rows="3" cols="10">

        </textarea>
    </body>
</html>```