公司地址
TEL：183-6122-6252
PHONE：1183-6122-6252
E-MAIL：2417102043@qq.com
ADD：江苏省徐州市泉山区淮海西路270号
微信
CLOSE MENU
不论你的品牌在何处，我们都可以提供完善的服务与帮助！
了解更多服务请联系在线咨询 业务热线：183-6122-6252
今天学习五个知识点（文章结尾有视频教程）
一、认识完整的html界面
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> </body> </html>
这就是最基础的html文件结构。
· 第一行代码<!DOCTYPE html>是声明该文档类型为html5。
· 第二行代码<html></html>是网页的根标签，成对出现在结构的最开始和最后；
· 第三行代码<head></head>是网页的头部。其中<meta charset="UTF-8">定义了网页的编码格式，避免网页乱码；<title>十天学会html+css</title>这个标签中间写网页的标题，非常重要，我们看下效果。
· 再往下是<body></body>标签，是网页的主体部分，网页上看到的内容，都写在这个标签中间。
二、认识常用的html标签
在<body></body>标签中编写网页代码时，使用到的html标签总共就分两大类：双标签和单标签，列举几个常用的。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>十天学会html+css</title> </head> <body> <!-- 双标签 --> <div>十天学会HTML+CSS</div> <span>十天学会HTML+CSS</span> <p>十天学会HTML+CSS</p> <h1>十天学会HTML+CSS</h1> <a href="http:www.baidu.com">百度</a> <!-- 单标签 --> <br> <img src="https://www.html20.com/static/upload/image/20260325/1774417250845542.png"> <input type="text"> </body> </html>
下面看看它们的效果，其中<br>为换行标签，网页中不显示。
三、理解CSS样式
css学名层叠样式表，平时都叫它盒模型，因为看起来像盒子一样，由内容(content)、填充(padding)、边框(border)、边界(margin)四部分组成。
顾名思义，盒模型的作用就是把html中的各种标签，变成大小不一的盒子，然后上下左右排好，从而布局成一个好看的网页，如图所示：
四、css样式的引入
在html文件中的<head></head>标签，引入css样式文件，两者就可以搭配干活，实现各种网页了。
<head> <meta charset="UTF-8"> <title>十天学会html+css</title> <link rel="stylesheet" href="./css/index.css"> </head>
五、代码编辑器推荐
正所谓“工欲善其事必先利其器”，这两款是目前主流的编辑器Visual Studio Code（VS Code）、Sublime Text，本教程中用的是VS Code。
六、视频教程
183-6122-6252