HTML Basic Knowledge Note

Basic structure of HTML base 1.1HTML file and introduction to the standard 1.1.1HTML

HTML is a language that describes a Web page, a Hypertext Markup Language!

Basic structure of the 1.1.2HTML file

• Heads (head)

  Headers are basic information such as the title of a webpage

• Body (body)

  Topics include content information for Web pages

Note that labels must appear in pairs

1.2 Basic labels for Web pages each label has a pair of angle brackets, omitted here

1. Title label

H1 H2 H3 h4 h5 h6 (font style becomes smaller)

1. Paragraph and line wrapping labels

P BR

1. Horizontal line Label

HR: Indicates the ability to generate a horizontal line

1. Font style labels

Strong: Can bold font

EM: can tilt the font

1. Annotations and special symbols

Note:!--Content--

Special symbols:

• Space:
• Greater than sign:>
• Less than number: &lt
• Quotation marks: "
• Copyright symbol:?

1.3 Image Labels

Syntax:

1.4 Link Tags

• Basic usage of hyperlinks

  <a href= "link address" target = "Location of target window" > linked text or image </a>

• Applications for hyperlinks
  1. Links between pages
  2. Anchor Chain Connection
  3. Functional links

List Table Frame 2.1 list

1. Unordered list

   An unordered list is an item list that uses bullets to mark an unordered list. There's no grade.

   Unordered list consists of: UL and Li

2. Ordered list

   A list of lists, consisting of numbers or letters, when there is a sequence table

   The sequence list consists of: ol and Li

3. Definition List

   A definition list is a combination of projects and annotations

   Definition list consists of: DL DT DD

2.2 Table

• Why Use Tables

  Simple and Universal

  Structural stability

• Basic structure of the table

  Cell: The smallest unit of a table

  Row: One or more cells are stacked horizontally

  Columns: vertical arrangement of cells

• Basic syntax for tables
  1. Table Tags: table
  2. Row labels (can have multiple lines): TR
  3. Column labels (can have multiple cells): TD
• Alignment of the table
  • Horizontal direction
    • Left-justified: align= "Ieft"
    • Right alignment: align=
    • Center alignment: align= "center"
  • Vertical direction
    • Top alignment: valign= "Top"
    • Bottom alignment: valign= "Bottom"
    • Center-aligned: valign= "Middle"
    • Baseline end Alignment: valign= "Baseline"

2.3 Frame Form 3.1 form

• Label and properties of the form

Form label to implement the form input tag is a label for the auxiliary form to set various inputs

Property values for form:

• Action: Represents the address of the submission and, if empty, represents this page
• Method
  • How the server sends data: Post/get
  • Post: The data on the form is sent as a block of data and does not apply to the request character get: The browser creates a request that returns the specified script

form elements and formatting
• TextBox (Text)

  Example: <input type= "text" name= "fname" >

• Password box (password)

  Example: <input type= "password" name= "FName" >

• radio button (Redio)

  Example: <input type= "Redio" >

• check box (checkbox)

  Example: <input type= "Checkboc" >

• List box (selected option)

  Example: <seleceted> <option value= "content" ></option> </selected>

• Button
• Submit button

  Click. Content will be submitted

• Reset resets

  Click this button to implement the reset

• Bottom Normal
• Multiline text fields

  Syntax: <input type= "image" src= "images/login.jpg" >

• File fields

  Implementing a File Selection

  Syntax: <input type= "file" name= "Files" >

       

3.2 Advanced Applications for forms

• Set hidden fields for a form

When you set the value of type to hidden, you can hide the hidden file

• Read-only and disabled settings for the form
• Read-only scenario: The Web server does not want users to modify the data, which is displayed in the form elements. (Property set readonly= "ReadOnly")
• This feature can only be used if this condition is met. (disabled= "Disabled")

3.3 Semantically formatted forms

• About semantics

Semantic: To achieve simple structure, simple code.

• Semantic forms
• Domain

Fieldest: This label implements the definition of a domain. When you place elements in this tag, the browser displays them in a special way, and the forms may have a boundary.

• Domain Title

Legend: A label is a caption that is set for a field,

