重温Web前端基础

本篇幅中着重文字，只是记录一些自己的见解，巩固下自身基础

网页结构是什么？

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

什么是html？

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

什么是CSS？

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

何为javascript？

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

HTML

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

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

<!-- <!DOCTYPE html> 声明为 HTML5 文档 -->

<!DOCTYPE html>

<!--html 元素是 HTML 页面的根元素 -->

<html lang="en">

    <!-- head头部标签 -->

<head>

    <!-- 国际通用语言编码，防止在浏览器中出现乱码 -->

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <!-- 页面标题 -->

    <title>Document</title>

</head>

<body>

    <!-- 页面内容 -->

    <div>这是我的第一个页面</div>

</body>

</html>

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

二.HTML代码规范
在之前很多 Web 开发人员对 HTML 的代码规范知之甚少，在2000年至2010年，许多Web开发人员从 HTML 转换到 XHTML。使用 XHTML后 开发人员才逐渐养成了比较好的 HTML 编写规范
<!DOCTYPE html>，文档声明放在首行
<div></div>,推荐使用小写字母，虽然我们在书写代码时候，一些标签无论大小写都会被浏览器解析，但是如果我们在开发时使用大小写混写，美感度会大大降低，或许根本就不存在所谓的美感度吧，并且在后续的维护中，你会更加糟心。
注释：
在书写代码时切记一定要书写注释，一个开发项目少说也得个几千行吧，说大了几十万行都会有的，如果你不写注释，可能你今天加班写的代码，明天早上睡醒你都不知道自己写的是哪部分区域，或许甚至都不知道自己写的是什么了。

闭合标签：

<body>

    <!-- 页面内容 -->

    <div>这是我的第一个页面

</body>

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

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

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

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

CSS

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

    <style>

        /* 基于父级定位 */

    .heart{

     position: relative;

    }

    /* 使用伪元素画出两个图像,使用图形拼接来造出一个心 */

    .heart::after,

    .heart::before{

        content: "";

        position: absolute;

        top: 100px;

        left: 0;

        right: 0;

        margin: auto;

        width: 50px;

        height: 80px;

        background: red;

        /* borde-radius 有四个值 分别对应四个角，分别对应 左上 右上 右下 左下 */

        border-radius: 50px 50px 0 0;  

        /* 旋转元素，两个一起旋转。等下只需要调动一个即可 */

        transform: rotate(-45deg);

        transform-origin: 0 100%;

    }

    /* 旋转元素 使它和before伪元素 拼接成一个心 */

    .heart::after{

        left: -100px;

        transform: rotate(45deg);

        transform-origin: 100% 100%;

    }

    </style>

</head>

<body>

    <div class="heart"></div>

</body>

</html>

2.再来一个太极图

<div id="taiji"></div>

下面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写效果时，偶尔回顾下原生的，会发现很多乐趣。

重温HTML和CSS3的更多相关文章

  1. 重温CSS3

    基础不牢,地动山摇!没办法,只能重温"经典"! 1.CSS3边框:border-radius; box-shadow; border-image border-radius:r1, ...

  2. 重温 w3cshool css3

    border-radius: 2em 1em 4em / 0.5em 3em;  兼容性IE9+.Firefox 4+.Chrome.Safari 5+ 以及 Opera 支持 border-radi ...

  3. 一些上流的CSS3图片样式

    直接在图片元素上直接应用CSS3 inset box-shadow 或 border-radius时,浏览器并不能完美的渲染它们.不过,如果把这个图片用作背景图,你就可以可以给它添加任何样式了,浏览器 ...

  4. CSS3那些不为人知的高级属性

    尽管现代浏览器已经支持了众多的CSS3属性,但是大部分设计师和开发人员貌似依然在关注于一些很“主流”的属性,如border-radius.box-shadow或者transform等.它们有良好的文档 ...

  5. [转：CSS3-前端] CSS3发光和多种图片处理

    原文链接:http://www.qianduan.net/css3-image-styles.html 一些上流的CSS3图片样式 神飞 发表于 24. Sep, 2011, 分类: CSS , 46 ...

  6. 《图解CSS3》——笔记（二）

    作者:大漠 勘误:http://www.w3cplus.com/book-comment.html 2014年7月15日15:58:11 第二章  CSS3选择器 2.1  认识CSS选择器 2.1. ...

  7. css2和CSS3的background属性简写

    1.css2:background:background-color || url("") || no-repeat || scroll || 0 0;  css3:  backg ...

  8. 《图解CSS3：核心技术与案例实战》

    <图解CSS3:核心技术与案例实战> 基本信息 作者: 大漠 丛书名: Web开发技术丛书 出版社:机械工业出版社 ISBN:9787111469209 上架时间:2014-7-2 出版日 ...

  9. CSS3 高级属性

    尽管现代浏览器已经支持了众多的CSS3属性,但是大部分设计师和开发人员貌似依然在关注于一些很“主流”的属性,如border-radius.box-shadow或者transform等.它们有良好的文档 ...

随机推荐

  1. Nginx 在各种语言框架下的配置 - 以 codeigniter 为例

    对于各种语言常用的框架,Nginx 在官方的 Wiki 页面的 入门 部分提供了示例配置文件.具体可以参考这个页面的 Pre-canned Configurations 部分,这里列出了各种框架. 直 ...

  2. Vagrant 手册之 box - 版本

    原文地址 从 Vagrant 1.5 版本起,box 开始支持版本.这运行创建 box 的人提交更新,使用 box 的人检查更新.更新 box 并查看变更记录. 对于 Vagrant 新手,box 版 ...

  3. 【EWM系列】SAP EWM模块-修改任何内容都报错

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[EWM系列]SAP EWM模块-修改任何内容都 ...

  4. Activation Functions and Their Derivatives

    1. Sigmoid Function: when z=0,g'(z)=0.25 2. tanh Function: when x=0,tanh'(x)=1 3. Relu

  5. EasyUI在子tab基础上再打开新的tab标签页

    var title = "xxxx"; var content = '<iframe scrolling="auto" frameborder=" ...

  6. 《STL源码剖析》——第五、六：关联容器与算法

    第五章.关联容器  5.0.关联容器 标准的STL关联式容器分为set(集合)和map(映射表)两大类,以及这两大类的衍生体multiset(多键集合)和multimap(多键映射表).这些容器的底层 ...

  7. python开发之路-day01

    1.Python前世今生 python的创始人为吉多·范罗苏姆(Guido van Rossum).1989年的圣诞节期间,吉多·范罗苏姆为了在阿姆斯特丹打发时间,决心开发一个新的脚本解释程序,作为A ...

  8. Swift编程语言学习1.6——可选值

    可选值 使用可选(optionals)来处理值可能缺失的情况.可选表示: 有值,等于 x   或者没有值 注意: C 和 Objective-C 中并没有可选这个概念.最接近的是 Objective- ...

  9. Python中字符串的格式化

    字符串的格式化 格式化是对字符串进行格式表示的方式.使用槽({})按顺序格式化字符串. 格式化方式 <模板字符串>.format(<逗号分割参数>) "{ }:计算机 ...

  10. Python元类之由浅入深

    前言 ​ 元类属于python面向对象编程的深层次的魔法,非常重要,它使我们可以更好的掌控类从创建到消亡的整个生命周期过程.很多框架的源码中都使用到了元类.例如 Django Framework 中的 ...