0. 准备工作
访问html的插件
- http-server
yarn global add http-server
http-server . -c-1
hs -c-1
- parcel(速度比较慢)
yarn global add parcel
文件名.html
1. a 标签的用法
属性
- href(hyper reference超级引用)网址；路径；伪协议；id
- target
- download(没什么用)
- rel=noopener(暂时理解不了)
作用
- 跳转外部页面
- 跳转内部锚点
- 跳转到邮箱或电话
1.href
- 网址
http://google.com
https://google.com
//google.com (最高级，可以自动选择使用http还是https，以后写网址就用这个) http和https有什么区别？
- 路径
1./a/b/c.html(在根目录下，找a,找b, 找c.html)和a/b/c.html(在当前目录下找a, 找b, 找c.html)
如果开启了http服务，那么它的根目录就不是硬盘的根目录，而是你在哪里开的服务，哪里就是根目录。网页是在html-demo-2开的服务，所以，html-demo-2就是根目录。如果用双击打开a-href.html，那么c.html就会到硬盘的根目录寻找，当然找不到。所以/a/b/c.html的效果和a/b/c.html的效果相同。
2.index.html和./index.html
- 伪协议
1.javascript:代码
2和3.mailto:邮箱；tel:手机号
- id
href="#xxx"
2. target
a的target的取值
内置名字
- _blank
- _top
- _parent
- _self
- xxx
程序员命名
- Windows的name
- iframe的name
- 内置名字 -blank/top/_parent/_self/_xxx
上面的代码为a-target.html中的代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<a href="//google.com" target="_blank">google blank</a>
<a href="//google.com" target="_self">google self</a>
<a href="//google.com" target="xxx">google xxx</a>
<a href="//baidu.com" target="xxx">bidu xxx</a>
<div>
<iframe
width="500"
height="500"
src="a-target-iframe.html"
frameborder="0"
></iframe>
</div>
</body>
</html>a-target-iframe.html中的代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body style="background: red;">
我是iframe 里面有一个a标签
<a href="//baidu.com" target="_top">top</a>
<iframe src="a-target-iframe-2.html" frameborder="0"></iframe>
</body>
</html>a-target-iframe-2.html中的代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body style="background: green;">
我是iframe2 里面有一个a标签
<a href="//baidu.com" target="_parent">parent</a>
</body>
</html>- 程序员命名
1.windows的name用法查看a-target的内置名字第5点
2.iframe的name用法
实现google+baidu的代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<a href="//google.com" target="xxx">google</a>
<a href="//baidu.com" target="xxx">baidu</a>
<hr />
<iframe
style="border: none; width: 100%; height: 800px;"
src=""
name="xxx"
></iframe>
</body>
</html>
2. img 标签的用法
- 作用：发出get请求，展示一张图片
- 属性：alt/height/width/src
- 事件：onload/onerror
- 响应式：max-width:100%
- 可替换元素
- 发出get请求，展示一张图片
- 属性：alt/height/width/src
alt:在图片访问失败后，可以用文字来显示失败的图片
heigh/width:可设置图片的高和宽，但是不能让图片变形
src：它的值是图像的url,可以是相对路径，也可以是绝对路径
- 事件：onload/onerror
<script>
xxx.onload = function () { console.log('图片加载成功'); };
xxx.onerror = function () {
console.log('图片加载失败');
xxx.src = "specialized.png"};
</script>
- 响应式：max-width:100%
- 可替换元素
在可替换元素中，浏览器根据元素的标签和属性，来决定元素的具体显示内容。例如，<img>、<input>、<textarea>、<select>、<object>等元素。这些元素没有实际内容，是空元素。但<img>元素的<img>标签的src属性的值（略拗口）会提供图片信息，浏览器会读取这些信息并显示出来。而如果直接查看html代码，则看不到图片的实际内容。而且，可替换元素是可修改宽、高 等信息的，不可替换元素则不能修改。[1]
3. table 标签的用法
1.table的7个标签
1. <table>
2. <thead></thead>
3. <tbody></tbody>
4. <tfoot></tfoot>
</table>
5. th //表头单元格
6. td //table data 表格数据
7. tr //table row表格行
2.table的3个样式
- table-layout
- border-collapse
- border-spacing
- table-layout 表格布局
table-layout有2个值，具体区别点这里
- border-collapse 表格边框是分开还是合并
border-collapse有2个值，具体区别点这里
- border-spacing
4.form标签
- 作用：发get或者post请求然后刷新页面
- 属性：action/autocomplete/method/target
- 事件:onsubmit
- 作用：发get或者post请求然后刷新页面
- 属性：action/autocomplete/method/target
- 事件:onsubmit
- input和button区别：button里面可以有标签，input里面不能。
- 一定要有type="submit"，不然表单不能提交
5.input标签和其他输入标签
4. 我的其他感想
本章节内容比较多而且难记，如果不做记录，后面使用起来很困难！
5.vscode的快捷键
添加注释 CTRL+/
删除上一个单词 ctrl+backpspace
在当前行下边插入一行Ctrl+Enter
在当前行上方插入一行Ctrl+Shift+Enter
代码格式化：shift + alt +f
复制行：shift + alt +下箭头
字体放大/缩小:ctrl + ( + 或 -
参考
- ^https://blog.csdn.net/Syleapn/article/details/79583598