HTML基础
一、插入图片、设置尺寸
<body>
<p><img src="book/TSET/test02.jpeg" width="250px" height="250px"></p>
</body>
二 点击文本链接
1、原页面链接：
<a href="https://www.bilibili.com/video/av21786264/?p=3" >我的HTML视频</a>
2、跳转另一页面链接：
<a href="https://www.bilibili.com/video/av21786264/?p=3" target="_blank" >我的HTML视频</a>
三点击图片链接另一页面
<body>
<center>居中显示</center>
<a href="http://127.0.0.1:8848/CSS1/book/旅游页面.html">
<img src="images/scenics/scenic_2.png" height="60%" width="60%" />
</a>
</body>
四、播放音频 <audio>
五、播放视频 <video>
六、表单重置
<body>
<p>当表单被重置后，触发函数并弹出提示信息。</p>
<form onreset="myFunction()">
输入鱼油的名字: <input type="text">
<input type="reset">
</form>
<script>
function myFunction() {
alert("表单已重置");
}
</script>
</body>
七、鼠标事件 之一 <on-mouse-over>
<body>
<img src="images/foot/ft_3.png" alt="mouse"
onmouseover="alert('鱼油的鼠标在图片上！')" />
</body>
七、<meta>
1、网页自适应
<head>
<meta name="viewport" content="width=device-width,intial-scale=1.0">
</head>
2、搜索引擎关键词优化
<meta name="keyword" conten="服装，皮包，面膜，内衣，日用品">
当网络爬虫搜索时，输入关键词进行搜索；包括内容，作者等；
3、页面链接直接跳转
<meta http-equiv="refresh" content="2; http://www.baidu.com"> （此处打开2秒后，自动跳转到百度页面）
4、注意：<meta>是空标签，所以不会直接在页面上显示出来；
八、<style> 样式
1、背景图片插入与调整
<style>
body {
background: url(img/images/scenics/scenic_1.png);
background-size:100% 100%; (调整尺寸应修改)
}
</style>
2、HTML图片大小控制
背景图尺寸(数值表示方式)：
#background-size{
background-size:200px 100px;
}
背景图尺寸(百分比表示方式)：
#background-size{
background-size:30% 60%;
}
背景图尺寸(等比扩展图片来填满元素，即cover值)：
#background-size{
background-size:cover;
}
背景图尺寸(等比缩小图片来适应元素的尺寸，即contain值)：
#background-size{
background-size:contain;
}
背景图尺寸(以图片自身大小来填充元素，即auto值)：
#background-size{
background-size:auto;
}
浙公网安备 33010602011771号