重温HTML和CSS3
重温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的更多相关文章
- 重温CSS3
基础不牢,地动山摇!没办法,只能重温"经典"! 1.CSS3边框:border-radius; box-shadow; border-image border-radius:r1, ...
- 重温 w3cshool css3
border-radius: 2em 1em 4em / 0.5em 3em; 兼容性IE9+.Firefox 4+.Chrome.Safari 5+ 以及 Opera 支持 border-radi ...
- 一些上流的CSS3图片样式
直接在图片元素上直接应用CSS3 inset box-shadow 或 border-radius时,浏览器并不能完美的渲染它们.不过,如果把这个图片用作背景图,你就可以可以给它添加任何样式了,浏览器 ...
- CSS3那些不为人知的高级属性
尽管现代浏览器已经支持了众多的CSS3属性,但是大部分设计师和开发人员貌似依然在关注于一些很“主流”的属性,如border-radius.box-shadow或者transform等.它们有良好的文档 ...
- [转：CSS3-前端] CSS3发光和多种图片处理
原文链接:http://www.qianduan.net/css3-image-styles.html 一些上流的CSS3图片样式 神飞 发表于 24. Sep, 2011, 分类: CSS , 46 ...
- 《图解CSS3》——笔记（二）
作者:大漠 勘误:http://www.w3cplus.com/book-comment.html 2014年7月15日15:58:11 第二章 CSS3选择器 2.1 认识CSS选择器 2.1. ...
- css2和CSS3的background属性简写
1.css2:background:background-color || url("") || no-repeat || scroll || 0 0; css3: backg ...
- 《图解CSS3：核心技术与案例实战》
<图解CSS3:核心技术与案例实战> 基本信息 作者: 大漠 丛书名: Web开发技术丛书 出版社:机械工业出版社 ISBN:9787111469209 上架时间:2014-7-2 出版日 ...
- CSS3 高级属性
尽管现代浏览器已经支持了众多的CSS3属性,但是大部分设计师和开发人员貌似依然在关注于一些很“主流”的属性,如border-radius.box-shadow或者transform等.它们有良好的文档 ...
随机推荐
- php和java的优势
现在市场上的电子商务软件基本上可归结为两大阵营,即PHP阵营和Java阵营.但对接触电子商务不久的用户来说,看到的往往只是它们的表相,只是明显的价格差异,却很难看出它们之间的实际差异.下面我们就为大家 ...
- response.getWriter()和jsp中的out对象的区别
(1) out和response.getWriter属于的类不同,前者是JspWriter,后者是java.io.PrintWriter.而JspWriter是一个抽象类, PrintWriter是一 ...
- 线上服务器CPU100%排查
某服务器上部署了若干tomcat实例,即若干垂直切分的Java站点服务,以及若干Java微服务,突然收到运维的CPU异常告警. 问:如何定位是哪个服务进程导致CPU过载,哪个线程导致CPU过载,哪段代 ...
- （Vue）移动端点击输入框，弹出键盘，底部被顶起问题
(Vue)移动端点击输入框,弹出键盘,底部被顶起问题:https://www.jianshu.com/p/210fbc846544 问题描述:Vue开发中,当我们相对于父视图的底部布局子控件时,需要用 ...
- 前端webpack & vue
地址 : https://blog.csdn.net/jiang7701037
- 洛谷 P1731 [NOI1999]生日蛋糕(搜索剪枝)
题目链接 https://www.luogu.org/problemnew/show/P1731 解题思路 既然看不出什么特殊的算法,显然是搜索... dfs(u,v,s,r0,h0)分别表示: u为 ...
- java 进销存 商户管理 系统 管理 库存管理 销售报表springmvc SSM项目
统介绍: 1.系统采用主流的 SSM 框架 jsp JSTL bootstrap html5 (PC浏览器使用) 2.springmvc +spring4.3.7+ mybaits3.3 SSM 普 ...
- Css3-颜色 color
一.颜色 RGBA RGB是一种色彩标准,是由红(R).绿(G).蓝(B)的变化以及相互叠加来得到各式各样的颜色.RGBA是在RGB的基础上增加了控制alpha透明度的参数. 语法:color:rgb ...
- Minor GC与Full GC分别在什么时候发生？
Minor GC 当Eden区没有足够空间进行分配时,虚拟机就会进行一次Minor GC 新生代的垃圾收集动作,采用的是复制算法 对于较大的对象,在Minor GC的时候可以直接进入老年代 Full ...
- Linux数据库还原备份
Xtrabackup是一个对InnoDB做数据备份的工具,支持在线热备份(备份时不影响数据读写),是商业备份工具InnoDBHotbackup的一个很好的替代品. https://www.percon ...