HTML based

What is HTML

HTML: Hyper Text Markup Language

Hypertext includes: text, pictures, audio, video, animation and so on.

Markup language: In the form of tags.

The role of the HTML

In the front-end HTML, CSS, JavaScript three technology flows, THE role of HTML for building web page frame.

HTML Document format

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
</html>
Copy the code

Basic concepts in HTML

Tags: Such as

content wrapped in Angle brackets is called a tag. Tags are divided into double tags and single tags. The previously mentioned is double tag. As the name implies, double tag consists of two tags to form a complete semantic, wherein is the start tag, also known as an opening tag. is an end tag, also called a closing tag. The

mentioned earlier is a single tag, consisting of only one tag.
is the p element, I Love China.

is the P element, I Love China. Is the content of this p element. Most elements can be nested, such as

I Love China.

. Elements that have no content are called empty elements, such as

, which has no closing tag.
Attributes: HTML tags can have attributes. The attributes of the tag are used to represent more of the tag’s functions and presentation. The attribute is in key value format, for example, key=”value”. An example of a hyperlink to Baidu is click to baidu , where href=”” is the attribute of the tag.

The HTML title

The < H1 >
tags to < H6 > tags are used in HTML to indicate level 1 to level 6 headings. The header content is written between the opening tag and the closing tag. For example,

this is a secondary title

The browser automatically adds a blank line above and below the title.

Avoid using headings to produce bold or large text, as search engines will index the structure and content of the page based on headings.

HTML is horizontal

The

tag is used in HTML to create horizontal lines that can be used to split content.

HTML comments

HTML uses
tag represents comments, such as
. Writing comments is a good habit to have.

HTML paragraphs

HTML uses the

tag to represent a paragraph, as shown in the following example:

<p>The first paragraph</p>
<p>The second paragraph</p>
Copy the code

The browser automatically adds a blank line above and below the

tag.

HTML line

The

tag is used in HTML to indicate line breaks.

The

element is an empty element with no closing tag.

HTML text format

Bold text can be defined in HTML using or . is a semantic tag for emphasis. The content in this tag is more important in search engines, and some speech readers also use this tag to reinforce the tone of the reading. For example, should be valued. Bold indicates . is a simple visual representation of text as bold, no emphasis, if not for emphasis, just to show the effect of bold, you can use CSS to control the bold style.

Italic text can be defined in HTML using either < I >
or . is a semantic tag with emphasis. The content in this tag is more important in search engines, and some speech readers use this tag to reinforce the content when reading. For example, should be emphasized here. Italics indicate . < I >
is simply a visual representation of text in italics, without emphasis. If not for emphasis, just for italics, you can use CSS to control the italic style.

Superscript words can be defined in HTML using the tag. For example, the square of 100 can be displayed as 100².

Subscript words can be defined in HTML using the tag. For example, the chemical formula for water can be shown as H₂O.

The < INS > tag can be used to define text underscores in HTML. The tag can also define text underscores. This is not recommended. Text strippers can be defined in HTML using the tag. Text strippers can also be defined with the and
tags and are deprecated.

HTML hyperlinks

A hyperlink can be a web page or an image. You can click on the hyperlink to jump to the link location.

When you move the mouse pointer over the hyperlink, the mouse arrow changes to a small hand.

Use tags to create hyperlinks in HTML.

`<a></a>`attribute

The property name	Property description	Attribute values	If necessary
href=””	Specifies the URL of the page to which the link is directed	URL , #Text	Required when defining urls
id , name=””	Define where the anchor link is pointed	Text	Required when defining anchor chain connections
target=””	Specify where to open hyperlinks	_blank , _self , _parent , _top	optional

Target =”” attribute value interpretation

_blank: Open the hyperlink in a new window.
_self: Opens the hyperlink in this window, overwriting this page. The tag defaults to this option when it does not write a target=”” attribute.

