h5学习（二）

最新推荐文章于 2022-10-09 16:48:55 发布

想变强的小白

最新推荐文章于 2022-10-09 16:48:55 发布

阅读量84

点赞数 1

文章标签： web html5

本文链接：https://blog.csdn.net/qq_44980725/article/details/117435194

版权

1.图像标签

图像类型

-jpg/jpeg 色彩丰富/不支持动画，透明照片

-png 色彩比较丰富/透明图标，按钮

-gif 色彩差/支持动画小动态图

-webp 谷歌2015以上所有优点，大小小50%，兼容性差

图像路径

（1)相对路径:指的是以当前网页为主附近路径

-兄弟路径 #直接图片名称 src="1.jpg"

-子目录路径 #先写目录名称再写图片名 src="img/1.jpg"

-父目录路径 #先写.. 父目录/再写图片名 src="../1.jpg"

<!DOCTYPE html>
<html>
  <head>
    <title>练习</title>
	<meta charset="utf-8">
 </head>
  <body>
	  <img src="2.png" style="width:108px;">
	  <img src="img/3.png" style="width:108px;">
	  <img src="../1.png" style="width:108px;">
  </body>
</html>

(2)绝对路径网络绝对路径以http开头路径

<!DOCTYPE html>
<html>
  <head>
    <title>练习</title>
	<meta charset="utf-8">
 </head>
  <body>
  
	  <img src="https://www.baidu.com/img/PC_bdfdce6f6e5f722db0aabdf32d01a03a.gif" style="width:108px;">

  </body>
</html>

2.超链接

作用:当用户点击超链接'标签中文字'会自动跳另一网页

语法:<a href="目标网页地址" target="跳转方式">文字</a>

属性: href="" 指定跳转后目标网页地址

target 目标指定跳转方式

_self 默认在当前标签中打开新网页

_blank 打开新标签显示新网页,原先标签保存

<!DOCTYPE html>
<html>
  <head>
    <title>练习</title>
	<meta charset="utf-8">
 </head>
  <body>
	  <a href="3.html">转入3.html</a>
	  <a href="3.html" target="_blank">
	  打开新标签转入3.html</a>
	  </a>
  </body>
</html>

超链接扩展小技巧

(1)下载文件

#注意事项:不能下载 a.png a.pdf a.html

(2)发送邮件

#注意事项:启动电脑发送邮件程序并且帮你添加收件人

(3)返回网页顶部

(4)阻止超链跳转（需要超链接外观通过程序 javascript 完成跳转）

<!DOCTYPE html>
<html>
  <head>
    <title>练习</title>
	<meta charset="utf-8">
 </head>
  <body>
	  <a href="logo.zip">点击此处下载文件</a>
	  <a href="mailto:1349700759@qq.com">发</a>
	  <a href="#">返回顶部</a>
	  <a href="javascript:;">阻止跳转</a>
  </body>
</html>

锚点

作用:在当前网页内部上下跳转

实现功能

(1)定义记号(锚点)

(2)定义超链接跳转指定记录(锚点)

<!DOCTYPE html>
<html>
  <head>
    <title>练习</title>
	<meta charset="utf-8">
 </head>
  <body>
	  <!--定义锚点--顶部锚点-->
	  <a id="top2"></a>
	  <br><br><br><br><br><br><br>
	  <!--跳转锚点-->
	  <a href="#top2">返回顶部</a>
	  <!--定义底部锚点-->
      <br><br><br><br><br><br><br>
	  <a id="bottom2"></a>
  </body>
</html>

注意：最新标准使用id定义锚点,旧标准定义锚点name="top"

表格

标准语法

<table>              <!--表格-->

    <tr>              <!--表格中行   table row-->

      <td></td>       <!--行中单元格 table data-->

    </tr>

    .....

</table>

table标签属性

border="1" 设置表格边框宽度

width="" 设置表格宽度

height="" 设置表格高度

bgcolor="" 设置表格背景颜色

bordercolor="" 设置表格边框颜色

cellspacing="" 设置单元格与单元格之间距离

cellpadding="" 设置内容与边框之间距离

align="" 表格水平方向对齐方式

tr(行) 属性

align="" left/center/right #设置td中文本水平对齐方式

valign="" top/middle/bottom #设置td中文本垂直对齐方式

td(单元格) 属性

width;height;align;valign

特殊属性:colspan rowspan 合并列合并行 #不规则表格

设计一个员工表

<!DOCTYPE html>
<html>
  <head>
    <title>练习</title>
	<meta charset="utf-8">
 </head>
  <body>
	  <h2>员工表</h2>
	  <table border="1" width="800"
	  bgcolor="#f5f5f5" bordercolor="#cccccc"
	  cellspacing="0" cellpadding="0"
	  align="center">
	     <tr>
		    <td>编号</td>
			<td>姓名</td>
			<td>性别</td>
		 </tr>
		 <tr>
		    <td>001</td>
            <td>赵</td>
            <td>男</td>
		 </tr>
		 <tr>
		    <td>002</td>
            <td>钱</td>
            <td>男</td>
		 </tr>
	  </table>
  </body>
</html>

不规则的表格

(1)colspan="n" 跨列合并(左右)

向右合并n个单元格(n包含自己单元格)被合并的单元格删除

(2)rowspan="n" 跨行合并(上下)

向下合并n个单元格(n包含自动单元格)初合并的单元格删除

<!DOCTYPE html>
<html>
  <head>
    <title>练习</title>
	<meta charset="utf-8">
 </head>
  <body>
	  <table width="800" border="1">
	   <tr>
	      <td colspan="2">1</td>
          <td rowspan="3">3</td>
	   </tr>
	   <tr>
	      <td colspan="2">4</td>
	   </tr>
	   <tr>
	      <td colspan="2">7</td>
	   </tr>
	  </table>
  </body>
</html>