• These two tags are usually used together. Implement a semantic Word form
• Comments for form elements
• Definition: The content is annotated with a tag, and when the user clicks on it, the browser automatically focuses on the corresponding form element.
• Syntax: <label for= "id of form Element" > Annotated text </label>
• Note: You need to define the attribute in the input tag:ID and assign a value

The significance of using CSS in the initial knowledge of CSS4.1

• What is CSS

Full name: Cascading style sheet, also known as style style sheet, it is used for web design, make the webpage beautiful, clear!!

• The application of CSS in the website

can set the font style, size, color, can make the image, text center, hyperlinks different effects, beautify the page

• Advantages of CSS
  1. Separation of content from performance. You can use CSS styles to monopolize a file (Maintenance-friendly)
  2. Consistent performance
  3. Has a rich style
  4. Reduce the amount of code on a webpage
  5. Use of independent CSS to facilitate search engine inclusion

Basic syntax for 4.2CSS

1. Basic syntax structure of CSS

   CSS consists of two parts, the selector and the declaration, which must be placed in curly braces, which can be multiple, each declaration consists of a property and a value, the attribute and value are separated by a colon, and the statement ends in English.

   Syntax: selector {property: value;}

2. Meet <style Tags >

A style tag is a label that introduces CSS styles. This tag is also assigned to the header property of this tag in the head tag: type= "Text/css"

1. CSS Selector
• Tag Selector

  • All labels can be used with the tag Selector

    Syntax: Tag {property: value;}

• Class Selector
  1. When you want a paragraph to be another case, it's a good idea to introduce a class selector
  2. Syntax:. Class Name {property: value;}
• ID Selector
  1. When the page only needs to be used once, select the ID selector!
  2. Syntax: #id的名称 {property: value;}

4.3 Introducing CSS styles in HTML

• inline style

  is to use the tags directly in the HTML

  No implementation of content and performance separation, not reflected in CSS to get advantage (not recommended)

• Internal style

  Write the CSS code directly in the head's style tag, with the HTML file in a file

• External styles

  Create a separate file name for the CSS suffix, and then use it directly through the linked or imported

  1. Linking external style sheets

     You must use the link tag in the HTML file to link

     Syntax: <link href= "css/file name. css" rel= "stylesheet" type= "Text/css"/>

  2. Import external Styles

     <style type= "Text/css" >

     [email protected] URL ("Style.css");--

• Priority of Style
  • Inline style > class style > External style
  • ID selector > class selector > tag Selector

Advanced Applications for 4.4CSS

• CSS Composite Selector
  1. Descendant Selector

     The descendant selector is the outer label written in front, the inner layer is written inside, separated by a space. When a tag is nested, the inner layer is the descendant of the outer.

     Nesting by tags

     Nesting by selectors

     3 kinds of nesting with each other

  2. Intersection Selector

     The intersection selector is made up of two selectors, with the result that the intersection of the two respective element ranges is selected. The first one must be a tag selector, and the second must be a class selector or an ID selector. Two cannot have space between, must write continuously

     The selectors that make up this way will select the two defined elements that are met at the same time. This is the label selector defined by the former, and the type or ID element of the latter is established.

  3. and set Selector

     Also select the range selected by each base selector. Selectors of any form can be used as part of the set selector.

     A set selector is a comma-linked selection of selectors.

• CSS Inheritance Features
  • The inherited relationship

    All CSS is inherited by the individual tags. Can be called a parent-child relationship

  • Inherited apps

    CSS inheritance child tags will inherit the parent tag style, style, can be modified on the basis of the parent tag style style, create a new style, and the child tag does not affect the parent tag

CSS Beautify page elements 5.1 using CSS to edit Web page text

1. The meaning of text in Web pages
   • Effective delivery of page information
   • Using CSS to beautify the page text, is the page beautiful and beautiful
   • Can be very good to highlight the page theme
   • Have a good user experience
2. <span label >

   To highlight text or statements, you have to use the span label <span></span>

3. Style of the font font-family
   Font-size
   Font-style
   Font-weight
   Font setting type for fonts
   Set the size of the font
   Set the style of the font
   Set the weight of a font
   At the same time in a declaration
4. Compose text using CSS Web pages

   Color
   Text-align
   Text-indent
   Line-height
   Text-decoration

   Set the color of text
   Set element Horizontal Alignment
   Set the first line of text indent
   Set the line height of the text
   Set the decoration of text

