The next day tags HTML for three big lists

The label

Characteristics of labels

  • Keywords (tags) are enclosed in Angle brackets
  • Usually come in pairs (opening tag, closing tag)
  • The end tag has one more slash than the start tag
  • Img, meta, input are called “single tags”, “self-closing tags” and “empty tags”.

Attributes of tags

Used to describe a feature or function, usually after a keyword. There are built-in attributes and custom attributes.

form

  • Attributes always take the form of name/value pairs, such as name=”value”. (Key-value pairs)
  • There must be at least one space between properties and properties
  • Attributes are in no order

In the following example: SRC, Alt is the “attribute name” url, and the child is the “attribute value”. The property name and value are also called key-value pairs, where the property name is the key and the property value is the value.

<img SRC ="http://a.com" Alt ="小 孩">Copy the code

Common labels

The title tag

The title tag can be divided into six levels, h1 to H6, which are all in bold on the appearance, and the size decreases gradually from small to large. From the perspective of optimization, the importance decreases step by step. H1 is the most important and usually placed in the part of the logo

Shortcut: h{title}*6

< h1 > title < / h1 > < h2 > title 2 < / h2 > < h3 > title three < / h3 > < h4 > title four < / h4 > < h5 > five < / h5 > title < h6 > title six < h6 >Copy the code
Paragraph p
<! <p> </p>Copy the code
Image tag: IMG
  • SRC: indicates the address of the image
  • Alt: Substitute text appears next to the image when the image fails to load
  • Title: The following text appears when the mouse slides over the picture
<img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5233581049f64d818d87a458716327c2~tplv-k3u1fbpfcp-zoom-1.image" Alt =" Alt =" Alt =" Alt =" Alt =" Alt ="Copy the code

Hyperlink: A
  • Href: Url to jump to
  • Back to top: href=”#”;
  • Reload: href=””;
  • Prohibit jumping: href= “javascript:;”
  • Anchor jump: click on a link text to jump to the corresponding module, give each module a name with an ID. The href value in the A tag should be # + ID
  • Targrt:
  • Self: Opens in the current window
  • Title: Opens in a new window
< a href = "#" > back to top < / a > < a href = "" > refresh file < / a > < a href =" javascript:;" > payment < / a > < a href = "http://www.baidu.com" target = "_black" > baidu black < / a > < a href = "http://www.baidu.com" The self target = "love" > baidu < / a >Copy the code
Supplementary label
  • Div: Large area, big box tag, block level.
  • Span: Small areas, small grid labels, inline elements.
  • Formatting tags: Tags come with styles
  • Bold: B, strong
  • Italics: I, em
  • Delete lines: S, del
  • Underline: U, INS
<! -- Italic --> < I >haha</ I > <em>haha</em> <! -- Bold --> <b> bold </b> <strong> bold </strong> <! -- Delete line --> <del> delete line </del> <s> -- Underline --> <u> underline </u> <ins> underline </ins> <! --> <big> </big> <! -- Reduce size --> <small> Reduce size </small>Copy the code
Preformatted label

Pre: It will be displayed in the browser according to the preset format, i.e. what is written in the edit area will be displayed on the page

* * * 123 * * * () () [] 123 123
Video: video

  • Audio: audio
  • Controller controls:
  • Autoplay: autoplay
  • Loop: indicates a loop
<audio src="qt .mp3" controls loop autoplay></audio>
Copy the code
iframe

The iframe element creates an inline frame that contains another document

  • Display border when frameborder=”1″
  • Do not display border when frameborder=”0″

B, strong, I, em

I and em are italics,b and strong are bold, but from the perspective of optimization,em and strong are semantic stronger, more important than I and B

html

Basic structure of HTML

The document statement

  • Helps browsers display web pages correctly;
  • Define the type of this document;
  • Case insensitive;
  • Must be on the first line (because browsers parse from top to bottom)
  • You have to document it, and if you don’t, weird things will happen;
  • It’s not a label, it’s just a statement;
<! --> <! DOCTYPE html> <! -- Root element --> < HTML > <head> <! -- Character encoding, <meta name="keywords" content=" keywords" > <meta name="description" content=" description" > <title> </title> </head> <body> <! - visual area -- -- > (to customers) < h1 > title < / h1 > < img SRC = "http://a.com" Alt = "got" > < / body > < / HTML >Copy the code

Quickly generate an HTML document

  • Create a new file with the suffix “.html “or”.htm”
  • Use English input method
  • ! +enter

Semantic HTML tags

meaning
  • Reasonable labels do reasonable things
Why follow tag semantics
  • Good for SEO optimization (that is, search engine crawling, search engine crawlers also rely on tags to determine the context and the weight of each keyword);
  • When styles are lost, you can still render structure better;
  • Better support for various terminals, such as accessible reading and audio novels;
  • Good for team development and maintenance, the W3C set a standard for us, so that teams follow this standard, so that the code differences will be reduced, in the development and maintenance can improve efficiency;
How to follow tag semantics in daily work
  • Minimize meaningless tags, such as span and div;
  • Try not to use CSS attributes of the tag itself, such as B, FONT, and S. If these styles are needed, use CSS styles to add them.
  • Use strong and em for emphasis, but use CSS styles as much as possible.
  • When building a list, use unordered list, ordered list, custom list;

List three

The three lists are fixed format. The one next to OL and UL must be LI, not other labels, but you can continue to nest other labels inside Li.

An ordered list

<! - an ordered list - > < ol > < li > 1 < / li > < li > 2 < / li > < li > 3 < / li > < li > 4 < / li > < / ol >Copy the code

Unordered list

<! - the unordered list - > < ul > < li > 1 < / li > < li > 2 < / li > < li > 3 < / li > < li > 4 < / li > < / ul >Copy the code

Custom list

Dl, DT, DD. The next thing to dl can only be DT or DD, but there are other labels you can put inside dt or DD.

A day of 3 eat < / h3 > < h3 > < dl > < dt > < / dt > breakfast soya-bean < dd > < / dd > < / dd > < dd > steamed stuffed bun lunch < dt > < / dt > < dd > over rice < / dd > < / dd > < dd > egg surface dinner < dt > < / dt > < dd > < / dd > small lobsters < DD > Beverage </ DD > </dl>Copy the code

Several ways CSS is introduced

The inline type

<div style="color:deeppink;" Word-wrap: break-word! Important; "> < p style =" max-width: 100%; </div>Copy the code

embedded

Write inside the head with the style tag

<style>
        div,p{
            width:500px;
            height:200px;
            background:greenyellow;
            color:hotpink;
        }
</style>
Copy the code

Outside the chain

Link the stylesheet in the head using the link tag

<link rel="stylesheet" href="index.css">
Copy the code

The import type

<style>
        @import "index.css"
</style>
Copy the code

Interview question: The difference between link and @import

  • Link is an XHTML tag and @import is a complete CSS implementation. You can set a lot of attributes in link, but you can’t set @import
  • Loading sequence: When users browse the page, the style will be loaded at the same time if link is used, while @import can only load the style after all the page is loaded, so sometimes the network is slow and there will be no style.
  • Compatibility issues, @import has compatibility issues that are not supported by earlier browsers, but link does not have this issue