HTML 30-Minute Starter Tutorial _ Basics

Source: Internet
Author: User
Tags eval tag name
You can run the following code.
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 strict//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" > & lt;html xmlns= "http://www.w3.org/1999/xhtml" lang= "en" xml:lang= "en" > <pead> <meta http-equiv= "Content-t" Ype "content=" text/html; charset=gb2312 "/> <meta http-equiv=" content-language "content=" ZH-CN "/> <title>html 30-minute introductory course ;/title> <meta name= "keywords content=" HTML, Web page, Web page production, tutorials, Getting Started "/> <meta name=" description "content=" 30 points The clock lets you understand what HTML is and has some basic understanding of it. Once you get started, you can find more detailed information on the Web to continue your study. "/> <meta name= Author" content= "Deerchao"/> <style type= "Text/css" > H1 {Text-alig N:center} p {text-indent:2em; line-height:140% Margin:auto 10px} span {margin:3px} . code {border:solid 1px gray; Background-color: #eee}. Name {font-weight:bold} DL {Margin-lef t:20px} dt {Font-weight:bold}. Trans {color:red} </style> <script language= "javascript" type= "Text/javascript" > <!--function window_ OnLoad () {var divs=document.getelementsbytagname ("div"); var codedivs=new Array (); for (var i=0 i<divs.length; i++) {if (divs[i].classname== "code") Codedivs.push (divs[i)); for (var i=0; i<codedivs.length; i++) {var button=document.createelement ("span"); Button.onclick=popwin; Button.innerhtml= "Click to view Effect"; Button.style.marginleft= "500px"; button.style.borderstyle= "SOLID"; Button.style.borderwidth= "1px"; Button.style.color= "Gray"; Codedivs[i].parentnode.insertbefore (Button,codedivs[i]); }} function Popwin () {thewin=window.open (); TheWin.document.write (HtmlDecode (This.nextSibling.innerHTML)); function HtmlDecode (s) {var out = ""; if (s==null) return; var L = s.length; for (var i=0; i<l; i++) {var ch = s.charat (i); if (ch = = ' & ') {var semicolonindex = S.indexof ('; ', i+1); if (Semicolonindex > 0) {var entity = s.substring (i + 1, semicolonindex); if (Entity.length > 1 && entity.charat (0) = = ' # ') {if (Entity.charat (1) = = ' X ' | | Entity.charat (1) = = ' X ') ch = string.fromcharcode (eval (' 0 ' +entity.substring (1))); else ch = string.fromcharcode (eval (entity.substring (1))); else {switch (entity) { Case ' quot ': ch = string.fromcharcode (0x0022); Break Case ' amp ': ch = string.fromcharcode (0x0026); Break Case ' lt ': ch = string.fromcharcode (0x003c); Break Case ' GT ': ch = string.fromcharcode (0x003e); Break Case ' nbsp ': Ch=string.fromcharcode (0X00A0); Break Default:ch = '; Break } i = Semicolonindex; } out + = ch; } return out; } var Thewin=null; --> </script> </pead> <body language= "javascript" onload= "return Window_onload ()" > <p>h TML 30-minute introductory course </p> <p > Author: Deerchao Source: Unibetter College Student Community Reprint please specify source </p> <p> This article goal </p> <p> In 30 minutes you'll understand what HTML is and have some basic knowledge of it. Once you get started, you can find more detailed information on the Web to continue your study. </p> <p> What is html</p> <p>html is the abbreviation for the English Hyper Text mark-up Language (Hypertext Markup Language), which prescribes its own grammatical rules to represent the " Text "Richer meanings, such as pictures, tables, links, and so on." The browser (Ie,firefox, etc.) software knows the syntax of the HTML language and can be used to view HTML documents. Most of the Web pages currently on the Internet are written using HTML. </p> <p>html What kind of </p> <p> simply, the syntax of HTML is to add text meaning to the <span class= "name" > label;/span> (TAG) allows the user (person or program) to get a better understanding of the text. </p> <p> Below is one of the simplest HTML documents:</p> <div class= "code" > <ptml>   <pead> &n Bsp   <title> First HTML document </title>   </pead>   <body>     Welcome Visit & Lt;a href= "http://www.unibetter.com" >unibetter College student Community </a>!   </body> </ptml> </div> <p> All HTML documents should have a <ptml> label,<ptml> tag can contain two parts:< Head> and <body>. </p> <p> <pead> tags are used to include general information about the entire document, such as the title of the document (the <title> tag is used to include headings), a description of the entire document, keywords for the document, and so on. The details of the document will be placed in the <body> tag. </p> <p><a> tags are used to represent links that, when viewed in browsers (such as Ie,firefox, etc.), often jump to another page when you click on the contents of the <a> tag. The address of the page to jump to is specified by the href attribute of the <a> tag. Above the <a href= "http://www.unibetter.com" >, the value of the href attribute is http://www.unibetter.com. </p> <p>html documents can contain content </p> <p> through different tags, HTML documents can contain different content, such as text, links, pictures, lists, tables, forms, frames, and so on. </p> <dl> <dt> Text </dt> <dd>html support for text is the richest, you can set different levels of headings, sections and lines, you can specify the semantics and appearance of text, you can tell the text is referenced from other places, and so on. </dd> <dt> links </dt> <dd> links are used to indicate that the content is related to another page or somewhere on the current page. </dd> <dt> pictures </dt> <dd> pictures are used to make the page more beautiful or to provide more information. The </dd> <dt> list </dt> <dd> list is used to illustrate that a series of entries are related to each other. </dd> <dt> forms </dt> <dd> tables are the form of organizing data together in rows and columns. There are also a lot of people who use tables for page layouts. </dd> <dt> Forms </dt> <dd> forms are usually made up of text entry boxes, buttons, multiple marquee boxes, radio boxes, drop-down lists, and so on, making HTML pages more interactive. The </dd> <dt> Framework </dt> <dd> Framework allows other pages to be included in the page. </dd> </dl> <p>html Document format details </p> <p> The basic format of the HTML document is described earlier, and the following is a detailed description. </p> <p>html documents can be created and edited in any text editor, such as Notepad, UltraEdit, and so on, because its content is just some text in nature. </p> <p> in HTML text, the part enclosed in angle brackets is called a label. If you want to use angle brackets in the text (or large and small numbers, in short, the same thing), you must use the <span class= "name" > Word escape </span&gt, that is to say, the original meaning of the converted character. < should use the <span class= "Trans" >&lt;</span> replace,> with <span class= "Trans" >&gt;</span> , as for the & symbol itself, you should use the <span class= "Trans" &GT;&amp;</span> substitution (It has to be said that there are many HTML documents that do not follow this rule, and that common browsers can also analyze whether & is an escape start or a symbol, but this is not recommended). The </p> <p> tag is essentially a description of what it contains, and there may be attributes to give more information. For example, the (picture) label has the SRC attribute (used to indicate the image's address), the Width and Height properties (used to indicate the width and height of the picture). What tags can be used in HTML, what attributes these tags can have, these are the rules, knowing the basics here, learning HTML is actually learning these tags. A brief introduction to the common HTML tags is presented later in this article. </p> <p> tags usually have a beginning and an end (also known as Start and end tags) that together define what the tag contains. Properties can only be specified in the start tag, and the property values may be enclosed in single or double quotes. The end tag is indicated by/plus the label name. Sometimes, some tags do not contain other content (only including their own properties, even the property does not), in this case, can be written like this: . Note the last space and a backslash, which indicates that the tag is finished and does not require a separate end tag. </p> <p> Some of the tags contained in the content can also have a new label, the new tag name may even be the same as the name of the tag that contains it (which tags can contain tags, which can contain tags are also provided). such as:</p> <div class= "code" > <div>   <div> catalog ...</div>   <div> current Category List ...</div> </div> </div> <p> In this case, the last occurrence of the label should be the first to end. </p> <p>html all the blanks in the document (space, Tab, newline, carriage return) will be ignored by the browser, the only exception is the space, the white space is treated as a blank space, whether there is one, or two, or 100. The reason for this rule is that ignoring whitespace allows the author of HTML to arrange the content in the most convenient format he can find, such as by adding indents after each label starts, markingReduce indentation After the end of the check. Because the English text hollow lattice is used very commonly (uses separates the word), therefore has done this special processing to the space. If you want to display contiguous spaces (for example, for indentation), you should use the <span class= "Trans" to represent the spaces. </p> <p> Common Label Introduction </p> <p> text </p> <p> The most commonly used label may be <font>, which is used to change font, font size, text color. </p> <div class= "code" > <font size= "6" >6</font> <font size= "4" >4</font> <font Color= "Red" size= "5" > Red 5</font> <font face= "bold" > Bold words </font> </div> <p> Bold, underlined, Italics are also commonly used text effects, which are represented by the <b>,<u>,<i>:</p> <div class= "code" > <b>Bold</b> < i>italic</i> <u>underline</u> </div> <p> There are also labels that indicate that the included text has special meaning, such as <abbr> (for abbreviations),<em> (for emphasis),<strong> (for stronger emphasis),<cite> (representing references),<address> (representing addresses), etc. These labels do not exist to define the display effect, so they may not have any effect from the browser, or they may be displayed differently by different browsers. </p> <p> A very long article, if there is a suitable small title, you can quickly to the content of the general understanding. In HTML, the label used to represent the title is: <p>,<p>,<p>,<p>,<p>,<p>, they represent first-level headings, level two headings, level three headings ...</p> <div class= "code" > <p>html 30-minute tutorials </p> <p> what is html< /h2> ... <p>html what kind of </p> ... </div> <p> photo </p> <p> <pr> tab for Add a horizontal line to the page. You can control the length and color of horizontal lines by specifying the width and color properties. </p> <div class= "code" > <pr width= "90%" color= "Red"/> </div> <p> label used to add a picture to the page , the SRC attribute specifies the address of the picture, and if you cannot open the picture specified by SRC, the browser usually displays the text of the ALT attribute definition where you want the picture to appear on the page. </p> <div class= "code" > </div> <p> links </p> <p> Hyperlinks are indicated by the <a> tag, and the HREF attribute specifies the address to link to. <a> labels can contain text, or can contain pictures. </p> <div class= "code" > <a href= "http://www.unibetter.com/forums/" >unibetter University students Forum </a> <a href= "http://validator.w3.org" ></a > </div> <p> Segmentation and line break </p> <p> because the HTML document ignores whitespace, you want to make sure that the normal paragraph breaks, you must indicate which text belongs to the same paragraph, and this uses the label <p>. </p> <div class= "code" > <p> This is the first paragraph. </p> <p> This is the second paragraph. </p> </div> <p> Others do not need to <p&gt, but with <br>. <br> only means wrapping, does not indicate the beginning or end of a paragraph, so there is usually no end tag. </p> <div class= "code" > This is the first paragraph. <br> This is the second paragraph. <br/> This is the third paragraph. </div> <p> Sometimes it's a combination of different parts of a document, such as a typical page that might include three parts: the header, the main, and the footer. <div> tags are specifically used to mark different parts:</p> <div class= "code" > <div> page Header content </div> <div> main content </div > <div> footer content </div> </div> <p> form </p> <p>html documents are usually left to right, from top to bottom in the browser, When you get to the right of the window, the line wraps automatically. In order to achieve the effect of the columns, many people use the table (<table>) for page layout (although the HTML provides the table is not intended for typesetting). </p> <p><table> tags usually contain a list of several <tr> tag,<tr> representing a row in the form. <tr> tags will also contain <td> tags, each <td> represents a cell. </p> <div class= "code" > <table>   <tr>     <td>2000</td>< Td> Sydney </td>   </tr>   <tr>     &LT;TD&GT;2004&Lt;/td><td> Athens </td>   </tr>   <tr>     <td>2008</td> <td> Beijing </td>   </tr> </table> </div> <p><tr> tags can also be <table> < Thead> or <tbody> <tfoot> included. They represent the head of the table, the body of the table, the foot of the table. When you print a Web page, if the table is large,,<thead> and <tfoot> will appear on every page. </p> <p><th> and <td> are very similar, also used in <tr> inside, the difference is that the <th> represents this cell is the row or column of the title. </p> <div class= ' code ' > <table>   <thead>     <tr><th> time </ Th><th> location </th></tr>   </thead>   <tbody>     <tr> <td>2000</td><td> Sydney </td></tr>     <tr><td>2004</td ><td> Athens </td></tr>     <tr><td>2000</td><td> Beijing </td ></tr>   </tbody> </table> </div> <p> list </p> <p> form withTo represent two-dimensional data (rows, columns), one-dimensional data is represented by a list. Lists can be divided into unordered tables (<ul>), sequence tables (<ol>), and definition lists (<dl>). The first two lists are more common and include list items with <li> tags. The </p> <p> unordered list represents a series of similar items, and there is no order between them. </p> <div class= "code" > <ul>   <li> Apple </li>   <li> Orange </li>   ;li> Peach </li> </ul> </div> <p> The order between items in a sequence table is important, and browsers usually generate numbers for them automatically. </p> <div class= "code" > <ol>   <li> open refrigerator door </li>   <li> get the elephants in. </li> & nbsp <li> Close Fridge door </li> </ol> </div> <p> Framework </p> <p> Finally, the framework, once very popular technology, A frame enables multiple documents to be displayed simultaneously in one window. There is no <body> tag in the main frame page, instead it is <frameset>. </p> <p><frameset> Label Properties rows and cols are used to specify how many rows (columns) are in the frameset (frameset), and the height (width) of each row (column). </p> <p><frameset> tags can contain <frame> tags, each <frame> tag represents a document (SRC attribute specifies the address of the document). </p> <p> If you feel that such a page is not complex enough, you can also include <frameset> tags in the <frameset> tag. </p> <div class= "code" > <frameset rows= "15%,*">      <frame src= "top.html" Name=title scrolling=no>      < Frameset cols= "20%,*" >           <frame src= "left.html" name= sidebar>           <frame src= "right.html" Name=recipes> & nbsp;    </frameset> </frameset> </div> <p>30 minutes to do </p> <p> This article just makes it a preliminary impression on HTML from people who have never been exposed to HTML, so a lot of things don't talk about it. This article does not list all the tags in HTML and does not describe all of their properties for the listed labels. Also, what I don't mention includes CSS, JavaScript, XHTML, XML, WEB standards, and their relationship to HTML that I find very important. But these are not likely to learn in 30 minutes, fortunately, as long as the door, you can use the Internet a lot of resources to continue to learn. Of course, if you have a paper book, that's better, I recommend <<ptml and XHTML authoritative guide >>. Here are some of the things I feel good about online resources:</p> <ul> <li>html Language Reference (English) </li> <li>html Tutorials </li> </ul> <p> references to terminology that I think you may already know </p> <dl> <dt> text </dt> <dd> text </dd> <dt> document ;/dt> <dd> documents, usually refers to the content isFiles for data (not programs) </dd> </dl> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.