All four values of these targets begin with an underscore. Browsers ignore attribute values that start with an underscore other than these four values. Therefore, do not name attribute values that start with an underscore like name=”” and id=””.

The name=”” attribute is deprecated.

`<a></a>`The instance

Hyperlink to web URL as follows:

<a href="www.baidu.com" target="_blank">Click to jump to Baidu</a>
Copy the code

Hyperlinks to local urls, either relative or absolute, as follows:

<a href="./HelloWorld.html" target="_blank">Click to jump to the HelloWorld page</a>
Copy the code

To jump to the specific location of this page or other pages, use the anchor link as follows:

<body>
    <a id="top">Jump here by cable link</a>

    <div style="height: 2000px; width: 200px; background-color: #deeeef"></div>

    <a href="#top">Click to jump to the top of the page</a>

</body>
Copy the code

HTML images

The tag is used in HTML to link images.

The tag is a single tag.

`<img>`attribute

The property name	Property description	Attribute values	If necessary
src=””	The URL that displays the image, which can be a local or network address	URL	necessary
alt=””	Replace text when the image does not display properly	Text	necessary
title=””	The text displayed by hovering over an image	Text	optional
height=””	Keep the default aspect ratio when specifying the height, height, and width of the image with only one property	Positive px, positive %	optional
width=””	Keep the default aspect ratio when specifying the width, height, and width of the image with only one property	Positive px, positive %	optional
align=””	Deprecated to arrange images according to surrounding text	top , bottom , middle , left , right	optional
border=””	Defines the border of an image, deprecated	A positive number	optional

`<img>`The instance

Reference the local image as follows:

<img src="resources/image/thisComputer.jpg" alt="Alternate text" title="Hover over text" height="150px">
Copy the code

Reference network image, as follows:

<img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="Alternate text" title="Hover over text" height="150px">
Copy the code

HTML block elements, inline elements (inline elements), inline block elements

Block elements:

This element occupies a single line, automatically fills the width of its parent element, and excludes other elements from being on the same line.
In browsers, block elements appear as rectangles.
The display property is block.
Block elements can hold inline elements and other block elements.
Block-level elements can be set to width,height, margin,padding. Block-level elements with the width attribute are still exclusive to a row.

Common block-level elements are:

<div></div>Define a partition or section in a document<h1></h1>Define h1 headings<h2></h2>Define h2 headers<h3></h3>Define h3 headings<h4></h4>Define h4 headings<h5></h5>Define h5 headings<h6></h6>Define h6 headings<form></form>Creating an HTML form<hr>Create a horizontal line<p></p>Tag definition paragraph<address></address>Define the address<caption>Defining table titles<dd>Define entries in the define list<dl>Define a list<dt>Define the items in the list<fieldset>Define a frameset<legend>

<fieldset>Element definition title<li>The tag defines list items<noframes>Display text inside the frameset element for browsers that do not support frames<noscript>Defines what to replace when the script is not executed<ol>Defining ordered lists<ul>Defining an unordered list<pre>Defines preformatted text<table>The tag defines the HTML table<tbody>Label table body (body)<td>A standard cell in a table<tfoot>Define the footer of the table (footnote or table note)<th>Define the table header cell<thead>The tag defines the table header for the table<tr>Define the rows in the tableCopy the code

Inline elements (inline elements)

Most inline elements are descriptive tags.
Elements in a row do not occupy a single row. Adjacent elements are arranged in the same row until there is no more space in the row.
The height and width are completely separated by the contents of the element. Width,height is invalid for inline elements.
The display attribute is inline.
Inline elements generally can only hold text or other inline elements.
Padding-left and padding-right horizontal lines on inline elements produce margin effects, but padding-top and padding-bottom vertical lines do not.

