HTML基础|青训营笔记

沉舟望海楼
121 阅读2分钟

这是我参与「第五届青训营 」笔记创作活动的第一天。

今天主要学习了html的知识，虽然之前学习过，但是有一些知识已经遗忘了，通过这节课，再一次学习了这些知识，加深了印象。

标题 h1-h6 由大到小

<body>
    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6>
</body>

列表

  1. 有序列表
    <h3>玩过的游戏</h3>
    <ol>
        <li>王者荣耀</li>
        <li>蛋仔派对</li>
        <li>狼人杀</li>
    </ol>
  1. 无序列表
    <h3>看过的小说</h3>
    <ul>
        <li>撒野</li>
        <li>陈年烈苟</li>
        <li>情终</li>
    </ul>
  1. 自定义列表
 <h3>撒野</h3>
    <dl>
        <dt>作者</dt>
        <dd>巫哲</dd>
        <dt>主角</dt>
        <dd>蒋丞 顾飞</dd>
        <dt>类型</dt>
        <dd>学霸的故事</dd>
     </dl>

链接

    <!-- 直接打开 -->
    <a href="https://juejin.cn/">掘金</a>
    <!-- 在一个新窗口打开 -->
    <a href="https://juejin.cn/" target="_blank">掘金</a>

图像标签

 <img src="ppp.jpg" alt="bkpp是真的!!" width="100px">
    <!-- src是图片的地址  alt表示当图片加载不出来时显示的内容 -->

音频标签

 <video src="" controls></video>
    <!-- autoplay=autoplay音频自动播放 -->
    <!-- controls显示播放控件 -->
    <!-- loop循环播放 -->

视频标签

 <video src=""></video>
    <!-- autoplay=autoplay视频自动播放 -->
    <!-- muted=muted静音播放，谷歌打开是默认自动播放 -->
    <!-- controls=controls向用户展示播放控件 -->
    <!-- loop=loop 循环播放 -->
    <!-- poster=“图片的地址”如果视频没加载出来就显示这个图片 -->

表单类标签

<!-- 我们验证的时候必须添加form表单域 -->
    <form action="">
        <ul>
            <li>姓名：<input type="" name="" id="" placeholder="请输入姓名"></li>
            <!-- placeholder里面时文本框的默认文字 -->
            <li>邮箱：<input type="email"></li>
            <li>网址：<input type="url"></li>
            <li>日期：<input type="date"></li>
            <li>时间：<input type="time"></li>
            <li>数字：<input type="number"></li>
            <li>电话：<input type="tel"></li>
            <li>搜索：<input type="search"></li>
            <li>颜色：<input type="color"></li>
            <!-- 文本域 -->
            <textarea name="" id="" cols="30" rows="10"></textarea>
            <!-- 当我们点击提交的时候就可以验证表单了 -->
            <li><input type="submit" value="提交"></li>
        </ul>
    </form>

复选框

<label for="">哈哈</label><input type="checkbox" name="" id="">
<label for="">拉拉</label><input type="checkbox" name="" id="">

单选框

<!-- 多选一,用相同的name控制 -->
    <label for="">吃饭</label><input type="radio" name="play" id="">
    <label for="">睡觉</label><input type="radio" name="play" id="">
    <label for="">打豆豆</label><input type="radio" name="play" id="">

下拉列表

    <select name="" id="">
        <option value="">1</option>
        <option value="">2</option>
        <option value="">3</option>
    </select>

引用

<!-- blockquote长引用也叫快捷引用   cite表示的时这个段引用的来来源-->
    <blockquote cite="">
    </blockquote>
    <!-- cite短引用 一般引用的是书名和标题-->
    <cite>嘿嘿</cite>
    <!-- q一般引用的是具体的内容 -->
    <q>啦啦啦啦</q>   
    <!-- code表示代码 -->
    <code>const</code>

文本格式化标签

    我是<strong>加粗</strong>的文字
    我是<b>加粗</b>的文字
    我是<em>倾斜</em>的文字
    我是<i>倾斜</i>的文字
    我是<del>删除线</del>的文字
    我是<s>删除线</s>的文字
    我是<ins>下划线</ins>的文字
    我是<u>下划线</u>的文字

