html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>mykingdom</title>
<link rel="stylesheet" href="1.css">
</head>
<body id="ceiling">
<h1>我的王国</h1>
<h2>基础文本</h2>
<p>sada<b>adf</b>fmkmklnkm <br /> <br /> klmmkoooji</p>
<i>fafaf</i>
<strong>affa</strong>
<em class="blue">fagag</em>
<s>faag</s>
<ins>asfga</ins>
<div id="green">我一个人占一行</div>
<div>我一个人占一行</div>
<div>我一个人占一行</div>
<p>adfklfjf</p>
<h2 class="blue back-yellow">图片标签</h2>
<h4>皮卡丘</h4>
<img src="img/ds.jpg" width="100">
<h4>alt:图像显示不出来是显示的文字</h4>
<img src="img1/ds.jpg" alt="哎呀,图片显示不出来啦~~" width="100">
<h4>title:鼠标放到图片上显示的文字</h4>
<img src="img/ds.jpg" title="皮卡丘" width="100">
<h4>border:给图像设定边框</h4>
<img src="img/ds.jpg" title="皮卡丘" width="100" border="5">
<h2>超链接</h2>
<h3>外部链接</h3>
<h4>从本页面跳转</h4>
<a href="https://blog.csdn.net/2301_79347603?spm=1000.2115.3001.5343" target="_self">欢迎关注我的博客</a>
<h4>另开一个页面</h4>
<a href="https://blog.csdn.net/2301_79347603?spm=1000.2115.3001.5343" target="_blank">欢迎关注我的博客</a>
<h3>内部链接</h3>
<a href="sss.html" target="_blank">嘿嘿</a>
<a href="sss.html" target="_blank">嘿嘿</a>
<h3>空链接</h3>
<a href="#">还没考虑好</a>
<h3>下载链接</h3>
<a href="img.zip">下载</a>
<h3>网页元素链接:例如点击一个图片切换页面</h3>
<a href="https://blog.csdn.net/2301_79347603?spm=1000.2115.3001.5343" target="_blank"><img src="img/ds.jpg"
title="皮卡丘" width="100"></a>
<h3>锚点链接:快速定位到页面中某个位置,根据id</h3>
<a href="#ceiling">回到顶部</a>
<h2>注释和特殊字符</h2>
<img src="img/s.jpg" width="500">
<h2>表格标签</h2>
<table align="center" border="1" cellpadding="20" cellspacing="0" width="400">
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
</thead>
<tbody>
<tr>
<td>小红</td>
<td colspan="2">18</td>
</tr>
<tr>
<td>我</td>
<td>114514</td>
<td>男</td>
</tr>
</tbody>
</table>
<h2>列表标签</h2>
<h4>你喜欢的食物</h4>
<ul>
<li>巧克力</li>
<li>蛋糕</li>
<li>奶茶</li>
</ul>
<ol>
<li>中国</li>
<li>美国</li>
<li>英国</li>
</ol>
<dl>
<dt>周江杭</dt>
<dd>语文140</dd>
<dd>数学150</dd>
<dd>英语150</dd>
</dl>
<dl>
<dt>小呆瓜</dt>
<dd>语文150</dd>
<dd>数学130</dd>
<dd>英语150</dd>
</dl>
<h2>表单标签</h2>
<form action="xxx.php" method="get" name="">
用户名:<input type="text" name="username" value="请输入用户名"> <br />
密码: <input type="password" name="pwd"> <br>
性别:男<input type="radio" name="sex" checked="checked"> 女<input type="radio" name="sex"><br>
爱好:吃饭<input type="checkbox" name="hobby"> 睡觉<input type="checkbox" name="hobby"> 打豆豆<input type="checkbox"
name="hobby"><br>
<input type="submit" value="免费注册">
<input type="reset" value="重置">
<input type="button" value="获取验证码">
<input type="file" value="选择文件"><br>
<select name="" id="">
<option value="">浙江</option>
<option value="" selected>上海</option>
<option value="">辽宁</option>
<option value="">河北</option>
</select>
个人陈述:<textarea name="hh" id="hei"></textarea>
</form>
<h3>label标签,扩大选中范围</h3>
<label for="text">用户名</label><input type="text" id="text"><br>
<label for="r">男</label><input type="radio" id="r">
</body>
</html>
css
p {
text-indent: 20px;
color: red;
font-size: 20px;
font-weight: 400;
font-style: italic;
}
h1 {
text-align: center;
font-family: '微软雅黑';
font-size: 35px;
color: pink;
}
.blue {
text-decoration: underline;
color: blue;
}
.back-yellow {
background-color: yellow;
}
#green {
color: green;
}
ol li {
color: red;
}
ul>li {
color: aqua;
}
h2,
h3 {
color: green;
}
a:link {
color: none;
}
a:visited {
color: red;
}
a:hover {
color: yellowgreen;
}
a:active {
color: burlywood;
}
input {
width: 200px;
transition: all .3s;
}
input:focus {
color: purple;
background-color: blanchedalmond;
width: 300px;
}
a {
display: inline-block;
width: 140px;
height: 40px;
background-color: gold;
line-height: 40px;
text-align: center;
}
body {
background-image: url(img/bg9.png);
background-repeat: no-repeat;
background-position: right top;
background-attachment: fixed;
}
a {
background: rgba(0, 0, 0, 0.3);
}
盒子模型
<!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>
.left,
.right {
float: left;
width: 300px;
height: 200px;
border: 5px solid pink;
border-bottom: 6px dashed darkblue;
padding-left: 20px;
padding-top: 20px;
}
.right {
float: right;
}
</style>
</head>
<body>
<div class="left"><img src="img/ds.jpg" width="200"></div>
<div class="right"><img src="img/bg9.png" width="200"></div>
<p>dsfadf</p>
</body>
</html>