DAY03
一. 认识html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
</body>
</html>
二.html文字标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>June的HTML页面</title>
</head>
<body>
<h1>我是一级标签</h1>
<h2>我是二级标签</h2>
<h3>我是三级标签</h3>
<h4>我是四级标签</h4>
<h5>我是五级标签</h5>
<h6>我是六级标签</h6>
<p>大熊猫（学名：Ailuropoda melanoleuca）：属于食肉目、熊科、大熊猫亚科、大熊猫属唯一的哺乳动物。仅有二个亚种。雄性个体稍大于雌性。体型肥硕似熊、丰腴富态，头圆尾短，头躯长1.2-1.8米，尾长10-12厘米。体重80-120千克，最重可达180千克，体色为黑白两色，脸颊圆，有很大的黑眼圈，标志性的内八字的行走方式，也有解剖刀般锋利的爪子。大熊猫皮肤厚，最厚处可达10毫米。黑白相间的外表，有利于隐蔽在密林的树上和积雪的地面而不易被天敌发现。</p>
<p>生活在海拔2600-3500米的茂密竹林里，那里常年空气稀薄，云雾缭绕，气温低于20℃。有充足的竹子，地形和水源的分布利于该物种建巢藏身和哺育幼仔。大熊猫善于爬树，也爱嬉戏。爬树的行为一般是临近求婚期，或逃避危险，或彼此相遇时弱者借以回避强者的一种方式。大熊猫每天除去一半进食的时间，剩下的一半时间多数便是在睡梦中度过。在野外，大熊猫在每两次进食的中间睡2-4个小时。大熊猫99%的食物都是竹子，可供大熊猫食用的竹类植物共有12属、60多种。野外大熊猫的寿命为18-20岁，圈养状态下可以超过30岁。</p>
<span>请登录</span>|
<span>hello B612</span>|
<span>hello 猴面包树</span>
<b>
<i>哈哈哈哈哈哈哈哈哈哈啊哈哈~</i>
</b>
</body>
</html>
三. 图片、音频、视频、超链接
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<a href="http://www.baidu.com" target="_blank">百度</a>
<br>
<iframe src="https://www.bilibili.com/" frameborder="0" width="100%" height="500px"></iframe>
<hr>
<img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="百度logo">
<img src="./img/SKY.jpg" alt="sky" width="500px" height="350px">
<audio controls src="./img/qinghuaci.mp3"></audio>
<video controls src="./img/大熊猫.mp4"></video>
</body>
</html>
四. 列表
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p>小说</p>
<ul>
<li>
<a href="https://book.qidian.com/info/1023912499/">霸道总裁</a></li>
<li>斗破苍穹</li>
<li>斗罗大陆</li>
</ul>
<p>游戏：王者荣耀</p>
<ol>
<li>张三</li>
<li>李四</li>
<li>王五</li>
</ol>
</body>
</html>
五. input标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form method="POST">
<span>手机号:</span>
<input type="tel" placeholder="请输入手机号" value="123456">
<br>
<span>密码:</span>
<input type="password" placeholder="请输入密码">
<br>
<input type="submit" value="登录">
<input type="reset" value="重置">
</form>
<input type="file">
<input type="color">
<input type="date">
<input type="time">
<br>
<input type="radio" name="性别" id="gender1"><label for="#gender1">男</label>
<input type="radio" name="性别" id="gender2"><label for="#gender2">女</label>
<input type="checkbox" name="兴趣" id="interest1"><label for="#interest1">篮球</label>
<input type="checkbox" name="兴趣" id="interest2"><label for="#interest2">足球</label>
</body>
</html>
六. CSS
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 500px;
height: 500px;
background-color: powderblue;
}
.one{
border: 20px solid blue;
}
#one{
border-bottom: 20px solid lightblue;
}
</style>
</head>
<body>
<div class="one">
</div>
<hr>
<div id="one">
</div>
</body>
</html>
七. CSS选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.one > h1{
color: aqua;
}
.two > ul > li{
color: cornflowerblue;
text-align: center;
}
.one h2 {
color: darkorchid;
font-family: "隶书";
text-align: right;
}
.one > h1 ~ h2{
color: darkcyan;
}
.one > h1 + h2{
color: pink;
}
input[type=submit]{
background-color: blue;
color: white;
border: none;
}
body > h1:nth-child(1){
border: 5px solid blue;
}
</style>
</head>
<body>
<h1>我是h1标签</h1>
<div class="one">
<h1>我是一级标签</h1>
<h2>我是二级标签</h2>
<h2>我是二级标签</h2>
</div>
<div class="two">
<p>游戏</p>
<ul>
<li>王者荣耀</li>
<li>英雄联盟</li>
<li>pubg</li>
<li>CS:GO</li>
</ul>
</div>
<div id="one">
<input type="submit" value="登录">
<br>
<input type="reset" value="重置">
</div>
</body>
</html>
本文介绍了HTML、CSS的基础知识，包括HTML的三大技术作用、HTML标签的使用，如标题、段落、图片、音频、视频、超链接、列表和输入框。同时，讲解了CSS的层叠样式及选择器的运用，用于美化和布局网页内容。
扫一扫
988
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
