Home > Developer > Web Develop
First, the initial HTML
1.web Service Essence
Import Socketsock=socket.socket (Socket.af_inet,socket. Sock_stream) Sock.bind (("127.0.0.1", 8800)) Sock.listen (5) While 1: print ("Waiting ...") conn,addr= Sock.accept ( data=conn.recv) print ("Data", Data.decode ("UTF8")) with open ("index.html", "R") as F : response=f.read () #可以吧html放在一个文档里面读出来 conn.send (("http/1.1 201 ok\r\n\r\n%s"%response). Encode (" UTF8 "))What is 2.html?
3.html is not what?
HTML is not a programming language, but a markup language (markup language)
HTML uses tag tags to describe web pages
4.html structure
5.html label 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, commonly used labels
1.<! Doctype> Label
<! The doctype> declaration is positioned at the front of the document, before the
Function: Declares the parsing type (document.compatmode) of the document, avoiding the bizarre mode of the browser.
Document.compatmode:
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
Common tags in 2.
?? <meta> tags
1.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
The composition of the 2.meta label:
Meta tags have a total of two properties, 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, the corresponding property value of content,content content is mainly for the search engine to find information and classification information.
<meta name= "keywords" content= "Beijing Auto Network, Beijing Auto Quote, Beijing Auto Market latest offer, Beijing Automobile report, Beijing Easy Car Network, Beijing Auto Group purchase Service" ><meta name= "description" content= "Beijing Auto Network, Beijing Auto Quote, Beijing Auto Market latest offer, Beijing Automobile report, Beijing Easy Car Network, Beijing Auto Group purchase Service" >
(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.
<title>meta label </title><meta charset= "UTF-8" ><meta http-equiv= "Content-type" charset= "UTF8" > is the same as above, all of which are specified encoded <meta http-equiv= "Refresh" content= "2;url=http://www.baidu.com" > <!-- Two seconds after jumping to the Baidu page (note the following quotation marks, respectively, in front of the number of seconds and after the URL)--><meta http-equiv= "x-ua-compatible" content= "Ie=emulateie7" > <!--set the current page compatibility mode to IE7 (even if you open it with a different version of the browser, it also supports the IE7 version)--
?? Non-<meta> tags
<link rel= "icon" href= "Http://www.jd.com/favicon.ico" > <!--Set the head icon, as we open Baidu website will have Baidu's small icon--
<link rel= "stylesheet" href= "Css.css" > #加载css <script src= "Hello.js" ></script> #加载js
Common tags in 3.<body>
Basic label
"<HN>: the value range of n is 1~6; From big to small. Used to denote a title. <p>: paragraph label. The contents of the package are wrapped. And there is a line between the contents of the content .<b> <strong>: Bold label. <strike>: Adds a median line to the text. <em>: text becomes italic .<sup> and <SUB>: Upper corner and Lower corner table. <br>: newline.Common label Exercises <body>summarize from the above exercises:Classification of Labels One:
Self-closing Tags: single label
Closing Tags: double labelCategory Two of Labels:
Block-level Tags: is the exclusive line, you can set the width of the high! Such as: The first div,p,h1-h6 to learn
Inline Tags: by content placeholder, height and breadth are filled with their own content such as: a,br,img
Methods for judging block-level labels and inline tags:
1. Whether to exclusive line (can be determined by setting the background color)
2. Whether you can set the height of the element individually degrees and widths.
<div> and <span>
<div></div>: <div> is just a block-level element that has no practical meaning. It is mainly given a different performance by CSS styles.
<span></span>: <span> represents inline rows (inline elements) and has no practical meaning, and is mainly given a different representation by CSS styles.The difference between a block-level element and an in-line element
The so-called block element is the element that begins to render on another line, and the inline element does not need another line. If you insert these two elements separately in a Web page, you will not have any effect on the page.
These two elements are specifically designed to define a CSS style.Graphic Tags:
' 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.)Hyperlink tag (anchor tag): <a> </a>
What is a hyperlink? A hyperlink is a link from a Web page to a target, which can be another page, a different location on the same page, a picture, an e-mail address, a file, or even an application."' <a href=" "target=" _blank ">click</a>href property specifies the destination page address. The address can have several types: absolute URL-point to another site (such as href= "http://www.jd.com) relative URL-refers to the exact path in the current site (href=" index.htm ") anchor URL- Point to the anchor in the page (href= "#top")List label
"' <ul>: unordered list [type attribute: disc (solid dot) (default), Circle (Hollow Circle), Square (solid square)]<ol>: Sequence table <li>: Each item in the list .< dl> Define list <dt> list title <dd> list item 'Table Tags: <table>
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> <tr> <th> title </th> <th> title </th> </tr> < tr> <td> content </td> <td> content </td> </tr></table>Property:
"' <tr>: Table row <th>: Table header <td>: Table Data properties: border: Table border. cellpadding: Inner margin cellspacing: margin. Width: Percentage of pixels. (preferably with CSS to set the length and width) rowspan: How many rows the cell spans vertically colspan: how many columns (i.e. merged cells) the cells spanWeb front End "first" HTML basis one (tag)
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
