一，HTML基础
1，HTML的基本样式
<!DOCTYPE html> ①
<html lang="en"> ②
<head> ③
<meta charset="UTF-8"> ④
<title>Document</title> ⑤
</head> ⑥
<body> ⑦
</body> ⑧
</html> ⑨
第①行就是告诉浏览者这是标准格式的HTML。第②行和第⑨行就是一对html标签，第②行代表开始，第⑨行代表结束。html标签里面包裹着head标签和body标签，head标签中第③行代表开始，第⑥行代表结束。body标签中第⑦行代表开始，第⑧行代表结束。在head标签中包裹着meta标签和title标签。html标签中的lang和meta标签中的charset是标签中的属性。这就像一个裸体的人，head是头，body是身体。
2，注释
在HTML中的注释为
3，标签初分类
像上面meta标签只有一个的称为自闭合标签。
像html，head等标签是成对的称为主动闭合标签。
其实html中绝大多数标签都是主动闭合标签，自闭合标签很少。
head标签里的👇
4，meta
①页面编码
<meta charset="UTF-8">
告诉浏览器是什么编码格式，这里就是utf-8.。
②刷新和跳转
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="Refresh" Content="3"> <!-- 表示页面每3秒钟刷新一次 -->
<title>Document</title>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- <meta http-equiv="Refresh" Content="3"> -->
<meta http-equiv="Refresh" Content="3;url=http://www.blog.csdn.net/hpl980342791"> <!-- 3秒后跳转到某网页 -->
<title>Document</title>
</head>
<body>
</body>
</html>
③关键词
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- <meta http-equiv="Refresh" Content="3"> -->
<!-- <meta http-equiv="Refresh" Content="3;url=http://www.blog.csdn.net/hpl980342791"> -->
<meta name="keywords" content="火星，酋长，猫咪">
<title>Document</title>
</head>
<body>
</body>
</html>
这是给搜索引擎用的，根据不同的关键字能搜到网站，不过近些年国内百度…哈哈，玩笑了！！！
5，title
显示网页的头部信息
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- <meta http-equiv="Refresh" Content="3"> -->
<!-- <meta http-equiv="Refresh" Content="3;url=http://www.blog.csdn.net/hpl980342791"> -->
<!-- <meta name="keywords" content="火星，酋长，猫咪"> -->
<title>这是一个网站</title>
</head>
<body>
</body>
</html>
6，link
給网页头部加个图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- <meta http-equiv="Refresh" Content="3"> -->
<!-- <meta http-equiv="Refresh" Content="3;url=http://www.blog.csdn.net/hpl980342791"> -->
<!-- <meta name="keywords" content="火星，酋长，猫咪"> -->
<title>这是一个网站</title>
<link rel="shortcut icon" href="002.jpg"> <!-- icon的属性中为图片的路径 -->
</head>
<body>
</body>
</html>
body标签里的👇
7，特殊符号
比较常用的：
还有一些其他符号: 猛戳这里.
8，p标签，br标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>这是一个网站</title>
<link rel="shortcut icon" href="002.jpg">
</head>
<body>
<p>问世间情为何物</p>
<p>只见生死两茫茫</p>
</body>
</html>
发现每两行之间都会空一行，再在第一行中加一个换行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>这是一个网站</title>
<link rel="shortcut icon" href="002.jpg">
</head>
<body>
<p>问世间情<br />为何物</p> <!-- br标签为自闭合标签，表示换行 -->
<p>只见生死两茫茫</p>
</body>
</html>
(其中<br />也可以写为<br>，但为了提高可阅读性，建议自闭合标签加上空格斜杠)
所以p标签做段落，br标签做换行
9，h系列标签，span标签及标签再分类
为啥这么叫呢？因为其中包含了六个标签(h1,h2,h3,h4,h5,h6)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>这是一个网站</title>
<link rel="shortcut icon" href="002.jpg">
</head>
<body>
<h1>hepengli</h1>
<h2>hepengli</h2>
<h3>hepengli</h3>
<h4>hepengli</h4>
<h5>hepengli</h5>
<h6>hepengli</h6>
</body>
</html>
h系列标签主要做标题，h1→h6越来越小。你要问我还有没有h7，对不起，没有…
再看span标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>这是一个网站</title>
<link rel="shortcut icon" href="002.jpg">
</head>
<body>
<h1>hepengli</h1>
<h2>hepengli</h2>
<h3>hepengli</h3>
<h4>hepengli</h4>
<h5>hepengli</h5>
<h6>hepengli</h6>
<span>hepengli</span>
<span>hepengli</span>
</body>
</html>
一个h系列标签独占一行，而多个span标签却在同一行。所以称类似h系列标签为块级标签，称类似span系列标签为行内标签。上面的p标签就是块级标签。
10，div标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>这是一个网站</title>
<link rel="shortcut icon" href="002.jpg">
</head>
<body>
<div>hepengli</div>
<div>laowang</div>
</body>
</html>
可以看出，div标签是块级标签。不同的标签之间也是可以嵌套的。
11，a标签
①超链接
在本标签页打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>这是一个网站</title>
<link rel="shortcut icon" href="002.jpg">
</head>
<body>
<a href="https://blog.csdn.net/hpl980342791">骑着哈哥去取经</a>
</body>
</html>
打开新的标签页
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>这是一个网站</title>
<link rel="shortcut icon" href="002.jpg">
</head>
<body>
<a target="_black" href="http://blog.csdn.net/hpl980342791">骑着哈哥去取经</a>
</body>
</html>
②锚
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>这是一个网站</title>
<link rel="shortcut icon" href="002.jpg">
</head>
<body>
<a href="#one">第一张</a>
<a href="#two">第二章</a>
<a href="#three">第三章</a>
<a href="#four">第四章</a>
<div id="one" style="height: 1000px;">第一张内容</div>
<div id="two" style="height: 1100px;">第二章内容</div>
<div id="three" style="height: 1200px;">第三章内容</div>
<div id="four" style="height: 1300px;">第四章内容</div>
</body>
</html>
可以看到页面比较长，那么就可以用锚直接跳到指定的位置
其中div中id里的内容一定要和上面a中href里的内容相对应(一样)，只不过a中href里前面要多加个#。
12，img标签
插入图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>这是一个网站</title>
<link rel="shortcut icon" href="002.jpg"> <!-- href内为图片路径 -->
</head>
<body>
<img src="003.jpg" alt="布布" title="霸气布布" /> <!-- title="霸气布布"就是当鼠标悬停在图片上就会显示“霸气布布” ，而alt="布布"就是当图片找不到时就会显示“布布”-->
</body>
</html>
13，input系列标签
①文本框，密码框，按钮
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>这是一个网站</title>
<link rel="shortcut icon" href="002.jpg">
</head>
<body>
<form action=""> <!-- form标签就相当于一个表单,action里写表单应提交的地址 -->
<input type="text" name="user" /> <!-- name属性就是让后台拿数据 -->
<input type="password" name="pwd" />
<input type="button" value="登录1" /> <!-- 这是一个普通按钮 -->
<input type="submit" value="登录2" /> <!-- 这是一个提交按钮，就是将form提交到某个地方 -->
<input type="reset" value="重置" /> <!-- 即点一下前面框中的内容还原为默认状态 -->
</form>
</body>
</html>
一个是普通的文本框，一个是密码框，后面是两个属性不同的按钮。
打开搜狗搜索主页，然后搜白起
看网址，其中query就是上面input中属性name里的内容。
同理
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>这是一个网站</title>
<link rel="shortcut icon" href="002.jpg">
</head>
<body>
<form action="https://www.sogou.com/web">
<input type="text" name="query" />
<input type="submit" value="搜索" />
</form>
</body>
</html>
结果和上面的一样。
另一个👇
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>这是一个网站</title>
<link rel="shortcut icon" href="002.jpg">
</head>
<body>
<fieldset>
<legend>登录</legend>
<label for="user1">账号：</label>
<input id="user1" type="text" /><br /><br />
<label for="pwd1">密码：</label>
<input id="pwd1" type="password" />
</fieldset>
</body>
</html>
②单选框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>这是一个网站</title>
<link rel="shortcut icon" href="002.jpg">
</head>
<body>
<p>请选择性别：</p>
男：<input type="radio" name="" />
女：<input type="radio" name="" />
</body>
</html>
额，这个…貌似翻车了，这男女都能选不就成泰国那个啥了么。
男女这两个应该是互斥的，假如选择男就应该把女自动去掉。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>这是一个网站</title>
<link rel="shortcut icon" href="002.jpg">
</head>
<body>
<p>请选择性别：</p>
男：<input type="radio" name="gender" value="male" /> <!-- 两个都加上name="gender"就只能选择一个了 -->
女：<input type="radio" name="gender" value="female" />
</body>
</html>
但一般平时看到的这里都会有一个默认值，
男：<input type="radio" name="gender" value="male" checked="checked" /> <!-- 加上checked="checked"就是默认选男 -->
③复选框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>这是一个网站</title>
<link rel="shortcut icon" href="002.jpg">
</head>
<body>
<p>请选择爱好：</p>
吃饭：<input type="checkbox" name="favor" value="1" />
睡觉：<input type="checkbox" name="favor" value="2" />
学猪叫：<input type="checkbox" name="favor" value="3" />
</body>
</html>
当然也可以像单选框那样加checked="checked"来添加默认值。
④上传文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>这是一个网站</title>
<link rel="shortcut icon" href="002.jpg">
</head>
<body>
<p>请选择要上传的文件：</p>
<input type="file" name="fname" />
</body>
</html>
一点选择文件就会自动弹出本地的文件目录，当然就这样是上传不了文件的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>这是一个网站</title>
<link rel="shortcut icon" href="002.jpg">
</head>
<body>
<form enctype="multipart/form_data">
<p>请选择要上传的文件：</p>
<input type="file" name="fname" />
<input type="submit" value="上传" />
</form>
</body>
</html>
这样才能把文件一点一点上传到服务器。
⑤大文本输入框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>这是一个网站</title>
<link rel="shortcut icon" href="002.jpg">
</head>
<body>
<p>请输入其他内容：</p>
<textarea name="meno">hello,word!</textarea> <!-- 其中的hello,word!即为默认内容 -->
</body>
</html>
⑥下拉框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>这是一个网站</title>
<link rel="shortcut icon" href="002.jpg">
</head>
<body>
<select name="city">
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3">南京</option>
<option value="4">广州</option>
<option value="5">西安</option>
<option value="6">海南</option>
<option value="7">新疆</option>
<option value="8">南昌</option>
<option value="9">台湾</option>
<option value="10">福建</option>
<option value="11">四川</option>
</select>
</body>
</html>
假如想默认选西安
<option value="5" selected="selected">西安</option>
一个能列出来的👇
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>这是一个网站</title>
<link rel="shortcut icon" href="002.jpg">
</head>
<body>
<select name="city2" size="3" multiple="multiple"> <!-- 属性size="3"是一次只显示三个，multiple="multiple">是可以多选，即按住ctrl键，就可以点击选择 -->
<option value="2">城固</option>
<option value="3">勉县</option>
<option value="1" selected="selected">洋县</option> <!-- selected="selected"为默认值 -->
<option value="4">镇巴</option>
<option value="5">汉中</option>
</select>
</body>
</html>
14，列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>这是一个网站</title>
<link rel="shortcut icon" href="002.jpg">
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<ol>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ol>
<dl>
<dt>1</dt>
<dd>hdj</dd>
<dd>dfg</dd>
<dd>ghh</dd>
<dt>2</dt>
<dd>ert</dd>
<dd>hyj</dd>
<dd>uyi</dd>
</dl>
</body>
</html>
15，table表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>这是一个网站</title>
<link rel="shortcut icon" href="002.jpg">
</head>
<body>
<table border="1"> <!-- table标签表示表格，border="1"就是边框宽度为1px -->
<tr> <!-- tr表示行 -->
<td>123</td> <!-- td表示列，td标签之中写表格里的内容 -->
<td>234</td>
<td>345</td>
</tr>
<tr>
<td>456</td>
<td>456</td>
<td>567</td>
</tr>
<tr>
<td>678</td>
<td>789</td>
<td>890</td>
</tr>
</table>
</body>
</html>
另一种写法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>这是一个网站</title>
<link rel="shortcut icon" href="002.jpg">
</head>
<body>
<table border="1"> <!-- table标签表示表格，border="1"就是边框宽度为1px -->
<thead> <!-- thead标签表示表头 -->
<tr> <!-- tr表示行 -->
<th>表头1</th> <!-- th表示表头中的列 -->
<th>表头2</th>
<th>表头3</th>
</tr>
</thead>
<tbody> <!-- tbody表示除第一行表头，剩下的内容 -->
<tr> <!-- tr表示行 -->
<td>123</td> <!-- td表示表中的列 -->
<td>234</td>
<td>345</td>
</tr>
<tr>
<td>456</td>
<td>567</td>
<td>678</td>
</tr>
</tbody>
</table>
</body>
</html>
二，CSS基础
1，基本格式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>这是一个网站</title>
<link rel="shortcut icon" href="002.jpg">
</head>
<body>
<div style="background: red;">hepengli</div> <!-- style就是div标签中的属性，可以“装饰”div标签中的内容，比如说，background: red;就是将hepengli的背景变为红色(后面可以写red，blue等相对应意思的英文单词，也可以写对应的html颜色编码，如红色为#FE0000。) -->
<div style="height: 58px;background: green;">liubangguo</div> <!-- height表示高度为50像素(px)，背景为绿色 -->
<div style="font-size: 35px;background: #F10674;">liujie</div> <!-- font-size为字体大小35像素(px)，背景颜色为#F10674。 -->
</body>
</html>
像 height: 58px; 中间为： 结尾为 ；
2，id选择器和class选择器
①
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>这是一个网站</title>
<link rel="shortcut icon" href="002.jpg">
<style type="text/css">
#one{
background: red;
}
#two{
height: 58px;
background: green;
}
#three{
font-size: 35px;
background: #F10674;
}
</style>
</head>
<body>
<div id="one">hepengli</div>
<div id="two">liubangguo</div>
<div id="three">liujie</div>
</body>
</html>
②
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>这是一个网站</title>
<link rel="shortcut icon" href="002.jpg">
<style type="text/css">
.one{
background: red;
}
.two{
height: 58px;
background: green;
}
.three{
font-size: 35px;
background: #F10674;
}
</style>
</head>
<body>
<div class="one">hepengli</div>
<div class="two">liubangguo</div>
<div class="three">liujie</div>
</body>
</html>
id对应的# class对应的.
区别：比如有两个或多个div标签中的style属性是相同的，id="one"只能有一次，而class="one"可以有多次。
3，注释
css中的注释为
4，层级选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>这是一个网站</title>
<link rel="shortcut icon" href="002.jpg">
<style type="text/css">
/*.one{
background: red;
}*/
.two span{ /* 表示class="two"里的span里的内容(中间为空格) */
height: 58px;
background: green;
}
/*.three{
font-size: 35px;
background: #F10674;
}*/
</style>
</head>
<body>
<div class="one">hepengli</div>
<div class="two">
liubangguo
<span>gebilaowang</span>
</div>
<div class="three">liujie</div>
</body>
</html>
也可以直接往span标签中直接写入style属性的内容。
5，组合选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>这是一个网站</title>
<link rel="shortcut icon" href="002.jpg">
<style type="text/css">
/*.one{
background: red;
}
.two span{
height: 58px;
background: green;
}*/
#one,#two,#three{ /* 表示id="one"，id="two"，id="three"都拥有这个属性(中间为逗号) */
font-size: 35px;
background: #F10674;
}
</style>
</head>
<body>
<div id="one">hepengli</div>
<div id="two">liubangguo</div>
<div id="three">liujie</div>
</body>
</html>
6，属性选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>这是一个网站</title>
<link rel="shortcut icon" href="002.jpg">
<style type="text/css">
input[type="text"]{
width: 250px; /* 长为250像素(px) */
height: 70px; /* 宽为70像素(px) */
}
</style>
</head>
<body>
<input type="text" name="">
</body>
</html>
7，优先级
给一个div标签同时加三个属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>这是一个网站</title>
<link rel="shortcut icon" href="002.jpg">
<style type="text/css">
.c1{
background: green;
}
.c2{
background: red;
}
</style>
</head>
<body>
<div class="c1 c2" style="background: blue;">hepengli</div>
</body>
</html>
去掉div里的属性 style=“background: blue;”
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>这是一个网站</title>
<link rel="shortcut icon" href="002.jpg">
<style type="text/css">
.c1{
background: green;
}
.c2{
background: red;
}
</style>
</head>
<body>
<div class="c1 c2">hepengli</div>
</body>
</html>
那么就是style属性离div标签越近优先级越高。
8，css的另一种形式
单独创建一个以.css结尾的css文件，只需在html文件中引用即可
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>这是一个网站</title>
<link rel="shortcut icon" href="002.jpg">
<link rel="stylesheet" href="haha.css"> <!-- href里为导入的css文件名 -->
</head>
<body>
<div class="c1">hepengli</div>
</body>
</html>
haha.css文件
.c1{
background: green;
}
9，边框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>这是一个网站</title>
<link rel="shortcut icon" href="002.jpg">
<!-- <link rel="stylesheet" href="haha.css"> -->
<style type="text/css">
.c1{
border: 1px solid red; /* border即表示边框，1px表示边框的宽度为1像素，solid表示边框为实线，red表示边框为红色 */
}
.c2{
border: 1px dotted green; /* border即表示边框，1px表示边框的宽度为1像素，dotted表示边框为虚线，green表示边框为绿色 */
}
</style>
</head>
<body>
<div class="c1">hepengli</div><br />
<div class="c2">liubangguo</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>这是一个网站</title>
<link rel="shortcut icon" href="002.jpg">
<!-- <link rel="stylesheet" href="haha.css"> -->
<style type="text/css">
.c1{
border-top: 2px solid red; /* border-top表示上边框 */
}
.c2{
border-bottom: 2px solid red; /* border-bottom表示下边框 */
}
.c3{
border-left: 2px solid red; /* border-left表示左边框 */
}
.c4{
border-right: 2px solid red; /* border-right表示右边框 */
}
.c5{
border:2px solid red;
width: 300px; /* 边框长为300像素 */
height: 70px; /* 边框高为70像素 */
font-size: 28px; /* 字体大小为28像素 */
font-weight: 600; /* 字体加粗为600(font-weight的范围为100，200，300，400，500，600，700，800，900，其中400相当于默认) */
text-align: center; /* 文本在框中横向居中 */
line-height: 70px; /* 文本在框中竖向居中 */
}
</style>
</head>
<body>
<div class="c1">hepengli</div><br />
<div class="c2">hepengli</div><br />
<div class="c3">hepengli</div><br />
<div class="c4">hepengli</div><br />
<div class="c5">hepengli</div>
</body>
</html>
10，float
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>这是一个网站</title>
<link rel="shortcut icon" href="002.jpg">
<!-- <link rel="stylesheet" href="haha.css"> -->
<style type="text/css">
.c1{
background: green;
width: 300px;
}
.c2{
background: red;
width: 350px;
}
.c3{
background: blue;
width: 310px;
float: left; /* 左“飘” */
}
.c4{
background: yellow;
width: 330px;
float: right; /* 右“飘” */
}
</style>
</head>
<body>
<div class="c1">hepengli</div>
<div class="c2">hepengli</div><br />
<div class="c3">hepengli</div>
<div class="c4">hepengli</div>
</body>
</html>
11，display
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>这是一个网站</title>
<link rel="shortcut icon" href="002.jpg">
<!-- <link rel="stylesheet" href="haha.css"> -->
<style type="text/css">
.c1{
background: green;
width: 300px;
}
.c2{
background: red;
width: 350px;
}
.c3{
background: blue;
width: 310px;
display: inline; /* 将块级标签转换为行内标签 */
/*float: left;*/
}
.c4{
background: yellow;
width: 330px;
display: block; /* 将行内标签转换为块级标签 */
/*float: right;*/
}
.c5{
background-color: black;
display: none; /* 将span标签隐藏 */
}
</style>
</head>
<body>
<div class="c1">hepengli</div>
<span class="c2">hepengli</span>
<div class="c3">hepengli</div>
<span class="c4">hepengli</span>
<span class="c5">laoxu</span>
</body>
</html>
12，padding(内边距)，margin(外边距)
其中深灰色的为margin外边距，浅灰色border为边框，浅绿色padding为内边距。外边距默认为8像素。
①
div标签和左边及上边都有空隙(这是默认的)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>这是一个网站</title>
<link rel="shortcut icon" href="002.jpg">
<!-- <link rel="stylesheet" href="haha.css"> -->
<style type="text/css">
.c1{
background: green;
width: 300px;
}
</style>
</head>
<body style="margin:0;"> <!-- margin:0;就是外边距为0 -->
<div class="c1">hepengli</div>
</body>
</html>
②
让标签横向居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>这是一个网站</title>
<link rel="shortcut icon" href="002.jpg">
<!-- <link rel="stylesheet" href="haha.css"> -->
<style type="text/css">
.c1{
background: green;
width: 300px;
margin:auto; /* 让标签横向居中 */
}
</style>
</head>
<body style="margin: 0;">
<div class="c1">hepengli</div>
</body>
</html>
css未完，续见下一篇博客：满足低调之心基础十五
好了，这周的学习内容就到此为止，望各位看客大佬发现有不足或错误能留言相告，臣不胜感激！！！
扫一扫
1731
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