Common inline elements are

  <span>.</span>

  <a>.</a>link<br>A newline<b>.</b>bold<strong>.</strong>bold<img>The picture<sup>.</sup>superscript<sub>.</sub>The subscript<i>.</i>italics<em>.</em>italics<del>.</del>Delete the line<u>.</u>The underline<input>.</input>The text box<textarea>.</textarea>Multiline text<select>.</select>The drop-down listCopy the code

Inline block elements

Not only can you set the width and height attribute values, but also multiple labels can be displayed in a row.
The display attribute value is inline-block.

Common inline block elements are

<img>

<textarea>

<input>
Copy the code

Block elements can become inline and inline elements can become block elements when CSS display is added.

HTML list

Unordered list

Unordered lists are represented using the

tag.

An example of an unordered list is as follows:

<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>
Copy the code

An ordered list

Ordered lists are represented using the < OL > tag. Each list item can be represented using the

tag.

An example of an ordered list is as follows:

<ol>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ol>
Copy the code

Custom list

Custom lists are represented using the < DL > tag. Each list title can be represented with a < DT > tag, and each list item can be represented with a < DD > tag.

An example of a custom list is as follows:

<dl>
    <dt>The front end</dt>
    <dd>HTML</dd>
    <dd>CSS</dd>
    <dd>Javascript</dd>

    <dt>The back-end</dt>
    <dd>Java</dd>
    <dd>C++</dd>
    <dd>PHP</dd>
    <dd>GO</dd>
</dl>
Copy the code

HTML Audio & Video

Audio in HTML can be represented by the
tag, and video frequency can be represented by the
tag.

<audio src="Resources /audio/ The sun also rises. Mp3" controls autoplay></audio>

<video src="Resources/Video/Let the bullets fly. Mp4" controls autoplay></video>
Copy the code

HTML inline frame

Audio in HTML can be used with the tag to nest another web page on this page.

Inline frame instance

In this page, the baidu home page is nested as follows:

<iframe src="https://www.baisu.com" width="800" height="400"></iframe>
Copy the code

Start nesting Taobao page in this page, click the hyperlink, and open baidu home page in the inline frame as follows:

<iframe src="https://www.taobao.com" name="skip_to_baidu" width="800" height="400"></iframe>
<a href="https://www.baidu.com" target="skip_to_baidu">The baidu</a>
Copy the code

HTML table

HTML tables are defined by the

tag. The rows in the table are defined by the < TR > tag, and each row is divided into cells (defined by the < TD > tag). The

tag can be used to represent the cells in the table header. Each cell can contain text, images, lists, paragraphs, forms, horizontal lines, tables, and so on.

`<table></table>`attribute

The property name	Property description	Attribute values	If necessary
border=””	Define the borders of the table	A positive number	optional
title=””	Hover over the text displayed on the table	Text	optional

`<th></th>` `<td></td>`attribute

The property name	Property description	Attribute values	If necessary
colspan=””	Horizontally merge several cells	A positive number	optional
rowspan=””	Merge several cells vertically	A positive number	optional

`<table></table>`The instance

<table border="1px">
    <tr>
        <th colspan="4">Mobile phone</th>
    </tr>
    <tr>
        <th>type</th>
        <th>Mobile phone models</th>
        <th>size</th>
        <th>color</th>
    </tr>
    <tr>
        <td rowspan="2">The flagship</td>
        <td>iphone12</td>
        <td>6.2 in.</td>
        <td>purple</td>
    </tr>
    <tr>
        <td>Huawei mate40</td>
        <td>6.5 in.</td>
        <td>white</td>
    </tr>
</table>
Copy the code

The HTML form

`<form></form>`attribute

The property name	Property description	Attribute values	If necessary
action=””	Which address to request the form to	URL , #	necessary
method=””	Form submission	get , post	necessary

`<input>`attribute

