Home > Developer > Web Develop
Learning the front end, you have to learn the top three tools: HTML + CSS + Javascript. So what is the role of these three components respectively? In the human body, for example, a person with HTML attributes alone is just a nude puppet (the first step in understanding the processing of inflatable dolls is also OK ...). Good evil). This time is undoubtedly very ugly, so I need to put on the Man's gorgeous coat, that is, css. Through the CSS to the Person's appearance characteristics, clothing color Decoration. After the decoration, OK, basically can see, but still lacks a bit of human basic characteristics: Flexible. Then JS will be the Horse. JS gives this person a mechanism to Move. For example, when you kiss a puppet, it will hug You. When you tickle a doll, it laughs. When you xxxx, it will fall flax ... well, Evil again ... In fact, this is the meaning: HTML is the bare human body structure, CSS is a Person's gorgeous coat, js is the soul of human Interaction. Learn these three big weapon, your front page, you can achieve a variety of crazy drag cool boom days of special effects and interactive effects, to complete a variety of NEEDS.
HTML overviewHypertext Markup Language (english: HyperText Markup Language , short name: HTML) is a standard markup language for creating Web Pages. HTML is a fundamental technology that is often used with CSS and JavaScript to design pleasing Web pages, Web applications, and user interfaces for mobile Applications. The Web browser can read the HTML file and render it into a visual Web Page. HTML describes the structure semantics of a Web site as clues appear, making it a markup language rather than a programming language.
HTML elements are the cornerstone of building a Web Site. HTML allows embedding of images and objects, and can be used to create interactive forms that are used to structure Information-such as headings, paragraphs, lists, and so on-that can also be used to describe the appearance and semantics of a document to some Extent. HTML is the language of the HTML elements (such As) surrounded by angle brackets, and the browser uses HTML tags and scripts to interpret the contents of the Web page, but does not display them on the Page.
HTML can embed scripting languages such as javascript, which affect the behavior of HTML web Pages. Web browsers can also refer to cascading style sheets (CSS) to define the appearance and layout of text and other Elements. The organization web consortium, which maintains HTML and CSS standards, encourages people to use CSS instead of some HTML elements for performance.
1.HTML Basic StructureThe HTML code block is basically divided into three parts, plus a declaration section. Part of the declaration is not Required.
<! DOCTYPE html> <!--declaration part-->2.HTML LabelFrom the above three basic parts of html, you will find a lot of <> tags, These tags are the most important elements of Html: tags.
Labels can be divided into: self-closing labels and closed labels.
2.1. self-closing and labeling and closing tagsThe difference between a self-closing label and a closed label is that the self-closing label is not paired and closes itself. For example: <input/> self-closing with "/". Closed labels, such as:<div></div>, appear to be closed.
Common closing tags: <a href= "" ></a>|<div></div>|<table><tr><td></td></tr ></table>|<label></label>|<form></form>|<select></select>|<b ></b><i></i><u></u>|<span></span>|<strong></strong>|<tbody></tbody>|<iframe ></iframe>|<button></button>|<style type= "text/css" ></style>|<script language= "JAVASCRIPT" ></script>|<BODY></BODY>
Common self-closing tags: <br/><input/><li><p/> <link/>
2.2. block-level labels and inline labelsHTML tags from the content, can be divided into: block-level tags and inline tags (also known as inline Tags)
The difference between them:
Block-level elements are commonly used to build site architecture, layout, hosting content
Inline elements are generally used in the site content of some of the details or parts, to "emphasize, distinguish style, superscript, subscript, anchor point" and so On.
They can be converted to each other. Display:inline|block
The characteristics of Block-level elements: each block-level element is displayed starting with a new line, and subsequent elements require another LINE.
The characteristics of the restrained tag: how much the position occupies, not another line.Ps: Extra attention when writing html: you cannot put block elements in inline elements .
Block element * Address-addresses * Blockquote-block Reference * CENTER-SNAP to block * dir-directory list * Div-common Block-level easy, also CS s layout main label * Dl-definition list * Fieldset-form control group * form-interactive form * H1-BIG Title * H2-subtitle * h3-3 level title * H4-4 Level Title * h5-5 Level title * h6-6 Level title * hr-horizontal Divider * isindex-input Prompt * Menu-menu list * noframe S-frames Optional content, (display This chunk content for browsers that do not support frame * Noscript-optional script content (this content is displayed for browsers that do not support script) * Ol-sort form * P-paragraph * PRE -formatted text * table-table * ul-non-sorted list inline elements (inline Element) * A-anchor point * abbr-abbreviation * Acronym-first word * B-bold (not recommended) * Bdo-bidi override * Big-large font * br-newline * cite-reference * code-computer code (required when referencing Source) * d Fn-define field * em-accent * Font-font settings (not recommended) * i-italic * img-image * input-input Box * kbd-define Keyboard text * Labe L-table Label * Q-short reference * s-medium Dash (not recommended) * Samp-define Sample computer code * Select-project Selection * Small-small font text * Span-common inline container, defining text within chunks * strike-medium Dash * strong-bold accent * sub-subscript * sup-superscript * textarea-multiline text input box * Tt-telex text * u-underline * var- Define variable elements <strong> variable elements to determine whether the element is a block element or an inline element depending on the Context. </strong> * Applet-java Applet * button-buttons * del-delete text * iframe-inline Frame * ins-inserted text Ben * Map-image Block (map) * Object-object Object * script-client script common block-level and inline tagsone point to note here : When CSS control is added, this attribute difference between the block element and the inline element is not a difference. For example, we can completely add an inline element to a property such as display:block, so that he also has properties that start from the new line each Time.
3.HTML syntaxTo learn more about HTML syntax, you can refer to: HTML syntax english, HTML encoding specification
Code comment for 3.1.HTMLThe purpose of the code comment is to help the programmer annotate the code, and after a while to look at the code you have written, you can quickly recall the purpose of the Code. Code comments are not only convenient for the programmer to recall the use of the previous code, but also to help other programmers quickly read the functionality of your program, to facilitate the cooperation of many people to develop web Code.
3.2.HTML of label composition<!--comments in html-->/* css in comments *///jsAn HTML tag, usually composed of three elements: tag name, attribute, and Content.
Properties are specified in the start tag to represent the properties and properties of the Label. It is usually expressed as a "property name =" value "", and after a space is separated, multiple properties can be Specified. You do not need to differentiate the order when specifying multiple Properties.
For more information about the properties, see: properties Daquan
Declaration of common labels in 4.HTMLUsing HTML5 's DOCTYPE to enable standard mode, it is recommended to use uppercase Doctype.
Head header label for common labels in 5.HTML<! DOCTYPE html>In
META tagsMeta tags define meta-information about HTML documents, including: set page encoding, refresh and jump, keywords (easy to ingest), description and other functions
Title Tag-meta tag -page encoding "' HTML <meta charset=" UTF-8 "/> <meta http-equiv=" content-type "content=" Text/html;charset=utf-8 "/>" -refresh and jump " html example: 2 seconds refresh once: <meta http-equiv=" Refresh "content= "2"/> Example: Enter the site 2 seconds after the jump page: <meta http-equiv= "Refresh" content= "2"; Url= "http://www.baidu.com"/> " -keywords -name=" keywords "easy to be included in the crawler" HTML example:< Meta name= "keywords" content= "developer, blog park, developer, program ape, Cheng, geek, programming, code, Open source, It website, developer,programmer,coder,geek, technology community"/> " -description -name=" Description "description information" html example: <meta name= "description" content= " The blog Park is a knowledge-sharing community for Developers. 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. "/>The title tag is used to define the caption of the Document.
Link label<title> Learning and thinking education </title>The link tag is used to define the relationship between a document and an external resource. For example: introduce CSS file, set website icon
Style label-introduced CSS < link rel= "stylesheet" type= "text/css" href= "css/common.css"/>-set website icon <link rel= "shortcut icon" href= " Images/favicon.ico "><style> tags are used to define style information for HTML documents, i.e. CSS settings
The body theme tag of common tags in html
P LabelThe P tag is used to mark a paragraph with a certain amount of space between the top and bottom of the Paragraph.
BR Label<p>this is some text in a very short paragraph</p>Line Wrapping Labels
A labelI am a <br/> the actual effect: I am a big head soldierThe label defines a hyperlink that is used to link to another page from one page, or to jump from one page to the specified position in the current page
H tag-direct Jump <a href= "http://www.baidu.com" ></a>-new tab Jump <a href= "http://www.baidu.com" target= "_ Blank "></a>-anchor: Implement the page to jump to the specified position <a href=" #i1 "> Chapter </a> <!--find the label of Id=i1 in the page, place its label content at the top of the page- <div id= "i1" > Jump here o</div>Input label and form label<input> tags are used to collect user information, primarily for interacting with users, often with <form> tags.
The input tag has many forms, depending on the value of the type Attribute. The input field can be a text field, a check box, a masked text control, a radio button, a button, and so On.-input-type= "text" type <p> user name: <input type= "text"/></p>-type= "PASSW Ord "password type <p> password: <input type=" password "/></p>-type=" email "mailbox type, provides automatic detection of address legality function <p> e-mail: <input type= "email"/></p>-type= "checkbox" check box, the same type of check box, need to add name to distinguish, and name must Same male 1<input type= "checkbox" name= "gender"/> male 2<input type= "checkbox" name= "gender "/> male 3<input type=" checkbox "name=" Gender "/> male 4<input type=" checkbox "name=" ge NDEr "/> male 5<input type=" checkbox "name=" Gender "/>-type=" Radio "radio button, If you want to commit, in addition to the name for the area , you also need to have the value attribute male <input type= "radio" name= "sex" value= "1"/> female <input type= "radio" nam e= "sex" value= "1"/>-type= "file" If you upload files, you need to add enctype= "multipart/form-data" to the form attribute 1:<input type= "file" /> File 2:<inpUT type= "file" name= "up" enctype= "multipart/form-data"/>-type= "button" pushbutton normal button <input type= "butt On "value=" button "/>-type=" submit the current form Submit button <input type= "submit"/>-type= "reset" Reset Form , clear the contents of the form reset button <input type= "reset"/>Select LabelThe Select tab is used to create a single or multiple selection menu. Note that when you need to commit to the appropriate interface, you need to give the Select label a Name property value, which is convenient for the backend program to Receive.
-option defines the options available in the list <select name= "city" > <!--radio box--<option value= ' 1 ' > Shanghai </option> <option value= ' 2 ' > Beijing </option> <option value= ' 3 ' > Shanxi </option> <option value= ' 4 ' & gt; Chongqing </option> </select>-multiple Specifies that you can select multiple options to specify the number of visible options in the Drop-down List. Multi-select submit, The background receives the value is a list object, contains multiple value <select multiple size= "> <!--turn on multiple selection, and the default display 10--<option > Shanghai </option> <option> Beijing </option> <option> Shanxi </option> < ;option> Chongqing </option> </select>-optgroup Group selection <!--group radio--<select size= "ten" ><!-- Display by default 10--<optgroup label= "shanghai" > <option> pudong </option> <option> Hongqiao &L t;/option> </optgroup>> <optgroup label= "other regions" size= "> <option> Beijing </opti on> <option> Shanxi </option> <option> Chongqing </option> </optgroup> </select>TextArea labelThe textarea label is used to define multiple lines of text input Controls. You can use the cols and rows properties to design the input box
Form label<textarea cols= "7" rows= "4" name= "extra" > multi-line text input box </textarea>The form label is used to create an HTML form for user input, in conjunction with the input tag.
The form tag has three important attributes, action, method, and Enctype.
The action specifies where to send the form data when the form is Submitted.
METHOD specifies the HTTP methods used to send Form-data.
Enctype rules How to encode a form's data before it is sent, and it is a very important and easily forgotten property to use only when uploading file Data.
Label label<form action= "http://192.168.11.88:8000/index/" method= "get" enctype= " Multipart/form-data "> User name: <input type=" text "name=" query "/> password: <input type=" password "name=" pwd "/> Male <input type= "radio" name= "gender" value= "1"/> female <input type= "radio" name= "gender" value= "0"/> <p> Hobbies: Basketball <input type= "checkbox" name= "favor" value= "0" > Soccer <input type= "checkbox" name= "favor" value= "1 "> Table tennis <input type=" checkbox "name=" favor "value=" 2 "> </p> <select name=" province "multiple size= "> <option value=" 0 "> Shanghai </option> <option value=" 1 "> Beijing </option> < Option value= "2" > Shanxi </option> <option value= "3" > Chongqing </option> </select><br/> Biography: <input type= "file" name= "up" enctype= "multipart/form-data"/><br/> <input type= "submit" value= "submit" /></form>The label element does not present any special effects to the User. however, It improves usability for the user of the Mouse. This control is triggered if you tap text inside a label Element. That is, when the user selects the label, the browser automatically shifts the focus to the label-related form Controls.
The property value of the For property of the <label> tag should be the same as the ID property of the related Element.
UL UI Tags
Defining unordered HTML Lists
Ol Li Label<ul> <li>Coffee</li> <li>Tea</li> <li>milk</li></ul >Defines an ordered list of html, which you can use to specify the type of tag used in the list "1,a,a,i,i" and start to specify the starting value for ordered Lists.
DL DT DH Label<ol start= "3" type= "i" > <li>Coffee</li> <li>Tea</li> <li>milk </li></ol>The <dl> tag defines a definition List.
<dl> tags are used to combine <dt> (define items in a list) and <dd> (describe items in a list).Final effect: you can see that the DD is indented compared to the DT.
Table LabelTable tags are used to define HTML Tables.
-<thead></thead> used to define the TITLE-TR means a row-td represents a column-th is used to replace td, automatic bold function-<tbody></tbody> table body content written in tbody-& Lt;tfoot></tfoot> the bottom of the table, you can also not write contentA complete table format should look like this :
<table border= "1" > <thead> <th> title 1</th> <th> title 2</th> </ thead> <tbody> <tr> <td>3</td> <td>4</td> </tr > <tr> <td>3</td> <td>4</td> </tr> </tbody > <tfoot><!--dispensable-- <th> end 1</th><!--dispensable-- <th> End 2< /th><!--- </tfoot></table>the td/th tags in table commonly use Rolspan and RowSpan properties to merge Cells.
FieldSet labelThis label is mainly used to decorate form forms. <legend> tags define headings for fieldset elements
<! DOCTYPE html>Eventually:
IFRAME LabelThe IFRAME element creates an inline frame (inline frame) that contains another Document. is to nest the contents of other pages in the current Page. The inside of the <iframe></iframe> tag is used to populate some description or description information and will not be displayed on the Page.
Front-End HTML Basics
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
