1.a 标签的用法
（1）定义和用法 a标签定义超链接（用于从一张页面链接到另一张页面）或锚（用于从页面当前位置跳转至指定锚点），它最重要的属性是 href 属性，指示链接的目标。所有浏览器都支持 a 标签。
（2）常用属性
- href
- target
- download
- rel=noopener
（3）href具体用法：
<a href="">空链接，当前页面跳转，刷新页面</a>
<a href="//www.baidu.com" target="_blank">打开新窗口，跳转到百度</a>
<a href="javascript:void(0)" >不跳转，网页上常用于button作用的a标签设置点击事件，阻止跳转</a>
<a href="mailto:123@qq.com">发送邮件【mailto：会自动检测本机系统是否安装邮箱，如果有就会自动打开邮箱，没有则会提示用户选择邮箱或者没提示】</a>
<a href="tel:123456789">一键拨打电话</a>
<a href="sms:123456789">一键发送短信</a>
<a href="#">空锚点，回到最顶端，不刷新页面</a>
<a href="#app">跳转</a>
<p id="app">锚点</p>
<a href="#app">跳转</a>
<a href="" name="app">跳转【这种方式只能用a标签的name属性定义才生效】</a>
（4）a的target
-blank 在空表页面打开
-top在顶级窗口打开
-parent在当前所在链接的上一层打开
-self在自己窗口打开（默认值）
target="XXX"就是windos的默认窗口打开
（5）a的download
规定被下载的超链接目标名
<a href="https://qq.com" download="2323.pdf">https://qq.com下载</a>
（6）a的rel=noopener
超链接 target="_blank" 要增加 rel="nofollow noopener noreferrer" 来堵住钓鱼安全漏洞。如果你在链接上使用 target="_blank"属性，并且不加上rel="noopener"属性，那么你就让用户暴露在一个非常简单的钓鱼攻击之下。当你浏览一个页面点击一个a标签连接 <a href="www.baidu.com" target="_blank"> 跳转到另一个页面时，在新打开的页面（baidu）中可以通过 window.opener获取到源页面的部分控制权， 即使新打开的页面是跨域的也照样可以（例如 location 就不存在跨域问题）。
<a href="www.baidu.com" target="_blank" rel="noopener" >
2.img 标签的用法
（1）定义和用法 <img>代表文档中一个图片，发出get请求，展示一张照片
（2）img属性
- alt: 定义描述图片的文本，可选填
- height： 图片高度
- width： 图片宽度
- src ：接图片地址
(3) 响应式：
max-width：100%;图片的最大宽度是百分之百，不会变形
（4）代码运用：
<head>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;}
img {
max-width: 100%;}
</style>
</head>
<body>
<img id=xxx src="sister.png" width="1000" alt="妹子">
<script>
xxx.onload = function () {
console.log("图片加载成功");
};
xxx.onerror = function () {
console.log("图片加载失败");
xxx.src = "/404.png";
};
</script>
</body>
<head>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;}
img {
max-width: 100%;}
</style>
</head>
<body>
<img id=xxx src="dog.png" width="1000" alt="哈士奇">
<script>
xxx.onload = function () {
console.log("图片加载成功");
};
xxx.onerror = function () {
console.log("图片加载失败");
xxx.src = "/404.png";
};
</script>
</body>
<head>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;}
img {
max-width: 100%;}
</style>
</head>
<body>
<img id=xxx src="dog.png" width="1000" alt="哈士奇">
<script>
xxx.onload = function () {
console.log("图片加载成功");
};
xxx.onerror = function () {
console.log("图片加载失败");
xxx.src = "/404.png";
};
</script>
</body>
table 标签的用法
1）定义和用法 绘制表格、
（2） table元素
- <tr> 定义表格行
- <th> 定义表格头
- <td> 定义表格数据，单元
- <thead> 表格的头 用来放标题之类的东西
- <tbody>表格的身体 放数据本体
- <tfoot>表格的脚 放表格的脚注之类
注意：如果没有写<thead><tfoot><tbody>则会将所有数据自动归为body
（3）table:表格元素及属性
border: 框，添加框
border-spacing:20px：表格间隔像素
border-collapse:collapse； 表格合并
width:表格宽度，单位为%或者像素
cellpadding:表格边距
bgcolor:表格背景颜色
bordercolor:表格边框线颜色
align:表格对齐方式：center居中，left左对齐，right右对齐
（4）table代码运用
感想：没有感想。
915
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
