初识web前端

<!-- html5的声明 -->
<!DOCTYPE html>
<html >
	<head>
		<!-- 设置编码格式为UTF-8（中文编码格式） -->
		<!-- 单标签 -->
		<meta charset="UTF-8">
		<!-- 标题 -->
		<!-- 双标签 -->
		<title> 这是标题 </title>
	</head>
	<body>
		<!-- 所有内容都写在body里面 -->
	</body>
</html>

如何使用html注释

快捷键：ctrl+/

html注释：

<!-- 注释内容 -->

扩展：

css注释：

/*注释内容*/

Js注释：

//注释内容

css引入方式

1、内联样式

最直接最简单的一种，直接对HTML标签使用style=""：

缺点：不可以统一设置样式，后期代码不好维护。

<!-- 内联样式 -->
        <div style="color: red;background-color: aqua;"></div>

2、内部样式

内嵌样式就是将CSS代码写在<head></head>head>之间，并且用<style></style>进行声明：

优缺点：页面使用公共CSS代码，也是每个页面都要定义的，如果一个网站有很多页面，每个文件都会变大，后期维护难度也大，如果文件很少，CSS代码也不多，这种样式还是很不错的。

<head>
        <meta charset="UTF-8">
        <title> 这是标题 </title>
        <!-- 内部样式 -->
        <style type="text/css">
            div{
                width: 100px;
                height: 100px;
                background-color: blue;
            }
        </style>
</head>

3、外部样式

1、链接样式

    链接样式是使用频率最高，最实用的样式，只需要在<head></head>之间加上<link…/>就可以了：

优缺点：实现了页面框架代码与表现CSS代码的完全分离，使得前期制作和后期维护都十分方便

<link type="text/css" rel="stylesheet" href="style.css" />

2、导入样式（不推荐使用）

导入样式和链接样式比较相似，采用@import样式导入CSS样式表，在HTML初始化时，会被导入到HTML或者CSS文件中，成为文件的一部分，类似第二种内嵌样式。

@import在html中使用

<style type="text/css">
    @import url(style.css);
    </style>

@import在CSS中使用

 @import url(style.css);

四种css样式的优先级

内联>内部>链接>导入

加油，铁子！

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
初识web前端

软件开发岗位介绍1.产品经理：负责产品与客户商定需求2.UI设计师：负责产品外观设计3.前端工程师：负责前端内容开发1.web前端2.Android前端3.ios前端4.后台工程师：负责前端内容开发5.测试：测试产品Bugweb前端能做什么？1.移动端和pc端的网页2.webApp:we...
复制链接

扫一扫

专栏目录