HTML learning notes

Keywords: html5 html

1, HTML, hypertext markup language

1. Foreword

1.1 software architecture

C/S, client / server

Generally, the software we use is C/S architecture;
For example, the software QQ, 360, office and XMind in the system:
C represents the client, and the user uses the software through the client;
S refers to the server, which is responsible for processing the business logic characteristics of the software:
1. The software must be installed before use;
2. When the software is updated, the server and client shall be updated at the same time;
3. C/S architecture software cannot be used across platforms;
4. The communication between the software client and server of C/S architecture adopts its own protocol, which is relatively safe.

B/S, browser / server

B/S is also C/S in essence, but the software based on B/S architecture uses the browser as the client of the software;
B/S architecture software uses the software by using the browser to access the web page;
For example: JD Taobao 12306 knows Sina Weibo;
characteristic:
1. The software does not need to be installed. You can directly use the browser to access the specified website;
2. When the software is updated, the client does not need to be updated;
3. The software can be cross platform, and can be used as long as there is a browser in the system;
4. For B / S architecture software, the communication between client and server adopts the general HTTP protocol, which is relatively unsafe;

1.2 document declaration

		Document declaration( doctype)
			- The document declaration is used to tell the browser the version of the current web page
			- html5 Document declaration for
			<!doctype html>
			<!Doctype HTML>

1.3 hex

	Base:
		Decimal (daily use)
			- Features: 1 in 10
			- Count: 0 1 2 3 4 5 6 7 8 9 10 11 12 13 ... 19 20
			- Unit number: 10 (0)-9)
		
		Binary (base of computer)
			- Features: full 2 in 1
			- Count: 0 1 10 11 100 101 110 111
			- Unit number: 2 (0)-1)
			- Extension:
				- All data will be stored in binary form at the bottom of the computer
				- You can think of memory as a container composed of multiple small grids. Each small grid can store a 1 or a 0
					This small cell is called 1 bit in memory( bit)
					
					8bit = 1byte(byte)
					1024byte = 1kb(Kilobyte)
					1024kb = 1mb(Megabytes)
					1024mb = 1gb(Gigabyte)
					1024gb = 1tb(Special byte)
					1024tp = 1pb
		
		octal number system(Rarely used)
			- Features: full 8 in 1
			- Count: 0 1 2 3 4 5 6 7 10 11 12 ... 17 20
			- Unit number: 8 (0)-7)
		
		hexadecimal(Generally, when a binary number is displayed, it will be converted to hexadecimal)
			- Features: full 16 in 1
			- Count: 0 1 2 3 4 5 6 7 8 9 a b c d e f 10 11 12 ... 1a 1b 1c 1d 1e 1f 20 ..
			- Unit number: 16 (0)-f)

1.4 garbled code

Causes of garbled Code:
The computer is a very stupid machine. It only knows two things 0 1;
Any content saved in the computer needs to be converted into binary code such as 0 and 1 to save, including the content in web pages;
For example, in China, at the bottom of the computer, it can be converted to 1010001001010101011010
When reading the content, it is necessary to convert the binary code into the correct content;
code
The process of converting characters into binary codes according to certain rules;
decode
The process of converting binary codes into characters according to certain rules;
Charset:
The rules used for encoding and decoding are called character sets
Common character sets
ASCII
ISO-8859-1
GBK
GB2312
Default code of Chinese system
UTF-8
Universal code supports all the words on earth
ANSI
Automatically save files with the system's default encoding
The root cause of garbled code is that different character sets are used for encoding and decoding
In the browser of Chinese system, GB2312 is used for decoding by default

2. Understanding web pages

2.1 structure of web pages

1. A web page consists of three parts:
Structure
Structure is the overall structure of the page. Where is the title, where is the paragraph, and where is the picture
Structures are written in HTML
Performance
Performance is the external style of the page, such as font, font size, font color, background...
Use CSS to style elements in a page
Behavior
Interaction between pages and users
Use JavaScript to set the behavior of the page
2. A well-designed web page requires the separation of structure, performance and behavior;
3. There is always a problem in development, that is, the coupling between programs. The separation of the three is to understand the coupling;

2.2 notes

Grammar
Comments cannot be nested
The content in the comments will not be displayed on the page, but will be displayed in the source code. We can explain the code of the web page through comments;
You can also hide some content you don't want to display in the page through comments;

In development, we must develop a good habit of writing notes, and the notes are required to be simple and clear;

Notes can also hide some unwanted contents;

2.3 XHTML syntax specification

HTML is not case sensitive, but try to use lowercase;
HTML comments cannot be nested:
The label must be structurally complete;
Either in pairs;
Or self closing label.
Tags can be nested but not cross nested;
The attribute must have a value, and the value must be enclosed in quotation marks, either single quotation marks or double quotation marks.

3. Common browsers

