HTML 30-Minute Introductory Tutorial _ Basic Tutorial

Source: Internet
Author: User
Run the following code to do it.
<! 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= "zh" xml:lang= "zh" > <pead> <meta http-equiv= " Content-type "content=" text/html; charset=gb2312 "/> <meta http-equiv=" content-language "content=" ZH-CN "/> <title>html 30-minute introductory tutorial </ title> <meta name= "keywords" content= "HTML, Web, Web authoring, tutorials, Getting Started"/> <meta name= "description" content= "30 minutes to get you Understand what HTML is and have some basic understanding of it. Once you get started, you can find more detailed information on the Web to continue learning. "/> <meta name=" Author "content=" Deerchao "/> <style type=" Text/css "> H1 {text-align:c Enter} 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-left:20px} DT {Font-weight:bold}. trans {color:red} </style> </pead> <body language= "javascript" onload= "return Window_onload ()" > <p>html 30-minute Introductory tutorial </p> <p style= "Text-align:center" > Author: Deerchao Source: Unibetter Student Community Reprint please indicate source </p> <p> This article targets </p> <p>30 in minutes to let you know 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 learning. </p> <p> What is html</p> <p>html is an abbreviation for the English Hyper Text mark-up Language (Hypertext Markup Language), which prescribes its own grammatical rules, which are used to denote the " Text "Richer meanings than slices, forms, links, etc. The browser (Ie,firefox, etc.) software knows the syntax of the HTML language and can be used to view HTML documents. The vast majority of web pages on the Internet are now written using HTML. </p> <p>html is what kind of </p> <p> simply, the syntax of HTML is to add text meaning <span class= "name" > tag </ Span> (TAG) allows the user (person or program) to get a better understanding of the text. </p> <p> The following is one of the simplest HTML documents:</p> <ptml> <pead> <title> The first HTML document &LT;/TITLE&G T </pead> <body> Welcome to the Unibetter Student community! </body></ptml> <p> All HTML documents should have a <ptml> tag,<ptml> tag can contain two parts:<pead> and <body >. </p> <p> <pead> tags are used to include general information about the entire document, such as the title of the document (<title> tags are used to include headings), descriptions of the entire document, keywords for the document, and so on. The specifics of the document will be placed in the <body> tab. </p> <p> tags are used to represent links, and when you view an HTML document in a browser (such as Ie,firefox, etc.), you usually jump to another page when you click on the contents of the tag. The address of the page to jump to is specified by the href attribute of the tag. In the above, 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, etc. </p> <dl> <dt> text </dt> <dd>html support for text is the richest, you can set different levels of headings, segments and line breaks, you can specify the semantics and appearance of text, It can be explained that 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 to a location on the current page. </dd> <dt> pictures </dt> <dd> pictures are used to make the page more aesthetically pleasing, or to provide more information. </dd> <dt> list </dt> <dd> lists are used to illustrate that a series of entries are related to each other. </dd> <dt> forms </dt> <dd> tables are the form in which data is organized by row and column. There are also many people who use tables for page layouts. </dd> <dt> Forms </dt> <dd> forms are usually made up of text input boxes, buttons, multiple boxes, radio boxes, drop-down lists, and so on, making HTML pages more interactive. </dd> <dt> Framework </dt> <dd> Framework enables pages to contain other pages. </dd> </dl> <p>html Document format details </p> <p> The basic format of the HTML document is described earlier.A detailed description. </p> <p>html documents can be created and edited with any text editor (such as Notepad, UltraEdit, etc.) because its content is essentially just some text. </p> <p> in HTML text, the section enclosed in angle brackets is called a label. If you want to use angle brackets in the body (or large and small with the number, in short, the same thing), you must use <span class= "name" > character escaping </span&gt, that is to say, the original meaning of the conversion character. < should use <span class= "trans" ><</span> replace,> to use <span class= "trans" &GT;&GT;&LT;/SPAN&GT; As for & The symbol itself, you should use the <span class= "Trans" >&</span> instead (it has to be said that there are many HTML documents that do not follow this rule, and common browsers are able to analyze whether & is the beginning of an escape, is still 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) tag has the SRC attribute (used to indicate the address of the picture), the width and Height properties (used to describe the width and altitude of the picture). What tags can be used in HTML, which attributes are available to each of these tags, all of which are prescribed, after knowing the basics here, learning HTML is actually learning these tags. A brief introduction to commonly used HTML tags is made later in this article. </p> <p> tags usually have start and end sections (also known as Start and end tags), which together define what the tag contains. Properties can be specified only in the start tag, and the attribute values may be enclosed in single or double quotation marks. The end tag is represented by the/plus tag name. Sometimes, some tags do not contain other content (including only their own properties, even the properties are not), in this case, can be written like this:. Note the last space and a backslash, which indicates that the label has ended and does not require a separate end tag. </p> <p> Some tags may contain new tags, and the new tag name may even be the same as the name of the label that contains it (which tags can contain tags and which tags are also specified). For example, the:</p> classification directory ... Current Categorized Content list ...<p> in this case, the last label that appears should end first. </p> <p>html all whitespace characters in the document (space, Tab, line feed, carriage return) will be ignored by the browser, the only exception is the space, the space is treated as a space, regardless of whether there is one, or two, or 100. The reason for this rule is that ignoring whitespace allows the author of HTML to arrange content in the format he feels most convenient, such as adding indents after each label starts, and reducing indentation after the end of the label. Because the English text hollow lattice is used very commonly (used to separate words), so the space has made such special treatment. If you want to display contiguous spaces (for example, to indent), you should use <span class= "trans" > </span> to represent spaces. </p> <p> Common Label Introduction </p> <p> text </p> <p> The most commonly used tags may be, it is used to change the font, size, text color. </p> 64 Red 5 boldface words <p> bold, underline, italics are also commonly used text effects, they are used <b>,<u>,<i> to represent:</p> <b>bold </b><i>italic</i><u>underline</u> <p> There are also labels to indicate that the contained text has a special meaning, such as (to denote an abbreviation), <em > (to emphasize),<strong> (for stronger emphasis),<cite> (for reference), (for addresses), etc. These tags do not exist to define the display effect, so they may not have any effect from the browser, or the different browsers may have a different display effect on these labels. </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 tags used to denote headings are: <p>,<p>,<p>,<p>,<p>,<p> they represent a first-level title, a level two heading, a level three title ... </p> <p>html 30-minute tutorial </p><p> what is html</p>...<p>html is what kind of </p> <p> pictures </p> <p> tags are used to add horizontal lines to the page. You can control the length and color of a horizontal line by specifying the width and color properties. </p> <pr width= "90%" color= "red"/> <p> tag is used to add a picture on the page, the SRC attribute specifies the address of the picture, if the image specified by SRC cannot be opened, The browser usually displays the text of the ALT attribute definition where the picture needs to be displayed on the page. </p> <p> links </p> <p> Hyperlinks are labeled, and the HREF attribute specifies the address to which the link is linked. Labels can contain text, or they can contain pictures. </p> unibetter Student Forum <p> Segmentation and line wrapping </p> <p> because HTML documents ignore whitespace characters, you must indicate which text belongs to the same paragraph if you want to ensure normal segment wrapping. This is the use of the label <p>. </p> <p> This is the first paragraph. </p><p> This is the second paragraph. </p> <p> people don't have to <p&gt, and use <br>. <br> is a line break only, does not represent the beginning or end of a paragraph, so there is usually no end tag. </p> This is the first paragraph. <br> This is the second paragraph. <br/> This is the third paragraph. <p> sometimes, to think of a document as a combination of different parts, such as a typical page may consist of three parts: header, body, footer. Labels are specifically used to indicate different parts of the:</p> header content footer content <p> tables </p> <p>html documents are usually left-to-right in the browser, from top to bottom, to the right of the window to be automatically wrapped. In order to achieve the effect of the column, many people use the table (<table>) for page layout (although the HTML is not intended to provide a table for typesetting). The </p> <p><table> tab usually contains several <tr> tags,<tr> a row in the table. <tr> tags andContains <td> tags, each <td> represents a cell. </p> <table> <tr> <td>2000</td><td> Sydney </td> </tr> <tr> < td>2004</td><td> Athens </td> </tr> <tr> <td>2008</td><td> Beijing </td > </tr></table> <p><tr> tags can also be <table> <thead> or <tbody> or <tfoot> Contains. They represent the table header, the table body, and the table feet, respectively. When printing a Web page, if the table is large,,<thead> and <tfoot> will appear on each page. </p> <p><th> and <td> are very similar, but also used in <tr>, the difference is that the <th> means that the cell is the title of the row or column in which it is located. </p> <table> <thead> <tr><th> time </th><th> locations </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> <p> list </p> <p> tables are used to represent two-dimensional data (rows,Columns), one-dimensional data is represented by a list. Lists can be divided into unordered lists (<ul>), sequential lists (<ol>), and definition listings (<dl>). The first two lists are more common and include list items with the <li> tag. </p> <p> unordered lists represent a series of similar items that do not have a sequential order between them. </p> <ul> <li> Apple </li> <li> Orange </li> <li> peach </li></ul> <p> It is important to have the order of the items in the sequence list, which is usually automatically numbered by the browser. </p> <ol> <li> Open the refrigerator door </li> <li> drive the elephant in </li> <li> close the refrigerator door </li></ol> <p> Framework </p> <p> finally talk about the framework, once very popular technology, the framework enables a window to display multiple documents simultaneously. There is no <body> tag in the main frame page, instead it is <frameset>. The properties of the </p> <p><frameset> tag 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 include <frame> tags, each <frame> tag represents a document (the 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> <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> </frameset></frameset> <p>30 minutes after what to do </p> & Lt;p> This article just lets people who have never touched HTML have a preliminary impression of HTML, so a lot of things are not talked about. This article does not list all the tags in the HTML, nor does it 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 a lot of online resources to continue learning. Of course, if there is a paper book, it is better, this aspect I recommend <<ptml and XHTML authoritative guide >>. Here are some of the online resources I think are good:</p> <ul> <li>html Language Reference </li> <li>html tutorials </li> </ul> &lt ;h2> a reference to some of the terms I think you might already know </p> <dl> <dt> text </dt> <dd> text </dd> <dt> documentation </ dt> <dd> files, usually refers to files that are data (not programs) </dd> </dl> </body> </ptml>
[Ctrl + A full selection Note: If you need to introduce external JS need to refresh to execute]
  • Related Article

    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.