The property name	Property description	Attribute values	If necessary
type=””	Define the type of the form item	text , password , hidden , radio , checkbox , button , img , file , email , url , number , range , search , submit , reset	necessary
name=””	Define the key value for the form item	Text	necessary
value=””	Define value values for some form items	Text	optional
placeholder=””	Default prompt for some form items	Text	optional
pattern=””	Define the data rules for this form item through regular expressions	Regular expression	optional
min=””	Defines the minimum value for this form item	A positive number	optional
max=””	Defines the maximum value for this form item	A positive number	optional
step=””	Defines the step size for this form item	A positive number	optional
disabled	Not selected	There is no	optional
check	Selected by default	There is no	optional
hidden	Hide this form item, equivalent to type=”hidden”	There is no	optional
required	You need to fill out this form to submit	There is no	optional
readonly	The contents of this form entry are read-only and cannot be changed	There is no	optional

`<label></label>`attribute

The property name	Property description	Attribute values	If necessary
for=””	The corresponding`<input>`In the ID attribute, to achieve mouse selection	Text	necessary

`<select></select>`attribute

The property name	Property description	Attribute values	If necessary
name=””	Define the key value of the drop-down menu	Text	necessary

`<option></option>`attribute

The property name	Property description	Attribute values	If necessary
value=””	Define the value of the drop-down menu	Text	necessary

`<textarea></textarea>`attribute

The property name	Property description	Attribute values	If necessary
name=””	Defines the key value of a multi-line text field	Text	necessary
cols=””	Defines the number of lines in a multiline text field	A positive number	necessary
rows=””	Defines the number of columns in a multi-line text field	A positive number	necessary

Form instance

<hr>
<form action="#" method="get">
    <! -- Textbox -->
    <! -- Enhance mouse usability
    <label for="username">User name:</label><input type="text" name="username" id="username" placeholder="Please enter user name" maxlength="8" required>
    <br>
    
    <! -- Password box -->Password:<input type="password" name="pwd" placeholder="Please enter your password">
    <br>
    
    <! -- Hide domain -->Hidden field:<input type="hidden" name="tty" value="tty_content">
    <br>Hidden field:<input type="text" name="tty2" value="tty_content2" hidden>
    <br>

    <! -- Single click box -->Gender:<input type="radio" name="gender" value="boy">male<input type="radio" name="gender" value="girl" checked>female<br>
    
    <! -- Checkbox Checked by default -->Hobbies:<input type="checkbox" name="hobby" value="sleep" disabled>Go to bed<input type="checkbox" name="hobby" value="study">learning<input type="checkbox" name="hobby" value="game">Play the game<input type="checkbox" name="hobby" value="music">Playing music<input type="checkbox" name="hobby" value="code" checked>Write the code<br>
    
    <! -- Normal button -->
    <input type="button" name="btn1" value="Button 1">
    
    <! -- Picture button Auto submit function -->
    <input type="image" src="resources/image/thisComputer.jpg">
    <br>
    
    <! -- File upload -->
    <input type="file" name="file1">
    <input type="button" name="upload" value="Upload file">
    <br>
    
    <! -- Box pattern regular expression -->Email address:<input type="email" name="email" pattern="^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$">
    <br>
    
    <! - the URL box - >URL:<input type="url" name="url">
    <br>
    
    <! -- Number box -->The Numbers:<input type="number" name="number" max="10000" min="0" step="5">
    <br>
    
    <! - the slider - >Slider - Volume:<input type="range" name="voice" max="100" min="0">
    <br>
    
    <! -- Search box -->Search:<input type="search" name="search1">
    <br>
    
    <! -- Read only text box -->Read only:<input type="text" name="readonly" value="Cannot be changed" readonly>
    <br>
    
    <! -- Dropdown menu -->Mobile phone:<select name="occ" id="s1">
        <option value="iphone12">iphone12</option>
        <option value="huawei_mate40">Huawei mate40</option>
        <option value="mi_11">Millet 11</option>
        <option value="meizu_18" selected>Meizu 18</option>
    </select>
    <br>
    
    <! -- Multiline text field -->Comments:<textarea name="feedback" id="t1" cols="30" rows="10"></textarea>
    <br>
    
    <! -- Submit button -->
    <input type="submit">
    
    <! Reset button -->
    <input type="reset">
    
