I am small and live in Wuhan, do two years of new media, ready to use 6 months time to switch to the front end of the industry.

Lesson Objective for today

Yesterday learned HTML content, ready to learn to use yesterday today inside the < head > tag < title > and < meta > element specific meaning, it is suitable for learning a day, come on, little again again!!!!!!!!!!

<title>Elements of learning

I didn’t understand the

title I learned yesterday. I want to study it hard today

Basic instructions

The

tag defines the title of the document and is required in all HTML documents.

  • Define the title in the browser toolbar
  • Provides the title of the page when it is added to the favorites
  • Page title displayed in search engine results

Precautions!!

  • You cannot have more than one in an HTML document<title>Elements.
  • If it’s missing<title>Tags, documents are not valid as HTML.

Support properties

attribute describe
accesskey Sets keyboard shortcuts for accessing elements.
class Specify the element’s classname (classname)
contenteditable New Specifies whether the content of an element is editable.
contextmenu New Specifies the context menu for an element. When the user right-clicks the element, the context menu appears
data-* New Used to store custom data for the page
dir Sets the text orientation of the content in the element.
draggable New Specifies whether an element can be dragged
dropzone New Specifies whether to copy, move, or link, or delete data
hiddenNew hidden Attribute specifies that elements be hidden.
id Specifies the unique ID of the element
lang Sets the language code for the content in the element.
spellcheck New Check for misspelled elements
style Specify the inline style of an element
tabindex Sets the Tab control order of elements.
title Additional information for the specified element (can be displayed in the tooltip)
translate New Specifies whether the value of an element needs to be translated when the page loads

<meta>Metadata learning

metadata =
metadata =

Basic instructions

  • Meta tags describe some basic metadata.

  • Metadata is not displayed on the page, but is parsed by the browser.

  • Meta elements are usually used to specify the description of the page, keywords, last modification time of the file, author, and other metadata.

  • Metadata can be used by browsers (how to display content or reload a page), search engines (keywords), or other Web services.

  • is typically placed in the area.

Support properties

attribute value describe
charsetNew character_set Defines the character encoding of the document.
content text Defines meta information related to the HTTP-equiv or name attribute.
http-equiv content-type

default-style

refresh		 Associate the Content property with the HTTP header.
name application-name

author

description

generator

keywords		 Associate the Content property with a name.
scheme format/URI HTML5 is not supported. Defines the format used to translate the value of the Content property.

Using the instance

Define keywords for search engines

<meta name="keywords" content="Small and young and learning.">

Copy the code

Define the description for the web page

<meta name="description" content="Small and nice description test ~~~~~~">

Copy the code

Defining web page Authors

<meta name="author" content="Small and small.">

Copy the code

Page scaling configuration

For example, you want the width of the current ViewPort to be equal to the width of the device without allowing the user to manually scale.

<meta name="viewport" content="Width = device - width, initial - scale = 1.0, the maximum - scale = 1.0, user - scalable = 0">

Copy the code
attribute describe
width Set layout ViewPort width to a positive integer or string “width-device”
initial-scale Sets the initial zoom value of the page to a number, possibly with a decimal
minimum-scale The minimum zoom value allowed to the user is a number, which can be a decimal
maximum-scale The maximum zoom value allowed to the user is a number, which can be a decimal
height Set the height of the Layout ViewPort. This property is not important to us and is rarely used
user-scalable Whether to allow users to zoom in and out. The value is “no” or “yes”, where “no” means “no” and “yes” means “yes”
target-densitydpi Android specific, represents the target device density level, the role is to determinecssIn the1pxRepresents how many physical pixels. The value can be a numeric value orhigh-dpi 、 medium-dpi,low-dpi,device-dpiOne of these strings

Refresh the current page every 30 seconds

<meta http-equiv="refresh" content="30">

Copy the code

Optimized for handheld devices, mainly for older browsers that don’t recognize viewports, such as blackberry

<meta name="HandheldFriendly" content="true">

Copy the code

Microsoft’s old browser

<meta name="MobileOptimized" content="320">

Copy the code

Uc forces portrait

<meta name="screen-orientation" content="portrait">

Copy the code

QQ forced portrait screen

<meta name="x5-orientation" content="portrait">

Copy the code

UC forces full screen

<meta name="full-screen" content="yes">

Copy the code

QQ mandatory full screen

<meta name="x5-fullscreen" content="true">

Copy the code

UC Application Mode

<meta name="browsermode" content="application">

Copy the code

QQ Application Mode

<meta name="x5-page-mode" content="app">

Copy the code

Learn nouns today

The name of the Noun parsing
metadata Data that describes other Data, which describes specific Data. The greatest benefit of metadata is that it makes it possible to format the description and classification of information, thus making machine processing possible.

Try today

Just run the effect


Page refresh effect


HHHH, small and too fierce ~~~~~, page refresh. It’s not clear why the page on the right doesn’t display small, written content after refreshing. HHHH

Summary of today’s lesson

  • <title>Tabs control what is displayed on the page’s browser tabs
  • <meta>The tag specifies the description of the page, keywords, last modification time of the file, author, and other metadata that is not displayed on the page but will be parsed by the browser.

Today the mood

Today I learned a lot of new nouns, some of them make me confused, I hope to learn more things tomorrow ~~~

This article is formatted using MDNICE