Browser is the platform for web page operation. The commonly used browsers include IE, Firefox, Google, Safari and Opera, which are called the top five browsers.

3.1 browser market share (understand)

View website address: http://tongji.baidu.com/data/browser

3.2 browser kernel (understand)

A complete browser includes the browser kernel and the browser shell. The browser kernel can be divided into two parts: the Rendering Engine (Layout Engine or Rendering Engine) and the JS engine. As the JS engine becomes more and more independent, the kernel tends to only refer to the Rendering Engine.

(1) Browser composition structure

The browser is generally composed of seven modules, including User Interface, Browser engine, Rendering engine, Networking, JavaScript Interpreter, UI Backend and Date Persistence, as shown in the following figure:

[external chain picture transfer failed. The source station may have anti-theft chain mechanism. It is recommended to save the picture and upload it directly (img-czN5ZcGq-1634184222069)(. / picture / browser structure. png)]

The user interface - including the address bar, back / forward buttons, bookmark directory, etc., that is, what you see in addition to the page display window
Browser engine - it can transfer instructions between the user interface and the rendering engine or read and write data in the local cache of the client. It is the core of communication between various parts of the browser
Rendering engine - parses DOM documents and CSS rules and arranges the content into the browser to display a styled interface. It is also called the typesetting engine. The browser kernel we often say mainly refers to the rendering engine
Network - a module used to complete network calls or resource downloads
UI back end - used to draw basic browser window controls, such as input boxes, buttons, radio buttons, etc. the visual effects are different according to different browsers, but the functions are the same.
JS interpreter - used to interpret modules that execute JS scripts, such as V8 engine and JavaScript core
Data storage - the browser saves cookie s, localStorage and other data in the hard disk, which can be called through the API provided by the browser engine

(2) Mainstream browser kernel

Trident(IE kernel)

One of the many dual core browsers in China is Trident, which is called "compatibility mode".

Representatives: IE, Aoyou, window of the world browser, Avant, cheetah security browser, 360 speed browser, baidu browser, etc.

After the release of Window10, IE named its built-in browser Edge (formerly Sparta) and used the new kernel Edge engine.
Gecko(Firefox)

Gecko's feature is that the code is completely open, so programmers all over the world can write code for it and add functions. Unfortunately, it has declined in recent years, such as slow opening speed, frequent upgrades, teammate flash like a pig and opponent Chrome like a God.
Webkit(Safari)

Apple's own kernel is also the kernel used by Apple's Safari browser. It's open source. Google's Chrome also used webkit as the kernel.
Presto(Opera)

Presto is a browser typesetting engine developed by Opera Software. It is recognized as the fastest rendering engine in the world. After 13 years, Opera announced that it had joined the Google camp and abandoned presto.
Blink(Chrome)

There is a browser typesetting engine developed by Google and Opera Software, which was released in April 2013. Now the Chrome kernel is blink. Blink is actually a branch of webkit. Most domestic browsers use the blink kernel in the latest version.

Learn about:

The browser kernel of the mobile terminal mainly refers to the browser kernel built in the system.

At present, Webkit, Blink, Trident and Gecko are commonly used in mobile device browsers. The apple iOS platform is mainly Webkit. Before Android 4.4, the kernel of Android system browser is Webkit, after Android 4.4, Blink is used, and the kernel of Windows Phone 8 system browser is Trident.

3.3 IE lower version browser compatible with HTML5

The latest versions of Safari, Chrome, Firefox and Opera support HTML5, and Internet Explorer 9 will support HTML5 features. IE9 browsers of the following versions are not compatible with HTML5 and require html5shiv package of static resources:

<!--[if lt IE 9]>
    <script src="http://cdn.static.runoob.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]-->

After loading, initialize the CSS of the new tag:

/*html5*/
article,aside,dialog,footer,header,section,nav,figure,menu{display:block}

4. Web standards

If the browser kernel is not unified, its working principle and analysis must be different, and the display will be different.

http://www.baike.com/wiki/WEB%E6%A0%87%E5%87%86

4.1 benefits of web standards

Make the development prospect of Web more broad
Content can be accessed by a wider range of devices
Easier to be searched by search engines
Reduce website traffic costs
Make the website easier to maintain
Improve page browsing speed

4.2 composition of web standards

Web standard is not a standard, but a collection of a series of standards designated by W3C and other standardization organizations, mainly including Structure, Presentation and Behavior.

Structure standard: structure is used to sort and classify web page elements, mainly including XML and XHTML.

Style standard: used to set the layout, color, size and other appearance styles of web elements, mainly CSS.

Behavior standard: behavior refers to the definition of web page model and the preparation of interaction, mainly including DOM and ECMAScript.

Ideally, our source code:. HTML. CSS. JS

Summary

First point: our code is rendered on the browser, and the browser kernel should pay attention to it

The second point: the learning standard is divided into three aspects - structure html, style css and behavior JS

5. HTML beginner

Generally, learn html first and then css

HTML: hypertext markup language (English: Hyper Text Markup Language,) is a standard markup language for creating web pages. It mainly describes the text, pictures, sounds and other contents in the web page through HTML tags.

<strong>I'm bold text</strong>

5.1 HTML skeleton format

HTML has its own language syntax skeleton format:

<!DOCTYPE html>
<html>
  <head>
      <title></title>
  </head>
  <body>
    
  </body>
</html>

<!--
html Labels: all html A root node in the label
head Label: for storage title,meta,base,style,script,link，Note that it must be set title label
title Tag: let the page have its own title
body Tag: the main part of the page, which is used to store all the information html label: a,p,h,div,span,img...
-->

Case: write your first HTML page

Create a new txt file named demo
Write html skeleton inside
Change the suffix of the file to. html
Right click to open Google browser

5.2 HTML tag classification

In HTML pages, elements with "< >" symbols are called HTML tags. For example, < HTML >, < body > are HTML tags.

Double label

Syntax: < tag name > content < / tag name >

In syntax, "< / tag name >" indicates the beginning of the function of the tag, which is generally referred to as the start tab, and "< / tag name >" indicates the end of the function of the tag, which is generally referred to as the end tag. As follows:
```
<div>I am div</div>
```
Single label

Syntax: < tag name / >

Single label, also known as empty label, refers to a label that can completely describe a function with one label symbol. As follows:
```
<br />--> <br>
<hr />
<img alt=""  src="route"   />
```

5.3 HTML tag relationships

The interrelationship of labels can be divided into two types:

Nested relationships: parent-child relationships

<head> 
  <meta />
  <title> </title> 
</head>

Juxtaposition: Brotherhood
```
	<head></head>
	<body></body>
```

Offspring relationship

<html>
    <head>
        <title></title>
    </head>
    <body></body>
</html>
<!--html Labels and title Labels belong to descendants, title Also head Offspring of;
	Descendant relationship: including parent-child relationship, including the son of the son-->

Test question: C

Which of the following labels is wrong?
A <head></head><body></body>
B <strong><div></div></strong>
C <head><title></head></title>
D <body><div></div></body>

6. Development tools

There are many development tools. How many do you know?

Common development tools include Dreamweaver, SublimeText, WebStorm, Hbuilder, Visual Studio Code

Common shortcut keys

- input html:5 Or!, Press Tab or Ctrl+E Key to complete the document structure
- input a，Press Tab or Ctrl+E Key for completion a Label, similar to other labels
- Multiple duplicate objects, using*，as li*3 Press Tab ，ul>li*3
- Shift+Right click+Slide down and select a position in the multiline element at the same time
- Ctrl+L select line 
- Ctrl+shift+D Copy the line down within the line. Selecting a word means copying a word
- Ctrl+X Delete current row
- Ctrl+/ notes
- Ctrl+E completion

7. Document type

This sentence tells us which html version to use.

The tag is located at the front of the document and is used to explain to the browser which HTML or XHTML standard specification the current document uses. The tag must be used at the beginning of the document to specify the version and type for all HTML documents. Only in this way can the browser parse according to the specified document type.

doctype declarations are case insensitive and can be used in the following ways:

<!DOCTYPE html> 

<!DOCTYPE HTML> 

<!doctype html> 

<!Doctype Html>

General declaration

HTML5

<!DOCTYPE html>

HTML 4.01

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

XHTML 1.0

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

8. Entity

In HTML pages, some special symbols cannot be used directly, and entities need to be used to replace these special symbols
Entities can also be called escape characters
Entity syntax
& entity name;
Common entities:

          &nbsp; Space
            &gt; Greater than sign
            &lt; Less than sign
            &copy; Copyright symbol

9. HTML common tags

9.1 meta label

    meta It is mainly used to set some metadata in web pages. Metadata is not for users
        charset Specifies the character set of the web page
        name The name of the specified data
        content Contents of the specified data
        keywords Represents the keyword of the website. You can specify multiple keywords at the same time, which can be used between keywords,separate;
              <meta name="Keywords" content="Online shopping,E-Shop,mobile phone,notebook,computer,MP3,CD,VCD,DV,camera,Digital,parts,Wrist watch,Memory card,JD.COM"/>
              <meta name="keywords" content="online shopping,Online shopping,online shopping,Online shopping website,Online shopping mall,Shopping website,Online shopping center,Shopping Mall,excellent,Amazon,Amazon Excellence,Amazon China,joyo,amazon"> 
            description Specifies the description of the web site
               <meta name="description" content="JD.COM JD.COM-Professional comprehensive online shopping mall,It sells tens of thousands of brand high-quality commodities such as home appliances, digital communications, computers, home department stores, clothing, mother and baby, books and food.Convenient and honest services provide you with a pleasant online shopping experience!"/>
                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 http-equiv="refresh" content="3;url=https://www.mozilla.org"> 
        Redirect page to another web site

9.2 element type

    Block element( block element)
        - In a web page, the layout of the page is generally carried out through block elements
    Inline element( inline element)
        - Inline elements are mainly used to wrap text

        - In general, inner elements are released in block elements instead of block elements in inline elements
        - Basically everything can be placed in a block element
        - p No block elements can be placed in the element

    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 Child elements other than
            ... ...

9.3 title label

Word abbreviations: head, head, title
In order to make web pages more semantic, we often use title tags in pages. HTML provides six levels of tags, namely: h1, h2, h3, h4, h5 and h6
In general, the title label is only used for h1h3, and h4h6 is rarely used
The hgroup tag is used to group headings. You can put a group of related headings into hgroup at the same time
Title tag semantics: it is used as a title and decreases in importance. The basic syntax format is as follows:

<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>

<!--It should be noted that: h1 Labels should be used as little as possible because they are important h1 It's all for you logo use-->

Shortcut key: hKaTeX parse error: Expected '}', got 'EOF' at end of input: {Title} * 6

9.4 layout tags (structured semantic tags)

    header Represents the header of a web page
    main Represents the body of a web page(There will only be one in a page main)
    footer Represents the bottom of a web page
    nav Represents navigation in a web page
    aside 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 In line elements, which have no semantics, are generally used to select text in web pages

9.5 list labels

A series of words and data are made into a table and displayed in a table. A form in which words or charts are loaded in a container is called a list. The biggest feature of a list is neat, tidy and orderly.

list
1. Pencil
2. Ruler
3. Rubber

You can also create lists in html. There are three types of html lists:
1. Ordered list
An ordered list is a list arranged in order. Its list items are arranged and defined in a certain order. The basic syntax of an ordered list is as follows:

<ol>
  <li>List item 1</li>
  <li>List item 2</li>
  <li>List item 3</li>
  ......
</ol>

All features are basically consistent with ul, but ol is rarely used in actual development.

1,Ordered lists also have their own sequence number types-attribute type，The default value is 1, and the optional values are a,A,i,I.

2. Unordered list
There is no order level between the list items of an unordered list. They are side-by-side. The basic syntax format is as follows:

<ul>
  <li>List item 1</li>
  <li>List item 2</li>
  <li>List item 3</li>
  ......
</ul>

In < UL > tags, only < li > tags can be used, not < p > tags. However, other tags can be nested within < li > tags.

1,<ul></ul>Can only be nested in<li></li>，Directly in<ul></ul>It is not allowed to enter other labels or text in the label.
2,<li></li>It is equivalent to a container that can hold all elements.

type attribute can be added to ul or li. The default value is disc. Other values include circle, square

3. Definition list

Definition list, use dl tag to create a definition list
Use dt to represent the defined content
Use dd to explain the content

Lists can be nested with each other

9.6 horizontal line label

Abbreviations: horizontal line

In web pages, you often see some horizontal lines to separate paragraphs from each other, making the document structure clear and hierarchical. These horizontal lines can be realized by inserting pictures or simply by marking. hr is to create marks across the horizontal lines of web pages. The basic syntax format is as follows:

<hr />

9.7 line feed labels

Word abbreviations: break, break, line break

In HTML, the text in a paragraph will be arranged from left to right until the right end of the browser window. If you want a paragraph of text to be forced to wrap, you need to use a wrap label. The syntax format is as follows:

<br />

9.8 a, hyperlink labels

Word abbreviation: anchor, iron anchor

grammar

Creating hyperlinks in HTML is very simple. You just need to wrap the linked object with tags.

<a href="Jump target" target="Pop up method of target window">Linked text or image</a>

present

There will be no line breaks, and there will be some default color underscores

target:

target: jump to a new window or open your current window
_self: the default value when the current window opens
_blank: a new window opens

href: there are many types of values

External link network path

    <a href="https://Www.showstart.com "target =" _blank "> showstart</a>
    <a href="https://Www.baidu.com "> Baidu</a>

internal link

Relative path or absolute path

<a href="./01-review.html">Review 1</a>
<a href="01-review.html">Review 2</a>
<a href="E:\Employment class\H210401_Html+Css\03.code\day02\01-review.html">Review 3</a>

Empty link

<!-- ""Empty link,  Refresh page, When the scroll bar appears on the page, it will scroll to the top of the page -->
<a href="">Empty link 1</a>
<!--  #Empty link, do not refresh the page, and scroll to the top of the page when the scroll bar appears on the page -- >
<a href="#"> empty link 2</a>
<!-- Pseudo empty link, Do not refresh page, When the scroll bar appears on the page, it will not scroll to the top of the page. In a word, nothing happens -->
<a href="Javascript:;">Empty link 3</a>

download

<a href="./package.zip">download zip file</a>

Play multi coal body

Question, how to download jpg and mp4 or mp3 files.

<a href="./xx.jpg">display picture</a>
<a href="./01-Use of editor.mp4">Play video</a>

Display text

<a href="./BFC.md">Display text</a>
<a href="./BFC.txt">Display text</a>

Use mailto to link Email addresses in web pages.

    Hyperlinks allow us to jump from one page to another,
        Or another location on the current page

    use a Tags to define hyperlinks
        Properties:
            href Specifies the destination path for the jump
                - The value can be the address of an external website
                - You can also write the address of an internal page

    A hyperlink is also an in-line element in a Any element other than itself can be nested in a tag  
            target Property to specify where the hyperlink opens
            Optional values:
                _self The default opens the hyperlink in the current page
                _blank Open hyperlink in a new folder
    In development, you can#Use as the booth symbol of the path of the hyperlink: Click to jump to the top of the page
    have access to javascript:; As href Nothing will happen by clicking this hyperlink
    
    You can directly link the href Property is set to#In this way, after clicking the hyperlink
    The page does not jump, but goes to the top of the current page
    You can jump to the specified position on the page, just href Property settings #The id attribute value of the target element

        id Property (unique and non duplicate)
            - You can add one for each label id attribute
            - id Attribute is the unique identification of an element. Duplicate attributes cannot appear in the same page id attribute

9.9 text formatting labels

label	Display effect
<b></b> <strong></strong>	Text is displayed in bold (strong is recommended after XHTML)
<i></i> <em></em>	Text is displayed in italics (em is recommended after XHTML)
<s></s> <del></del>	Text is displayed with a strikethrough (del is recommended after XHTML)
<u></u> <ins></ins>	Text is underlined (not recommended after XHTML u)

b i s u does not have the meaning of emphasis. strong, em, del and ins have stronger semantics and have the meaning of emphasis

Supplement: bold abbreviated b, italic abbreviated i, emphasize abbreviated em, strike abbreviated s, underline abbreviated u, inserted abbreviated ins

9.10 label properties

When making web pages with HTML, if you want the HTML tag to provide more information, you can use the properties of the HTML tag to set it. The basic syntax format is as follows:

<Tag name property 1="Attribute value 1" Attribute 2="Attribute value 2" ...> content </Tag name>

A tag can have multiple attributes and must be written in the start tag after the tag name.
There is no order between attributes. The tag name and attribute 1, attribute 2 and attribute 3 are separated by spaces.
The attribute of any label has a default value. If the attribute is omitted, the default value is taken.

Common global attributes:

1. id Attribute: used to specify the identification name of an element, which is equivalent to a person's ID card. It is unique and cannot be duplicated in the same document id，General cooperation css and js To select elements;
2. class Attribute: used to specify the category name of the element. You can use class Element classifies multiple elements in the same document, css Can pass class Set styles for elements of the same class;
3. stlye Attribute: used to set the style (inline style or internal style) for the element;
4. title Attribute: used to display omitted content (or supplementary and prompt description content), which is displayed when the cursor moves over the element content title The contents;
5. dir Attribute: used to set the text direction of element label content, such as div Attribute of element p Attribute of element, optional value ltr and rtl.

9.11 image labels

Word abbreviation: image image

The implementation of any element in HTML web pages depends on HTML tags. If you want to display images in web pages, you need to use image tags. The syntax format is as follows:

<img src="image url"/>
<!--img--image src--source Property is used to specify the path and file name of the image file. It is a required property and can be inserted into the picture format JPG,Gif,PNG8,PNG24,webp,bmp -->

