Web开发实践：CSS与C语言在HTML中的应用与媒体适配,-优快云博客

本文链接：https://blog.youkuaiyun.com/Error_Fe/article/details/135613615

<meta charset="utf-8"><!--防止乱码（语言一致）-->
<meta name="viewport" content="width=device-width,initial-scale=1.0"><!--这个是在不同设备上的控制网页大小-->
<meta name="keywords" content="你好世界，2024，C语言">
<meta name="description" content="《web开发试一试》">
<meta name="author" content="Error——Fe">
<meta http-equiv="refresh" content="5;https://blog.youkuaiyun.com/Error_Fe?type=blog">

html注释：

css注释：/*注释*/

JavaScript注释：与C语言一致

与css配合达到一个简洁的效果

<link rel="stylesheet" href="style.css">
<link rel="stylesheet" media="print" href="print.css">
<link rel="stylesheet" media="screen and (min-width:512px) and (max-width:1024px)" href="screen.css">
<link rel="icon" type="image/x-icon" href="1234.icon">

以下是css的link

style.css

body{
	background-image:url("preview.jpg")
	}
h1 {color:red;
	text-align:center;
	}
p {color:yellow}
a {
color:green;
background:pink;
}

print.css

h1{
	color:black;
	}
img{
	color:black;
	}
a{
	color:black;
	}
p{
	color:black;
	}

screen.css 适应网页尺寸，换背景图片

body{
	background-image:url("123.jpg")
	}

完整的html

<!DCTYPE html>
<html>
<head>
	<title>第一个程序</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1.0">
	<meta name="keywords" content="你好世界，2024，C语言">
	<meta name="description" content="《web开发试一试》">
	<meta name="author" content="Error——Fe">
	<！-- -->
	<link rel="stylesheet" href="style.css">
	<link rel="stylesheet" media="print" href="print.css">
	<link rel="stylesheet" media="screen and (min-width:512px) and (max-width:1024px)" href="screen.css">
	<link rel="icon" type="image/x-icon" href="1234.icon">
</head>
<body>
		<h1>Hello world</h1>
		<img alt="bg" src="bg.png" width="30%" height="30%">
		<a href="https://blog.youkuaiyun.com/Error_Fe?type=blog" target="_blank">优快云个人用户，快来关注我！！！</a>
		<p>I love C program!</p>
</body>
</html>