5.2 Using CSS to set up hyperlinks

• Hyperlink Pseudo-Class

  a{property: Value;}

  a:hover{property: Value;}

• Use CSS to set the mouse shape

Default
Pointer
Wait
Help
Text
Crosshair

Default cursor
Hyperlink pointer
Indicates that the program is busy
Indicates the available Help
Indicate text
Mouse appears in a cross-shaped

5.3 Style of the background

• Recognition <div> Labeling

  Div can split HTML documents into separate, different parts that are used for page layout

  <div> Web content </div>

• Background properties
  1. Background color

  2. Background image
     1. Background image Background-image:url (image address);
     2. Background repeating mode
     1. Repeat: tile in horizontal and vertical directions
     2. No-repeat: Uneven Shop
     3. Repeat-x: Tile in horizontal direction
     4. Repeat-y: Tile in vertical direction
  3. Background

     Use background directly: To assign a value to a property;

• Set Hyperlink background

5.4 Style of the list

• List-style-type List marker Type
1. None: no marker symbol
2. Disc: Solid circle, default type
3. Circle: Hollow Circle
4. Square: Solid Square
5. Decimal: Numbers
• List-style-image use images instead of list items to mark List-style-image:url (image address);
• List-style-position set where to place the marker;

  This property has two values: inside and outside

• List-style: Unified set list style, directly add property value on the line!!

The sixth chapter: Box model 6.1 Box model

1. 6.1.1 What is a box model

   Div has a certain distance from the box, and these distances and div form the structure of the box model! Box models have properties: Padding, margins, borders

   Frame: equivalent to the box carton, generally with a certain thickness!

   padding: Inside the border, is the distance between the content and the border!

   Margin: Outside the border, is the border with the surrounding gap

2. 6.1.2 Margin

   has three properties: color width style

   Setting Method: Border-color:border-width:border-style:

   General Unified Settings: Border:color (color) width (width) style (type/solid/dashed): Represents setting the color of four sides-type-width

   If you want to set it separately: that is Border-top-color:border-top-width:border-top-style:

3. 6.1.3 Outer margin

Definition: The distance between the other boxes. That is, the distance between elements and elements of a webpage.

Common methods are: Margin-top:z set the upper margin

Common methods are: Margin-right set the margin

Common methods are: Margin-left: Set the left margin

Common methods are: Margin-right: Set the right margin

Merge: margin:? px

Margin:? Px? px

1. 6.1.4 Inner margin

Definition: The distance between the content and the border for precise control over the position of the content

Padding-top: Upper inner margin

Padding-bottom: Lower inner margin

Padding-left: Left inner margin

Padding-right: Right inner margin

1. Dimensions of the 6.1.5 box model

Size of Box model: padding + margin + border Width + content width

6.2 Standard Document Flow

1. Standard document Flow

Composition: Standard document Flow: block-level elements and inline elements!

Block-level elements: Each element is exclusive of a rectangular area, left and right, and adjacent elements will want to zeros direction.

Inline elements: content is arranged horizontally and does not monopolize a rectangular region. To the most end of the automatic line-wrapping!!

1. Display Properties

Block	The default is block-level elements with line break
Inline	Inline element: Default No Line break
None	Set element does not display

Seventh: Floating 7.1 page layout

There are several types of Web page layouts: 3 most common

7.2 Floating

1. Application of floating in Web pages

   You can implement a global layout: You can lay out the navigation bar, content, and title. Use the Float Property!

2. Float Property

Left	Element floats to the left
Right	Element floats to the right
None	element does not float

Example: Float:left

7.3 Clear Float

1. Clear floating effect

Left	Clear left Float
Right	Clear right float
Both	Clear left and right float

1. Extended Box Model

Add a div to the back of all div boxes

CSS over there set {Clear:both margin:0px padding:0px}

7.4 Overflow problem

1. Overflow property

Resolve Content Overflow Processing

Visible	Default value, content will not be trimmed and will be rendered outside the box
Hidden	Content is clipped and the rest is not visible
Scroll	Content will be added Roll Tojo, will be trimmed
Auto	scroll bar (auto) if trimmed

1. The magical properties of overflow

   Extend the height of the box: The box will be opened.

   Example: Overflow:hidden:

HTML Basic Knowledge Note