attribute	Attribute value	describe
src	URL	Image path
alt	text	Alternate text when image cannot be displayed
title	text	What is displayed when the mouse hovers
width	Pixels (percentage not supported by XHTML)	Sets the width of the image
height	Pixels (percentage not supported by XHTML)	Sets the height of the image
border	number	Sets the width of the image border

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:
The src attribute specifies the path of the external picture (the path rule is the same as the hyperlink)

        alt Description of the picture. This description 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 Attribute, the picture will not be included by the search engine

        width Width of picture (The unit is pixels)
        height Height of picture    
            - If only one of the width and height is modified, the other is scaled equally

        be careful:
            Generally speaking 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, in the mobile terminal, it is often necessary to zoom the picture (large image 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 picture, moving picture
        png
            - It supports rich colors, supports complex transparency, and does not support dynamic graphics
            - Colorful, complex and transparent 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 Encoding, which can convert the picture into characters and introduce the picture in the form of characters    
            - Generally, some images that need to be loaded with the web page will be used base64

        The effect is the same. Use a small one
        The effect is different. It works well

9.12 inline framework

<!-- 
    Inline frame, which is used to introduce another page into the current page
        src Specify the path of the web page to import
        frameborder Specifies the border of the inline frame

 -->                                                                <iframe src="https://www.qq.com" width="800" height="600" frameborder="0"></iframe>

9.13 anchor point positioning

By creating anchor links, users can quickly locate the target content,

There are two ways to create anchors

Create anchor by id
Create an anchor with a's name

(1) Create anchor by id

1,Add at jump target id Name label
2,use<a href="#id name "> link text</a>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>=Anchor location</title>
	<style type="text/css">
		div {
			border: 1px solid red;
			height: 800px;
		}
	</style>
</head>
<body>
	<div>
		<a href="#Id1 "> early experience</a>
		<a href="#Id2 "> acting career</a>
		<a href="#ID3 "> Introduction to works</a>
	</div>
    <div>
		<h2 id="id1">Early experience</h2>
		<a href="#">TOP</a>
	</div>
	<div>
		<h2 id="id2">Acting career</h2>
		<a href="#"> back to top</a>
	</div>
	<div>
		<h2 id="id3">Introduction to works</h2>
		<a href="#"> back to top</a>
	</div>
</body>
</html>

(2) Create an anchor with a's name

1,Add before jump target position<a name='name name'></a>
2,use<a href="#name "> link text</a>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>=Anchor location</title>
	<style type="text/css">
		div {
			border: 1px solid red;
			height: 800px;
		}
	</style>
</head>
<body>
	<div>
		<a name="begin"></a>
		<a href="#Id1 "> early experience 1</a>
		<a href="#Id2 "> acting career 1</a>
		<a href="#ID3 "> Introduction 1</a>
	</div>
    <div>
		<a name="id1"></a>
		<h2>Early experience</h2>
		<a href="#Begin "> back to the top</a>
	</div>
	<div>
		<a name="id2"></a>
		<h2>Acting career</h2>
		<a href="#Begin "> back to the top</a>
	</div>
	<div>
		<a name="id3"></a>
		<h2>Introduction to works</h2>
		<a href="#Begin "> back to the top</a>
	</div>
</body>
</html>

9.14 base label (understand)

base href, a URL address is set by base. Then you don't need to fill in the complete address for the file or picture you want to call. Just write the file name or picture name. Simply understand the usage of the base tag through the following code. The full address of the blog linked to the HTML tag is: http://blog.sina.com.cn/htmlcss3

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<base href="http://blog.sina.com.cn" target="_blank"/>
	</head>
	<body>
		<a href="htmlcss3">link to HTML Tag blog</a>
	</body>
</html>

base target, you can set whether the overall link is opened in a new window or in the current window. For example:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<base target="_blank" />
	</head>
	<body>
		<a href="http://Www.baidu.com "> Baidu</a>
		<a href="http://Www.sina. Com "> Sina</a>
		<a href="http://Www.sohu. Com "> Sohu</a>
		<a href="http://Www.163. Com "> Netease</a>
	</body>
</html>

target attribute is the opening method of the web page window. If this attribute is set in the base tag, all links in the page will follow this method to open the web page. There are several options as follows:

1, _blank: Open the link page in a new window.
2, _parent:Open the link in the previous window.
3, _self:  Open link in current window,This is the default value and can be omitted.
4, _top:  Open links throughout the browser window, ignoring any frames.

10. Path

10.1 relative path

10.2 absolute path

11. Audio and Video Tags

The audio tag is used to introduce an external audio file 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

In addition to specifying the path of the external file through src, you can also specify the path of the file through source

<audio controls>
    <!-- Sorry, your browser does not support playing audio! Please upgrade your browser! -->
    <source src="./source/audio.mp3">
    <source src="./source/audio.ogg">
    <embed src="./source/audio.mp3" type="audio/mp3" width="300" height="100">
</audio>

Use the video tag to introduce a video to a web page

The usage is basically the same as audio

<video controls>
    <source src="./source/flower.webm">
    <source src="./source/flower.mp4">
    <embed src="./source/flower.mp4" type="video/mp4">
</video>

You can also use the inline framework to directly define a video URL

12. Table table

In real life, we often need to use tables to represent some formatted data:
Curriculum, list of people, transcripts

    Similarly, we also need to use forms in the web page table Label to create a table

Table is a commonly used label, but it is not used for layout, but for processing and displaying tabular data.

12.1 form basis

table nested tr, tr nested th or td

tr can only nest th or td, while th or td can nest any element

tr represents a row, th or td represents a column

The difference between th and td is that the text in td is bold and centered up, down, left and right, while td is general and centered only up and down

<table border='1'>
		<tr>
			<th>ranking</th>
			<th>key word</th>
			<th>trend</th>
			<th>Search today</th>
		</tr>
		<tr>
		    <td>1</td>
		    <td>Ghost blow lamp</td>
		    <td>23</td>
		    <td>2332</td>
		</tr>
		<tr>
		    <td>2</td>
		    <td>The Lost Tomb</td>
		    <td>2333</td>
		    <td>1233</td>
		</tr>
		<tr>
		    <td>3</td>
		    <td>Journey to the West</td>
		    <td>233</td>
		    <td>23333</td>
		</tr>
	</table>

12.2 table attributes

		rowspan Merge cells vertically
		colspan Horizontal merge cells
		table attribute
			align='center' 
				table Horizontal alignment in parent element(left center right)
			width='800'
			height='400'
				table Width and height of,The units are numbers or percentages.
				If you add dimension units to numbers, you will find that the units are invalid, and always px Unit
			bgcolor="pink" 
				table Background color
			border='1'
				When the value is 1, the border of all formats is 1 px
				When the value is 5, table The border is 5 px，However, the border of other formats is still 1 px
				It is invalid when the value is less than 1. When the value is greater than 1, it behaves the same as the value of 5
				If you add the dimension unit to the value, you will find that the unit is invalid and will always be in px Unit
			bordercolor="green" 
				Border color
			cellspacing='0'
				th or td Outer margin of
			cellpadding='10'
				td or td Inner margin of
		tr attribute
			align=center
				Internal elements relative to th or td Horizontal alignment(left center right)
			valign=center
				Internal elements relative to th or td Vertical alignment(top center bottom)
			bgcolor="#FF0000"
				tr Background color
			width:invalid
			height:
				Effective, tr Height of
				table Width and height of,Units are numbers or percentages
				If you add dimension units to numbers, you will find that the units are invalid, and always px Unit
				If percentage is used,
					Then table As the benchmark, compare table 400 px,be th or td Medium height="50%"It's 200 px,
					However, a phenomenon is found in the actual test, when table of height Too young, th or td
					Medium height='50%'It's not even 50%Display height of
		th,td attribute
			width:
				After one is set, the others in the same column cell It will also become the same width,
				When table Set in width When, th and td Set in width Can't hold it up table Width of
				Units are numbers or percentages
				If you add dimension units to numbers, you will find that the units are invalid, and always px Unit
			height:
				Valid, indicating th or td Where tr Height of
				table Width and height of,Units are numbers or percentages
				If you add dimension units to numbers, you will find that the units are invalid, and always px Unit
				If percentage is used,
					Then table As the benchmark, compare table 400 px,be th or td Medium height="50%"It's 200 px,
					However, a phenomenon is found in the actual test, when table of height Too young, th or td Medium height='50%'It's not even 50%Display height of
			align=center
				Internal elements relative to th or td Horizontal alignment(left center right)
			valign=center
				Internal elements relative to th or td Vertical alignment(top middle bottom)
			bgcolor="#FF0000"
				th,td Background color

        /* border-spacing: Specifies the distance between borders */
        /* border-spacing: 0px; */In this way, the border is twice as thick
        /* border-collapse: collapse; Sets the merge of borders */
       /* By default, elements are vertically centered in td and can be modified through vertical align*/
       If not used in the table tbody But directly tr，Then the browser will automatically create a tbody，And will tr All in tbody in tr no table Child element of

12.3 table title

Table titles are defined with * * < caption > * * tags, which must be directly defined after the < Table > tag, and only one title can be defined for each table. Usually the title is centered on the table.

Usage:

<table border="1px" cellspacing="0" bordercolor="green">
		<caption    style="border:2px solid green; background: skyblue;">title</caption>
		<tr>
					<th>Month</th>
					<th>Savings</th>
		</tr>
		<tr>
					<td>January</td>
					<td>$100</td>
		</tr>
</table>

12.4 merging cells

Cross row consolidation: rowspan (row span)

Cross column merge: column span (column span)

Light gray: lightgray, light blue

Background color: bgcolor

12.5 thead,tbody,tfoot

    A table can be divided into three parts:
        head thead
        subject tbody
        bottom tfoot

        th Cell representing the header

Pack your luggage into thead, tbody and tfoot,

thead, tbody and tfoot have two attributes: align and bgcolor

13. Form label

    Form:
        - In real life, forms are used to submit data
        - Forms can also be used in web pages. Forms in web pages are used to submit local data to remote servers
        - use form Tag to create a form

The purpose is to collect user information.

In the web page, we also need to interact with users and collect user data. At this time, we also need forms.

In HTML, a complete form consists of form controls (also known as form elements), prompt information and form fields.

Form control:

It contains specific form function items, such as single line text input box, password input box, check box, submit button, reset button, etc.

Prompt:

A form usually needs to contain some explanatory text to prompt users to fill in and operate.

Form field:

It is equivalent to a container to hold all form controls and prompt information. It can define the url address of the program used to process form data and the method to submit data to the server. If the form field is not defined, the data in the form cannot be transferred to the background server.

    form Properties of
        action The address of the server where the form is to be submitted

13.1 input control

The < input / > tag is a single tag, and the type attribute is its most basic attribute. There are many values, which are used to specify different control types. In addition to the type attribute, the < input / > tag can also define other attributes, as shown in the following table:

[the external chain picture transfer fails. The source station may have an anti-theft chain mechanism. It is recommended to save the picture and upload it directly (img-V2O6GjXb-1634184222074)(./img/input control. png)]

(1) Text field

The text field is set through the < input type = "text" > tag. When users want to type letters, numbers, etc. in the form, the text field will be used.

<form>
	First name: <input type="text" name="firstname"><br>
	Last name: <input type="text" name="lastname">
</form>

Note: to submit data to the server, you must specify a name attribute value for the element

(2) Password field

The password field is defined by the label < input type = "password" >:

<form>
	Password: <input type="password" name="pwd">
</form>

Note: password field characters are not displayed in clear text, but are replaced by asterisks or dots.

(3) Radio button

radio button
-Like this selection box, you must specify a value attribute, which will eventually be passed to the server as the value filled in by the user
-checked can set the radio button to be selected by default

The < input type = "radio" > tag defines the form radio box options, and defines the same group through the same name value

<form>
	<input type="radio" name="sex" value="male">Male<br>
	<input type="radio" name="sex" value="female">Female
</form>

(4) Check box

< input type = "checkbox" > defines a check box. The user needs to select one or more options from several given choices.

<form>
	<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
	<input type="checkbox" name="vehicle" value="Car">I have a car 
</form>

(5) Normal button

Defined by < input type = "button" >

<form>
	<input type="button" value="Point me">
</form>

(6) Submit button

< input type = "submit" > defines the submit button

When the user clicks the confirm button, the contents of the form will be transferred to another file. The action attribute of the form defines the file name of the destination file. The file defined by the action attribute usually processes the received input data.:

<form>
	Username: <input type="text" name="user"><br />
			 <input type="submit" value="Submit">
</form>

(7) Reset button

< input type = "reset" > defines the reset button. Reset refers to resetting to the initial state of the form.

<br>
<form>
    Username: <input type="text" name="user"><br />
    		 <input type="reset" value="Reset">
</form>

(8) Image button

< input type = "image" > defines an image button, which means that the button can be displayed with a picture, src specifies the path of the picture, and height/width defines the width and height

<form>
    <input type="image" src="logo.png" height="10px" width="10px">
</form>

(9) File domain

< input type = "file" > defines the file field. Click the button to select the uploaded file

<form>
    <input type="file">
</form>

13.2 label

The < label > tag defines a label (tag) for the input element.

Function: used to bind a form element. When you click the label label, the bound form element will get the input focus.

How to bind< The for attribute of the label > tag is used to bind form elements. You only need to specify that the value of the for attribute is the same as the id value of the bound form element.

<label for="idName">name:</label>
<input type="text" id="idName"><br>

<!-- 
1.use label Direct package input，Can be achieved
2.If label There are multiple form elements. To locate an element, you can for  id Format to operate
-->

Case: baidu account registration page

13.3 textarea control (text field)

If you need to enter a large amount of text information, you need to use the < textarea > < / textarea > tag. You can easily create a multi line text input box through textarea control. Its basic syntax format is as follows:

<textarea cols="Number of characters per line" rows="Number of rows displayed"></textarea>
<!-- 
cols:The text field can accommodate the number of text columns and limit the length of the text box
rows:The text field can accommodate the number of text lines and limit the width of the text box -->

13.4 pull down menu

Use the select control to define the drop-down menu. The basic syntax format is as follows:

<select>
	<option>Option 1</option>
	<option>Option 2</option>
	<option>Option 3</option>
	...		
</select>

<!-- 
	1,select The label should contain at least one stack option label
	2,stay option Add to label selected="selected"Property indicates that the current item is the default selected item
    3,select of size Property to specify the display range
-->

13.5 form fields

In HTML, the form tag is used to define the form field, that is, to create a form to collect and transfer user information, and all the contents in the form will be submitted to the server. The basic syntax format is as follows:

<form action="url address" method="Submission method" name="Form name">
    Various form controls
</form>

Common attributes:

1.action

After the form collects the information, it needs to pass the information to the server for processing. The action attribute is used to specify the url address of the server program that receives and processes the form data.

2.method

Used to set the submission method of form data. The values are get and post.

get: the data size is limited and unsafe

post: the data size is not limited and is relatively safe

3.name

Specifies the name of the form to distinguish multiple forms on the same page.

Note: each form should have its own form field.

13.5 supplement

autocomplete = "off" turn off autocompletion
readonly sets the form item to read-only, and the data will be submitted
Disabled sets the form item to disabled and the data will not be submitted
autofocus sets the form item to get focus automatically

    <button type="submit">Submit</button>
    <button type="reset">Reset</button>
    <button type="button">Button</button>

Many functions can be realized with ordinary buttons, and other attributes can be specified.

Posted by aleX_hill on Wed, 13 Oct 2021 20:11:04 -0700

Programmer Group