温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

web开发 HTML/CSS基本框架结构讲解

发布时间:2020-06-17 18:44:47 来源:网络 阅读:724 作者:九夏光年 栏目:开发技术

HTML/CSS基本框架结构讲解

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title></title>

<style></style>

</head>

<body></body>

</html>

 

注释:

无论你写的内容有多少都是在这基本框架里面写!

 

<!DOCTYPE html>----这是一个声明为 HTML5 文档,就像你在一张纸上写个请假条,此张纸就是请假条一个道理

 

<html> </html> 之间的文本描述网页,可以想象成整张请假条一样。

 

<head></head>之间写规则来规定来<body> </body> 之间的内容。head意为头部的意思,类似大脑来判断你看到物体的形状和去制定一些规则。

 

head></head>之间分别有<meta charset="utf-8">   <title></title>   <style></style>

 

<meta charset="utf-8"> 是字码表的规定是国际公认的使用最广泛的,就像好多门外语一样而英语是最广泛的,字码表就是一张制定好的文字的显示规则,有的网页会显示乱码就是字码表的原因!

 

<title></title>之间写的是标题就是来给网页的一个概述,例如打开百度在就是在上方显示百度的名字。

web开发 HTML/CSS基本框架结构讲解

<style></style>之间就是来规定<body> </body> 之间的显示内容的样式的。

 

 

<body> </body> 之间的文本是可见的页面内容,就像是眼睛看到的东西,东西的形状例如:长,宽,高,颜色等..都有大脑去分析判断即为<head></head>之间写规则来规定来<body> </body> 之间的内容。

 

下面写个例子

 

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>田字格</title>

<style>

div

{

width: 100px;

height: 100px;

background: #7fff00;

border: solid 10px black;

float: left;

}

.big

{

margin: 0px auto;

width: 240px;

height: 240px;

border:0px;

}

</style>

</head>

<body>

<div class="big">

<div></div>    

<div></div>

<div></div>

<div></div>

</div>

</body>

</html>

注释:<div></div>默认就是个高0x0的方块在<style></style>之间定义了div的宽,高和背景色,边框的样式和颜色,和向左浮动。

<div></div>这是是一个大的div把四个小的包起来,所以宽和高不一样,给这大的div一个ID极为.big  . 即代表class

打开结果为

web开发 HTML/CSS基本框架结构讲解





向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI