This time I will introduce to you the common usage of HTML meta tags. What are the precautions when using HTML meta tags? Here are practical cases, let’s take a look.
What is mata tag
element can provide meta-information about the page, such as description and key for search index and update frequency word. The
tag is located at the head of the document and does not contain any content. The attribute of the tag defines the name/value pair associated with the document.
meta is an auxiliary tag in the head area of ??html language. We can see meta tags in almost all web pages, but they cannot be seen in the browser's display page. Maybe you think these codes are dispensable. In fact, the meta tag is very important and will bring practical effects to your website. For example, the website description () will be reflected in the search engine index. For example, use the meta tag to set the encoding of the website to gbk2312 or utf-8. The meta tag setting key Word
Basic Grammar
<meta name="keywords" content="關(guān)鍵字1,關(guān)鍵字2,關(guān)鍵字3....">
The function of the keyword tag is to tell the search engine what the content of the website is about, so as to facilitate the search engine to define and index the website. Keywords and keywords They are separated by commas under the English input method, and the length of the keywords is generally not more than 100 characters.
For example, our website is about learning web development technology, and the keyword description can be written like this:
<meta name="keywords" content="html教程,css教程,javascript教程">
When users search for these keywords in search engines, your website will appear in the results. However, because many cheaters (black hat SEO) in the early days were conducive to keyword stacking cheats, current search engines (Baidu) do not No longer so sensitive.
meta tag setting description
Grammar format:
<meta name=“discription” content=“描述的內(nèi)容”>
The description of the web page is very important and can be directly reflected in the search engine. For example, open the Baidu website search " Sina" see the following page
meta tag settingCharacter set
Grammar format:
<meta http-equiv =“content-type” content=“text/html; charset="編碼格式”>
Common encoding formats include Chinese encoding (gbk2312) and international encoding (UTF-8), gbk2312 is a Chinese encoding, if your website content is all in Chinese, use gbk2312 UTF-8 is a universal encoding for text around the world (including Chinese and English). The main difference between them is that gbk2312 is specifically for Chinese Created, one Chinese character occupies 2 characters. UTF-8 is a universal Chinese character occupies 3 bytes. In the early days, network bandwidth resources were scarce, so using gbk2312 encoding can save bandwidth and improve the opening speed of web pages, but now our family bandwidth is limited Starting from 4M, those bytes saved are completely ignored.
Example:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" >
When we browse the web, most of us have encountered garbled pages. The encoding format is to let the browser parse in the set editing format. If the encoding format is not If used correctly, garbled characters will appear. So I recommend using the universal UTF-8 encoding, so that all browsers in the world can display normally when accessing our web pages.
meta tag sets automatic refresh time
Syntax Format
<meta http-equiv=“refresh” content=“刷新間隔的時(shí)間”>
The refresh time is in seconds. For example, the forum page can only see new posts after refreshing. Pages that update quickly like this can add automatic refresh code to ensure that the latest posts can be seen. Page.
Example:
<meta http-equiv=“refresh” content=“3”>
Here we demonstrate setting the time to 3 seconds, please test it yourself.
meta tag setting automatically jumps to a new page
Grammar format
<meta http-equiv=“refresh” content=“跳轉(zhuǎn)間隔的秒數(shù); Url="新網(wǎng)頁(yè)地址”>
Example:
<meta http-equiv=“refresh” content=“3; Url="http://www.adminwang.com”>
When the browser opens this page, it will automatically jump to the homepage of our website after 3 seconds.
Meta tag setting disables caching
Grammar format
<meta http-equiv="cache-control" content="no-cache" />
We know that browsers have a caching mechanism, which means that when you open a web page, it will be automatically saved locally. The purpose of this is to directly call the file in the cache when you visit it again within a certain period of time to improve the access speed. . But for pages like forums that change from time to time, we don’t want the browser to save cache files, so we can add this code. There is another use in program development. When debugging a program, you need to check the effect of code modifications from time to time. You can use this code to disable browsing. Server cache.
Another way to write:
<meta http-equiv="pragma" content="no-cache" >
I believe you have mastered the method after reading these cases. For more exciting information, please pay attention to other related articles on the PHP Chinese website!
Related reading:
Detailed explanation of examples of HTML text formatting
Summary of frequently used tags in html
How to use Html web table structured markup
The above is the detailed content of Introduction to common uses of HTML meta tags. For more information, please follow other related articles on the PHP Chinese website!

