第一天
练习时间最长,把HTML的iframe标签进行了学习,并练习了css的选择器等相关知识。
iframe标签-嵌入一个页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<iframe src="http://www.baidu.com" width="200" height="150"></iframe>
</body>
</html>
iframe标签-嵌入多个页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<iframe src="http://www.baidu.com" width="200" height="150"></iframe>
<iframe src="http://www.sina.com" width="200" height="150"></iframe>
</body>
</html>
元素的id属性
在一个页面中,相同的id只能出现一次。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="content">存在即合理</div>
</body>
</html>
元素的class属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="content">存在即合理</div>
<p class="content">存在即合理</p>
</body>
</html>
id选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
#lvye{color:red;}
</style>
</head>
<body>
<div>绿叶学习网</div>
<div>绿叶学习网</div>
<div id="lvye">绿叶学习网</div>
</body>
</html>
class选择器-相同元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
.lv{color:red;}
</style>
</head>
<body>
<div>绿叶学习网</div>
<div class="lv">绿叶学习网</div>
<div class="lv">绿叶学习网</div>
</body>
</html>