• 前端小基础

    HTML中有些标签是单标签，也就是说只有这一个，还有一些标签是双标签，必须成对出现

    div签来分割页面

    1. <body>
    2.     <div>我是第一块div>
    3.     <div>我是第二块div>
    4. body>

    标签被用来组合文档中的行内元素

    1. <body>
    2.     <div>
    3.         <span>我是第一块第一个部分span>
    4.         <span>我是第一块第二个部分span>
    5.     div>
    6.     <div>我是第二块div>
    7. body>

    `p`段落标签，它一般用于文章分段

    1. <body>
    2.     <p>
    3.         欧服让你公司【而得名高评分担任美国v劳动法【篇v爆发的没事的v篇
    4.     p>
    5.     <p>
    6.         宣布v除非是大部分，名牌包树莓派播放视频吧，反对【面包豆瓣名片上，大部分，吧【是，
    7.     p>
    8.     <p>
    9.         干嘛不靠谱的方面【苹果百度免费评估不是，】发免费的【怕表示【】表明【恶如发热欧巴，发【的，】关闭【松平，】和股市大幅日本福岛【苹果，算法，关闭【对方是设备分类【，】给【好的，【；好吧，的【舒服不舒服，gbfdb【】是否达标【反对【胡说八道、 
    10.     p>
    11. body>

    遇到特殊字符时可以使用转义字符

    **注意：**多个连续的空格字符只能被识别为一个，如果需要连续多个必须使用转义字符，同时也不会识别换行，换行只会变成一个空格，需要换行必须使用`br`标签。

    * br 换行

    * hr 分割线

    1. <body>
    2.     <div>
    3.         我是一段文字<br>我是第二段文字
    4.     div>
    5.     <hr>
    6.     <div>我是底部文字div>
    7. body>

    标题一般用h1到h6表示

    1. <body>
    2. <h1>一级标题h1>
    3. <h2>二级标题h2>
    4. <h3>三级标题h3>
    5. <h4>四级标题h4>
    6. <h5>五级标题h5>
    7. <h6>六级标题h6>
    8. <p>我是正文内容，真不错。p>
    9. body>

    定义超链接

    <a href="https://www.bilibili.com">点击访问小破站a>

    指定页面上的一个锚点进行滚动

    1. <body>
    2. <a href="#test">跳转锚点a>
    3. <img src="image.jpeg" width="500">
    4. <img src="image.jpeg" width="500">
    5. <img src="image.jpeg" width="500">
    6. <img src="image.jpeg" width="500">
    7. <div id="test">我是锚点div>
    8. <img src="image.jpeg" width="500">
    9. <img src="image.jpeg" width="500">
    10. <img src="image.jpeg" width="500">
    11. body>

    无需列表ul

    1. <ul>
    2.     <li>一号选项li>
    3.     <li>二号选项li>
    4.     <li>三号选项li>
    5.     <li>四号选项li>
    6.     <li>五号选项li>
    7. ul>

    有序列表ol

    1. <ol>
    2.     <li>一号选项li>
    3.     <li>二号选项li>
    4.     <li>三号选项li>
    5.     <li>四号选项li>
    6.     <li>五号选项li>
    7. ol>

    输入框

    1. <label>
    2.     我是输入框
    3.     <input type="text">
    4. label>
    1. <body>
    2. <div>登陆我们的网站div>
    3. <hr>
    4. <div>
    5.     <label>
    6.         账号：
    7.         <input type="text">
    8.     label>
    9. div>
    10. <div>
    11.     <label>
    12.         密码：
    13.         <input type="password">
    14.     label>
    15. div>
    16. body>

    按钮（推荐第二个）

    1. <button>登陆button>
    2. <input type="submit" value="登陆">
    3. <input type="button" value="登陆">
    1. <body>
    2.     <h1>登陆我们的网站h1>
    3.     <form>
    4.         <div>
    5.             <label>
    6.                 账号：
    7.                 <input type="text" placeholder="Username...">
    8.             label>
    9.         div>
    10.         <div>
    11.             <label>
    12.                 密码：
    13.                 <input type="password" placeholder="Password...">
    14.             label>
    15.         div>
    16.         <br>
    17.         <a href="https://www.baidu.com">忘记密码a>
    18.         <br>
    19.         <br>
    20.         <div>
    21.             <input type="submit" value="登陆">
    22.         div>
    23.     form>
    24. body>

    实现多行文本

    1. <label>
    2.     这是我们的文本框<br>
    3.     <textarea placeholder="文本内容..." cols="10" rows="10">textarea>
    4. label>

    添加勾选框

    1. <label>
    2.     <input type="checkbox">
    3.     我同意本网站的隐私政策
    4. label>

    单选框：需要使用name属性进行分组，同一个组内的选项只能选择一个

    1. <label>
    2.     <input type="radio" name="role">
    3.     学生
    4. label>
    5. <label>
    6.     <input type="radio" name="role">
    7.     教师
    8. label>

    下拉列表

    1. <label>
    2.     登陆身份：
    3.     <select>
    4.         <option>学生option>
    5.         <option>教师option>
    6.     select>
    7. label>

    可以通过`selected`属性来决定默认使用的是哪个选项

    1. <label>
    2.     登陆身份：
    3.     <select>
    4.         <option>学生option>
    5.         <option seleted>教师option>
    6.     select>
    7. label>

  • 相关阅读:
    27_Scala功能函数
    leetcode-每日一题-813-最大平均值和的分组(中等,dp)
    编程之美1 让CPU占用率曲线听你指挥
    性能测试-基础01
    【Python Odyssey】1-1 | Python初见面
    vue根据文字长短展示跑马灯效果
    菏泽2万亩谷子收割 国稻种芯·中国水稻节：山东节水抗旱稻
    【PyTorch】2-主要组成模块（数据读入、模型构建、损失函数、评价指标、训练和测试、优化器）
    c语言-数据结构-链表分割
    小红书怎么推广引流？怎么样在小红书上引流？
  • 原文地址：https://blog.csdn.net/weixin_51992178/article/details/126533031