Initial HTML (Common label)

Source: Internet
Author: User
Tags border color closing tag tag name url example

Today we learn some of the Web front-end knowledge, this stage needs to remember the things relatively more, need to spend time to remember and do good exercises.

First, the initial knowledge of HTML

1. The nature of Web services

Import Socketdef Main ():    sock = Socket.socket (socket.af_inet, socket. SOCK_STREAM)    sock.bind ((' localhost ', 8081))    Sock.listen (5) while    True:        print ("Server is working        conn, address = sock.accept ()        request = CONN.RECV (1024x768)        Conn.sendall (Bytes ("http/1.1 201 ok\r\n\r \n

2. What is HTML?

1) Hypertext Markup Language (hypertext Markup language,html) tags each part of the page that you want to display through the tag language . A set of rules, a browser-aware rule

2) The browser renders the Web page file sequentially, and then interprets and displays the content based on the marker. However, it is important to note that for different browsers, the same tag may be interpreted differently (compatibility), and it is recommended to use Google (Google) and Mozilla Firefox (Firefox) for testing during the learning period.

3) static Web page file extension:. html or. htm

4) BS mode Browser-server

5) HTML is not a programming language, but a markup language (markup language)

6) HTML uses tag tags to describe web pages

3. HTML structure

1) <! DOCTYPE Html> tells the browser what HTML or XHTML to use to parse the HTML document

2)

3) The

4) <title></title> define the page title, which is displayed in the browser title bar.

5) The text between <body></body> is visible on the page body content

4. HTML tag format

Syntax for Tags:

< Tag Name Property 1 = "Property value 1" Property 2 = "Property value 2" ......> content section </tag name >
< Tag Name Property 1 = "Property value 1" Property 2 = "Property value 2" .../>

Second, the common label introduction

1, <! Doctype> Label

<! The DOCTYPE html> declaration is located in the first position in the document, before the

Function: Declares the parsing type (document.compatmode) of the document, avoiding the bizarre mode of the browser.

Document.compatmode:

1) Backcompat: Standard compatibility mode is off. The browser uses its own weird mode to parse the rendered page.

2) Css1compat: Standard compatibility mode is turned on. Browsers use the standard resolution rendering page.

This property will be recognized and used by the browser, but if your page does not have a DOCTYPE declaration, the Compatmode default is Backcompat

2. Meta tags

Meta Introduction:

The <meta> element provides meta-information about the page (meta-information), a description of the search engine and the frequency of updates, and keywords.

The <meta> tag is located in the header of the document and does not contain any content.

The information provided by <meta> is not visible to the user

Meta tag composition: Meta tags have two attributes, which are the Http-equiv property and the Name property, and different properties have different parameter values, these different parameter values to achieve a different page function.

1) name attribute: Mainly used to describe the Web page, with the corresponding property value of content,content content is mainly for the search engine to find information and classification information.

<meta name= "keywords" content= "search keywords" > <meta name= "description" content= "Introduction to the Web" >

2) Http-equiv property: equivalent to the file header of HTTP, it can send back some useful information to the browser to help correctly display the content of the Web page, the corresponding property value of Content,content is actually the variable value of each parameter.

<meta http-equiv= "Refresh" content= "2; Url=https://www.baidu.com ">    (Web page in two seconds after the jump to Baidu) <meta http-equiv=" Content-type "Charset=utf8" >    (Page encoding)

3. Link label

<link rel= "icon" href= "" >  logo before page title

Third, <body> common tags

1. Basic label (block-level label and inline tag)

1) block-level label: Exclusive Line example: H1,p label

2) Inline Tags: by content placeholder Example: A,img label

2. Character entities

Show Results Description Entity name Entity number
Space &nbsp; & #160;
< Less than sign &lt; & #60;
> Greater than sign &gt; & #62;
& and number &amp; & #38;
" Quotes &quot; & #34;
Apostrophe &apos; (ie not supported) & #39;
Points (cent) &cent; & #162;
Pound (pound) &pound; & #163;
Yuan (yen) &yen; & #165;
Euros (euro) &euro; & #8364;
§ Section &sect; & #167;
? Copyrights (copyright) &copy; & #169;
? Registered trademarks &reg; & #174;
? Trademark &trade; & #8482;
X Multiplication sign &times; & #215;
÷ Division Sign &divide; & #247;

3. Graphic Label

Common Properties:

SRC: The path of the picture to be displayed. alt: The picture does not prompt when it is loaded successfully. Title: Tip Information when hovering the mouse. Width: The height of the picture: high (width height two attributes only one will be automatically scaled.)

4. <a> hyperlink tag (anchor label)

A hyperlink is a connection to a target from a Web page, which can be another page, a different location on the same page, a picture, an e-mail address, a file, or even an application.

Url:

