HTML is introduced

concept

  1. Hypertext Markup Language
  2. For Web development, parsed by the browser

version

  1. HTML 4.01

    <! DOCTYPEhtml PUBLIC "- / / / / W3C DTD XHTML 1.0 Transitional / / EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Copy the code

  2. HTML 5

    <! doctypehtml>
Copy the code
    • HTML5 deprecates many tags, such as iframe/center/ S/U
    • Add structured tags such as header/footer/ Aside /nav
    • Add a media label, such as Vedio/Audio
    • Some JavaScript apis are open
    • CSS3 technology: transition, animation, transformation

The label

  1. Double label

    Open label to close label, head label to tail label

    <P>The text</P>
<div></div>
Copy the code

  2. A single tag

    To comply with the XHTML specification, single tags also need to be closed

    <br>
<br />
Copy the code

HTML tags

head

<meta charset="UTF-8" />
<title>Index</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
Copy the code

  1. title

    Home page: Website name + keyword description

    Details page: Details name + site name + Introduction

    List page: category name + keyword + site name

    Article page: title + category + site name

  2. keywords

    The value contains 100 characters separated by commas (,)

    Site name + category information + site name

  3. description

    Website description information, 80-120 Characters

    Summary description of title + keywords

Priority of search engine cognition:

title > description > keywords

  1. charset
    • Gb2312: China National Standard code for Information processing, simplified Chinese code
    • GBK: Standard for Chinese character expansion, expand the inclusion of Chinese characters, increase traditional characters and Tibetan, Mongolian and Hui names
    • Utf-8: universal code. It contains almost every word in use in the world

h1-h6

  1. Heading tag, heading tag
  2. Bold, a single line, with a margin of about 21 px
  3. H1 Font size is 2 em, default is 16 * 2 = 32 px

p

  1. Exclusive line, upper and lower margin 16px
  2. Indent using the style text-indent: 2em

B and strong

  1. bold
  2. B is a physical label, and strong is a semantic label
  3. Strong is recommended

I and em

  1. Emphasize, italics, emphasize
  2. I is a physical label, and EM is a semantic label
  3. Em is recommended.

Del and ins

  1. Del: deletes a line
  2. Del is equivalent to p plus style text-decoration: line-through
  3. Ins: underline
  4. Ins is equivalent to p plus style text-decoration: underline

address

  1. Address, emphasize
  2. italics

div

  1. Box, container, block, division
  2. Page structure tag, used for layout

Br and hr

  1. Br: a newline
  2. Hr: Dividing line
  3. Not recommended for formal development

img

<img src="" alt="" title="">
Copy the code
  1. SRC: indicates the resource path, which can be a network path, a relative path, or an absolute path
  2. Alt: indicates the content displayed when the resource fails to load
  3. Title: The content displayed by briefly hovering the mouse over the picture

a

<a href="http://baidu.com" target="_blank">Go to baidu</a>
<a href="tel:12345678910">Make a phone call</a>
<a href="mailto:[email protected]">email</a>
<a href="#box">Locate the element with id box</a>
<a href="javascript:alert(1);"Pop-up ></a>
Copy the code

  1. A: What’s the anchor point

  2. function

    Hyperlinks, phone calls, emailing, location, protocol qualifiers

  3. The target attribute with a _blank value opens on a new page

Sup and sub

  1. Sup: superscript label, superscript
  2. Sub: subscript label

span

  1. Inline element
  2. No styles are used by default

Ol and ul

  1. Ol: Ordered list

    <ol type="1" start="10" reversed></ol>
Copy the code

    Use the type attribute to select the ordinal type, such as 1, a, a, I, I

    Use the start attribute to define the start sequence number for numbers only

    Reversed can be used in reverse order

  2. Ul: unordered list

    Type: Disc, square, and circle are available, which are small, square, and circle respectively

  3. Ul, OL, and Li are all block-level elements

table

<table border="1" cellpadding="10" cellspacing="10">
    <caption>The title of the table</caption>
    <thead>
        <tr>
            <th>id</th>
            <th>name</th>
        </tr>
    </thead>
    <tbody>
    <tr>
    	<td>1</td>
        <td>Jett</td>
    </tr>
    <tr>
    	<td>2</td>
        <td>John</td>
    </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="2">information</td>
        </tr>
    </tfoot>
</table>
Copy the code

  1. Caption: a title

  2. Tr: line label

  3. Th: header

  4. Td: cell

  5. Table attributes

    • Cellpadding: Inside margin of a cell
    • Cellspacing: cellspacing

  6. Tr attributes:

    • Colspan: column merge
    • Rowspan: row merge

  7. Semantic tags such as Thead, Tfoot and TBody are recommended

Frameset and iframe

<frameset rows="10%, 90%,">
    <frame src="top.html"/>
    <frame src="left.html"/>
    <frame name="mainFrame" src="mian.html"/>
</frameset>
Copy the code

  1. Frameset: Not recommended

    • It cannot be in the body
    • Data interaction between different frames is not convenient
    • Frame is linked to too many pages, which increases the request load
    • Not friendly to search engines

  2. Iframe: inline frame

    • Not friendly to search engines

    • Scrollbar mess

    • The loading process is not easy to monitor

The HTML form

Forms are used by users to submit data

Data = data name + data value

form

<form action="" method="get">
</form>
Copy the code
  1. Form: form, block-level element
  2. Method: Request method, get/ POST
  3. Action: indicates the destination address for submitting data

input

  1. Input: form input control
  2. Type: Input type, such as text/password
  3. Value: indicates the entered value
  4. Maxlength: indicates the maximum number of characters
  5. Readonly Read-only control that can submit data upon submission
  6. Disabled Disables the control and does not submit data

label

When the for property of the label is the same as the id of the control, clicking on the label causes the control to take focus

radio

  1. Radio: Radio button
  2. A group of radio buttons with the same name can be selected at a time
  3. Checked Property Settings Are selected by default

checkbox

  1. Checkbox: multi-select button
  2. Multiple choice buttons with the same name can be submitted to the back end to be received by an array
  3. Checked Property Settings Are selected by default

select

<select name="lang">
    <option value="">Please select a</option>
    <option value="java">Java</option>
    <option value="js">JavaScript</option>
</select>
Copy the code
  1. Selcet: drop down selection box, name is the data name at the time of submission
  2. Option: submits the text in the option tag if no value attribute is given
  3. Select can be multiple with the multiple attribute, which can be received in an array when submitted to the back end

textarea

  1. Textarea: text field
  2. Cols attribute is the average number of characters, control width, generally default English character width 8px * COLs + scroll bar width 17px
  3. The Rows property controls the height of rows
  4. Textarea tags must not have Spaces or line breaks between them. This will be displayed as text

Fieldset and legend

<form action="" method="get">
    <fieldset>
        <legend>The user login</legend>User name:<input type="text" name="username" />Password:<input type="password" name="password" />
        <input type="submit" value="Submit" />
    </fieldset>
</form>
Copy the code
  1. Fieldset: Grouping, block-level elements for forms
  2. Lengend: Displays group headings, block-level elements

The HTML element

  1. Inline element

    Also called inline element, interline element

    Width and height cannot be defined without exclusive row

    Such as SPAN, strong, EM, del, INS, del, INS, sub, sup, and A

  2. Block-level elements

    Exclusive row, you can define width and height

    Such as P, div, H1, address, ul, OL, LI, table, and form

  3. Inline block level elements

    Such as IMG, input, SELECT, textarea, iframe

  4. Note:

    Inline elements can nest inline elements, and block-level elements can nest any element

    P tags cannot nest divs, and A tags cannot nest A tags