Python Learning 16th Day HTML Front End content summary

One, CSS knowledge summary                                                                                                1, CSS Properties

CSS properties include the following:

Position: The positioning type of the specified element

Background: Property sets all background properties in a declaration

The following properties can be set:

(1) Background-color

(2) Background-position

(3) Background-size

(4) Background-image

Text-align: Horizontal alignment of text in a specified element

Margin: Set all margin properties in a declaration

padding: Set all padding properties in a declaration

Font-size: You can set the font size

Z-index: Sets the stacking order of elements, elements with higher stacking order are always in front of lower stacking order elements

Over-flow: Specifies whether to crop the top and bottom edges of the content-if overflow element content area

: hover: Used to select the mouse pointer floating in the above element

Opacity: Sets the opacity level of an element

Float (Clear:both): Sets the direction in which the element floats

Line-height: Sets the distance between rows

Border: Setting borders

Color: Set the font color

Display: Specifies the type of box that the element should generate

2, page layout

(1) Position value fiexd permanently fixed in a window relative individual settings are not effective, absolute individual settings will vary depending on the position of the pulley

(2) Two kinds of page layout CSS code

First, the left menu follows the scroll bar

. pd-content. menu{
Position:absolute;top:48px;left:0;bottom:0;width:200pxbaclground-color: #dddddd;
}
. pd-content. content{
Position:absolute;
top:48px;
right:0;
bottom:0;
left:200px;
Background-color:purple;
}

The second, the left and the top do not move, compared to the first only need to add the Overflow:auto property in the Content property

. pd-content. Menu{position:absolute;top:48px;left:0;bottom:0;width:200pxbaclground-color: #dddddd;}. Pd-content. content{position:absolute; top:48px; right:0; bottom:0; left:200px; background-color:purple; overflow: Auto;}

3, User login bar Settings

(1) The head of the household is round

border-radius:50%

(2) Div Mouse is moved from top to bottom, and the following div is discolored

<! DOCTYPE html>
(3) Setting small icons
Download font-awesome-4.7.0, write <link rel= "Stylensheet" href= "Font-awesome-4.7.0/css/font-awesome.min.css" in the CSS area/> Add a compressed version of CSS content
 Second, Javascript Knowledge review
1,javascript existence Form
(1) The JavaScript files in other directories can be introduced via SRC, and SRC needs to be placed at the bottom of the body content.
(2) Write script code in head
2, the difference between a global variable and a local variable is whether there is a var before the variable, and the variable with the Var label is a local variable
3, Data type: (1) Number (2) string (3) Array (4) object (for example, dictionary type)
4, loop, two new types
(1) for (var item in [11,22,33]) {console.log (item (output Index)}
(2) var arra = [11,22,32,33] for (Var i=0;i<arra.lenght;i=i+1) {}
5, conditional statement
(1) if () {}else if () {}else{}
where if judgment = = = value Equal = = = value and type are equal
(2) switch (name) {
Case ' 1 ':
age=123;
Break
Case ' 2 '
age=456;
Break
Default
Age = 777;
}
6, function func (ARG) {
Return arg+1
}
var result = func (1)
Console.log (result);
7,javascript function Explanation
(1) Normal function func (ARG) {return arg+1}
(2) Anonymous functions setinterval (function () {console.log (123);},5000)
(3) Self-executing function {function (ARG) {Console.log (ARG)}} (1)
8, serialization
Li=[11,22,33,4,5]s=json.stringify (LI)   #将列表转化成字符串newLi =json.parse (s) #将字符串转化成列表
9, escaping Chinese
url = "https://www.sougou.com/web?query= understanding" encodeURI (URL)           #转义url中的英文newurl =encodeuri (URL)  decodeURI ( Newurl)       #还原urlescape ()                       #对字符串转义unescape ()                    #给转义字符串解码
10,eval
val = eval (expression)         exec (execution code) value=eval ("+")
11, Time
var d = new Date ()   #获取当前时间n = D.getminutes () +4d.setminutest (n)       #设置时间
12, scope
Other language public void Func () {if (1==1) {string name= "Java";             Console.WriteLine (name);                    #可以正常返回} Console.WriteLine (name);               #报错 Func () in other languages, the code block is scoped, Python has functions as a scope, 1,javascript functions as the scope function Func () {if (1==1) {                     String Name= "Java";                              } Console.WriteLine (name);        Func () #可以正常返回2, the scope of the function was created 3 before the function was called, the scope of the function exists in scope, and is also created before being called xo= "Alex" function func () {        var xo= ' Eric ' function inner () {//var xo= ' Tony ' Console.log (XO); } inner ()}func () No Tony returns Eric, no Eric returns alexxo= "Alex" function func () {var xo= ' Eric ' function        Inner () {var xo= ' Tony ' Console.log (XO);     } return inner;   }var ret = func () #返回inner function Object ret () #执行inner函数 eventually returns ericxo= "Alex" function func () {var xo= ' Eric '     function inner () {var xo= ' Tony ' Console.log (XO);        } var xo = ' Tony ';     return inner;    }var ret = func () #返回inner function Object ret () #执行inner函数 eventually returns TONY4, the local variable in the function declares function func () {Console.log (Xxoo) in advance;  var xxoo = ' Alex ' #提前只声明var Xxoo not assigned a value}func ();//undefined
14,javascript Object-oriented
function foo () {     this.name = ' Alex ';     #this相当于self}var object= new foo ();  #创建一个object Object function Foo (n) {     this.name = n     #this相当于self}var object= New Foo (' we ');  #创建一个object objects and functions are different 1,this objects (Python self) 2, when creating an object, the new function () prototype functions Foo (n) {    this.name = n;                 #只创建一次 prototype is also created only once}foo.prototype = {                 #原型类似于字典   ' sayname ': function () {       console.log (this.name)   }}obj1 = New Foo (' we ')           #通过obj1 find the class first and then find the prototype execution obj2 = new Foo (' Wee ')
Three, DOM
1, find
(1) Direct search
(2) Indirect search
2, (1) InnerText extract text content InnerHTML Extract HTML content both can be directly assigned values
obj.innertext= "<a href= ' http://www.oldboyedu.com ' > Old boy </a>"
Obj.innerhtml= "<a href= ' http://www.oldboyedu.com ' > Old boy </a>"
(2) value takes effect on the input tag and gets the value in the current tag
Take effect on the select tag to get the value selected (Selectindex)
Take effect on the textarea tag, get the value in it
(3) Search box code implementation
<! DOCTYPE html>
 Python Learning 16th Day HTML front-end content summary