Revisit the Web front-end basis
This space highlighted text, just record some of their own ideas, to consolidate under its own foundation
What web structure?
Html structure layer navigation, lists, paragraphs, images, links,
presentation layer css color, size, position,
behavior layer JavaScript, pop-up, switching.
What is html?
HTML is a language used to describe web pages.
Not a programming language, is a markup language
What is CSS?
CSS (Cascading Style Sheets)
is a method used performance such as HTML or XML document-style computer language. CSS can not be statically modified pages, with a variety of scripting languages can also be dynamically formatted for each element on the page.
What is javascript?
JavaScript scripting language, is a dynamically typed, weakly typed, prototype-based language, built-in support types. Widely used in client-side scripting language that was first used on HTML pages, HTML pages used to increase the dynamic function.
HTML
In 1993 a draft, to the present, has gone through more than twenty years, has also been updated to the current version of H5, html language as the standard language network, have an indispensable role in the history of the computer.
I. Writing your first page
<!-- <!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 language has an indispensable role in today's web page.
Two. HTML code standards
before many Web developers to code HTML specification poorly understood, in 2000 and 2010, many Web developers transition from HTML to XHTML. After using XHTML developers gradually develop good writing HTML specification
<! DOCTYPE html>, document declaration on the first line
<div> </ div>, recommend the use of lowercase letters, although we write the code in time, some of the labels whether the case will be resolved browser, but if we use mixed case to write in the development, will greatly reduce the degree of beauty, perhaps does not exist so-called beauty of it, and in subsequent maintenance, you will be more Zaoxin .
Notes :
When writing the code must remember to write notes, a development project less have a few thousand okay, say hundreds of thousands of lines of code big will be there, if you do not write comments, you may write to work overtime today, you wake up tomorrow morning and do not know which part is to write their own area, and perhaps do not even know what they write is a.
Closing tag :
<body>
<!-- 页面内容 -->
<div>这是我的第一个页面
</body>Like the above code, even though it can be read out of the normal browser,
such consequences would not have too much to say it.
Attribute name : Recommended use lowercase names when writing HTML, it should not named, in accordance with, the old-timers like the navigation bar, we generally named nav, in css styles, one can see that if you give it a name a, that is all we are looking for quite a while.
Picture properties : Generally when you insert a picture with img, easily write the alt attribute, so that even when poor customer network can still see what this part of the region, increasing the sense of the user's experience.
Avoid long line of code, blank lines, indentation, not in the html code to write css and javascript etc.
CSS
CSS began in 1999, to date, is also nearly two decades, css3 appeared to provide a great working efficiency of html style, before, html staff wanted to draw a rounded, need to use a lot of html tags or insert all kinds of pictures to synthesize, but the css occurs only need to use a border-radius property can be completed. Liberated from the developer from the work cut out map, a fillet, a border-radius can be solved
using two writing styles css
1. dummy write heart-shaped elements
<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. FIG again a Taiji
<div id="taiji"></div>The following css styles
#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;
}Add animation to give it, let it go on uniform endless rotation
@keyframes myfirst {
0% {
/* 当在0%时，让他旋转0度 */
transform: rotate(0deg);
}
100% {
/* 当在100%时，让他旋转360度 */
transform: rotate(360deg);
}
}