Black Horse Front-end Learning Notes III-Project actual Combat seo Optimization

Intro:   Initialize the css (css reset) to unify the browser style and put the commonly used initialization statements in the base.css.We put some common styles in common.css.First, put the favicon.ico icon un

Initialize the css (css reset) to unify the browser style and put the commonly used initialization statements in the base.css.

We put some common styles in common.css.

First, put the favicon.ico icon under the root directory.

In html, code is introduced between head.

& lt;link rel= “shortcut icon” href= “favicon.ico” type= “image/x-icon” / & gt;

We can make our own pictures and convert them into ico icons so that we can put them in our site.

Method steps:


Code: & lt;link rel= “shortcut icon” href= “favicon.ico” type= “image/x-icon” / & gt; note:

SEO is from the English Search Engine Optimization abbreviation, Chinese free translation as “search engine optimization”!

Common search engines, such as Baidu, Google, Yahoo, Sogou and so on.

SEO refers to the site optimization, website structure adjustment, website content construction, website code optimization, etc.) and off-site optimization, so as to improve the keyword ranking of the website and the exposure of the company’s products.

Title is irreplaceable, is the first important label of our inner page, is the search engine to understand the entrance to the page, and the best judgment point for the subject of the page.


Home page title: website name (product name)-introduction to the website

For example:

Excellent purchase-first choice of comprehensive online shopping-genuine low price, quality assurance, timely distribution, easy shopping!

Xiaomi Mall-Xiaomi 5s, Red Rice Note 4, Xiaomi MIX, Xiaomi Notebook official website

The effect of keywords is obviously reduced, but because of many search engines, the description part of the META tag of the web page is still used as the “content summary” of the search results. Is a brief description of what our website does. We advocate that Description as the overall business and theme summary of the site, most of the use of “we are.” “We offer.” “× × × net as.” “Tel: 010.” Or something.

Premium purchase Network:

& lt;meta name= “description” content= “content=” products buy JD.COM- professional comprehensive online shopping mall, sales of household appliances, digital communications, computers, home department stores, clothing, mother and infant, books, food and other tens of thousands of brands of quality goods. Convenient, honest service, to provide you with a pleasant online shopping experience! “/ & gt; attention:

& lt;meta name= “description” content= “Xiaomi Mall” directly operates all the products of Xiaomi Company, including Xiaomi MIX, Xiaomi Note 2, Red Rice Note 4, Red Rice 4, Smart hardware, Accessories and Xiaomi Life, while providing Xiaomi customer service and after-sale support. ” / & gt; 3). The Keywords keyword Keywords is the key word of the page and is one of the concerns of the search engine. Keywords should be limited to 6 to 8 keywords, e-commerce sites can be a little more.

Premium purchase Network:

& lt;meta name= “Keywords” content= online shopping, online shopping mall, mobile phone, notebook, computer, MP3,CD,VCD,DV, camera, digital, accessories, watch, memory card, Pin Youxin / & gt; millet net:

& lt;meta name= “keywords” content= “millet, Xiaomi 6, red rice Note4, millet MIX, millet mall” / & gt; 4). Summarize our web pages to do excellent, in line with the requirements of search engines, in order to let search engines give priority to the display of our web pages. So our website needs to do a lot of optimization, among which there are these three labels.

In general, the optimization words in the three tags are written by special optimists, and we will probably understand the specification.

Pictures have many advantages, but the disadvantages are obvious. For example, pictures not only increase the size of the total file, but also add a lot of additional “http requests,” which will greatly degrade the performance of the web page. What is more important is that the picture can not be “zoomed” very well, because the magnification and reduction of the picture will be distorted. We’ll learn the mobile response later, and in many cases we want our icons to be scalable. At this time, a very important technology has emerged, uh, not in the past, is once again “spoiled”. This is the font icon (iconfont)..

You can do what you can do like a picture, change transparency, rotation, etc. But the essence is actually text, can change the color at will, produce shadow, transparent effect and so on. It is smaller in size, but the information it carries has not been reduced. Almost all browser mobile devices are supported with essential medicine.

Overall, the font icon follows the following procedure:

