前端 HTML

一、部分常用快捷键

1、html框架快捷键： ！+tab键

2、注释快捷键：ctrl+/

格式：

3、保存：ctrl+s

4、撤回：ctrl+z

5、剪切：ctrl+x

二、标签

1、文本标签

 <!-- 1、文本标签 span -->
    <span style="color: red;">hello</span>
    <span>demohtml</span>复制

2、标题标签

<!-- 2、标题标签 h1~h6 -->
    <h1>标题标签</h1>
    <h2>标题标签</h2>
    <h3>标题标签</h3>
    <h4>标题标签</h4>
    <h5>标题标签</h5>
    <h6>标题标签</h6>复制

3、div标签

<!-- 3、div竖着布局的标签 -->
 
    <div>竖着布局的标签</div>
    <div>竖着布局的标签</div>复制

4、段落标签

<!-- 4、段落标签  p -->
    <p>段落标签</p>
    <p>段落标签</p>
    <p>段落标签</p>复制

5、超链接标签（a标签）

<!-- 5、超链接标签 a
        href 设置资源路径
        target 设置打开窗口的方式  _self默认的，在本窗口打开  _blank在新窗口打开  ....
    -->
    <a href="https://www.baidu.com/" target="_blank">点击跳转</a>复制

6、锚点标签（常搭配超链接标签和框架标签使用）

 <!-- 6、锚点标签
        name锚点值
     -->
    <a name="aaaa">锚点</a>
 <!-- 需要在所跳转的地方提前设置好锚点
 例：跳转到h1
 <a name="aaaa"></a>
 <h1>标题标签</h1>
    <h2>标题标签</h2>
    <h3>标题标签</h3>
    <h4>标题标签</h4>
    <h5>标题标签</h5>
    <h6>标题标签</h6>
     -->
    <a href="#aaaa" style="position: fixed;right: 200px;bottom: 200px;">跳转到h1</a>
    <a href="#bbbb" style="position: fixed;right: 200px;bottom: 150px;">跳转到div</a>
    <a href="#cccc" style="position: fixed;right: 200px;bottom: 100px;">跳转到p</a>复制

7、换行标签

  <br>复制

8、图片标签

<!-- 8、图片标签
        src:引用的图片资源
            路径：
                相对路径： 访问资源与被访问资源的关系
                    兄弟关系 src="OIP-C.jpg"
                    （访问资源与被访问资源有同一父类）
                    叔侄关系 src="img/OIP-C.jpg"
                    （访问资源与被访问资源的父类有同一父类）
                    表兄弟关系 src="../img/OIP-C.jpg"
                    （访问资源的父类与被访问资源的父类有同一父类）
                绝对路径： 资源的绝对位置
        alt：当图片资源不能正常展示时，显示alt里边的内容
        width="100px" 
        height="400px" 
    -->
    <img src="img/OIP-C.jpg" alt="这是一张猫咪图片" style="object-fit: cover;width: 200px;height: 400px;">复制

9、列表标签

 <!--9、 列表标签 -->
    <ul>
        <li>列表标签</li>
        <li>列表标签</li>
        <li>列表标签</li>
        <li>列表标签</li>
    </ul>复制

10、有序列表标签

  <!--10、有序列表标签 -->
  <ol>
        <li>列表标签</li>
        <li>列表标签</li>
        <li>列表标签</li>
        <li>列表标签</li>
    </ol>复制

11、表格标签

 <!-- 11、表格标签 
    （1）
        <table>  </table>放表格的容器
        <tr>行
        <td> 单元格   <th>加粗居中
    （2）    
        border表格设置边框
        width="500px"  宽度
        height="400px" 高度
        cellpadding="10px" 单元格填充度
        cellspacing="0" 单元格之间的间距 0 表示挨在一起
    （3）
        <thead> </thead>   定义表格的头部部分,无论数据之前在表格的哪个部分都会直接变成表格的表头
        <tbody> </tbody>   定义表格的主题内容
        <tfoot> </tfoot>   定义表格的尾部
    （4）
        rowspan  把行合并
        colspan  把列合并
    -->
    <table border="1">
        <tr>
            <th>id</th>
            <th>name</th>
            <th>age</th>
            <th>sex</th>
        </tr>
        <tr>
            <td>1</td>
            <td colspan="2">张宇一</td>
            <td>男</td>
        </tr>
        <tr>
            <td rowspan="2">2</td>
            <td>李明名</td>
            <td>20</td>
            <td>男</td>
        </tr>
 
        <tr>
            <td>李华</td>
            <td>20</td>
            <td>女</td>
        </tr>
    </table>复制

