HTML tag section (block-level/row-level)

I. Basic block-level labelingClassification of 1.HTML Tags:A. Block-level Tags: Display as blocky, exclusive line, wrap. B. Row-level Labels: in one row, from left to right, the lines are not wrapped. 2.h label (title tag)

H Tag: Title tag, shown as bold bold!! !

Title label, divided into six kinds: h1~h6:h1 max, h6 min!

<H1>This is the H1 tag.</H1>        <H2>This is the H2 tag.</H2>        <H3>This is the H3 tag.</H3>        <h4>This is the H4 tag.</h4>        <h5>This is the H5 tag.</h5>        <h6>This is the H6 tag.</h6>

2.hr Tags <!--hr Tags: represents a horizontal line--3.P label (paragraph label) p tag: represents the paragraph label.equivalent to a piece of text in our article!! 4.<br/> Line breakNote:In the code, the direct carriage return line, the browser does not know. You must use the newline character <br/> To tell the browser to break the line here. 5.pre label (pre-formatted label) The pre tag retains the space in the code, enter the symbol, and so on, directly in the browser display.The pre tag is often used to display code in Web pages, preserving code formatting!!! 6.blockquote (block reference tag) BLOCKQUOTE: Block reference tag. Indicates that a paragraph was referenced from another site.There is an important attribute: Cite= "" indicates the source of the quote, and a website address is often used. But the browser does not show any difference.two. Layout-based block-level labels1. Unordered lists have multiple list items, each preceded by a small black dot, called an unordered list. expressed in <ui>. Each small item in the list is represented by a <li>.

         <ul>            <Li>This is the first item in the unordered list</Li>            <Li>This is the second item in the unordered list</Li>            <Li>This is the third item in the unordered list</Li>            <Li>This is the unordered list fourth item</Li>        </ul>

2. Ordered list with <ol> tags, each small item in the list is represented by <li>.

<ol>            <Li>This is the first item in a sequence list</Li>            <Li>This is the second item with the sequence list</Li>            <Li>This is the third item with the sequence list</Li>            <Li>This is the fourth item in a sequence list.</Li>        </ol>        

3. Definition list (definition description list) definition list <dl>, there is a title <dt>, there are multiple description items <dd>. The caption default shelf is displayed, describing the relative title of the item being indented backwards.

<DL>            <DT>This is the title of the DL list</DT>            <DD>This is a description of the DL List 1</DD>            <DD>This is a description of the DL List 2</DD>            <DD>This is a description of the DL List 3</DD>                    </DL>

4. Picture combination label (understanding) combination label <figure> there are two parts; ① picture follow up; title of ② Picture: <figcaption></figcaption>5 . Partition Label Div(most commonly used labels)Without any special effect,just a package feature that is often used to partition chunks in a Web page. This tag can wrap anything and need to be used in conjunction with CSS.three. Basic row-level labels1. The difference between block-level labels and row-level labels (very important!!!) )① block-level tags: default width 100% (full line), block-level label wrap (exclusive line, right cannot have anything); block-level tags you can use CSS to set the width height! ② row-level labels: The default width is open by the content (the content is wide, the width is much wider), row-level labels do not wrap (one line, from left to right in order), row-level label width height cannot be set!2. Common row-level labels1. Span tag: ①span tag is just a wrap function, without any other meaning; ②spanfunctions similar to div, it should be used in conjunction with CSS. Only Div is a block-level label, and span is a row-level label.2, [Em/strong i/b difference]: {Focus}Both ①em and I can tilt. Strong and B can be bold!       However, I and B are simply italic bold, while Em and strong have more emphasis on semantics. ②em and strong both emphasized, but the level of strong emphasis is higher!Note:1, emphasis on the purpose: let the search engine know the content of the emphasis on the page!       Easy Search engine Display! 2, strong and EM can be nested in multiple layers, indicating the increase in the degree of emphasis!      3. Q Tag Q tag: indicates short reference. Cite property: Used to declare the source of the reference."Common reference tags"<blockquote> refers to a section of content </blockquote> <q> used to quote a sentence </q> <cite> often used to quote work name, calligraphy and painting name </cite>Same point:Three reference tags, all using the Cite property to represent the reference sourcedifferent points:① refers to different content.                     Blockquote-> a paragraph,q-> a sentence,cite-> works name ② The default effect is different. Blockquote-> the default whole paragraph to the right indent; q-> default quotes; cite-> default Tilt! 4, small and big small tags: reduce the font size one; Big tags: enlarge the font number one;Note:①small and big can be nested in multiple layers until the font reaches the minimum or maximum; ② These two labels have been eliminated and are not recommended for use. 5. IMG Image Tag

