Html和Css中的一些属性和标签

一个挺好用的网站可以查看html、css标签和属性，还有js语法，菜鸟教程：https://www.runoob.com/

w3school：https://www.w3school.com.cn/

一、alt属性：alt属性是一个用于网页语言HTML和XHTML、为输出纯文字的参数属性，作用是当HTML元素本身的物件无法被渲染时，就显示alt（替换）文字作为一种补救措施。

<img class="project_img" src="@/assets/music_project.jpg" alt="演示图"  />

上面的代码就是如果图片加载不出来，那么就会显示演示图这个文字。

二、video

<video>这个标签是h5新增的一个标签，作用是用来播放视频。Internet Explorer 9+, Firefox, Opera, Chrome 以及 Safari 支持 <video> 标签。标签使用和<img>标签类似，src属性中放视频地址，其他属性按照自己需求添加。当然视频资源也可以放在video标签内部，使用<source src="" type=""></source>标签，内部可添加多个视频资源，浏览器会选择第一个支持的视频资源，里面还可以加一段文字，当老浏览器不支持<video>标签时就会显示文本。

下面是video标签可以添加的属性、值和描述

<!--下面就是video标签实例，显示控件，静音，无限播放，视频加载好自动播放。注：自动播放只有添加了静音才生效，否则不会播放-->
<video src="./img/4月11日 (1).mp4" controls muted  loop autoplay>
    Sorry, your browser doesn't support embedded videos.
</video>

三、box-sizing属性：定义盒子宽高的概念，默认值是content-box，这是一个标准的盒子模型，当我们为一个盒子设置好宽高后，这里的宽高是内容区的宽高，不包含padding和border，padding和border会额外加在内容区的外面。值border-box，设置成这个之后盒子的宽高包含padding、border和内容区。当然不论设成哪个值margin都是在外面的。

四、font-family属性：设置字体

可以使用@font-face引入字体并命名，字体可以是下载好的也可以是在线的。

@font-face {
    font-family: 'ChillCalligraphy';
    src: url('./img/ChillCalligraphy_QiuHong.otf');
}
*{
    font-family: 'ChillCalligraphy';    
}

五、-webkit-user-select属性：是指WebKit内核浏览器（如Chrome、Safari等）特有的CSS属性，用于控制用户是否能够选中页面上的文本内容，并可以具体指定哪些内容可以选中。该属性有三个可选值：none、text和all。none：表示无论用户如何尝试，页面上的文本内容都不能被选中。text：表示用户只能选择文本内容，而不能选择例如图片和视频等媒体元素。all：表示可以选择页面上所有的元素，包含文本和媒体元素。

六、overflow属性支持4个属性，可设置当内容溢出元素框时的4种处理方式：1）visible 默认值。内容不会被修剪，会呈现在元素框之外。2）hidden 内容会被修剪，并且其余内容是不可见的。

3）scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。4）auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。注意:overflow 属性只工作于指定高度的块元素上。

七、position的含义是指定位类型，取值类型可以有：static、relative、absolute、fixed、inherit和sticky，这里sticky是CSS3新发布的一个属性。
1）position: static
static(没有定位)是position的默认值，元素处于正常的文档流中，会忽略left、top、right、bottom和z-index属性。
2）position: relative
relative(相对定位)是指给元素设置相对于原本位置的定位，元素并不脱离文档流，因此元素原本的位置会被保留，其他的元素位置不会受到影响。
3）position: absolute
absolute(绝对定位)是指给元素设置绝对的定位，相对定位的对象可以分为两种情况：
设置了absolute的元素如果存在有祖先元素设置了position属性为relative或者absolute，则这时元素的定位对象为此已设置position属性的祖先元素。
如果并没有设置了position属性的祖先元素，则此时相对于body进行定位。
4）position: fixed
可以简单说fixed是特殊版的absolute，fixed元素总是相对于body定位的。
5）position:inherit
继承父元素的position属性，但需要注意的是IE8以及往前的版本都不支持inherit属性。
6）position:sticky
position属性中最有意思的就是sticky了，设置了sticky的元素，在屏幕范围（viewport）时该元素的位置并不受到定位影响（设置是top、left等属性无效），当该元素的位置将要移出偏移范围时，定位又会变成fixed，根据设置的left、top等属性成固定位置的效果。

八、backdrop-filter： 该属性可以让你为一个元素后面区域添加图形效果（如模糊或颜色偏移）。 它适用于元素背后的所有元素，为了看到效果，必须使元素或其背景至少部分透明。最为常见的使用方式是用其实现毛玻璃效果。和其有个很类似的属性filter，filter：该属性将模糊或颜色偏移等图形效果应用于元素。两者不同，filter作用于当前元素，backdrop-filter作用于背后元素。

九、cursor属性：指鼠标指针放在一个元素边界范围内时所呈现的光标形状，它包括问号，小手等形状。

十、overflow：处理盒子中元素溢出的部分。默认值visible，内容不会修建，溢出的部分会在盒子外面展示。值hidden，溢出的部分会被隐藏。值scroll会修剪，可以通过滑轮滚动查看内容。

十一、flex-wrap: wrap;弹性盒子里面的元素进行换行(换行规则：元素在一行里面放不下了就换行，必须是弹性盒子)

十二、一个元素为弹性盒子，它的宽高不是都有子元素撑起，如果父元素为弹性盒子那么继承高，父元素为块状盒子继承宽。

十三、页面中的默认背景色是白色，盒子如果没有设置背景色的话那么默认就是透明的，会显示页面的白色。

十四、禁用页面右键代码

static disableContextmenu(dom: HTMLElement) {
    dom.addEventListener('contextmenu', (e) => {
      e.stopPropagation();
      e.preventDefault();
    });