The relationship between HTML, CSS, and JavaScript
Web pages consist mainly of three parts: structure (Structure), Performance (Presentation) and Behavior (Behavior)
html--structure, determine the structure and content of the Web page ("What")
css--performance (style), set the presentation style of the Web page ("What's like")
JavaScript (JS)-behavior, controlling the behavior of Web pages ("What to Do")
First, HTML language
1.1 What is HTML language (HTML overview)
English full name: Hyper Text Markup Language
English full name: Hypertext Markup Language
The HTML language is the most basic language for making Web pages and can only be displayed through a Web browser.
Hyper (Super):
HTML-made Web pages can be "jump" from one page to another via a link to the page.
Text (literal):
HTML is a text-explanatory programming language in which its source code is "translated" without being compiled and run directly in the browser.
Markup (Mark):
The basic rule of HTML is to use "markup Language"----A LABEL element that is a pair of angle brackets to describe how the Web page content is displayed in the browser.
1.2 HTML Document Structure
HTML documents generally consist of two parts:
1. Content information (text, pictures, etc.) to be expressed in the document;
2. A series of HTML tags;
1.3 HTML Tags
1.3.1 What is an HTML tag
1. The HTML tag is a directive that is enclosed in <>, mainly divided into:
Single label: < start tag/>
Double tab: < start tab ></end tag >
For example:
<br/>
<div></div>
2. A double label is usually used. There is a start tag on which there should be an end tag. The label content is written between the start tag and the end tag.
<div> Tag Content </div>
3. In the element's start tag, you can also include "properties" to set additional attributes for the element. A label can have multiple properties, separated by a space between each property.
<div Property name = "attribute value" ></div>
For example:
<div class= "wrap" id= "wrap" ></div>
4. Each pair of double tags can be nested, but not cross.
Correct example:
<div>
<p></p>
</div>
Error Example:
<div>
<p>
</div>
</p>
1.4 Encoder
1.4.1 Webstorm Source main tag meaning
<! Doctype>:
is a statement that is not an HTML tag; it is used to tell the Web browser which HTML version to use to write the page.
Written by the word (HTML). The label does not have any attributes.
The <meta>:
The <meta> tag is located in the header of the document, which defines the file information and describes the Web page file. Where the name attribute is primarily used to describe a Web page, the corresponding property value is content, content
The main content is to facilitate search engine robots to find information and classified information for use.
<body>:
The <body> tag is used to define the body of the document, which is the content of the Web page you see in the browser.
1.5 Use of HTML tags
1. HTML annotations
Note content can be inserted anywhere in the text, its content is not displayed in the Web page, only in the source document for developer notes to use.
<!--annotation Content--Methods apply to document body parts
Comment Content
/* Comment Content */method applies to document reference label section
2. Special characters
It is not effective to enter some special characters directly into the HTML code, and it needs to be marked with a proprietary code.
<!--spaces--
< <!--left angle brackets < or less than---
> <!--Right angle brackets > or greater than--
© <!--copyright symbol? -
® <!--registered symbols? -
& <!--represents and symbols &-
& #151; <!--long Dash--
3. Div block Tags
<div> This is a div block, typically used for layouts </div>
4. Body Title label
Note: Only h1~h6 six tags, no h7 ...
5. Text section Labels
<span> This is a text section </span>
6. Emphasis on labeling
<strong> Enhanced Tone </strong>
7. Picture Label
8. Paragraph labels
<p> This is a paragraph </p>
9. Hyperlink tags
<a href= "link Address" > hyperlink, open a new window </a>
10. Text fields
<textarea> text content </textarea>
11. Unordered List Label
<ul>
<li> First </li>
<li> a second </li>
<li> a third </li>
</ul>
12. Ordered list label
<ol>
<li> First </li>
<li> a second </li>
<li> a third </li>
</ol>
13. Customizing the list
<dl>
<dt> Custom list Items </dt>
<dd> definition of a custom list item </dd>
</dl>
. Table Table
<table>
<tr>
<td> Entertainment Projects </td>
<td> Project Expenditure </td>
</tr>
<tr>
<td> Dinner </td>
<td>200 Yuan </td>
</tr>
</table>
Form form
<form>
Form input Controls
</form>
16. Control label
<label> control label, usually no effect, used as marker </label>
17. Form Input Controls
<input type= "Text" > <!--text--
<input type= "Password" > <!--password--
<input type= "Radio" > <!--Radio Box--
<input type= "button" value= "tap" > <!--normal button--
<input type= "checkbox" > <!--check box--
<input type= "Submit" > <!--submit button--
<input type= "Reset" > <!--reset button--
<input type= "File" > <!--file Upload--
The difference between button and submit:
The button is a normal button, without any function. Submit will automatically submit the form form when the user clicks.
18. Drop-down list
<select>
<option> Sichuan </option>
<option> Cantonese </option>
<option> Northern Cuisine </option>
<option> Shanghai Food </option>
<option> Western Food </option>
<option> Thai Food </option>
</select>
19. Inline framework
<iframe src= "page link address needed to be displayed" ></iframe>
The relationship between HTML, CSS, and JavaScript
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