①src Property: The path that represents the picture

[Legal way of picture Path]A. Network links:Because pictures on other sites, if other sites delete pictures, we also cannot access, so it is not recommended to use this way; B. Absolute path:Images that use absolute paths can only be accessed by using the file protocol on this computer!                   Therefore, the use of this method is strictly prohibited! c. Relative path:① picture in the same folder as the current document: Directly write the picture name eg:② picture in the next level folder in the current document: folder name/Picture name eg:③ picture in the previous level folder of the current document:.. /Picture name (.. /indicates a back layer) eg:However, it is important to note that images must be included in the project and cannot be accessed outside the project.

②height: Height of the picture: width of the picture

Eg:

③title: The title of the picture, that is, the mouse pointer to see the prompt text

Eg:

④alt: The text displayed when the picture cannot be loaded. Omitting alt, the title content is displayed by default.

Eg:

⑤align: How the text around the picture is aligned relative to the picture.

Optional value:top-> picture top center-> Picture Middle bottom-> bottom of pictureEg: 123456.a label (hyperlink) a Label property①href Properties:Represents a page where hyperlinks need to jump.A. Can write network address:<a href= "http://www.baidu.com" > This is a hyperlink </a>B. You can open the local HTML file:Use relative paths to determine file addresses. Same as the IMG tag determination.②title Properties:The mouse pointer is displayed after the prompt text.③target Properties:Set new page Open window position Optional value:-self self page open (default)-blank new window opens"Special Applications for Hyperlinks"1. Functional Links: (learn)mailto://Click the link to send email code example: <a href= "Mailto://[email protected]" > email!!           </a> tencent://message/?uin=1097270356 Click and specify QQ chat also: tell://mobile phone side click to call, message://mobile phone to send text messages; ftp://upload and download files using FTP protocol;2. Anchor Chain Connection: (key)① sets an anchor point at the specified position of the page, using the Name property to represent the anchor's name; <a name= "Top" ></a>② the href attribute of the hyperlink to the name of the # Plus anchor point; &lt A href= "#top" > click on the link to jump to the top anchor position </a>>>> chain connection between pages① sets an anchor point at the specified position in the new page, using the Name property to represent the anchor name; <a name= "Top" ></a>② the href attribute of the hyperlink to "new page address # plus anchor name"; <a href= "test.html#top" > Click Link, jump to test.html top anchor location &LT;/A&GT;7.W3C spec: 1.W3C: World Wide Web Consortium, responsible for developing and maintaining web industry development standards; 2.W3 C Required Specification: ① specification advocatedtwo separate:              content and performance separation (HTML and CSS)               content Separation from behavior: (HTML and JavaScript separated)          ②html language to follow the semantics!!          ③ specifications for code writing:              tags and attributes must be lowercase     &NB Sp         tags must be closed               property values must be quoted (img src= "attribute value")   &NBSP ;           tags must be properly nested (cannot intersect, block-level labels can wrap row-level labels, row-level labels cannot wrap block-level labels) 8. Other line-level tags: [learn]    (1) U Tags: underlined code:         <u>u label underlined </u>    & nbsp    <span style= "text-decoration:underline;" &GT;CSS implementation underline </span>      (2) s label: Strikethrough code:         <s>s tag with strikethrough </s >         <span style= "Text-decoration:line-through;" >css implementing Strikethrough </span>    (3) Defining professional terms (DFN defining professional terms abbr professional terms abbreviations)      Search engine, currently a section of computer code.       But code does not preserve the formatting of the codes and needs to be used in conjunction with the pre tag.     (5) var: denotes variable code:      <var>x</var>+<var>y</var>=<var>z< /var>    (6) BDO: Define the display direction of text           RTL right-to-left LTR left-to-right     (7) KBD: Text that requires user input &N Bsp   (8) Sup,sub: Up and down     (9) Time: Indicates the duration   

HTML tag section (block-level/row-level)