preface
This article mainly summarizes the basic knowledge related to html
Tip: the following is the main content of this article
1. Entities
Multiple spaces written in the page will be resolved into one space by the browser.
Some special symbols cannot be written directly in HTML, such as the greater than sign and less than sign on both sides of the letter. If we need to write these special symbols in the page, we need to use the entities in HTML, that is, escape characters.
Syntax of entity: & name of entity
The following are some common special symbols: (spaces) & nbsp; (greater than) & gt; (less than) & lt; (copyright number) & copy;
2.meta label
The code is as follows (example):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--
meta It is mainly used to set some metadata in web pages. Metadata is not for users
charset Specifies the dataset for the web page
name The name of the specified data
content Contents of the specified data
keywords Represents the keyword of the website. Multiple keywords can be specified at the same time. The keyword is used between keywords,separate
description Used to specify the description of the website. The description of the website will be displayed in the search results of the search engine
title The contents of the tag are displayed as text on the hyperlink of the search results
-->
<meta name="keywords" content="HTML5,front end,CSS3">
<meta name="description" content="HTML5,front end,CSS3">
<!-- <meta http-equiv="refresh" content="3;url=https://www.baidu.com">
Redirect the page to another web site 3;3 Jump in seconds
-->
<!-- <meta http-equiv="refresh" content="3;url=https://www.baidu.com"> -->
<title>Document</title>
</head>
<body>
</body>
</html>
3. Semantic label
In web pages, html is specially used to take charge of the structure of the website, so when using HTML tags, we should pay attention to the semantics of the tags rather than their styles.
Block element:
*address - address
*blockquote - block reference
*center - align blocks
*dir - directory list
*div - commonly used, easy at block level, is also the main label of css layout
*dl - definition list
*fieldset - form control group
*Form - interactive form
*h1 - headline
*h2 - subtitle
*H3 - Level 3 title
*H4 - level 4 title
*H5 - level 5 title
*H6 - level 6 title
*hr - horizontal divider
* isindex - input prompt
*Menu - menu list
*NOFRAMES - frame optional content (this block content is displayed for browsers that do not support frame)
*noscript - optional script content (displayed for browsers that do not support script)
*ol - sort list
*p - paragraph
*pre - formatted text
*Table - table
*ul - non sorted list
* li
Inline elements:
*a - anchor point
*abbr - abbreviation
*Acronym - acronym
*b - bold (not recommended)
* bdo - bidi override
*big - large font
*br - line feed
*cite - Reference
*Code - computer code (required when referencing source code)
*dfn - define fields
*em - Emphasis
*Font - font setting (not recommended)
*i - italics
*img - picture
*Input - input box
*kbd - define keyboard text
*Label - table label
*q - short reference
*s - Center dash (not recommended)
*samp - define sample computer code
*select - item selection
*Small - small text
*span - Common inline containers that define blocks within text
*strike - middle dash
*strong - bold emphasis
*sub - subscript
*sup - superscript
*textarea - multiline text input box
*tt - telex text
*u - underline
*var - define variables
<!--
Block element( block element)
-In web pages, the layout of web pages is generally carried out through block elements
Always start on a new line;
Height, row height, outer margin and inner margin can be controlled;
The default width is 100 of its container%，Unless you set a width.
It can accommodate inline elements and other block elements
Inline element( inline element)Also called inline elements
-Inline elements are mainly used to wrap text
And other elements on the same line;
Height, row height, outer margin and inner margin cannot be changed;
Width is the width of its text or picture, which cannot be changed
Inline elements can only hold text or other inline elements
be careful:
Set width width Invalid.
Set height height Invalid, you can use line-height To set.
set up margin Only about margin Valid, up and down invalid.
set up padding Only about padding Valid, up and down are invalid. Note that the element range is increased, but it has no effect on the content around the element.
adopt display Property to switch between inline and block level elements(Mainly look at Chapter 2.3.4 Values):
-In general, inner elements are released within blocks, rather than block elements in inline elements
-Basically everything can be put in a block element
-p Element cannot put any block elements
When the browser parses the web page, it will automatically correct the non-conforming content in the web page
For example:
The tag is written outside the root element
p A block element is nested within the element
Division in root element head and body Unexpected child element
... ...
-->
<!--
Layout tags (structured semantic tags)
-->
<!--
header Represents the header of a web page
main Represents the body of a web page (only one in a page) main)
footer Represents the bottom of a web page
nav Represents navigation in a web page
aside Indicates other content related to the subject (sidebar)
article Represents a separate article
section Represents an independent block. It is used when none of the labels on it can represent it section
div Without semantics, it is used to represent a block. At present div Or our main layout element
span Inline elements, without any semantics, are generally used to select text in web pages
-->
<!--Title label: h1~h6，There are six levels of titles. Title tags are block elements(Exclusive row of elements)-->
<h1>Primary title</h1>
<h2>Secondary title</h2>
<h3>Tertiary title</h3>
<h4>Four level title</h4>
<h5>Five level title</h5>
<h6>Six level title</h6>
<!--Title Group
hgroup Tags are used to group headings. A group of related tags can be placed in the header at the same time hgroup
-->
<hgroup>
<h1>In the Quiet Night</h1>
<h2>Li Bai</h2>
</hgroup>
<!--
p A label represents a paragraph in a page
p It is also a block element
-->
<p>stay p The content in the label represents a paragraph</p>
<p>stay p The content in the label represents a paragraph</p>
<!--
em The label indicates the accentuation of pronunciation and intonation
Elements that do not monopolize a row in a page are called inline elements(inline element)
-->
<p>Today's weather<em>really<em>not bad</p>
<!--
strong Emphasize the important content
-->
<p>You must today<strong>finish one's homework!</strong></p>
Lu Xun said:
<!--
blockquote Represents a long reference
-->
<blockquote>
balabala
</blockquote>
<!-- q Represents a short reference -->
confucius said<q>I think twice a day!</q>
<!--
br Indicates a line break
-->
<br>
It's cold
4. List
There are three kinds of lists in html: ① ordered list, ② unordered list, and ③ defined list
Ordered list: use the ol tag to create an ordered list, and use li to represent list items
Unordered list: use the ul tag to create an unordered list, and use li to represent list items
Definition list: use the dl tag class to create a definition list, use dt to represent the defined content, and use dd to explain the content
Lists can be nested
5. Hyperlink
Hyperlinks allow us to jump from one page to another, or to another location on the current page.
Use label a class definition:
href specifies the target path to jump. The value can be the address of an external website or the address of an internal web page.
<a href="https://Www.baidu.com "> hyperlink</a>
target attribute: used to specify where the hyperlink is opened
Optional values:
-The default value of self is to open hyperlinks in the current web page
-blank opens a hyperlink on a new page
<a href="07.list.html" target="_blank">Hyperlinks</a> <br></br> <a href="#Bottom "> go to the bottom</a> <br></br> <a href="#P3 "> go to the third natural section</a> <br></br>
You can directly set the href of the hyperlink to #, so that after clicking the hyperlink, the page will not jump, but go to the top of the current page.
You can skip to the specified position of the pressing surface, just set the href attribute to the id attribute value of the # target element.
Unique and non duplicate id attribute: each tag can add an id attribute. The id attribute is the unique identification of the element. Duplicate id attributes cannot appear on the same page.
<a id="p3" href="#"> back to top</a>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Vero, quos? Suscipit autem, facere assumenda exercitationem nihil accusantium placeat iusto ea, eligendi eveniet, voluptatem aut nam ullam et nobis nisi deleniti?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi suscipit nisi modi ullam impedit? Autem aspernatur illo, repudiandae placeat possimus sint laudantium delectus ut officiis deserunt necessitatibus sunt fuga consequuntur?</p>
<p id="p3">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Vero, quos? Suscipit autem, facere assumenda exercitationem nihil accusantium placeat iusto ea, eligendi eveniet, voluptatem aut nam ullam et nobis nisi deleniti?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi suscipit nisi modi ullam impedit? Autem aspernatur illo, repudiandae placeat possimus sint laudantium delectus ut officiis deserunt necessitatibus sunt fuga consequuntur?</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Vero, quos? Suscipit autem, facere assumenda exercitationem nihil accusantium placeat iusto ea, eligendi eveniet, voluptatem aut nam ullam et nobis nisi deleniti?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi suscipit nisi modi ullam impedit? Autem aspernatur illo, repudiandae placeat possimus sint laudantium delectus ut officiis deserunt necessitatibus sunt fuga consequuntur?</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Vero, quos? Suscipit autem, facere assumenda exercitationem nihil accusantium placeat iusto ea, eligendi eveniet, voluptatem aut nam ullam et nobis nisi deleniti?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi suscipit nisi modi ullam impedit? Autem aspernatur illo, repudiandae placeat possimus sint laudantium delectus ut officiis deserunt necessitatibus sunt fuga consequuntur?</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Vero, quos? Suscipit autem, facere assumenda exercitationem nihil accusantium placeat iusto ea, eligendi eveniet, voluptatem aut nam ullam et nobis nisi deleniti?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi suscipit nisi modi ullam impedit? Autem aspernatur illo, repudiandae placeat possimus sint laudantium delectus ut officiis deserunt necessitatibus sunt fuga consequuntur?</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Vero, quos? Suscipit autem, facere assumenda exercitationem nihil accusantium placeat iusto ea, eligendi eveniet, voluptatem aut nam ullam et nobis nisi deleniti?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi suscipit nisi modi ullam impedit? Autem aspernatur illo, repudiandae placeat possimus sint laudantium delectus ut officiis deserunt necessitatibus sunt fuga consequuntur?</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Vero, quos? Suscipit autem, facere assumenda exercitationem nihil accusantium placeat iusto ea, eligendi eveniet, voluptatem aut nam ullam et nobis nisi deleniti?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi suscipit nisi modi ullam impedit? Autem aspernatur illo, repudiandae placeat possimus sint laudantium delectus ut officiis deserunt necessitatibus sunt fuga consequuntur?</p>
6. Picture label
The picture tag is used to introduce an external picture to the current page
Use img tag to introduce external pictures. Img tag is a self ending tag
img is a replacement element (between block and inline elements, it has the characteristics of two elements)
Properties:
src Property specifies the path of the external picture (the path rule is the same as that of the hyperlink)
alt The description of the picture will not be displayed by default. Some browsers will display it when the picture cannot be loaded
Search engines will alt To identify the picture if not written alt Property, the picture will not be recognized by the search engine
width The width of the picture in pixels
heigth Height of picture
-If you change only one height and width, the other will scale equally
be careful:
In general pc It is not recommended to change the size of the picture. The size of the picture can be cut as large as it needs
However, the mobile terminal often needs to scale the picture (large picture reduction)
Format of picture:
jpeg(jpg)
-The supported colors are rich, and do not support transparent effects and moving pictures
-Generally used to display photos
gif
-It supports few colors, simple and transparent, and dynamic graphics
-Single color, moving picture
png
-It supports rich colors, supports complex transparency, and does not support dynamic graphics
-Rich colors, complex and transparent dynamic pictures (specially designed for web pages)
webp
-This format is a new format launched by Google to represent images in web pages
-It has all the advantages of other picture formats, and the file is especially small
-Disadvantages: poor compatibility
base64
-Use pictures base64 Encode so that the picture can be converted into characters. Introduce the picture in the form of characters
-Generally, some images loaded with web pages will be used base64
The effect is the same. Use a small one
The effect is different. It works well
<img src="./img/1.gif" alt="squirrel">
<img width="200" height="250" src="http://Img.uuwtq.com/uploads/i_1_263912736x779368623_27. JPG "ALT =" Iron Man ">
7. Inline framework
Inline frame: used to introduce another page to the current page
src specifies the path of the web page to be imported
frameborder specifies the border of the inline frame
Inline frames are not retrieved by search engines
<iframe src="https:www.qq.com" width="800" height="600" frameborder="0"></iframe>
8. Audio and video
The audio tag is used to introduce an external audio file (replacement element) to the page
-When importing audio and video files, the user is not allowed to control the playback stop by default
Properties:
controls Allow users to control playback
autoplay Does the audio file play automatically
-If set autoplay，The music will play automatically when the page is opened
But at present, most browsers will not automatically play music
loop Does the music cycle
<!-- Except through src In addition to specifying the path of the external file, you can also use the source To specify the path to the file -->
<audio controls>
<!-- Sorry, your browser does not support playing audio, please upgrade your browser version! -->
<source src="source/audio.mp3">
<source src="source/audio.ogg">
<embed src="./source/audio.mp3" type="" width="500" height="300">
</audio>
The video tag is used to introduce an external video file (replacement element) to the page
<video controls>
<source src="./source/flower.webm">
<source src="./source/flower.mp4">
<embed src="./source/flower.mp4" type="video/mp4">
</video>
<iframe frameborder="0" src="https://v.qq.com/txp/iframe/player.html?vid=d0040cqqgtz" width="600" height="600" allowFullScreen="true"></iframe>
summary
The above is a summary of the basic knowledge of HTML. If there are mistakes, you are welcome to correct them!