HTML

HTML skeleton

<! DOCTYPEhtml>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0" />
    <title>Document</title>
  </head>
  <body></body>
</html>
Copy the code

< HTML >
HTML tag, the largest tag in the page, the root tag. The element contains all the content of the document, and the content of the page is basically put in the body

  • In the head TAB of the page, it represents the configuration of the page. What configuration is there?
  • Character set, keywords, page description, page title, IE adaptation, viewport, iPhone icon, etc

Common internal labels of header labels are as follows:

  • <title>: Specifies the title of the entire web page, to be displayed at the top of the browser.
  • <base>: Specifies the default address or destination for all links on the page.
  • <meta>: Provides basic information about the page
  • <body>: Used to define the content to be displayed in an HTML document, also known as a body tag.
  • <link>: Defines the relationship between documents and external resources

shortcuts

  • Ctrl+B: Show/hide the sidebar
  • Ctrl+: Create multiple editors (copy code!)
  • Ctrl+1, 2: Switch to the first and second editors
  • Ctrl+ -/+: Zoom in (zoom out)
  • Ctrl+ Shift +N: Reopens a software window
  • Fn + ← (or Win + ←) /Fn + → (or Win + →) : Move the cursor to the left/right of the current line
  • Ctrl+ Enter: Add a new line below the current line and skip to that line
  • Alt+↓/↑: Moves the code down or up
  • Alt+Shift+↓/↑ : Copies the code like down/up
  • Ctrl + Alt + ↓/↑ : The cursor appears in consecutive columns at the same time
  • Alt+ mouse click: The cursor appears at the click
  • Select a text and press Ctrl + D repeatedly to select the same words in the entire text
  • After selecting a bunch of text, hold Alt + Shift + I to create a cursor at the end of each line
  • Ctrl+U: Reverses the cursor movement to the previous position
  • Ctrl + Shift + F; Search code

Typesetting label

HTML tags are hierarchical. HTML divides all tags into two types:

  • Text-level labels: P, SPAN, A, B, I, U, em. Text-level tags can only contain text, images, and form elements

  • Container-level labels: DIV, H series, LI, DT, dd. Container-level tags can be used for anything

The title tag

Headings are defined using < H1 > through < H6 > tags.

defines the largest title, and

defines the smallest title. It has the align attribute, which can be left, center, or right

Paragraph tags<p>

The paragraph tag p generates blank lines above and below

  • P tags are text-level tags that can only contain text, images, and form elements!

Horizontal label<hr />

Horizontal separation lines can make the document structure clear and hierarchical.

Wrap the label<br />

Text can be forced to wrap

<div>and<span>The label

  • Div tag: You can split the contents of the tag into separate blocks. Must occupy a separate row.
  • The span tag: acts like a div, but does not wrap.

Font tags

Special characters (Important)

  • &nbsp;: the blank space
  • &lt;: less than the number
  • &gt;: is greater than the number

Bold, underline, strikeout, italic

  • <b>or<strong>: bold
  • <u>or<ins>: the underline
  • <s>or<del>: delete lines
  • <i>or<em>: italic

link

base

  • How do all hyperlinks in the control page open
<base target="_blank" />
Copy the code

hyperlinks<a>

Properties of hyperlinks

  • href: destination URL, # is empty link
  • title: Hover text.
  • name: is used to set the name of an anchor.
  • target: Tells the browser how to open the target page.targetAttribute has the following values:
    • _self: display in the same web page (default)
    • _blank:Open in a new window.
    • _parent: displays in the parent window
    • _top: displays in the top-level window

The anchor link

  • The same page 
    <a href="#test">test</a>
<h3 id="test">The first</h3>
Copy the code
  • Different pages
<a href="test.html#test">test</a>

<! -- Another page test.html-->
<h3 id="test">The first</h3>
Copy the code

Img tags

  • srcProperty: Indicates the path of the image. English name source.
