首页 > 代码库 > 1_html基本结构以及样式表

1_html基本结构以及样式表

2024-09-13 10:24:18   212人阅读

首先，html的基本结构：

　　　　　　　　<html> 让系统编译时知道是HTML的语言，
　　　　　　　　　　<head>
　　　　　　　　　　　　<title>网页的标题</title>
　　　　　　　　　　</head>
　　　　　　　　　　<body>
　　　　　　　　　　　　主体：可以显示网页内容的
　　　　　　　　　　</body>
　　　　　　　　</html> HTML语言结束

 

其次，给html添加样式可分为四种：

　　　　第一种：

　　　　　　　　行间样式表

<div id="round" style="width:400px; height:300px;">
    <p>我是测试文字</p>
</div>　　　

　　　　　　优点：

　　　　　　　　　　优先级最高、不会和其他样式冲突
　　　　　　缺点：

　　　　　　　　　　不利于维护、完全没有通用性、代码可读性差

　第二种：

　　　　　　　　内部样式表（写在头部<style>标签里）

<style>
    #b1 {
        width: 200px;
        height: 200px;
        border: 2px solid red;
}
</style>

　　　　　　优点：
　　　　　　　　　　1.单个页面中，不会有多余代码
　　　　　　　　　　2.减少外部请求
　　　　　　　　　　3.在单个页面中可以做到通用
　　　　　　缺点：
　　　　　　　　　　1.没有办法在整个项目中复用
　　　　　　　　　　2.后期整个项目风格变换，修改起来不便

　

　　第三种：

　　　　　　　　外部样式表（使用link ，将外部单独的CSS文件引入html）

<link rel="stylesheet" href=http://www.mamicode.com/"css/index.css" />

　　　　优点：
　　　　　　　　　　1.便于整个项目的修改和维护
　　　　　　　　　　2.多个页面之间可以进行复用
　　　　缺点：
　　　　　　　　　　1.规划不好，容易代码冲突
　　　　　　　　　　2.在单个页面中会有多余代码
　　　　　　　　　　3.会增加外部请求

　　第四种：

　　　　　　　Import （在样式表中，引入新的样式表）：
　　　　　　　　

　　　　　　　　不建议使用，性能较差，不能并发加载

1_html基本结构以及样式表


联系
我们