重温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. 【ABAP系列】SAP SAP中关于编码的解释

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[ABAP系列]SAP SAP中关于编码的解释 ...

  2. jdk (Java Development Kit)

    JDK是 Java 语言的软件开发工具包,主要用于移动设备.嵌入式设备上的java应用程序.JDK是整个java开发的核心,它包含了JAVA的运行环境(JVM+Java系统类库)和JAVA工具. JD ...

  3. hdu6228Tree

    Problem Description Consider a un-rooted tree T which is not the biological significance of tree or ...

  4. PA动画使用教程

    1.动画复制与动画粘贴.动画删除 PA的动画复制.动画粘贴不会覆盖原有动画: PPT自带的动画刷会覆盖原有动画: 注意: 超级属性的动画复制.粘贴有bug,应使用自带的动画刷: PA动画的复制.粘贴只 ...

  5. 最短路 dijkstra算法

    题目 给定n个点的带权有向图,求从1到n的路径中边权之和最小的路径. dijkstra实现方法 用dist[i]表示i这个点到原点的最短距离,一开始初始化为无穷大,然后将原点设为0. 用ok[i]表示 ...

  6. [Codeforces600E] Lomsat gelral(树上启发式合并)

    [Codeforces600E] Lomsat gelral(树上启发式合并) 题面 给出一棵N个点的树,求其所有子树内出现次数最多的颜色编号和.如果多种颜色出现次数相同,那么编号都要算进答案 N≤1 ...

  7. [BZOJ1604][Usaco2008 Open]Cow Neighborhoods 奶牛的邻居 (Treap+单调队列)

    题面 了解奶牛们的人都知道,奶牛喜欢成群结队.观察约翰的N(1≤N≤100000)只奶牛,你会发现她们已经结成了几个"群".每只奶牛在吃草的时候有一个独一无二的位置坐标Xi,Yi( ...

  8. P3806 【模板】点分治1(题解)(点分治)

    P3806 [模板]点分治1(题解)(点分治) 洛谷题目传送门 #include<iostream> #include<cstdlib> #include<cstdio& ...

  9. 开源企业IM-免费企业即时通讯-ENTBOOST V2014.183 Linux版本号正式公布

    版权声明:本文为博主原创文章,欢迎转载,转载请尽量保持原文章完整,谢谢! https://blog.csdn.net/yanghz/article/details/37807975 ENTBOOST, ...

  10. [转]ORACLE优化器RBO与CBO的区别

    RBO和CBO的基本概念 Oracle数据库中的优化器又叫查询优化器(Query Optimizer).它是SQL分析和执行的优化工具,它负责生成.制定SQL的执行计划.Oracle的优化器有两种,基 ...