HTML5+CSS3 note 01 (for personal use)

Posted by phpnwx on Fri, 04 Feb 2022 10:34:13 +0100

First acquaintance with web

Composition of WEB standards:

constitute	language	explain
structure	HTML	Page elements and content
performance	CSS	Appearance and location of web page elements (page elements)
behavior	JavaScript	Definition of web page model and page interaction

Chapter 1 getting to know HTML5

1 label

<!DOCTYPE html> <!-- Document type declaration: used to explain to the browser which type of document is used in the current file HTML or xhtml standard specification  -->
<html lang="en"><!-- Root tag: used to tell the browser that it is a HTML file -->
<head> <!-- Header label: used to encapsulate other labels located at the head -->
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head><!-- End of header label -->
</body><!--Body label: Everything displayed in the browser must be in body Inside label   -->
    Opening speed structure: shift+! Press enter
    Comment shortcuts: CTRL+/
</body><!-- End of subject -->
</html><!-- End of document -->

1.1 label overview

The so-called tag is the compilation command that represents a function in the "< >" symbol, also known as HTML tag or HTML element
Classification of labels:
Double Tags: start tag + end tag, such as < HTML >, < / HTML >
Syntax format:

<Tag name>content</Tag name>

Single tab: a tab that completes the description of the whole function
Shortcut key: CTRL+/
Syntax format:

<Tag name/>

Note label is a single tab with special functions

1.2 relationship between labels

Parent-child relationship (nested relationship): in the process of nesting labels, you must first end the labels closest to the content, and then close the labels in order from inside to outside.
Sibling relationship (side-by-side relationship): two tags are at the same level and do not contain a relationship.

1.3 label attributes

Syntax format:

<Tag name attribute 1="Attribute value" Attribute 2="Attribute value" ···></Tag name>
<p align="center">I'm centered text</p>

1.4 HTML5 document header related labels

1 < title >
< title > is used to define the tag (the name of the web page) of the HTML page, which is located inside the head tag and has only one pair
2 define page element information label < meta / >
< meta / > is a single tab, which does not contain any content and only represents the relevant information of the web page. Through the two sets of attributes of the tag, you can define the relevant parameters of the page.

<meta  name="name" content="value"/>

The HTTP equiv attribute provides the parameter type and the content attribute provides the corresponding parameter value, which simplifies the writing of the character set in HTML5. The code is as follows: ` ` ` HTML ` ` ` ` ` ## 2 text control tag ### title tag

<hn align="Alignment( left[[default],rifht,center)">Title Text</hn>
n The value of is: 1~6，Representative 1~6 Level title

    <h1>Primary title(Default alignment, left alignment)</h1>
    <hr>
    <h2 align="left">Secondary title (left aligned)</h2>
    <hr>
    <h3 align ="right">Third level title (right justified)</h3>
    <hr>
    <h4 align="center">Level 4 title (middle aligned)</h4>

2 text control label

2.1 paragraph labels

<p align="Alignment">Paragraph Text </p>

2.2 horizontal line label

<hr>

2.3 line feed labels

<br>

3 text style label

3.1 text formatting labels

	<strong>Bold text</strong>
    <ins>Underline</ins><br>
    <em>Slash</em><br>
    <del>Delete line</del><br>
    <cite>quote</cite>
    &nbsp - Space character

