HTML introduction & specification

introduce

  • HTML stands for Hyper Text Markup Language
  • A computer language that specializes in making web pages
  • Ordinary text is English words, English letters exist.
  • Hypertext means that there are words or letters that are given special rights in the world of web browsers.
  • For example, we are all ordinary people, but after some people are selected by the country and put on police uniform, they are endowed with special rights to enforce the law. Ordinary people have no right to enforce the law.
  • The letter IMG is just an ordinary letter, it has no special meaning. With Angle brackets, is used to display images in the web world.

Pay attention to

  • The < HTML > tag represents that the current page is an HTML
  • Information about an HTML page can be declared in the tag
  • The tag is used primarily to display page information
  • Tags have a beginning, an end, and a pair
  • The start and end labels contain the contents of labels. If there is no label content, the labels can be automatically closed
  • Most tags have attributes whose values are enclosed in quotes.
  • HTML itself is case insensitive.

The use of HTML

The file tag

  • < HTML > tag: indicates that an HTML document is being written
  • tag: stores some important information on this page that it will not display
  • tag: There is a subtag that defines the title of the page
  • The tag: the written content is displayed
  • Attributes of the <body> tag
    1. Text sets the text color
    2. Bgcolor is used to set the background color of the page
    3. Background Sets the background image of the page

Typesetting label

HTML comments

<! -- I am a comment, the page will not show -->
Copy the code

Wrap the label

  • The

    tag is a newline (carriage return) tag, and the/in the tag is optional.
  • There is/standardization of HTML, but HTML is a less rigorous language

Paragraph tags

  • The content in the

    tag produces a blank line between the start and end, and it is wrapped automatically.

  • The common attribute align is used to set the alignment of content in a paragraph. The value can be left, right, or center

Horizontal label

  • The

    tag produces a horizontal line on the page

  • It has common attributes for hr tags:
    • Align: left, right, and center indicate the horizontal position
    • Size: represents the thickness of the horizontal line.
    • Width: indicates the width of the horizontal line
    • Color: the color of the horizontal line

Partition label

  • Div is a block label used for layout
  • Regular divs don’t work, and they’re invisible to the naked eye, but div with CSS is a better way to layout your page, right
  • Div and span are both containers.
    • Divs wrap themselves, and we call such tags block-level elements
    • The SPAN tag doesn’t wrap itself, we call it the inline element
    • Div: Blocks as a whole
    • Span: local division

Font tags

Font tags

  • The <font> tag allows you to set the font, font size, and color.
    • Face: used to set the font, such as 宋体 official script regular script
    • Size: used to set the size of the word (the default size is 1-7, 7 is the largest, if you want to be larger, learn CSS later)
    • Color: Used to set the color of the word

The title tag

  • <h1> – <h6>
  • H1 is the largest, H6 is the smallest, they represent the title, wrap, bold, and create a certain distance between the title
  • Note: Tags are allowed to be nested in HTML, but are generally wrapped, not cross-nested

Formatting label

  • : bold font
  • < I > : font slant
  • : Delete line
  • : underscores

A list of tags

  • Ol: Ordered list
    • Type =’A’ : alphabetical order
    • Type =’I’ : Roman sort
    • Start = “3” sequence starts at what
  • Ul: unordered list
    • Type =”disc” : default, solid circle
    • Type = “square” : the square
    • Type =”circle” : hollow circle

The image tag

<img> This allows us to introduce an image to the page.

  • SRC represents the path to the image
  • Width Indicates the width of the image
  • Height Height of the image
  • Border sets the border of the image
  • Alt Specifies the text message to be displayed by default if the image cannot be displayed
  • Title Default text information displayed when you hover over an image
  • Align Indicates the alignment of the text in the image attachment. The value can be
    • Left: Align the image to the left
    • Right: Align the image to the right
    • Middle: Align the image with the center
    • Top: Align the image with the top
    • Bottom: Align the image with the bottom (default)

Hyperlink label

  1. Href is the path we want to jump to
  2. The target property specifies where to open the linked document. The value can be:
    • Blank opens the page in a new window
    • _ self Default. Open the page in this window

form

  • <table> : Defines a table
    • Border: border. The value is in pixels
    • Width indicates the width of the table
    • Align represents the alignment of the table; The values
      • Left Align the table left
      • Right Right-align the table
      • Center the table
    • Cellspacing: cellspacing (usually set to 0 for single-line tables)
  • <tr> : Table Row
    • Align represents the alignment of the table; The values
      • Left Left-align content (default)
      • Right Right align content
      • Center aligned content (default for th element)
  • < TD > : Table DataCell
    • Colspan indicates the merge of columns
    • Rowspan indicates the merge of rows