12、框架标签（窗口标签）

<!-- 12、框架标签   iframe嵌套其他页面
        src:嵌套的资源
        width="800px"
        height="400px"
        frameborder='0' 去掉边框 使任意页面嵌入的更真实
    -->     
    <a href="https://www.bilibili.com/" target="aaa">跳转到哔哩哔哩</a>
    <a href="https://www.baidu.com/" target="aaa">跳转到百度</a>
    <br><br>
    <iframe src="https://www.bilibili.com/"  width="800px" height="400px"  frameborder='0' name="aaa"> </iframe>
    <br>复制

13、音频标签

 <!-- 13、音频标签   audio
        controls 手动播放，并让播放器显示出来
        autoplay  自动播放
        loop  循环播放
        img/bj.mp3 为存在cimg件夹下的mp3音频文件
    -->
    <audio src="img/bj.mp3" autoplay loop ></audio>复制

14、视频标签

<!-- 14、视频标签   video
        controls 手动播放，并让播放器显示出来
        autoplay  自动播放
        loop  循环播放
        img/test.mp4为存在img文件夹下的mp4视频文件
    
    -->
    <video src="img/test.mp4" width="200px" height="200px" controls></video>
    <br>复制

15、收集用户信息的标签

（1）单行文本框

 <input type="text">单行文本框<br><br>复制

（2）密码框

<input type="password">密码框<br><br>复制

（3）单选框

<!-- 单选框需配合一个name属性，当name属性相同时才会视为一组，单选框的选项才能只选一个
    -->
    <input type="radio" name="aaa">男生 <input type="radio" name="aaa">女生 单选框<br><br>复制

（4）文本选择器

<input type="file">文本选择器<br><br>复制

（5）颜色选择器

<input type="color">颜色选择器<br><br>复制

（6）日期

 <input type="date">日期<br><br>
 <input type="datetime-local">日期时间<br><br>
 <input type="week">周选择器<br><br>复制

（7）滑块

!-- 滑块
    min 滑块最小值
    max 滑块最大值
    value 进入页面时的值（默认在中间）
    -->
    <input type="range" min="0" max="100" value="90">滑块<br><br>复制

（8）数字

<!-- 数字
    min 滑块最小值
    max 滑块最大值
    value 进入页面时的值（默认在中间）
    step   步长
    -->
    <input type="number" min="0" max="100" value="90" step="5">数字<br><br>复制

（9）下拉框

<!-- 下拉框
     <option></option>下拉框中的选项
     如果不加value的话下拉框中的值是他所选择的文本。例：第一个就是数学
     如果加了value的话下拉框中的值是value中的值. 例：第二个就是2
    -->
    <select>
        <option value="">数学</option>
        <option value="2">语文</option>
        <option value="">英语</option>
    </select><br><br>复制

(10）多行文本域

<!-- 多行文本域
     rows 能放多少行
     cols 一行有多少个字符
    -->
    <textarea rows="10" cols="50"></textarea>多行文本域<br><br>复制

（11）按钮标签

<!-- 按钮标签
        普通按钮如果不绑定事件，点击之后没有任何作用
        重置按钮，点击之后所有页面回归默认值
        提交按钮，点击之后提交内容，提交内容需要把要提交的内容放在一个from表单中，
        <form></form>表单标签 主要用于收集用户输入的数据，并将这些数据提交到服务器进行处理。
            点击提交之后，会提交数据并刷新页面
        例：
        <form>
            <select>
                <option value="">数学</option>
                <option value="2">语文</option>
                <option value="">英语</option>
            </select><br><br>
            <input type="submit" alue="提交按钮">
        </form>
    -->
    <input type="button" value="普通按钮">
    <input type="reset" value="重置按钮">
    <input type="submit" alue="提交按钮">复制