<! -- Images in the current directory -->
<img src="2.jpg" />
<img src="./2.jpg" />

<! -- Images in the upper directory -->
<img src=".. /2.jpg" />
<! - `.. / 'Either you don't write it, or you write it at the beginning. -->
Copy the code

  • Width property: The width of the image.

  • Height property: The height of the image. Note: When the image is scaled, set either width or height

  • Alt attribute: Replaces the content displayed by an image when the image is not available

  • Title: Suggestive text. Text that appears when the mouse is hovering.

  • The align property of the image: the position of the image relative to the surrounding text. The value can be bottom (default), Center, top, left, or right.

A list of tags

1. Unordered lists<ul>Each item in an unordered list is<li>

  • Type =" attribute value". Attribute values are optional:disc(Solid origin, default),square(solid square point),circleHollow circle.

2. Ordered lists<ol>Each of these terms is<li>

  • Type =" attribute value". Attribute values can be: 1(Arabic numerals, default), a, a, I, I. In combination withstartAttribute saidStarting from a few.
 <ol type="i" start="4">
	<li>Ha ha</li>
	<li>Ha ha</li>
	<li>Ha ha</li>
</ol>
Copy the code

3. Customize lists<dl>

< DL > has no attributes. The children of DL can only be DT and DD.

  • <dt>: The title of the list. This tag is required
  • <dd>: List item of the list

Note: DT and DD can only be in DL; There can only be DT and DD in DL.

Table label

<table>
  <tr>
    <td>1111</td>
    <td>2222</td>
    <td>3333</td>
    <td>4444</td>
  </tr>
</table>
Copy the code

<table>Properties:

  • border: border. Pixels are units.
  • style="border-collapse:collapse;": Cell lines are merged with table border lines (table borders are merged into one)
  • width: width. Pixels are units.
  • height: highly. Pixels are units.
  • bordercolor: Border color of the table.
  • align:formHorizontal alignment of. The value can be left right Center.
  • cellpadding: The distance between the contents of a cell and an edge
  • cellspacing: Distance between cells (margins)
  • bgcolor="#99cc66": The background color of the table.
  • Background = "path SRC /...": Background image. Background image takes precedence over background color.
  • bordercolorlight: The color of the top and left borders of the table, and the right and bottom borders of the cell
  • bordercolordarkThe right and bottom borders of the table and the colors of the top and left borders of the cell are used to set the 3D effect.
  • dir: Public property, the direction of cell contents. The value can be:ltr: Left to right (default),rtl: Right to leftdirIs a common attribute. If you place this attribute in any tag, it indicates that the position of the tag may be aligned from the right.

<tr>Line:

A table is made up of rows.

Properties:

  • dir: Public property that sets how the contents of this row of cells are arranged. The value can be:
    • ltr: Left to right (default)
    • rtl: From right to left
  • bgcolor: Sets the background color of the cells in this row. Note: there is no background property, that is, you cannot set the background image of this line, if you must set it, you can use CSS.
  • height: Height of a row
  • align="center": The content of a row is horizontally centered. The value can be left, center, or right
  • valign="center": The content in a row is vertically centered. The value can be top, middle, or bottom

<td>: cell

Properties:

  • align: Horizontal alignment of content. The value can be left right Center. If you want to center the content of every cell, this property is too cumbersome. Use CSS later.
  • valign: Vertical alignment of content. The value can be top middle bottom
  • width: Absolute or relative value (%)
  • height: Height of the cell
  • bgcolor: Sets the background color for this cell.
  • background: Sets the background image for this cell.

Merging of cells

Cell attributes:

  • colspan: Horizontal merger. For example,colspan="2"Represents the horizontal position of two cells to be occupied by the current cell.
  • rowspan: Vertical merger. For example,rowspan="2"Represents the vertical position of two cells occupied by the current cell.

<th>: Bold cells. The equivalent of<td> + <b>

<caption>: Table title. And when usingtrLabel tied for

  • Properties:alignRepresents the position of the header relative to the table. The value can be left, center, right, top, or bottom

Of the table<thead>Label,<tbody>Label,<tfoot>The label

There are and are not differences between these three labels:

  • 1. If you do, the code for these three parts can be in any order, and the browser will display the contents in the order of thead, tbody, and tfoot. If thead, tbody, and tfoot are not written, the browser parses and displays the table’s contents from top to bottom.
  • 2. When the table is very large and has a lot of content, if you use thead, tbody, tfoot tags, then the data can be retrieved and displayed. If not, the table cannot be displayed until all the table contents have been fetched from the server.

The form tag

The form label is represented with

and is used for interaction with the server. Form is to collect user information, is to let the user fill in, choose.

Properties:

  • name: The name of the form that JS uses to manipulate or control the form;
  • id: The name of the form that JS uses to manipulate or control the form;
  • action: Specifies the handler for the form data, usually PHP, for example: action= “login.php”
  • method: Indicates the submission mode of form data. The value can be GET (default) or POST

Note: When forms and tables are nested, the

tag is nested within the

tag.

<input>: Input label (text box)

Used to receive user input.

<input type="text" />
Copy the code

Properties:

  • Type =” Attribute value “: indicates the text type. Attribute values can be:

  • Text (default)

  • Password: indicates the password type

  • Radio: radio buttons that radio as a group of buttons with the same name (radio buttons, by nature, are not mutually exclusive; if they want to be mutually exclusive, they must have the same name attribute. Name = name = name . Much like the old radios, you push one button and the rest goes up. So it’s called radio.

  • Checkbox: select multiple buttons. The buttons with the same name attribute value are selected as a group.

  • Checked: Indicates that the option button or multiple option button is checked by default. This property can be used when the tag is set to type=”radio” or type=checkbox. The property value is also checked and can be omitted.

  • Hidden: A hidden box that contains information in a form that the user does not want to see

  • Button: ordinary button, combined with JS code for use.

  • Submit: A button that sends data about the current form to the server or other program for processing. The button doesn’t have to write value to automatically have “submit” text. This button actually has a submit function. After clicking the button, the form will be submitted to the page specified in the Action property of the Form tag.

  • Reset: The reset button clears the contents of the current form and sets it to the original default values

  • Image: The image button does exactly the same as the submit button, except that the image button displays the image.

  • File: indicates the file selection box.

  • Value =” content “: the default content of the text box (already filled in)

  • Size =”50″ : Indicates that 50 characters can be displayed in the text box. An English or a Chinese character counts as one character. The size attribute value is not in pixels.

  • Readonly: The text box is read-only and cannot be edited. Since its property value is also readonly, the property value can be left unwritten. After using this property, the cursor cannot be clicked in Google Browser. In Internet Explorer, the cursor can be clicked, but the text cannot be edited.

  • Disabled: The text box is read-only and cannot be edited. Attribute values may not be written.

<select>: Drop-down list label

Each item in the

Select tags are group tags like UL, OL, and DL.

<select>Attributes of the tag:

  • multiple: You can select multiple options from the drop-down list. The attribute value is multiple, or there may be no attribute value. In other words, we can write this asmultiple=""And we can also write thatmultiple="multiple".
  • size="3": If the property value is greater than 1, the list is a scroll view. The default property value is 1, which is the drop-down view.

<option>Attributes of the tag:

  • selected: Primary election. No attribute value.

<textarea>Label: Multi-line text input field (text field)

A. text B. area C. text D. area

Properties:

  • rows="4": Specifies the number of lines in the text area.
  • cols="20": Specifies the number of columns in the text area.
  • readonly: read only

* * * * (lable > tag

<input type="radio" name="sex" id="nan" /> <label for="nan">male</label>
<input type="radio" name="sex" id="nv"  /> <label for="nv">female</label>
Copy the code

In the code above, make the for value of the label tag the same as the ID value of the input tag, and then the label and input are bound.