1.base属性
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org//TR html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>用base标签为文档设置基础URL</title>
<base href="http://www.myweb.com/" />
</head>
<body>
<a href="index.html">点击返回主页</a>
</body>
</html>
2.用href属性来指定基础URL
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org//TR html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>base元素实例</title>
<base href="https://image.baidu.com/search/index?tn=baiduimage&ct=201326592&lm=-1&cl=2&ie=gb18030&word=%D0%DC%C3%A8%CD%BC%C6%AC&fr=ala&ala=1&alatpl=adress&pos=0&hs=2&xthttps=111111" />
</head>
<body>
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1553357698266&di=f62a9ba6f689d1fe80c7c6e39d14dea8&imgtype=0&src=http%3A%2F%2Fwww.pig66.com%2Fuploadfile%2F2017%2F1230%2F20171230032047976.png" alt="这是一只大熊猫"/>
<p>
当浏览器准备获取图像时，取出base标签中指定的基础URL，将其与img
标签的src属性值panda.jpg相结合，形成最终请求。服务器响应该资源
，把资源（在此例中是panda.jpg图片）发送给浏览器，浏览器负责显示
该内容，然后我们就能看到可爱的熊猫。
</p>
<p>哈哈</p>
</body>
</html>
3.向前链接或向后链接
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org//TR html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>向前链接或向后链接</title>
<link rel="index" href="idex.html">
<link rel="next" href="idex.html">
<link rel="next" href="idex.html">
</head>
<body>
是第三章
</body>
</html>
4.链接到外部样式
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org//TR html4/loose.dtd">
<html>
<head>
<meta http-equiv="Conten-Type" content="text/html; charset=utf-8">
<title>链接到外部样式</title>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<p class="p1">10px大小字体</p>
<p class="p2">20px大小字体</p>
<p class="p3">30px大小字体</p>
</body>
</html>
main.css
.p1{
font-size:10px;
}
.p2{
font-size:20px;
}
.p3{
font-size:30px;
}
5.style属性
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org//TR html4/loose.dtd">
<html>
<head>
<meta http-equiv="Conten-Type" content="text/html; charset=utf-8">
<title></title>
<style type="text/css">
.p1{
font-size:10px;
}
.p2{
font-size:20px;
}
.p3{
font-size:30px;
}
</style>
</head>
<body>
<p class="p1">10px大小字体</p>
<p class="p2">20px大小字体</p>
<p class="p3">30px大小字体</p>
</body>
</html>
6.media属性
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org//TR html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>针对不同媒体设备</title>
<style type="text/css">
@media print{
p{font-weight:bold;}
}
@media screen{
p{font-weight:lighter;}
}
@media print,screen{
p{font-size:30px;}
}
</style>
</head>
<body>
<p>这里是第三章</p>
<p>这里是第三章</p>
<p>这里是第三章</p>
</body>
</html>
7.设置脚本类型
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org//TR html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>设置脚本类型</title>
<script type="text/javascript">
window.onload=function(){
alert("hello world!");
}
</script>
</head>
<body>
</body>
</html>
8.设置外部脚本
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org//TR html4/loose.dtd">
<html>
<head>
<meta http-equiv="Conten-Type" content="text/html; charset=utf-8">
<title>设置外部脚本</title>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<p class="p1">10px大小字体</p>
<p class="p2">20px大小字体</p>
<p class="p3">30px大小字体</p>
</body>
</html>
main.js
window.onload=function(){
alert("hello world!");
}
网友评论