Home > Developer > Web Develop
HTML Explanation:
HTML is an abbreviation for the English Hyper Text mark-up Language (Hypertext Markup Language), which is a standard language (tag) for making Web pages. It's equivalent to defining a uniform rule, and everyone is going to keep him, so that the browser can interpret it according to the rules of the markup language.
The browser is responsible for translating the label into a user "readable" format, presented to the user!
The composition of the Web page:
A Web page is usually made up of two parts:
HTML is responsible for describing the structure and content of the Web page (such as title, navigation bar, etc.) CSS is responsible for the Web page performance (appearance) (such as background color, font style, etc.).
The content between The content between <body> and </body> is the page effect that the browser renders and the user sees. This means that this is the main body of the page. Which is the body's meaning.
The document structure is as follows:
<! DOCTYPE html>DOCTYPE partDOCTYPE tells the browser what HTML or XHTML specification to use to parse an HTML document
The HTML language requires a standard when we specify the <! in the first line DOCTYPE html>, when a browser accesses our code, it reads and renders the page that we are displaying in accordance with the standard specified in the HTML code.
Why to use <! DOCTYPE html> this to tell the browser?
DOCTYPE mode:
Let's look at the doctype pattern.
The problem arises:
When Netscape4 (the early browser of Netscape) and IE4 (Microsoft's early browser) implemented the CSS mechanism, it did not follow the standards presented by the Web-company. Netscape4 provided poor support, while IE4, though close to the standard, still failed to fully correct the standard of support. Although IE 5 fixes many of the IE4 problems (bugs), it still continues with other failures in the CSS implementation (mainly the box model).
To ensure that their websites are displayed correctly in different browsers, Web developers have to use CSS based on the specifications of each browser. As a result, most Web sites do not conform to the CSS implementation standards.
However, as standard consistency becomes more important, browser developers have to face a difficult choice: the standard of gradual follow-up is the way forward. But changing the implementation of the existing CSS, complete to follow the standard, will make many sites more or less damaged. If the browser suddenly resolves the existing CSS in the correct way, the stale site display will inevitably be affected.
As a result, it can be problematic to follow standards immediately, but ignoring the standards will also keep the chaos of the browser war (a piece of competition between Microsoft and Netscape).
Solution:
In other words, all browsers need to provide two modes: quirks mode (i.e. compatibility mode) serves legacy rules, and strict mode serves Standard rules. The Mac platform's IE browser is the first to implement these two modes, Mozilla, Safari, Opera and Windows platform IE6 also successively implemented these two modes. The IE5 and Netscape4 of the Windows platform provide only weird patterns.
Choosing which mode to use requires a trigger, and "Doctyp toggle" is used for this purpose. According to the standard: any one (x) HTML document must have a DOCTYPE: DTD (document type definition) is a set of machine-readable rules that indicate what is allowed in the (x) HTML document, what is not allowed, and what DOCTYPE is used to tell the browser which DTD to use, Usually put in the (X) HTML document at the beginning of the declaration) to tell other people the type of the document style
1. Meta (metadata information)
Provides meta-information about pages, such as page encodings, refreshes, jumps, descriptions and keywords for search engines and update frequency
<! DOCTYPE html>1> Defining the encoding format
<meta charset= "UTF-8" > #定义编码为utf-82> Refresh and Jump page
<meta http-equiv= "Refresh" content= "5" > # 5 Seconds jump
<metahttpequiv= "Refresh" content= "1; url=http://www.cnblogs.com/aylin1/"/> #跳转至我的博客3> keywords
The role of keywords: general is to let the crawler such as the collection program, when they crawl your site, if you have keywords, then they will prioritize the keywords into their records, such as Baidu: if they are included, they search your keywords, you can find our site.
<meta name= "keywords" content= "blog, Zhang Yan Lin, handsome," >4> description
For example, the blog park is described as follows:
<meta name= "description" content= "blog Park is a developer-oriented knowledge sharing community. Since its inception, the blog Park has been dedicated and focused on creating a pure technology exchange community for developers, driving and helping developers to share knowledge through the Internet, which will benefit more developers. The mission of the blog Park is to help developers change the world with code. ">5>title
Set label to Zhang Yan Forest
<title> Zhang Yan Forest </title>6> label Icon Link
<link rel= "icon" href= "https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_ 31bdc765.png " type=" Image/x-icon ">7> Import CSS Similar to the import module in Python
<link rel= "stylesheet" href= "Css/css_model.css" >8>, Style
1. Write CSS styles in the current file
2, in other files to write CSS style similar to Python module import CSS style imported into the current file using
9>, Script
1. Write JS in the current file
2, in other files write JS python-like module import method to import JS into the current file using
Body partThe body is divided into two categories: block-level labels and inline tags.
1, block-level label:<p>
2. Inline Tags: <a><input><sub><sup><textarea><span>
Features of block-level label elements
① always start on a new line;
② height, row height, margin and inner margin can be controlled;
The ③ width defaults to 100% of its container unless a width is set.
④ it can accommodate inline elements and other block elementsFeatures of inline tag elements
① and other elements are on one line;
The ② is high, the row height and the margin and the inner margin cannot be changed;
The width of the ③ is the width of its text or picture, and cannot be changed.
④ inline elements can only hold text or other inline elements
For inline elements, be aware of the following
Setting width is not valid.
Setting height is invalid and can be set by Line-height.
Setting margin is only valid for margin, upper and lower invalid.
Set padding only left and right padding valid, upper and lower is invalid. Note that the element range is increased, but the content around the element is not affected.1. Basic label
<P>: paragraph label. The contents of the package are wrapped. And there is a blank line between the contents.
<b> <strong>: Bold label.
<strike>: Add a median line to the text.
<em>: Text becomes italic.
<sup> and <SUB>: Upper corner and lower corner table.
<br>: line break.
<div><span>
Nonsense not much to say, direct code analysis
<! DOCTYPE html>The effect is as follows:
2. Graphic tags
SRC: The path of the picture to display.
ALT: The picture does not load successfully when prompted.
Title: The message when hovering the mouse.
Width: The width of the picture
Height: The height of the picture (width height Two attributes only one will be automatically equal to zoom.)
3. Hyperlink tag (anchor label) <a>:
HREF: The resource path format to be connected is as follows: href= "http://www.baidu.com"
Target: _blank: Opens the hyperlink in a new window. Frame name: Opens the connected content in the specified frame.
Name: Defines a bookmark for a page.
For jumping href: #书签名称.
<a href= "http://www.cnblogs.com/aylin/p/5608175.html" target= "_blank" > poke here </a>There is also a tab on this page to jump, by defining the ID to find the content
<a href= "#a" > Li bai </a><div id= "a" style= "padding:0px"; Box-sizing:border-box; Color:rgb (0, 0, 255); line-height:1.5!important; " >> before the moon light,<br> doubt is ground frost. <br> Jutou look at the moon,<br> down to think home. </div>4. List Label:
<ul>: Unordered list
<ol>: Ordered list
<LI>: Each item in the list.
<dl> definition List
<dt> List Title
<dd> list Items
<body> <ol> <li> unordered one </li> <li> unordered two </li> <li> unordered three </li > <li> unordered four </li> </ol> <ul> <li> order one </li> <li> Ordered two </li> <li> ordered three </li> <li> ordered four </li> </ol> </ul> <dl> <dt> Chapter I. </dt> <dd>1.1</dd> <dd>1.2</dd> <dd>1.3</dd> <dd>1.4</dd> </dl>The effect is as follows:
5. Table Label: <TABLE>:
Border: Table border.
cellpadding: Inner margin
cellspacing: Margin.
Width: Percentage of pixels. (preferably with CSS to set the length width)
<tr>: Table row
<th>: Table Head cell
<td>: Table Data cell
RowSpan: How many rows the cell spans vertically
colspan: How many columns the cell spans (that is, merged cells)
<th>: Table header <tbody> (infrequently used): partitioning the table.
Code<table border= "" cellspacing= "1" cellpadding= "style=" text-align:center;height:100px "> <tr> <td> number </td> <td> name </td> <td> class </td> <td> number Learn </td> <td> languages </td> <td> English </td> </tr> <tr> <td>001</td> <td> Zhang Yan Forest </td> <td>S1</td> <td >120</td> <td>109</td> <td>120</td> </tr> <tr> <td>001</td> <td> Zhang Lin </td> <td>S1</td> <td>100</td> <td>19</td> <td>100</td> </tr> ; <tr> <td>001</td> <td> off </td> <td>S1</td> <td>89</td> <td>100</td> <td>10</td> </tr> &L T;tr> <td>001</td> <td> Small Tigers </td> <td>S1</td> <td>10</td> <td>19</td> <td>12</td> </tr> &L T;/table>The effect is as follows:
There are also merged cells in the table:
<table border= "" cellspacing= "1" cellpadding= "1" style= "Width:300px;height:100px;color: #FC0D51; text-align: Center > <tr> <td> a </td> <td> two </td> <td> three </td> </tr> <tr> <td colspan= "3" >1 2 3</td> </tr> <tr> <td>4</td> <td>5</td> <td rowspan= "2" >6 9</td> </tr> <tr> <td>7</td> <td>8</td> </tr> </table>6. Form label (Django) <form>:
Forms are used to transfer data to the server.
A form can contain input elements such as text fields, checkboxes, radio boxes, submit buttons, and so on.
Forms can also contain textarea, select, FieldSet, and label elements.
1> Form Properties
HTML forms are used to receive different types of user input, which transmits data to the server when the user submits the form, thus enabling the user to interact with the Web server. Form label, all content to be submitted should be in that tag.
Action: Where the form is submitted. Generally point to the server side of a program, the program receives the form submitted by the data (that is, the form element value) for the corresponding processing, such as Https://www.sogou.com/web
Method: How the form is submitted post/get default value is get (envelope)
Get:1. Committed key-value pairs. Put it in the address bar after the URL. 2. The security is relatively poor. 3. There is a limit to the length of submissions.
Post:1. Committed key-value pairs are not in the address bar. 2. Security is relatively high. 3. The length of the submission is theoretically unlimited.
Get/post is a common two-way request.
2> form elements
<input> type:text text Input box
Password Password entry box
Radio Radio Box
CheckBox multiple Marquee
Submit button
button (need to use with JS.) What is the difference between button and submit?
File submission: Form form needs to add attribute enctype= "Multipart/form-data"
From form<! DOCTYPE html>The effect is a little low, pay attention to it
Let's examine the meaning of each code:
HTML base to make your own perfect Web page
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
