Development tools and key technologies: DW front-end
Author: Chen Chi Fan
Write time: 2019.5.3
For Doctype role before some confusion, it is the strict mode and mixed mode,
The difference between them:
1) <! DOCTYPE> is located at the top of the document, in the prior <html> tag. It tells the parser browser, what type of document to resolve this specification document.
2) the layout and JavaScript strict mode is the mode of operation of the browser supports the highest standards of operation.
3) in promiscuous mode, the loose pages display backwards-compatible way.
4) DOCTYPE does not exist or incorrectly formatted will result in the document presented in promiscuous mode.
What are inline elements have? What are block-level elements have? What are empty (void) element?
1) CSS specification, each display element has attributes, determine the type of the element, each display element has a default value, such as:
The default display attribute value div "block", known as "block level" element;
span default display attribute value is "inline", is "inline" element.
2) the line element has: ab span img input select strong
There are block-level elements: div ul ol li dl dt dd h1 h2 h3 h4 ... p
3) leading empty elements:
<br> <hr> <img> <input> <link> <meta>
Little is known:
<area> <base> <col> <command> <embed> <keygen> <param> <source> <track> <wbr>
for example:
<div class="nav_1">
<ul>
<li><a href="#">主页</a>
<ul>
<Li> <a href="#"> a column </a> </ li>
<Li> <a href="#"> a column </a> </ li>
</ul>
</li>
<li><a href="#">音乐</a>
<ul>
<Li> <a href="#"> a column </a> </ li>
<Li> <a href="#"> a column </a> </ li>
</ul>
</li>
<li><a href="#">视频</a>
<ul>
<Li> <a href="#"> a column </a> </ li>
<Li> <a href="#"> a column </a> </ li>
</ul>
</li>
<li><a href="#">新闻</a>
<ul>
<Li> <a href="#"> a column </a> </ li>
<Li> <a href="#"> a column </a> </ li>
</ul>
</li>
<li><a href="#">关于</a>
<ul>
<Li> <a href="#"> a column </a> </ li>
<Li> <a href="#"> a column </a> </ li>
</ul>
</li>
</ul>
</div>
FIG output effect:
Also you need to know what selectors, but those attributes can be inherited, and so on.
- id selector (# myid)
- Class selector (.myclassname)
- Tag selector (div, h1, p)
- Adjacent selector (h1 + p)
- Child selector (ul <li)
- Descendant selectors (li a)
Front page divided into three layers: a structural layer, presentation layer, layer behavior, of course, it will affect the CSS box model processing.
A simple example:
CSS part:
.item {
float: left;
width: 100px;
height: 100px;
background: blue;
}
#item1 {
margin-left: 0;
}
#item2 {
margin-left: 200px;
}
HTML part:
<div class="item" id="item1"></div>
<div class="item" id="item2"></div>
Output achieve results:
The next discussion is JSON is a lightweight data interchange format.
Which is based on a subset of JavaScript, having a simple data format,
Easy-to-read, small footprint features.
$(document).ready(function(){
$('form').submit(function() {
$("#result").html(($(this).serialize()));
return false;
});
});
Of course, in the event page ready to submit the associated processing code for a form,
Submit event correlation processor, the sequence of operation of the form data and the like.
Output effect:
jQuery stressed that the idea is to write less, do more (write less, do more). Its main features are: lightweight, powerful selectors, DOM manipulation package pretty reliable event handling mechanism, perfect Ajax processing, excellent browser compatibility, chain mode of operation, extensive plug-in support, open source products .
AJAX allows web pages such as asynchronous updates. It means that, for a certain part of the page is updated etc. without reloading the entire page.
Then you should request the data: asynchronous and synchronous requests distinction request.
- Synchronization: Submit request → → waiting for the server process returns processed,
- Asynchronous: → server processes the request triggered by an event.
Conclusion: identify problems and find solutions is the greatest progress.