1. Talk about the semantics of HTML, the new features of CSS3, and the common dom operations of js
answer:
1. What is HTML Semantics?
What is HTML semantics? As the name suggests, HTML semantics means that you can know the meaning of this part without knowing the content of HTML.
The significance of HTML semantics: When using HTML tags to build pages, avoid using non-semantic tags in a large space.
2. What are HTML semantic tags?
Semantic tags are easier to understand: a simple example is easy to understand:
<p></p> //Indicates that this is a line of text
Advantages of semantic tags:
It is good for structured page content, good for readable pages without CSS, good for seo, and good for code readability
3. Common semantic tags?
4. New features of CSS3?
1. Add a selector
attribute selector
Attribute selectors can select elements based on specific attributes of the element without resorting to class or id selectors.
div[name], select the div with name attribute
div[name="icon"], select the div whose name value starts with icon
Notice
Class selectors, attribute selectors, and pseudo-class selectors all have a weight of 10
Struct pseudo-class selector
Select elements according to the document structure, often used to select child elements inside according to the parent selector.
First group
<ul>
<li></li>
<li></li>
<li></li>
</ul>
ul:first-child{} choose ul first child in
ul li:first-child{} choose ul the first one called li child
ul:nth-child(2){} selected yl second child
For E:nth-child(n), n can be a number or a keyword or a formula.
Keyword: even even odd odd odd
When n is in parentheses, n will be calculated and added from 0 to the end, so writing n is equivalent to selecting all children.
Note that n must not be other letters.
There are other formulas besides n.
Second Group
The difference from the first group
<section>
<p>1</p>
<div>2</div>
<div>3</div>
</section>
section div:nth-child(1){} No one was selected because nth-child Will sort all the children from top to bottom, will first put p Select the label and go to see it again:The previous selector found that the selected label is not div，does not match, so no tags are selected.
section div:nth-of-type(1){} select the first div，just put div Tags are sorted out.
Pseudo-element selector
Pseudo-element selectors can use CSS to create new tags without the need for HTML tags, thus simplifying the HTML structure.
For example, this arrow can no longer be assembled with a big box, and a label can be added after the previous element using the pseudo-element selector.
Notice
Use pseudo-class selectors to avoid too many boxes in the page.
div::before{}
div::after{}
Both before and after are a box, and both are children of div. before is the child placed in front of the div, and after is the child placed behind the div. If the div has content before, it doesn't matter. before is always at the end In front, after is always at the end.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 200px;
height: 200px;
background-color: pink;
}
div::before{
content: 'I';
}
div::after{
content: 'piggy';
}
</style>
</head>
<body>
<div>yes</div>
</body>
</html>
Using Pseudo-Element Selectors
1. Cooperate with the font icon
2. Imitation potato effect
3. Pseudo element clears floating essence
2. Box model border-box
Setting border-box,padding and border will not change the size of the box. The premise is that the sum of border and padding cannot exceed the specified width and height
3. The picture becomes blurred
4. Calculate the box width width:calc function
5. Transition
Add whoever the mouse passes over
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 200px;
height: 200px;
background-color: pink;
/*Properties of change Time spent Motion profile When to start*/
transition: width 1s;
}
div:hover{
width: 400px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
If you want to write multiple attributes, use commas to separate them.
transition: width 1s,height 1s; It can also be like this, it will hover The specified direction changes, hover Several properties are specified, all change as many properties as possible transition: all 1s;
6.2D conversion
Move: translate
The unit of translate is a percentage. For example, the size of the box is 100px * 100px, and translateX is 50%, then it will move 50px to the right
Use translate to center the box horizontally and vertically
Rotation: rotate
Turn clockwise or counterclockwise
set rotation center point
transform-origin
Sets the center point of element transformation
7. Animation
The previously learned transition can only be moved when the mouse passes or leaves, and the animation can move by itself
Animation steps: first define the animation, and then use the animation
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
@keyframes walk {
0%{
transform: translateX(0px);
}
100%{
transform: translateX(1000px);
}
}
div{
width: 200px;
height: 200px;
background-color: pink;
animation-name: walk;
animation-duration: 5s;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
from is equivalent to 0%, to is equivalent to 100%
CSS animation properties
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
@keyframes walk {
0%{
transform: translateX(0px);
}
25%{
transform: translateX(1200px);
}
50%{
transform: translate(1200px,400px);
}
75%{
transform: translate(0,400px)
}
100%{
transform: translateY(0);
}
}
div{
width: 200px;
height: 200px;
background-color: pink;
/*animation name*/
animation-name: walk;
/*duration*/
animation-duration: 6s;
/*motion curve*/
animation-timing-function: ease-in-out;
/*Specifies when the animation starts*/
animation-delay: 0s;
/*Specifies the number of times to play the animation, infinite unlimited times*/
/*animation-iteration-count: infinite;*/
/*Whether to play in reverse direction*/
/*animation-direction: alternate;*/
/*The state after the animation ends, forwards maintains the state at the end of the animation*/
animation-fill-mode: forwards;
/* */
}
div:hover{
/* The animation stops when the mouse passes through the div, and the animation continues when the mouse leaves*/
animation-play-state: paused;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
speed curve
The step size is how many steps to reach the final state.
Use step to achieve typewriter effect
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
@keyframes walk {
0%{
width: 0;
}
100%{
width: 210px;
}
}
div {
overflow: hidden;
white-space: nowrap;
background-color: pink;
animation-name: walk;
animation-duration: 4s;
animation-timing-function: steps(13);
animation-fill-mode: forwards;
}
</style>
</head>
<body>
<div>Today is a good day ah ah ah ah ah ah</div>
</body>
</html>
5. What are common dom operations in js?
DOM
DOM is a standard model used to represent objects in documents in web pages, and it is a collection of structures composed of nodes and objects. When the browser parses HTML tags, it will build a DOM tree structure, and structure HTML into a tree model that js can recognize.
The hierarchical structure formed by the tree model can easily indicate the relationship between family members and express complex relationships concisely
Therefore, js also provides some dom operations
1. dom element acquisition
1.document.getElementById (value of id) Get the object of the element through id, and the return value is an object
// Get through the id attribute
let box=document.getElementById('box')
console.log(box)
2.document.getElementsByName(name) Gets the object through the name attribute, and the return value is an array, which is similar to the getElementById() method, but it is the name element of the query, not the id attribute.
<html>
<head>
<script type="text/javascript">
var myinput=document.getElementsByName("myInput");
console.log(myinput)
</script>
</head>
<body>
<input name="myInput" type="text" size="20" /><br />
<input name="myInput" type="text" size="20" /><br />
<input name="myInput" type="text" size="20" /><br />
</body>
</html>
3.document.getElementsByTagName() Get the object of the element through the tag, and the return value is an array
// Get attributes by name
let input=document.getElementsByTagName('input')
console.log(input)
4.document.getElementsByClassName() The object obtained by the class name, the return value is an array
// Obtained through the class attribute
let ul1=document.getElementsByClassName('ul1')[1]
console.log(ul1)
5.document.querySelector() css selector pattern, returns the first element that matches the pattern, and the result is an element; if no matching element is found, it returns null
// Get the corresponding node through the class selector, and you can get the first querySelector()
let ul2=document.querySelector('.ul')
// console.log(ul2)
6.document.querySelectorAll() css selector mode, returns all elements that match the mode, and the result is a class array
// Get the corresponding node through the class selector, and you can get this kind of node querySelectorAll()
let ul2=document.querySelectorAll('.ul')
// console.log(ul2)
Two, dom simple operation
1. Create: new label (element node) = document.createElement("label name")
2. Delete: parent node.removeChild( child node);
3. Insert: insertBefore (newly inserted node, reference node) insert a new node in front of a certain node
4. Append: appendChild (the name of the new node) Add a child node to the current object
<body>
<ul class="ul2">
<li>11</li>
<li>22</li>
<li>33</li>
</ul>
</body>
<script>
// create a node
let li=document.createElement("li")
// Add data to the node
li.innerText="My goodness"
// Append at the end
box.appendChild(li)
//insert node
ul2.insertBefore(li,ul2.firstElementChild)
// delete node
let ul2=document.querySelector('.ul2')
box.removeChild(ul2)
</script>
DOM related interview questions
Question 1, dom What kind of basic data structure? tree structure Question 2, Dom Commonly used API What? ①Obtain DOM node, and the node's property and Attribute ②get parent node get child node childNodes/ parentNode ③Add a node, delete a node Question 3, Dom node Attribute and Property Is there a difference? ①property only one JS Modification of properties of objects ②Attribute is true html Modification of label attributes Question 4. DOM Performance optimization. Change frequent operations to one-time operations, by creating document fragments, and finally adding document fragments at one time.