This article is based on Yisi's article, and provides an expanded summary to introduce the meaning and usage scenarios of each tag and element in commonly used heads.
There are many tags and elements in the HTML head part, which involve browser rendering of web pages, SEO, etc. Each browser core and each domestic browser manufacturer have their own tag elements, which results in a lot of differences. In the era of mobile Internet, the head structure and meta elements of mobile terminals are even more important. Understanding the meaning of each tag and writing a head tag that meets your own needs is the purpose of this article. This article is based on Yishi's article and provides an expanded summary to introduce the meaning and usage scenarios of each tag and element in commonly used heads.
DOCTYPE
DOCTYPE(Document Type), this declaration is located at the frontmost position in the document, before the html tag, this tag informs the browser Which HTML or XHTML specification does the server document use?
DTD (Document Type Definition) declaration starts with , is not case-sensitive, and has no content in front. If there is other content (except spaces), the browser will open a weird mode under IE ( quirks mode) renders web pages. Public DTD, the name format is registration // organization // type tag // language, registration refers to whether the organization is registered by the International Organization for Standardization (ISO), + means yes, - means no. Organization is the name of the organization, such as: W3C. The type is usually DTD. A tag is a designated public text description, that is, a unique descriptive name for the referenced public text, which can be followed by a version number. The final language is the ISO 639 language identifier of the DTD language, such as: EN for English, ZH for Chinese. XHTML 1.0 can declare three DTD types. Represents strict version, transitional version, and frame-based HTML document respectively.
●HTML 4.01 strict
##XML/HTML Code Copy content to clipboard
- p>>
XML/HTML CodeCopy content to clipboard
- ##li>>
##●HTML 4.01 Frameset
##XML/HTML Code
/p>>
●The latest HTML5 introduces more concise writing. It is forward and backward compatible and is recommended for use.
Copy content to clipboard
/span>>
-
doctype has two main purposes in HTML.
●Verify the validity of documents.
●Weird mode
●Partially weird (nearly standard) mode About the document mode, browser mode, and strict mode ofIE browser
, weird mode, DOCTYPE tag, verbose mode? standard! Content. Declare the character encoding used in the document,XML/HTML Code
Copy content to clipboard
meta charset="utf-8">
html5 The previous web page would have written like this:
##XML/HTML CodeCopy Content to clipboard
- ##meta http-equiv="Content- Type" content="text/html; charset=utf-8"> These two are equivalent. You can read the details step by step: vs , so it is recommended to use the shorter one, which is easier to use. memory.
lang attribute
Simplified Chinese
##XML/HTML Code
Copy content to clipboard
##lang=" zh-cmn-Hans"> Traditional Chinese
Copy content to clipboard
- html
-
lang="zh-cmn-Hant">## Why lang="zh-cmn-Hans" instead of what we usually write As for lang="zh-CN", please read further: The statement at the head of the page should be lang="zh" or lang="zh-cn". Use the latest version of IE and Chrome first
XML/HTML Code
Copy content to clipboard
##meta
- http-equiv
- =
"X-UA-Compatible" content="IE=edge,chrome=1" /> 360 Using Google Chrome Frame
##< ;meta
name- =
- "renderer"
content="webkit"> 360 browser will immediately switch to the corresponding speed core after reading this tag. Also add
XML/HTML Code
to be on the safe side
meta
http-equiv- =
- "X-UA-Compatible"
content= "IE=Edge,chrome=1">## The effect that can be achieved by writing this way is that if Google Chrome Frame is installed, then Use GCF to render the page. If GCF is not installed, use the highest version of the IE kernel for rendering. Related links: Browser kernel control Meta tag documentation Baidu prohibits transcoding
When you open a webpage through Baidu mobile phone, Baidu may transcode your webpage , take off your clothes, and put an advertisement for dog skin plaster on your body. To do this, you can add
##XML/HTML Code## in the head
#Copy content to clipboard
meta http-equiv="Cache-Control" content="no-siteapp" />
SEO optimization part
Page title
Copy content to clipboard
- ##
title>your titletitle>##Page keywordskeywords
Copy content to clipboard
- meta
-
name="keywords" content="your keywords">Page description content description
## XML/HTML Code
Copy content to clipboard
meta
- name
="description" content="your description"> Define web page author author
##XML/HTML Code
meta
- name
- =
"author" content="author ,email address"> Define the web search engine indexing method, robotterms is a set of values separated by English commas ",", usually there are The following values are available: none, noindex, nofollow, all, index and follow. XML/HTML Code
Copy content to clipboard
# #
meta
- =
- "robots"
content="index,follow">Related links: WEB1038 - Tag contains an invalid valueviewport
Viewport can make the layout display better on mobile browsers. Usually write
##XML/HTML Code
meta name
=- "viewport"
-
content="width=device-width , initial-scale=1.0">##width=device-width will cause the iPhone 5 to open the page in WebApp full-screen mode after adding it to the home screen Black edges appear (http://bigc.at/ios-webapp-viewport-meta.orz)content Parameters: width viewport width (value/device-width) height viewport height (value/device-height)initial-scale initial scaling ratio
maximum-scale maximum scaling ratio minimum-scale minimum scaling ratio
minimal-ui A new attribute in iOS 7.1 beta 2 can minimize the upper and lower status bars when the page loads. This is a Boolean value and can be written directly like this:
XML/HTML CodeCopy content to clipboard
##meta name="viewport" content="width=device-width, initial-scale=1, minimal-ui">
XML/HTML CodeCopy content to clipboard
meta name="viewport" content="width=device-width,user- scalable=yes">
Suitable for iPhone 6 and iPhone 6plus then Need to write:
XML/HTML Code
Copy content to clipboard
meta name="viewport" content="width=375">
meta name="viewport " content="width=414">
##Mostly 4.7~5 inches The viewport width of Android devices is set to 360px, but it is 375px on iPhone 6. The viewport width of most 5.5-inch Android machines (such as Samsung Note) is 400, and it is 414px on iPhone 6 plus.
ios device
Title added to the home screen (new in iOS 6)
Copy content to clipboard
- meta name="apple-mobile-web-app-title" content="Title">
Copy content to clipboard
- ##
meta name="apple-mobile-web-app-capable" content="yes" /> ##Set the background color of the status bar
XML/HTML Code
name="apple-mobile-web-app-status-bar-style" content="black- translucent" />
Only takes effect when "apple-mobile-web-app-capable" content="yes"
content parameter:
default default value.
black The background of the status bar is black.
black-translucent The background of the status bar is black and translucent. If set to default or black , web page content starts from the bottom of the status bar. If set to black-translucent, the web page content fills the entire screen and the top will be obscured by the status bar.
Disable digit recognition as a phone number
##XML/HTML CodeCopy content To clipboard
- ##meta name="format-detection" content="telephone=no" /> iOS icon
rel parameter: apple-touch-icon
Pictureis automatically processed into rounded corners and highlights. apple-touch-icon-precomposed prohibits the system from automatically adding effects and displays the original design directly. iPhone and iTouch, default 57x57 pixels, must have the code as follows:
iPad, 72x72 pixels, optional, but recommended
The code is as follows:
Retina iPhone and Retina iTouch, 114x114 pixels, optional, but recommended
The code is as follows:
Retina iPad, 144x144 pixels, optional, but recommended
The code is as follows :
The IOS icon size is 180×180 on iPhone 6 plus and 120x120 on iPhone 6. To adapt to iPhone 6 plus, you need to add this
code as follows:
Official documentation:
https://developer.apple.com/ library/ios/qa/qa1686/_index.html Reference article: http://wxd.ctrip.com/blog/2013/09/ios7-hig-24/
The startup screen of iPad is Excluding the status bar area.
iPad portrait screen 768 x 1004 (standard resolution)
The code is as follows:
iPad vertical screen 1536x2008 ( Retina
The code is as follows:
iPad landscape screen 1024x748 (standard resolution)
The code is as follows:
< ;link rel="apple-touch-startup-image" sizes="1024x748" href="/Default-Portrait-1024x748.png" />
The startup screen of iPhone and iPod touch includes Status bar area.
iPhone/iPod Touch portrait screen 320x480 (standard resolution)
The code is as follows:
iPhone 5/iPod Touch 5 vertical screen 640x1136 (Retina)
The code is as follows:
Add Smart App Smart App Banner (iOS 6+ Safari)
The code is as follows:
The corresponding image size for iPhone 6 is 750×1294, and for iPhone 6 Plus The corresponding value is 1242×2148.
The code is as follows:
Windows 8
Windows 8 tile color
The code is as follows:
Windows 8 tile icon
code is as follows:
rss subscription
The code is as follows:
favicon icon
The code is as follows:
For a more detailed introduction to favicon, please refer to https://github.com/audreyr/favicon-cheat-sheet
Mobile version meta
XML/HTML CodeCopy content to clipboard
##meta name="viewport" content="width=device-width, initial-scale=1, user-scalable= no" />
- ##meta name="apple-mobile-web-app-capable" content="yes" />
- meta name="apple-mobile-web-app-status-bar-style" content="black" /> ##
- meta
name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
meta name="apple-mobile-web-app-capable" content="yes" />
##meta name="apple-mobile-web-app-status-bar- style" content="black" />
- ##meta name="format-detection" content="telphone=no, email=no" />
meta name="renderer" content="webkit ">
## - meta
http-equiv="X-UA-Compatible" content="IE=edge">#
-
##
meta - name
="HandheldFriendly" content="true">
-
##meta
name - =
"MobileOptimized" content="320">
- ##meta name =
- "screen-orientation"
content="portrait">
## -
content="portrait">
## - meta
name=
"full-screen" - content
="yes">
- meta
name=
"x5-fullscreen" - content
="true">
meta name="browsermode" content="application">
meta name="x5-page-mode" content="app">
##
- ##meta name="msapplication-tap-highlight" content="no"> ##
meta name="format-detection"content="telephone=no, email= no" />
##meta name
="x5-orientation"The above is the detailed content of Detailed introduction to HTML head tag. For more information, please follow other related articles on the PHP Chinese website!

本篇文章带大家了解一下HTML(超文本标记语言),介绍一下HTML的本质,HTML文档的结构、HTML文档的基本标签和图像标签、列表、表格标签、媒体元素、表单,希望对大家有所帮助!

不算。html是一种用来告知浏览器如何组织页面的标记语言,而CSS是一种用来表现HTML或XML等文件样式的样式设计语言;html和css不具备很强的逻辑性和流程控制功能,缺乏灵活性,且html和css不能按照人类的设计对一件工作进行重复的循环,直至得到让人类满意的答案。

总结了一些web前端面试(笔试)题分享给大家,本篇文章就先给大家分享HTML部分的笔试题(附答案),大家可以自己做做,看看能答对几个!

HTML5中画布标签是“<canvas>”。canvas标签用于图形的绘制,它只是一个矩形的图形容器,绘制图形必须通过脚本(通常是JavaScript)来完成;开发者可利用多种js方法来在canvas中绘制路径、盒、圆、字符以及添加图像等。

html5废弃了dir列表标签。dir标签被用来定义目录列表,一般和li标签配合使用,在dir标签对中通过li标签来设置列表项,语法“<dir><li>列表项值</li>...</dir>”。HTML5已经不支持dir,可使用ul标签取代。

在html中,document是文档对象的意思,代表浏览器窗口的文档;document对象是window对象的子对象,所以可通过“window.document”属性对其进行访问,每个载入浏览器的HTML文档都会成为Document对象。

html5支持boolean值属性;boolean值属性指是属性值为true或者false的属性,如input元素中的disabled属性,不使用该属性表示值为flase,不禁用元素,使用该属性可以不设置属性值表示值为true,禁用元素。


Hot AI Tools

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

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

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

AI Hentai Generator
Generate AI Hentai for free.

Hot Article

Hot Tools

EditPlus Chinese cracked version
Small size, syntax highlighting, does not support code prompt function

Dreamweaver Mac version
Visual web development tools

ZendStudio 13.5.1 Mac
Powerful PHP integrated development environment

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

mPDF
mPDF is a PHP library that can generate PDF files from UTF-8 encoded HTML. The original author, Ian Back, wrote mPDF to output PDF files "on the fly" from his website and handle different languages. It is slower than original scripts like HTML2FPDF and produces larger files when using Unicode fonts, but supports CSS styles etc. and has a lot of enhancements. Supports almost all languages, including RTL (Arabic and Hebrew) and CJK (Chinese, Japanese and Korean). Supports nested block-level elements (such as P, DIV),