Hot AI Tools

Undress AI Tool
Undress images for free

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Clothoff.io
AI clothes remover

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

To get started with HTML quickly, you only need to master a few basic tags to build a web skeleton. 1. The page structure is essential, and, which is the root element, contains meta information, and is the content display area. 2. Use the title. The higher the level, the smaller the number. Use tags to segment the text to avoid skipping the level. 3. The link uses tags and matches the href attributes, and the image uses tags and contains src and alt attributes. 4. The list is divided into unordered lists and ordered lists. Each entry is represented and must be nested in the list. 5. Beginners don’t have to force memorize all tags. It is more efficient to write and check them while you are writing. Master the structure, text, links, pictures and lists to create basic web pages.

ShadowDOM is a technology used in web component technology to create isolated DOM subtrees. 1. It allows the mount of an independent DOM structure on ordinary HTML elements, with its own styles and behaviors, and does not affect the main document; 2. Created through JavaScript, such as using the attachShadow method and setting the mode to open; 3. When used in combination with HTML, it has three major features: clear structure, style isolation and content projection (slot); 4. Notes include complex debugging, style scope control, performance overhead and framework compatibility issues. In short, ShadowDOM provides native encapsulation capabilities for building reusable and non-polluting UI components.

Image not displayed is usually caused by a wrong file path, incorrect file name or extension, HTML syntax issues, or browser cache. 1. Make sure that the src path is consistent with the actual location of the file and use the correct relative path; 2. Check whether the file name case and extension match exactly, and verify whether the image can be loaded by directly entering the URL; 3. Check whether the img tag syntax is correct, ensure that there are no redundant characters and the alt attribute value is appropriate; 4. Try to force refresh the page, clear the cache, or use incognito mode to eliminate cache interference. Troubleshooting in this order can solve most HTML image display problems.

The style placement method needs to be selected according to the scene. 1. Inline is suitable for temporary modification of single elements or dynamic JS control, such as the button color changes with operation; 2. Internal CSS is suitable for projects with few pages and simple structure, which is convenient for centralized management of styles, such as basic style settings of login pages; 3. Priority is given to reuse, maintenance and performance, and it is better to split external link CSS files for large projects.

?Youcannotnesttagsinsideanothertagbecauseit’sinvalidHTML;browsersautomaticallyclosethefirstbeforeopeningthenext,resultinginseparateparagraphs.?Instead,useinlineelementslike,,orforstylingwithinaparagraph,orblockcontainerslikeortogroupmultipleparagraph

Thenameattributeinaninputtagisusedtoidentifytheinputwhentheformissubmitted;itservesasthekeyinthekey-valuepairsenttotheserver,wheretheuser'sinputisthevalue.1.Whenaformissubmitted,thenameattributebecomesthekeyandtheinputvaluebecomesthevalueinthedatasen

Pre-resolving DNS can speed up page loading speed, and using HTML link tags for DNS pre-resolving is an effective method; DNSPrefetching saves subsequent request time by resolving domain names in advance; applicable scenarios include third-party fonts, advertising statistics scripts, resource hosting and CDN domain names; it is recommended to prioritize the main page dependency resources, reasonably control the number between 3 and 5, and use it with preconnect to better effect.

To create an HTML unordered list, you need to use a tag to define a list container. Each list item is wrapped with a tag, and the browser will automatically add bullets; 1. Create a list with a tag; 2. Each list item is defined with a tag; 3. The browser automatically generates default dot symbols; 4. Sublists can be implemented through nesting; 5. Use the list-style-type attribute of CSS to modify the symbol style, such as disc, circle, square, or none; use these tags correctly to generate a standard unordered list.
