VSCode

最新推荐文章于 2024-11-04 21:45:43 发布

情不知所起1

最新推荐文章于 2024-11-04 21:45:43 发布

阅读量87

点赞数

文章标签： vscode ide 编辑器

本文链接：https://blog.csdn.net/weixin_43871100/article/details/128188341

版权

本文介绍了前端开发中的快捷键操作，如放大缩小、复制行等，以及HTML5的语义化标签如<header>、<nav>等。还详细讲解了音频和视频标签的使用，包括不同的源格式和播放属性。此外，讨论了表单元素的不同类型和CSS属性选择器、伪元素选择器的应用，帮助提升网页设计和交互体验。

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

快捷键

放大缩小 CTRL+ +和CTRL + -
向上复制一行 ALT+SHIFT+
向下复制一行 ALT+SHIFT+
光标点击到某一行时，默认选中全行，可以直接复制粘贴；
插件
chinese(simplified)中文版
open in browser在浏览器中打开
JS-CSS-HTML Formatter 每次保存，都会自动对齐
Auto Rename Tag 自动重命名配对的HTML/XML标签
CSS Peek 追踪至样式

HTML5

H5语义化标签

<header>：头部标签
<nav>：导航标签
<article>：内容标签
<section>：块级标签
<aside>：侧边栏标签
<footer>：尾部标签
多媒体标签
：音频标签（ogg Vorbis MP3 Wav）<audio src="dizhi"><audio>
|属性|值|描述|
|autoplay|autoplay|音频就绪后立马播放|
|controls|controls|显示控件|
|loop|loop|每当音频结束时重新播放|
|src|url|地址|

 <audio src="..." controls autoplay loop></audio>因不同类型对应的浏览器不同，故

<audio controls>
        <source src="....mp3" type="audio/mpeg">
        <source src="....ogg" type="audio/ogg">
        您的网址太low了，buzbuzh
    </audio>

视频标签

<video src="url" width="" height="" controls></video>
<!-- 浏览器不支持，故 -->
    <video width="" height="" controls>
        <source src="....ogg" type="video/ogg">
        <source src="....mp4" type="video/mp4">
        您的浏览器不支持
    </video>

|属性|值描述|

autoplay	autoplay 视频自动播放
controls	controls 显示播放插件
loop	loop 循环播放
preload	preload 是否等加载完再播放
poster	imgurl 等待加载的图片
muted	muted 静音播放

表单

属性值	说明
email	email
url	url
data	日期
time	时间
month	月
week	周
number	数字
tel	手机号码
search	搜索框
color	一个颜色选择的表单

<form>
        <ul>
            <li>邮箱：<input type="email"> </li>
            <li>上传头像：<input type="file"> </li>
            <li><input type="submit" value="提交"> </li>
        </ul>
    </form>

属性	值	说明
required	required	不能为空
placeholder	占位符	默认
autofocus	autofocus	自动获得光标
autocomplete	off/on	搜索记忆，默认开启，需要表单加上name属性
multiple	multiple	可以多选文件提交

CSS

css属性选择器

<style>
    /* 鼠标成小手 */
    
    button {
        cursor: pointer
    }

/* 属性选择器使用方法  */
button[disabled]{ cursor: default; } 
input[type="text"] {
        color: pink;
    }
    /* ^:以..开头的 */ 
    div[class^="icon"] {
        color: red;
    }
    /* $:以..结尾的 */
    
    div[class$="icon"] {
        color: aqua;
    }
    /* *:出现的 */
    
    div[class*="icon"] {
        color: aqua;
    }
</style>
<body>
button>按钮</button>
    <button>按钮</button>
    <button disabled>按钮</button>
    <input type="text" name="" value="文本框">
    <input type="search" name="" value="搜索框">
    <div class="icon1">
        图标1
    </div>
    <div class="icon2">
        图标2
    </div>
    <div class="icon">
        图标3
    </div>
</body>

伪元素选择器

<style>
ul li:first-child {
        color: blue;
    }
ul li:last-child {
        color: blue;
    }
ul li:nth-child(8) {
        color: red;
    }
</style>
<body>
<ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
    </ul>
   </body>