标题 h1-h6 由大到小

<body>
    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6>
</body>

列表

  1. 有序列表
    <h3>玩过的游戏</h3>
    <ol>
        <li>王者荣耀</li>
        <li>蛋仔派对</li>
        <li>狼人杀</li>
    </ol>
  1. 无序列表
    <h3>看过的小说</h3>
    <ul>
        <li>撒野</li>
        <li>陈年烈苟</li>
        <li>情终</li>
    </ul>
  1. 自定义列表
 <h3>撒野</h3>
    <dl>
        <dt>作者</dt>
        <dd>巫哲</dd>
        <dt>主角</dt>
        <dd>蒋丞 顾飞</dd>
        <dt>类型</dt>
        <dd>学霸的故事</dd>
     </dl>

链接

    <!-- 直接打开 -->
    <a href="https://juejin.cn/">掘金</a>
    <!-- 在一个新窗口打开 -->
    <a href="https://juejin.cn/" target="_blank">掘金</a>

图像标签

 <img src="ppp.jpg" alt="bkpp是真的!!" width="100px">
    <!-- src是图片的地址  alt表示当图片加载不出来时显示的内容 -->

音频标签

 <video src="" controls></video>
    <!-- autoplay=autoplay音频自动播放 -->
    <!-- controls显示播放控件 -->
    <!-- loop循环播放 -->

视频标签

 <video src=""></video>
    <!-- autoplay=autoplay视频自动播放 -->
    <!-- muted=muted静音播放，谷歌打开是默认自动播放 -->
    <!-- controls=controls向用户展示播放控件 -->
    <!-- loop=loop 循环播放 -->
    <!-- poster=“图片的地址”如果视频没加载出来就显示这个图片 -->

表单类标签

<!-- 我们验证的时候必须添加form表单域 -->
    <form action="">
        <ul>
            <li>姓名：<input type="" name="" id="" placeholder="请输入姓名"></li>
            <!-- placeholder里面时文本框的默认文字 -->
            <li>邮箱：<input type="email"></li>
            <li>网址：<input type="url"></li>
            <li>日期：<input type="date"></li>
            <li>时间：<input type="time"></li>
            <li>数字：<input type="number"></li>
            <li>电话：<input type="tel"></li>
            <li>搜索：<input type="search"></li>
            <li>颜色：<input type="color"></li>
            <!-- 文本域 -->
            <textarea name="" id="" cols="30" rows="10"></textarea>
            <!-- 当我们点击提交的时候就可以验证表单了 -->
            <li><input type="submit" value="提交"></li>
        </ul>
    </form>

复选框

<label for="">哈哈</label><input type="checkbox" name="" id="">
<label for="">拉拉</label><input type="checkbox" name="" id="">

单选框

<!-- 多选一,用相同的name控制 -->
    <label for="">吃饭</label><input type="radio" name="play" id="">
    <label for="">睡觉</label><input type="radio" name="play" id="">
    <label for="">打豆豆</label><input type="radio" name="play" id="">

下拉列表

    <select name="" id="">
        <option value="">1</option>
        <option value="">2</option>
        <option value="">3</option>
    </select>

引用

<!-- blockquote长引用也叫快捷引用   cite表示的时这个段引用的来来源-->
    <blockquote cite="">
    </blockquote>
    <!-- cite短引用 一般引用的是书名和标题-->
    <cite>嘿嘿</cite>
    <!-- q一般引用的是具体的内容 -->
    <q>啦啦啦啦</q>   
    <!-- code表示代码 -->
    <code>const</code>

文本格式化标签

    我是<strong>加粗</strong>的文字
    我是<b>加粗</b>的文字
    我是<em>倾斜</em>的文字
    我是<i>倾斜</i>的文字
    我是<del>删除线</del>的文字
    我是<s>删除线</s>的文字
    我是<ins>下划线</ins>的文字
    我是<u>下划线</u>的文字
avatar
文章
阅读
粉丝