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代码运用
感想:没有感想。