学习前端之伊始

2018-11-12  本文已影响7人  iOS_July
<!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:
行间样式表:给单独的标签添加样式

语法:<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>

不华丽的分割线


补一句:结构、行为、样式 相分离
上一篇 下一篇

猜你喜欢

热点阅读