</form>
<hr>
Copy the code

Tags and attributes deprecated by HTML (can be implemented using CSS styles)

Deprecated labels

defines the content in the center.
and define HTML font styles.
displays typewriter-like or equal-width text effects.
shows bold text effect.
< I >
shows the italic text effect.
shows large font effect.
shows the small font effect.
and
define delete text styles.
defines the underline text style.

Deprecated attributes

Align =”” Defines the alignment of the text.
Bgcolor =”” Defines the background color.
Color =”” Defines the text color.

HTML attention

HTML is case insensitive, and both

and

will be properly parsed by the browser. The standard specification recommends using lowercase. In HTML4.0 and previous versions, the W3C standard is case-insensitive. In later VERSIONS of HTML5.0, however, the W3C specified that tags must be lowercase.
HTML is insensitive to double and single quotation marks for attribute values. For example, Click to go to Baidu and Click to go to Baidu can be correctly parsed. Double quotation marks are recommended.
Even if you forget to use the closing tag, most browsers will display the HTML correctly, such as the first

paragraph, but sometimes inexplicably wrong. Missing the closing tag is highly recommended.
The browser removes excess whitespace and blank lines from the HTML source code, and all consecutive whitespace or blank lines are counted as one space.

HTML uses CSS styles

There are three ways to insert a style sheet that allows the browser to format the HTML against the style sheet.

1 External stylesheets:

When a style needs to be applied to many pages, an external style sheet can be used. You can change all HTML pages that reference this stylesheet by changing a file.

<head>
<link rel="stylesheet" type="text/css" href="subai.css">
</head>
Copy the code

2 Internal style sheets:

Internal style sheets can be used when individual files require special styles. You can define an internal style sheet in the section through the

tag.

<head>
    <style type="text/css">
        body {background-color: #f8f8f8}
        a {margin: 10px}
    </style>
</head>
Copy the code

3 Inline style:

Inline styles can be used when you need to style individual elements individually. Set the style properties in the associated tags.

<h2 style="color: bisque; background-color: aliceblue">Title 2</h2>
Copy the code

HTML USES JavaScript

The tag is used in HTML to define client-side scripts (JavaScript).

elements can contain script statements or point to external script files via the SRC =”” attribute.

What is HTML

The role of the HTML

HTML Document format

Basic concepts in HTML

The HTML title

this is a secondary title

HTML is horizontal

HTML comments

HTML paragraphs

HTML line

HTML text format

HTML hyperlinks

<a></a>attribute

<a></a>The instance

HTML images

<img>attribute

<img>The instance

HTML block elements, inline elements (inline elements), inline block elements

HTML list

Unordered list

An ordered list

Custom list

HTML Audio & Video

HTML inline frame

Inline frame instance

HTML table

<table></table>attribute

<th></th> <td></td>attribute

<table></table>The instance

The HTML form

<form></form>attribute

<input>attribute

<label></label>attribute

<select></select>attribute

<option></option>attribute

<textarea></textarea>attribute

Form instance

Tags and attributes deprecated by HTML (can be implemented using CSS styles)

Deprecated labels

Deprecated attributes

HTML attention

HTML uses CSS styles

HTML USES JavaScript

Related Posts

Get to the bottom of elements offsetHeight, scrollHeight, clientHeight…

Front End Technology Journal December 10, 2018: Front End Automation Testing

JS constructors you don’t know about

`<a></a>`attribute

`<a></a>`The instance

`<img>`attribute

`<img>`The instance

`<table></table>`attribute

`<th></th>` `<td></td>`attribute

`<table></table>`The instance

`<form></form>`attribute

`<input>`attribute

`<label></label>`attribute

`<select></select>`attribute

`<option></option>`attribute

`<textarea></textarea>`attribute