- 什么也不多说,先上段码吧:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>这是一个网页title</title>
</head>
<body>
这是网页body
<div style="width: 100px;height: 30px;background: red;">
测试背景颜色
</div>
<div onclick="this.style.width='1000px';this.style.height='1000px'" style="width: 500px;height: 500px;background: url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1541942197789&di=b2b641be795f361d92cbb4b84572884e&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimgad%2Fpic%2Fitem%2F1b4c510fd9f9d72a5f992033df2a2834349bbb1a.jpg);">
测试背景图片(超链),响应点击事件
<!-- 这是注释信息 -->
</div>
</body>
</html>
初衷?
没有什么初衷,如果硬要加一个的话,就当是多捡一枚硬币吧~
初步了解了什么是HTML
知道了CSS样式表的作用
明白了javaScript是用来写事件的
不华丽的分割线
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
</html>
CSS:
- CSS出现的位置 : 行间、内部、外部.
样式表
行间样式表:给单独的标签添加样式
语法:<div style="width:100px"></div>
缺点:不利于修改
内部样式表:样式表写在一个html文件里
语法:把样式写在一对<style></style>标签当中,这个标签对是放在html页面里面的
缺点:内部样式表的作用域只存在当前的页面
EX:
<style>
div{
width: 100px;
height: 200px;
background: pink;
}
</style>
外部样式表:把样式写在一个单独的文件里,用到的时候用地址把它引进来就可以了
语法:创建css文件
EX:
CSS-->
div{
width: 100px;
height: 200px;
background: #f00;
}
HTML-->
<head>
<link rel="stylesheet" href="helloWoldCss.css" />
</head>
不华丽的分割线
网友评论