The form tag

Forms allow us to carry input information to the server. Simply put, a form allows you to submit data to a specified location. But one by one submission, inconvenient. The form solves this problem by putting all the data together and submitting it to the server.

The form properties

  • Action: The destination for the entire form submission
  • Method: indicates the form submission method
    • Get: Less data is transmitted during submission (ordinary text information will fail to be transmitted, but photos will fail to be transmitted), and plaintext submission (submitted data will be displayed after the URL of the browser, which is not suitable for login)
    • Post: a large amount of data (text or image) is transmitted during submission. Ciphertext submission (the submitted data cannot be seen after the URL of the browser)

Elements (controls) in a form

  • The type attribute of the <input> element
    • Text: Default value, plain text input field
      • Placeholder property: hint text
      • Maxlength property: The maximum number of characters that can be entered
    • Password: password input box
    • Checkbox: checkbox/checkbox
      • Checked: Checked
    • Radio: Radio button
    • File: uploads files
    • Reset: Resets the button
    • Submit: Indicates the submit button
    • Button: common button
  • < SELECT > : drop-down list/drop-down box
    • <option> : entry in the list
      • \selected: selected
  • <textarea> : Text field (multi-line text box)
    • You can specify the size of a textarea using the COLs and Rows attributes, but it is better to use the CSS height and width attributes.
  • < button > : button
    • In the form form, the function is the same as submit
    • Not in a form, just a normal button (more extensible with later javascript)

Matters needing attention:

  1. All elements in the form must have names (otherwise the server will not recognize the differences between multiple elements after submission to the server)
  2. Checkboxes can only be selected one at a time and must have the same name value
  3. All check boxes are in groups, and each check box within a group should have the same name value

Framework tags

  • The HTML page layout can be customized using the and frame tags. Can be understood as: with multiple pages assembled into a page.
  • Notice that the frame tag and the body tag do not coexist. “You without me, I without you.”

Other labels and special characters

The < meta > tag

  • The
    tag must be written between the tags
<meta charset="UTF-8"> 
<meta name="viewport" content="Width = device - width, initial - scale = 1.0"> 
<meta http-equiv="X-UA-Compatible" content="ie=edge">
Copy the code
  1. The character code of the current page is GBK: Simplified Chinese
  2. The name is viewPort and the data is text content=”width=device-width, initial-Scale =1.0″ The initial ratio of text to graphics displayed is 1.0
  3. The built-in version of IE is not the same for each computer. In order to be compatible with all versions, the document is rendered in the highest mode, that is, any version of IE is rendered in the highest standard mode supported by the current version
  • Use the meta tag to set the page to jump to the specified page at the specified time after loading
<meta http-equiv="refresh" content="5; url=http://www.baidu.com">
Copy the code

Note: in HTML if jump to the website resources on the Internet, then we write path, must take the protocol path.

The < link > tag

  • Use the link tag to import the CSS
  • Note: The link tag must also be written in the tag

Special characters

HTML 5 new features

HTML4 is different from HTML5

  • H5 contains the h4
  • Case insensitive
    • The label
    • attribute
    • The value of the attribute
  • Quotation marks can be omitted
  • The closing tag is omitted

Added semantic labels

Html4, 95% of all container tags use divs. If there are too many divs, it is difficult to distinguish them from each other by adding many semantic tags, so that divs “know their meaning by name”.

  • Section tags: Represent content areas, sections, and body parts of a page
  • Article tag: article
  • Aside from the content of the article
  • Header: the header, the top of a page
  • Hgroup tag: a combination of content and title
  • Nav TAB: Navigation
  • Figure label: Illustrated and illustrated
  • Foot: footer, the bottom of a page

Media label

To play a video on a web page, use \video> with attributes like:

  • SRC: indicates the location of the media resource file
  • Controls: Control panel
  • Autoplay: Autoplay (Google disabled, 360 browser available)
  • Loop: indicates a loop

New Form controls

  • <input>, modify the type attribute:
    • Color: color palette
    • Calendar date:
    • The month: calendar
    • Week: week
    • Number: indicates the number range
      • Min: minimum value (default is 1)
      • Max: maximum value (default value has no upper limit)
      • Step: increasing amount
    • Range: the slider
    • Search: search box (marked ×, can be deleted in the box with one click)
    • The progress bar < progress / >
  • Highlighting the < mark >
  • Associative input box <datalist> (Fuzzy query)
    • Option < option >