HTML(1)
2020-01-23 本文已影响0人
山猪打不过家猪
html标签关系
1.嵌套关系
2.并列
注：
嵌套关系最好Tab；
并列关系不需要；
<!DOCTYPE html> //版本号
<html lang="en"> //指定语言
<head>
<meta charset="UTF-8"> //指定编码,字符集
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>小米商城</title>
</head>
<body>
所用网页的所有内容！！！
</body>
</html>
常用标签
单标签：
<hr>水平线
<br>换行
双标签：
<div> </div>用来布局，一行只能放一个
<span></span>用来布局，一行可以放很多
<strong></strong>加粗字体
<em></em>倾斜
<del></del>打折线
<ins></ins>下滑线
图片标签
<h4>正常图片</h4>
<img src="timg.gif" alt="">
<h4>带提示文本图片（图片不能正常显示）</h4>
<img src="timg1.gif" alt="胡歌吹笛子">
<h4>带title的图片,鼠标经过图片提示</h4>
<img src="timg.gif" title="胡歌吹笛子">
<h4>修改图片大小，高度</h4>
<img src="timg.gif" title="胡歌吹笛子" width = '600'>
<h4>带有边框的</h4>
<img src="timg.gif" title="胡歌吹笛子" width = '600' border =2>
注：
1.标签可以拥有多个属性
2.属性不分先后，空格隔开
3.采取键值对的形式 key ='value'
链接标签
<h4>外部链接：</h4>
<a href="https://www.baidu.com">百度一哈</a>
<h4>内部链接：</h4>
<a href="xxx.html">百度一哈</a>
<h4>空连接：</h4>
<a href="#">百度一哈</a>
<h4>图像链接</h4>
<a href="https://www.baidu.com"><img src="timg.gif" alt=""></a>
<h4>启动新窗口</h4>
<a href="https://www.baidu.com" target="#"><img src="timg.gif" alt=""></a>
相对路径
相对路径就是从代码所在的路径开始。
1）同一级路径
image.png
<!-- 直接引用 -->
<img src="timg.gif" alt="">
2）下一级路径（图片相对于html，处于下一级）
image.png
<!-- 下一路径需要/来表示 -->
<img src="images/timg.gif" alt="">
3）上一级路径(分别在两个文件夹里)
image.png
<!-- ../ 表示上一级，如果需要上两级就要两个../../ -->
<img src="../images/timg.gif" alt="">
锚点定位
<a href="#maodian">锚点定位1</a>
<div id ='maodian' >
<img src="timg.gif" alt="">
</div>
base 标签
1)base可以设置整体连接的打开状态
2)base写到<head> </head>之间
3)所有连接都添加为target = '_blank'
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<base target="_blank">
</head>
<body>
</body>
</html>
