Home > Developer > Web Develop
First, the HTML
The following records common HTML elements that can be saved as HTML files to see the effect:
<!doctype html>
<!--Meta property provides page meta information, not display--
<meta charset= "UTF-8" >
<meta name= "Generator" content= "EditPlus"/>
<meta name= "Author" content= "ZJC"/>
<meta name= "Keywords" content= "Html,xhtml,css"/>
<meta name= "Description" content= "Common elements shorthand table"/>
<title>html demo</title>
<body>
<p>p tags define paragraphs that are automatically wrapped when the browser is displayed </p>
<br/> (line wrapping)
<pre> original style output, such as reserved spaces
Line break
and Indentation </pre>
<strong> enhanced display, similar to bold text </strong>
<i> Italic text </i>
<b> Bold text </b>
<a href= "http://www.126.com/" > Text links </a>
<a href= "http://www.126.com/" target= "_blank" ></a>
<a name= bookmarks > Define a page's bookmarks (location) </a>
<a href= "#书签" > Jump to that Bookmark (location) </a>
<ul>
<li> No sequence list-article 1</li>
<li> No sequence list-article 2</li>
</ul>
<ol type= "A" >
<li> numbered List-entry a</li>
<li> numbered List-entry b</li>
</ol>
<dl>
<dt> Customizing list items 1</dt>
<dd> Articles 1-1</dd>
<dd> Articles 1-2</dd>
<dt> Customizing list items 2</dt>
<dd> Articles 2-1</dd>
<dd> Articles 2-2</dd>
</dl>
<table border= "1" >
<tr>
<th colspan= "2" > table header row </th>
</tr>
<tr>
<td> Row 1th Column </td>
<td> Row 2nd Column </td>
</tr>
<tr>
<td> two row 1th column </td>
<td> two row 2nd column </td>
</tr>
</table>
<div class= "main" Style=color: #ff0000 "><p>div is a block/section definition, and the browser will wrap automatically when displayed. Sections, div, header, footer, and so on are commonly used for page layouts. Class, ID can be identified for external style sheet presets </p></div>
<p> section <span id= "important" style= "color: #00ff00" > Layout element </span> You can use CSS to modify this part of the text individually </p>
<form action= "this.jsp" method= "Post/get" >
<input type= "text" name= "LastName" value= "ZJC" size= "maxlength=" >
<input type= "Password" ><br/>
<input type= "checkbox" checked= "Checked" >Married<br/>
<input type= "Radio" name= "Sex" value= "Male" checked= "checked" >Male<br/>
<input type= "Radio" name= "Sex" value= "Female" >Female<br/>
<input type= "hidden" >
<select>
<option> Programmers
<option selected> Engineer
<option> Sales
</select>
<br/>
<textarea name= "Comment" rows= "2" cols= "></textarea><br/>"
<input type= "Submit" value= "Submission Form" >
<input type= "Reset" value= "Clear All" >
</form>
</body>
The following is an example of an HTML framework (frame)--because frame is actually a combination of multiple files, there are often unexpected results when you perform scripts, page refreshes, and so on, and not much now. Most websites use div block layouts to achieve similar "typography" effects.
<!doctype html>
<title>frame demo</title>
<frameset rows= "20%,80%" >
<frame src= "/frame/title.html" noresize= "noresize" >
<frameset cols= "25%,75%" >
<frame src= "/frame/menu.html" >
<frame src= "/frame/content.html" >
</frameset>
</frameset>
<!--Use the frame, you can not take the body node, with the display is not.
<body>
An IFRAME is an inline frame, which is equivalent to embedding another HTML page in a region, written inside the body, but not supported by all browsers.
<iframe src= "/test.html" width= "$" height= "$" frameborder= "0" ></iframe>
</body>
-
Second, XHTML
XHTML refers to extensible Hypertext Markup Language, XHTML is almost the same as HTML 4.01, XHTML is a stricter and purer HTML version, and XHTML is the recommended standard for html;xhtml defined in the form of XML applications.
Based on the above definition, you can see that XHTML and ordinary HTML differ only in the format specification.
For example:
Must have root element (
Elements must be nested correctly
element must always be closed
element, attribute must be lowercase
Attribute values must be in quotation marks, cannot be abbreviated
Third, CSS
CSS (cascading style sheets) is used to visually decorate HTML content in detached files. offers a wide range of features to meet a variety of visual effects. The most basic format for CSS is: selector {property: Value; property: value; ...}
such as: h1 {color:red;font-size:10px}
Div.main,span#important{color:green}
Body Table {font-size:10px}
Summary: html/xhtml, CSS, JavaScript is a natural MVC architecture, HTML is content, CSS is a display, JavaScript is control, this is the current Web site used by the mainstream technology portfolio, many front-end technical framework is based on three to complete.HTML, XHTML, CSS Shorthand
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
