资讯专栏INFORMATION COLUMN

重温HTML和CSS3

Taonce / 2064人阅读

摘要:不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。何为一种脚本语言,是一种动态类型弱类型基于原型的语言,内置支持类型。二代码规范在之前很多开发人员对的代码规范知之甚少,在年至年,许多开发人员从转换到。

重温Web前端基础 本篇幅中着重文字,只是记录一些自己的见解,巩固下自身基础 网页结构是什么?

结构层 html 导航,列表,段文字,图片,链接,
表示层 css 颜色,大小,位置,
行为层 JavaScript,弹出,切换等。

什么是html?

HTML是用来描述网页的一种语言。
不是编程语言,是标记语言

什么是CSS?

CSS (层叠样式表)
是一种用来表现HTML或XML等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。

何为javascript?

JavaScript一种脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。广泛用于客户端的脚本语言,最早是在HTML网页上使用,用来给HTML网页增加动态功能。

HTML

1993年开始提出草案,发展到现在,已经经历二十余年,版本也已经更新到现在的H5,html语言作为网络语言标准,在计算机的发展史中有不可或缺的地位。

一.书写自己的第一个页面





    

    
    
    
    
    
    Document


    
    
这是我的第一个页面

html语言在当今web页面中有不可或缺的地位。

二.HTML代码规范
在之前很多 Web 开发人员对 HTML 的代码规范知之甚少,在2000年至2010年,许多Web开发人员从 HTML 转换到 XHTML。使用 XHTML后 开发人员才逐渐养成了比较好的 HTML 编写规范
,文档声明放在首行

,推荐使用小写字母,虽然我们在书写代码时候,一些标签无论大小写都会被浏览器解析,但是如果我们在开发时使用大小写混写,美感度会大大降低,或许根本就不存在所谓的美感度吧,并且在后续的维护中,你会更加糟心。
注释
在书写代码时切记一定要书写注释,一个开发项目少说也得个几千行吧,说大了几十万行都会有的,如果你不写注释,可能你今天加班写的代码,明天早上睡醒你都不知道自己写的是哪部分区域,或许甚至都不知道自己写的是什么了。

闭合标签


    
    
这是我的第一个页面

就好比上面的代码,虽然能够被浏览器正常阅读出来,enter description here
这种后果就不用我过多说了吧。

属性命名:在写HTML时推荐使用小写命名,不要随便命名,按照老前辈的来,就好导航栏,我们一般命名为nav,在css样式中,一眼就可看到,假如你给它命名为a,那就够我们寻找半天了。

图片属性:一般在用img插入图片时,顺手写上alt属性,这样一来即使客户在网络不佳时,依然能看到这部分区域是什么,增加用户的体验感。

避免一行代码过长、空行、缩进、不在html代码中写css和javascript等等

CSS

CSS始于1999年,时至今日,也近二十年,css3的出现为html样式提供了莫大的工作效率,之前,html工作人员想要画出一个圆角,需要用使用大量html标签或者插入各种图片来合成,然而css的出现,只需要使用一个border-radius属性就可以完成。开发人员从此从切图的工作中解放出来,一个圆角,一个border-radius即可解决
使用css写两个样式
1.使用伪元素写出来个心形

    


    

2.再来一个太极图

下面css样式

#taiji {
            position: relative;
            width: 200px;
            height: 100px;
            background: white;
            border-color: black;
            border-style: solid;
            border-width: 4px 4px 100px 4px;
            border-radius: 100%;
            /* 这里50%也是可以的,目的是把正方形变成圆 */
            margin: 100px auto;
            
            animation: myfirst 4s linear infinite;
            /* 这句代码是引用动画,需要动态的可以添加这句代码,动画定义在下方,如果不需要动态的,就无需添加这句话 */
        }

        #taiji::before,
        #taiji::after {
            content: " ";
            position: absolute;
            top: 50%;
            left: 0;
            width: 25px;
            height: 25px;
            background: white;
            border: 38px solid black;
            /* //调成50%也是可以的 */
            border-radius: 100%;
        }

        #taiji::after {
            left: 50%;
            background: black;
            border-color: white;
        }

再给它加上动画,让它匀速无限旋转下去

 @keyframes myfirst {
            0% {
                /* 当在0%时,让他旋转0度 */
                transform: rotate(0deg);
            }
            100% {
                /* 当在100%时,让他旋转360度 */
                transform: rotate(360deg);
            }

        }
小结:在我们用jQ写效果时,偶尔回顾下原生的,会发现很多乐趣。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/113696.html

相关文章

  • 重温HTMLCSS3

    摘要:不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。何为一种脚本语言,是一种动态类型弱类型基于原型的语言,内置支持类型。二代码规范在之前很多开发人员对的代码规范知之甚少,在年至年,许多开发人员从转换到。 重温Web前端基础 本篇幅中着重文字,只是记录一些自己的见解,巩固下自身基础 网页结构是什么? 结构层 html 导航,列表,段文字,图片,链接,表示层 ...

    objc94 评论0 收藏0
  • 双十二大前端工程师读书清单

    摘要:本文最早为双十一而作,原标题双大前端工程师读书清单,以付费的形式发布在上。发布完本次预告后,捕捉到了一个友善的吐槽读书清单也要收费。这本书便从的异步编程讲起,帮助我们设计快速响应的网络应用,而非简单的页面。 本文最早为双十一而作,原标题双 11 大前端工程师读书清单,以付费的形式发布在 GitChat 上。发布之后在读者圈群聊中和读者进行了深入的交流,现免费分享到这里,不足之处欢迎指教...

    happen 评论0 收藏0
  • 双十二大前端工程师读书清单

    摘要:本文最早为双十一而作,原标题双大前端工程师读书清单,以付费的形式发布在上。发布完本次预告后,捕捉到了一个友善的吐槽读书清单也要收费。这本书便从的异步编程讲起,帮助我们设计快速响应的网络应用,而非简单的页面。 本文最早为双十一而作,原标题双 11 大前端工程师读书清单,以付费的形式发布在 GitChat 上。发布之后在读者圈群聊中和读者进行了深入的交流,现免费分享到这里,不足之处欢迎指教...

    余学文 评论0 收藏0
  • 双十二大前端工程师读书清单

    摘要:本文最早为双十一而作,原标题双大前端工程师读书清单,以付费的形式发布在上。发布完本次预告后,捕捉到了一个友善的吐槽读书清单也要收费。这本书便从的异步编程讲起,帮助我们设计快速响应的网络应用,而非简单的页面。 本文最早为双十一而作,原标题双 11 大前端工程师读书清单,以付费的形式发布在 GitChat 上。发布之后在读者圈群聊中和读者进行了深入的交流,现免费分享到这里,不足之处欢迎指教...

    Jochen 评论0 收藏0

发表评论

0条评论

Taonce

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<