前言

前端工作两年半，但是写代码还是磕磕绊绊的，在巧合情况下看到后盾人的视频，很深入，所以写这个系列的学习笔记

HTML文件后缀

在微软早期，因为不能出现大于3个字符以上的后缀名，所以*.html后缀在早期的名称是.htm*

在vscode编辑器中看出，.html与*.htm*所表现的文件类别是一致的

URL协议

在html5中最常见的是http和https协议，主要负责网络请求、资源请求。但在html5中还有其他协议

javascript协议

用于执行javascript脚本，通常会用于阻止a标签的默认行为

用于移动端网页拨打电话

<a href="tel:10086">电话</a>

发送短信（sms协议）

用于移动端调网页发送短信

注意安卓系统使用*?连接发送内容，IOS系统使用&*连接发送内容。

<!-- 给 10086 发短信 -->
<a href="sms:10086">短信</a>
<!-- 给 10086 发送内容为"cxye"的短信 -->
<a href="sms:10086?body=cxye">短信</a>
<!-- 给 10086 和 10010 发送内容为"cxye"的短信 -->
<a href="sms:10086,10010?body=cxye">短信</a>

mailto协议

用于PC端网页发送邮件

<!-- 给test1@163.com发送邮件 -->
<a href="mailto:test1@163.com">mail</a>
<!-- 给test1@163.com和test2@126.com发送邮件 -->
<a href="mailto:test1@163.com,test2@126.com">mail</a>
<!-- 给test1@163.com发送主题为“testing”的邮件 -->
<a href="mailto:test1@163.com?subject=Testing">mail</a>
<!-- 给test1@163.com发送主题为“testing”的邮件，并抄送给test3@126.com -->
<a href="mailto:test1@163.com?subject=Testing mailto&cc=test3@126.com">mail</a>

a标签target属性

用于指定链接的打开方式

_self

在当前页面打开链接，也是target的默认值

_blank

在新页面打开链接

在使用*_blank*打开新页面时，存在这以下问题：

window.opener值为null

在a标签使用*_blank方式跳转时，新页面获取不到window.opener对象，也就是获取不到父级页面元素，这是因为浏览器的隔离机制*

如果想获取window.opener对象，可以采用JS代码进行页面跳转

 window.open('./index2.html')

_parent

在父页面打开超链接，这里需要用多层嵌套iframe进行演示

<!-- father.html -->
<h5>father页面</h5>
<iframe src="son.html" width="250" height="200"></iframe>

<!-- son.html -->
<h5>son页面</h5>
<iframe src="grandson.html" width="200" height="120"></iframe>


<!-- grandson.html -->
<h5>grandson页面</h5>
<a href="https://www.4399.com" target="_parent">打开4399页面</a>

_top

_top是在顶级页面中打开链接，这里要区分一下与*_self*方式

_self指的是当前页面打开链接，在多层iframe中也就指的是当前层的iframe打开链接

然后*_top在多层iframe*的表现为在顶级页面打开链接

但是在只有一个窗口时，_top和*_self*所表现的效果是一样的

窗口名称

默认采用*_blank方式进行链接跳转，当target值是窗口名称并且多个target*值相同时，多次打开链接都是在同一个页面，不会打开新的页面

<a href="./index2.html" target="A页面">打开A页面（1号）</a>
<a href="./index2.html" target="A页面">打开A页面（2号）</a>

readonly与disabled区别

<input type="text" readonly value="我是readonly" />
<input type="text" disabled value="我是disabled" />

样式不同

如上图所示

范围不同

readonly： 只对 *和*标签有效

disabled ：对所有表单元素都有效, 包括：、 、、**等

<video src="play.mp4" autoplay muted></video>

<video src="play.mp4" id="video"></video>
<script>
    let videoDom = document.querySelector('#video')
    videoDom.onloadeddata = () => {
        videoDom.play()
    }
</script>

<video src="play.mp4" id="video"></video>
<button onclick="playVideo()">播放</button>
<script>
    let videoDom = document.querySelector('#video')
    const playVideo = () => {
        videoDom.play()
    }
</script>

<span>
    <img src="./17158418097860001.png" />
</span>