The URL is the abbreviation for the Uniform Resource Locator (Uniform Resource Locator), also known as the Web address, which is the address of the standard resource on the Internet. URL example Http://www.sohu.com/stu/intro.htmlhttp://222.172.123.33/stu/intro.htmlURL address consists of 4 parts of the 1th part: for the Agreement:/HTTP, ftp://, etc. Part 2nd: For the site address: can be a domain name or IP address part 3rd: The directory for the page in the site: Stu Section 4: For the page name, for example, index.html the "/" symbol between the sections separated

Common Properties:

<a href= "" target= "_blank" >click</a>href property specifies the destination page address. The address can be of several types: 1, absolute URL-point to another site (such as href= "http://www.jd.com) 2, relative URL-refers to a relative path in the current site (href=" index.htm ") 3, the anchor URL-point to the anchor in the page (href= "#top") anchor in the "#top", top for the ID of the other label, you need to refer to the tag you need to point to the name ID is a generic property that any label can use to give the tag name, the id attribute value is unique Target:_blank browser opens a window to load the target document. The _self (default) browser loads the target document into the original window.

5. Table Label

Tabular Concepts
A table is a two-dimensional data space, a table consists of several rows, a row and a number of cells, cells can contain text, lists, patterns, forms, digital symbols, preset text and other tables and other content.
The most important purpose of the table is to display the table class data. Tabular data refers to data that best fits into a tabular format, which is organized by rows and columns.
The basic structure of the table:

<table>    table Start         <tr>    row                <th> title </th>    column                <th> title </th>         </tr>                  <tr>    lines                <td> content </td>    columns                <td> content </td>         </tr ></table>    End of form

<th>,<td> difference,<th> used to identify the table header cells in the table, the effect is that the text bold, in addition to the same as <td>

Common Properties:

Border: Table border. cellpadding: padding cellspacing: Margin. Width: Percentage of pixels. (preferably with CSS to set the length width) rowspan:  How many rows of cells are vertically spanned colspan:  How many columns the cell spans (that is, merged cells)

Understanding Properties:

BorderColor: Border color bgcolor: background color background: Background image align: table or content location (left,center,right) <caption> title </caption> : The label is placed in the Table tab.

6. Practice

Material:

Girl.jpglogo.png

Practice answers:

<! DOCTYPE html>"en"> "UTF-8"> <title> Monday Recipes </title> <link rel="icon"href="logo.png"> "5"Bordercolor="Pink"cellpadding="20px"cellspacing="0px"align="Center"> <tr> <th colspan="3"align="Center"> Monday Recipes </th> </tr> <tr> <td rowspan="2"> Vegetarian </td> <td> grass eggplant </td> <td> pepper lentils </td> </tr> <tr> <td> shallot tofu </td> <td> sautéed cabbage </td> </tr > <tr> <td rowspan="2"> Meat Dishes </td> <td> braised prawns </td> <td> sea cucumber shark fin </td> </tr> <tr> <td> braised Pork <a href="curriculum. HTML"target="_blank">"girl.jpg"Width="70px"height="100px"></a></td> <td> roasted whole sheep </td> </tr> </table> </bod Y>Menu
Menu
<! DOCTYPE html>"en"> "UTF-8"> <title> curriculum </title> <link rel="icon"href="logo.png"> "1px"Bordercolor="Blue"align="Center"> <caption> curriculum </caption> <tr> <th> Projects </th> <th colspan="5"align="Center"> Classes </th> <th colspan="2"align="Center"> Rest </th> </tr> <tr> <th> Week </th> <t h> Monday </th> <th> Tuesday </th> <th> Wednesday </th> <th& gt; Thursday </th> <th> Friday </th> <th> Saturday </th> <th&gt ; Sunday </th> </tr> <tr> <td rowspan="4"> Morning </td> <td> language </td> <td> math </td> <td> English Language </td> <td> English </td> <td> physics </td> <td> computer &lt ;/td> &LT;TD rowspan="4"> Rest </td> </tr> <tr> <td> Math </td> <t d> Math </td> <td> Geography </td> <td> History </td> <td> Chemistry </td> <td> Computers </td> </tr> <tr> &LT;TD&G t; chemistry </td> <td> languages </td> <td> sports </td> <td> Computers            </td> <td> English </td> <td> computer </td> </tr> <tr> <td> politics </td> <td> English </td> <td> sports &lt ;/td> <td> History </td> <td> Geography </td> <td> Computer &LT;/TD > </tr> <tr> <td rowspan="2"> PM </td> <td> languages </td> <td> Math </td> <td> | Language </td> <td> English </td> <td> physics </td> <td> computer &lt ;/td> &LT;TD rowspan="2"> Rest </td> </tr> <tr> <td> Math </td> <t d> Math </td> <td> Geography </td> <td> History </td> <td> Chemistry </td> <td> Computers </td> </tr> </table> </body>Timetable
Timetable

Initial HTML (Common label)

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.