Review the basics of HTML

This is a summary note made by myself after I completed self-study. I would like to thank you for your advice if there are any mistakes. I did not write some basic knowledge points because they are not complete

The basic grammar

The label

Labels are classified into single labels and double labels

Common single tag: br/ hr/ img input link

HTML head title Body table TR TD SPAN P form

h style b strong i div a script

H1-h6: heading tags P: paragraph a: link IMG: image BR: line feed Q: quote

The style attribute is used to change the style of an HTML element

There are three style writing methods: inline style External style sheet (LINK) Internal style sheet

Common style styles:

Background text-align The text

font-family color size

Hyperlink three uses: jump link and anchor link function link

Common link indicates forward address. Complete the address

Anchor link indicates a jump to a location on the current page of an anchor point

Function link executes JS code as shown

##target: indicates the location of the jump window. -self: indicates that the current page is opened. - Blank: indicates that the new window is opened. Click to display propertiesCopy the code

Path writing:

Absolute path: (off-site resources) protocol name // host name: port number/path go directly to the url to copy the post

Relative path:./ Can start with… / indicates that the upper-level directory is written first. /

Just writing a # will automatically jump to the beginning of the page

A Link attributes:

Underlining by default

Target defines where the document is linked. Name specifies the name of the anchor

Href Address of anchor link

Table form:

Th, caption tr, TD

Thead: header tBody: body tfoot: footer col: column attribute

Unordered list ul uses li

Ordered list OL uses li

Custom list DL uses li

HTML entity character

Looking in MDN entities is to display special symbols on the page. You can score and so on

& words; & # Numbers; 1, < symbol &lt; Greater than sign &gt; Space & have spent Copyright symbol &copy; The & symbol & ampCopy the code

The element

Multimedia Elements:

Video video:

Controls Autoplay muted play loop

** IMG image: ** single label empty element.

Use the SRC attribute to locate the image location resource

Replace the text attribute Alt

Map element: Split the image and click on different parts to create different links

Container elements:

Div element, used to be Div

Header Container Header, footer, end of article, middle of article

Section, aside sidebar

Container elements can contain any element understood semantically

The A element can also contain any element

Block-level elements and row-level elements

(HTML5 is called content category substitution)

** Block-level elements: ** Most HTML elements are block level elements or inline elements

Block-level elements on one row start and end horizontally on a new row. The default width is 100% of the parent container’s vertical alignment

** Line-level elements: ** Arranged on a line the default width is the same line as the content

Width invalid height invalid margin invalid padding invalid

Translation:

Display: block, whose representation is set to block-level elements have properties and properties of block-level elements

Display: Inline set to inline elements,

Inline-block (input IMG) has the property that block elements can set the width and height, and has the property that inline elements do not break lines

You can set vertical-align (the vertical alignment property is only valid for inline-block elements)

Internet Explorer 7 is not supported

Solutions:

1 Set inline-block to enable block elements to have layout properties. Then set display: inline to enable block elements to display inline styles

2 Set display: inline to trigger the layout using zoom: 1

Block-level elements can contain row-level elements and block-level elements. Row-level elements can’t contain block-level elements and can only contain other row-level elements or text

Block-level elements eg:

|

< address > | defined address | | -- -- -- -- -- -- -- -- -- - | -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - | | < caption > title | | defined form < dd > | Definition list definition entry | < div > | defined partition in the document or section | | < dl > | definition list | | < dt > | defined in the list of project | | < fieldset > | defined a set of framework | | < form > | create an HTML form | | < h1 > | defines the title of largest | | < h2 > | defined subtitle | | < h3 > | header definitions | | < h4 > | header definitions | | < h5 > | header definitions | | < h6 > | defined the title of the smallest | | < hr > create a horizontal line | | | < legend > | element for the fieldset element defines the title | | < li > | tags define the list items | | < noframes > | for the browser to display text that don't support frame, Within the frameset element | | < noscript > | defined in the script is not implemented alternative content | | < ol > | defines an ordered list | | < ul > | defined unordered list | | < p > | | tags define the paragraph | < pre > | Define preformatted text | | < table > | | tags to define an HTML form | < tbody > | tags form the main body (body) | | < td > | form the standard cell | | < tfoot > | define table footer (footnotes or table) | | < th > | defined header cell | | < thead > | tags define the table header | | < tr > | defined in the table line | | * * * * row-level element < a > | tags define the anchor | | -- -- -- -- -- -- -- -- -- - | -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - | | < abbr > | said an abbreviated form | | < acronym > | defined only take the acronym | | < b > | bold | | < bdo > | can override the default text direction | | < big > | tuba bold | | < br > | line | | < cite > | references defined | | < code > | defined computer code text | | < DFN > | defines a defining project | | < em > | is defined as the content of the emphasis on | | < I > | italic text effect | | < img > to web page to embed an image | | | < input > | input box | | < KBD > | keyboard text | | < label > | labels for input elements define mark (mark) | | < q > | Define a short reference | | < samp > instead | | defined sample text | < select > | create radio or multiple-choice menu | | < small > | | present small font effect | < span > | | combination in the document inline elements | < strong > | Tone stronger emphasis on the content of the | | < sub > | defined subscript text | | < sup > | superscript text | | < textarea > | multiline text input control | | < tt > | | typewriter or width of the text effect | < var > | | defined variables Variable yuan mr.zhou list - variable element is determined according to the context that element is a block element or inline element | < button > button | | | -- -- -- -- -- -- -- - | -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - | | < del > | defined in the document has been deleted text | | < iframe > | create an inline frame with another documents (that is, the inline frame) | | < ins > | tag definition has been inserted in the document text | | < map > | client-side image map (hotspot) | | The < object > | object | | < script > | | client scriptCopy the code

The interview examination site

1. HTML Hypertext Markup language went through html2.0 html3.x html4.x HTML5

2. HTML is responsible for content and structure CSS is responsible for style presentation JS is responsible for dynamic interaction advantages:

Enhance the readability of HTML documents, load corresponding files on demand to reduce unwanted requests, and concentrate related files for easy maintenance and invocation

3 new HTML5 features

Semantic, reduce third-party plug-in references (Flash), introduce Web Workers specification, richer application (Web offline JSAPI Canvas)

4. There are three browser rendering modes: Weird mode near standard mode Standard mode

Weird mode was designed to be compatible with earlier browser features as follows:

The algorithm that triggers the width and height of the IE box model is different from the W3C box model

Font styles in tables are not inherited

Setting left and right margins auto (when left and right margins are set to Auto) and width will not center horizontally

Content beyond the height of the container will stretch the container rather than overflow it

The color must begin with a hexadecimal notation #

define

HTML elements: All code from the start tag to the end tag

HTML Attributes: Provides more information about HTML elements

Href is an attribute of the A tag

Attributes are in the form of name key-value pairs

The submodel width and height algorithms are different from the W3C box model

Font styles in tables are not inherited

Setting left and right margins auto (when left and right margins are set to Auto) and width will not center horizontally

Content beyond the height of the container will stretch the container rather than overflow it

The color must begin with a hexadecimal notation #

Focus on

I feel that the review of HTML focuses on the understanding of block level elements and line level elements, the semantic and specific application of tags, or have to write more and use more natural will, come on