【主体框架的认识】
本帖最后由 书香 于 2023-5-21 02:31 编辑https://shuxiangyage.net/forum.php?mod=image&aid=393&size=300x300&key=4c6cb5541e1e9a30&nocache=yes&type=fixnone
当我们写上<h,软件会弹出所有的可能代码，我们回车即可变成下图
https://shuxiangyage.net/forum.php?mod=image&aid=394&size=300x300&key=e7b89639e5ca4376&nocache=yes&type=fixnone
主体框架一共由两部分组成，head和body，html代码是由标签对编写的，如<title></title>，结束会携带"/"符号
<head></head>里面写的是CSS属性代码，如文本颜色等，<body></body>里面写的是主体组件代码
<!DOCTYPE html>
<html>
<head>
<title>第1个程序</title>
<style type="text/css">
h1{
color: red;
}
</style>
</head>
<body>
<h1>测试</h1>
</body>
</html>
body里我使用和<h1>测试</h1>,h1是组件名，浏览器就会给我创建一个h1组件，文字显示是测试
head里面我对h1的属性进行了设置，让h1组件的显示颜色为红色
<style type="text/css">
h1{
color: red;
}
</style>
ctrl+s保存代码，打开data文件夹，双击test.html，浏览器就会显示结果
https://shuxiangyage.net/forum.php?mod=image&aid=395&size=300x300&key=bc3b8e084b5b2446&nocache=yes&type=fixnone
我们如果想要“测试”2字水平居中，我们可以写text-align: center;
<style type="text/css">
h1{
color: red;
}
</style>
最终显示结果为(刷新即可，不需要重复双击打开，记得先保存代码再刷新)
https://shuxiangyage.net/forum.php?mod=image&aid=396&size=300x300&key=63ab2975fa409e02&nocache=yes&type=fixnone
（点击返回课程目录：https://www.52hb.com/thread-58658-1-1.html）
谢谢分享 这些内容对新人很友好{:5_117:}
页:
[1]