1. 工具介绍
不要使用双击打开HTML文件
使用http-server在本地计算机服务器打开
安装http-server
yarn global add http-server
在目录中使用
http-server -c-1
其中http://192.168.123.1:8080和http://10.0.50.105:8080地址只要wifi相同都是可以打开浏览的。
http-server 的简写为 hs
使用parcel
也可以使用parcel来在本地运行服务器
yarn global add parcel
在目录中使用
parcel <HTML文件>
http-server功能要比parcel简单些。出现bug就换一种使用
2. 标签
2.1 a标签
属性
- href
- target 指定在哪个标签中打开
- download
- rel=noopener
a的href的取值
网址
https://google.com
http://google.com
//google.com
网址的形式有以上这三种，最高级的
//google.com这种形式因为它会自动选择是使用http还是使用https
解释：
路径
/a/b/c以及a/b/c
index.html以及./index.html
伪协议
JavaScript：代码;
<a href="javascript:alert('hi')">
mailto：邮箱；
tel：手机号；
a标签的作用
- 跳转外部页面
- 跳转内部锚点
- 跳转邮箱、电话等
target属性
- _blank 在空白页打开
- _self 在当前页面打开
- _top 在最顶层的页面打开
- _parent 在上一层页面打开
_self、_top、_parent的区别示例
- 其他字符串
当
target="xxx"时浏览器会在一个空白页开启一个window.name='xxx'的网页，之后你使用target="xxx"的时候就会在那个页面打开新的网页
你可以在页面跳转之后再控制台输入window.name就可以看到"xxx";
-
target=iframe.name
<a href="//baidu.com" target="aaa">百度</a> <a href="//google.com" target="aaa">google</a> <iframe src="" style="border: none;height: 800px;width: 100%;" frameborder="0" name="aaa"></iframe>
就可以实现标签点击的页面会在iframe中跳转
2.2 table
你真的会写table吗，或许是浏览器对HTML超强容错能力在帮你写table。 正确的写法:
<tabel>
<thead></thead>
<tbody></tbody>
<tfoot></tfoot>
</tabel
- th: table head
- tr: table row
- td: table body
相关的css属性
<!--单元格布局方式-->
table-layout :auto/fiexd;
<!--合并间隙-->
border-collapse:collaspse;
<!--间隙为0-->
border-spacing:0;
2.3 img
使用JavaScript监听图片的加载
img.onload=function(){
console.log('success');
}
img.onerror=function(){
console.log('fail');
img.src = 'xxx.png'
}
一旦图片加载失败就是用一张新的图片来进行挽救。
响应式
img{
max-width:100%;
}
保证图片最大宽度不超过页面宽度。
不要让图片变形！
可替换元素MDN(面试被问到的几率大)
2.4 from
- autocomplete
是否自动填充值分别为： on/off(开启和关闭)；开启之后会自动提示对应name属性信息(基于你之前填充过的from表单)
- methode
请求方式
- aciton
请求地址
onsubmit事件
当用户提交的时候就触发onsubmit事件
button和input的区别
<input type="submit" value="提交">
<button type="submit"><span><strong>提交</strong></span></button>
button中可以带其他标签，而input则不行。
3. 总结
本篇博客主要表述了平时没有关注到的地方和要点。
主要有一下几点：
-
使用双击打开网页的存在的问题
-
a标签的URL地址写法
-
a标签的target改为字符串居然还有这种功效
-
保证图片的完整性
-
table的正确打开方式
-
from表单的autocomplete属性
-
button和input的区别