If the icon is designed separately by our company, it needs the first step. This belongs to the work of UI designers, who create icon icons in vector graphics software such as illustrator or Sketch, then save them in svg format, and then give them to our front-end personnel.

If the icon is already available on the Internet, you can skip the first step and enter the third step.

When the UI designer gives us the svg file, we need to convert it into a font file that our page can use, and what needs to be generated is compatible for individual browsers.

Recommendation website:

Founded in 2011, IcoMoon launched the first custom icon font generator, which allows users to select the icons they need to make them font. There are many kinds of content, very comprehensive, the only regret is that the foreign server, open the network speed is slow.


This is a icon font font icon font library of Alimama M2UX, including Taobao icon library and Alimama icon library. You can use AI to make icons uploaded and generated. One word, free, free!

After uploading, the website will give us the svg pictures made by UI into our font format, and then download them down.

Of course, we do not need their own special icons, is to find a few icons on the Internet to use, the above two steps can be directly omitted, directly to the site just looking for favorite download use it.

After getting the compressed package, we learned that the font icon is essentially a font file. Be careful not to delete this compression package, which will be useful later.

The last step, the most important step, is to introduce the font file into our page.

& lt;img src= “media/222.png” / & gt; & lt;span> / lt;/span>. Declare fonts in the style: tell others the font we define (be sure to pay attention to the font file path) @ font-face {font-family: ‘icomoon’; src: url (‘ fonts/icomoon.eot?7kkyc2’); Src: url (‘fonts/icomoon.eot?7kkyc2#iefix’) format (‘ embedded-opentype’), url (‘fonts/icomoon.ttf?7kkyc2’) format (‘ truetype’), url (‘fonts/icomoon.woff?7kkyc2’) format (‘ woff’), url (‘fonts/icomoon.svg?7kkyc2#icomoon’) format (‘ svg’); font-weight: normal; font-style: normal;} 4. Use the font span {font-family: “icomoon”;} 7 for the box. Append font icon if the original font icon is not enough at work, we need to add a new font icon, but the original can not be deleted, continue to use, at this point we need to do so

Upload the selection.json in the compressed package from the new, then select the new icon you want, download the compressed package from the new, and replace the original file.

& lt;img src= “media/fontt5.png” / & gt;

The font format supported by different browsers is different, so it is necessary to know something about font format.

.ttf font is the most common font for Windows and Mac. It is a RAW format. Browsers that support this font are IE9+, Firefox3.5+, Chrome4+, Safari3+, Opera10+, iOS Mobile, Safari4.2+;.

.otf fonts are considered to be an original font format built into TureType, and browsers that support this font are Firefox3.5+, Chrome4.0+, Safari3.1+, Opera10.0+, iOS Mobile, Safari4.2+;

Woff font is the best format in Web font. It is an open compressed version of TrueType/OpenType and also supports the separation of meta-packets. The browsers that support this font are IE9+, Firefox3.5+, Chrome6+, Safari3.6+, Opera11.1+;.

.eot fonts are IE-specific fonts that can be created from TrueType, and browsers that support this font have IE4+;

.svg font is a format based on SVG font rendering, and browsers that support this font are Chrome4+, Safari3.1+, Opera10.0+, iOS Mobile Safari3.2+;

With the above knowledge, we need to prepare fonts in different formats for different browsers. We usually use font generation tools to help us generate fonts in various formats, so we don’t have to pay too much attention to the differences between font formats.

Named collection:

& lt;div class= “logo” & gt; & lt;h1> & lt;a href= “index.html” title= “title=” & gt; & lt;/a> & lt;/h1> & lt;/div>. Logo a {display: block; / * overflow: hidden;*/ width: 175px; height: 56px; background: url (.. / img/logo.png) no-repeat; / * text-indent:-999px / font-size: 0;} Note: the page with high information on the registration page does not require any seo optimization, but only the required title. Because you don’t need to be found out by the engine.

Is one of the subversive features of CSS3, and we can add effects to elements when they are transformed from one style to another without using Flash animation or JavaScript.

Transition animation: it is a gradual transition from one state to another, and is now often used in conjunction with: hover.

Syntax format:

Related Passages:

Leave a Reply

Your email address will not be published. Required fields are marked *