4 code summary

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>My first page</title>
</head>
<body>
   <!-- notes: ctrl + / -->
   <h1>Primary title(Default alignment, left alignment)</h1>
   <hr>
   <h2 align="left">Secondary title (left aligned)</h2>
   <hr>
   <h3 align ="right">Third level title (right justified)</h3>
   <hr>
   <h4 align="center">Level 4 title (middle aligned)</h4>
   <strong>Bold text</strong>
   <ins>Underline</ins><br>
   <em>Slash</em><br>
   <del>Delete line</del><br>
   <p>Swiss Army knife It can be said to be the key word of this week. Many projects use this word to describe its characteristics: for example, it can comprehensively solve the browser "network" operation CyberChef <br> It is convenient for you to encrypt and decode data, and help you deal with it JSON Data DevToys,It is convenient to query data files dsq，Are very practical development tools, in line with the characteristics of "Swiss Army Knife".
       <br>
       Of course, there are some easy-to-use new and open source tools from big manufacturers, such as animation tools used in the glory of the king libpag，There are also pure and standard convolution neural networks ConvNeXt，It is convenient for you to do desktop window development Windows.js...
       The following is excerpted from Weibo@HelloGitHub of GitHub Trending and Hacker News Hot post (abbreviation) HN Hot post),<br>
       Option criteria: new releases | practical | Interesting, according to the project release Time classification, release time no more than 14 day All items will be labeled New，If there is no such mark, it indicates the project release More than half a month. Due to the limited space of this article, some projects have not been shown in this article. I hope you will know 🌝</p>
       <hr>
   <p><font color="blue">Copyright notice: This article is CSDN Blogger「Cutting slight cold」Original articles, follow CC 4.0 BY-SA Copyright agreement, please attach the original source link and this statement for reprint.
       Original link: https://blog.csdn.net/a419240016/article/details/122677852</font></p>
       <img src="C:\Users\23306\Pictures\Camera Roll/41e4ec2a94d377093b54f5f7e34c96b3.jpeg" alt="I am a landscape map" title="A landscape map">
   <img src="C:\Users\23306\Pictures\Camera Roll/cat.gif" alt="">
   <img src="cat.gif" alt="zheshiyizhimao">
   <img src="cat.gif" alt="">
   <img src="cat.gif" alt="">
   <img src="cat.gif" alt="">
   <img src="cat.gif" alt="">
   <img src="cat.gif" alt="">
</body>
</html>

5 picture label

code:

<img src=" "alt="">
<img src="./file name.suffix"><!-- ./current path-->

src
Attribute name: src
Attribute value: the path of the target image
Note:
1. The current web page and file are in the same folder, and the path can be written directly as the name of the target image * * * (including suffix)
alt***
Attribute name: alt (text displayed when the picture is not displayed)
Attribute values: replacing text
title
Attribute name: title
Attribute values: prompt text
Note: the text is displayed only when the mouse hovers

6. Introduction of path

Absolute path:
It refers to the absolute location in the directory, which can directly reach the target location, usually starting from the drive letter or the complete network address.
Relative path:
Current file: current HTML page
Target file: the picture you are looking for
Classification of relative paths:
Peer Directory:

<img src="Target picture.suffix">or<img src="./Target picture.suffix">

Subordinate Directory:

<img src="Folder name/Target file.suffix">

Parent directory:

<img src="../Target picture.suffix">

7 audio label

Label properties:
src: URL of music
Preload: preload
Autoplay: autoplay
Loop: loop playback
controls: the browser's own control bar

9 link labels

<a href="Website or./Target page">Text content</a>
be careful:
*When we didn't know the jump address at the beginning of website development, href The value of is written as #(empty connection)
*href:Jump address

Properties of the connection label:
- Attribute name: target
- Attribute value: the open form of the target web page
  - -self: default value, jump in the current window (overwrite the original web page)
  - -blank: jump to a new page
    index.html default main page

10 list label

Unordered list
Composition of list labels:
ul -- represents the whole of the unordered list, which is used to wrap the li tag
li -- represents each item in the unordered list, which is used to contain the content of each line
Salient features: each item in the list displays the small circle mark by default
Ordered list
Composition of list labels:
ol -- indicates the whole with sequence table, which is used to wrap the li label
li -- represents each item with a sequence table, which is used to contain the content of each row
Custom list
dl -- represents the whole of the user-defined list, which is used to wrap the dt/dd label
dt -- indicates the title of the custom list
dd -- represents each item of the subject in the custom list
Display features: the indent effect will be displayed by default before dd
Summary of points for attention:
li tags are allowed in ul tags
li tags can contain any content

Topics: css3 html5 html

Programmer Think