49. Basic html knowledge & Common tags (1), 49html Basics
Starting from today's study, we will start to learn html first. There is no complicated and difficult logic to understand. We only need to remember, practice, practice, and practice.
I. First knowledge of HTML
1. 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(1024) conn.sendall(bytes("HTTP/1.1 201 OK\r\n\r\n
2. What is html?
1) Hypertext Markup Language (HTML)Tag LanguageTo mark each part of the web page to be displayed. A set of rules recognized by the browser
2) the browser renders the webpage file in order and then interprets and displays the content based on the tag. However, it should be noted that different browsers may have different interpretations of the same tag (compatibility). During the course of study, google and Mozilla Firefox are recommended).
3) Static webpage File Extension:. html or. htm
4) Browser-server in bs Mode
5) HTML is not a programming language, but a markup language)
6) HTML uses tag to describe Web pages
3. html Structure
1) <! DOCTYPE html> tell the browser what html or xhtml is used to parse html documents
2)
3) The
4) <title> </title> defines the webpage title, which is displayed in the browser title bar.
5) The text between <body> </body> is the visible content of the webpage subject.
4. html tag format
Tag Syntax:
<Tag Name attribute 1 = "property value 1" attribute 2 = "property value 2" ......> Content </Tag Name>
<Tag Name attribute 1 = "attribute value 1" attribute 2 = "attribute value 2 "...... />
II. Introduction to common labels
1. <! DOCTYPE> label
<! DOCTYPE html> declares the position at the beginning of the document, before the
Purpose: declare the document resolution type (document. compatMode) to avoid the strange mode of the browser.
Document. compatMode:
1) BackCompat: Disabled in standard compatibility mode. The browser uses its own weird mode to parse and render the page.
2) CSS1Compat: Standard compatibility mode enabled. The browser uses W3C standard parsing to render pages.
This attribute will be recognized and used by the browser. However, if your page does not have a DOCTYPE declaration, compatMode is BackCompat by default.
2. meta tag
Meta introduction:
<Meta> elements provide meta-information about the page, which describes and keywords the search engine and update frequency.
<Meta> the tag is in the document header and does not contain any content.
<Meta> the provided information is invisible to users.
Meta tag composition: meta tags have two attributes: http-equiv and name. different attributes have different parameter values, these different parameter values enable different webpage functions.
1) name attribute: it is mainly used to describe web pages. The corresponding attribute value is content. The content in content is mainly used to facilitate search engine robots to find information and classify information.
<Meta name = "keywords" content = "search keyword"> <meta name = "description" content = "webpage Introduction">
2) http-equiv attribute: equivalent to the http File Header, which can return some useful information to the browser to help correctly display the webpage content. The corresponding attribute value is content, content is actually the variable value of each parameter.
<Meta http-equiv = "Refresh" content = "2; URL = https://www.baidu.com"> (web pages jump to Baidu two seconds later) <meta http-equiv = "content-Type" charset = UTF8 "> (page encoding)
3. link tag
<Link rel = "icon" href = ""> logo before webpage title
3. <body> common internal labels
1. Basic labels (Block-level labels and inline labels)
1) block-level labels: exclusive one row, for example, h1 and p labels
2) inline label: Content placeholder for example: a, img label
<Hn>: The value range of n is 1 ~ 6; from big to small. used to indicate the title. <p>: paragraph label. the contents of the package are wrapped in a line break. there is also a blank line between the upper and lower content. <B> <strong>: bold label. <strike>: adds a midline to the text. <em>: The text is italic. <sup> and <sub>: two-dimensional and two-dimensional tables. <br>: line feed.
2. character entity
| Display result | Description | Entity name | Entity ID |
|---|---|---|---|
| Space | & Nbsp; | & #160; | |
| < | Yu no. | & Lt; | & #60; |
| > | Yu no. | & Gt; | & #62; |
| & | And number | & Amp; | & #38; |
| " | Quotation marks | & Quot; | & Amp; #34; |
| ' | Marker | & Apos; (not supported by IE) | & Amp; #39; |
| Bytes | Cent) | & Cent; | & #162; |
| £. | Pound (pound) | & Pound; | & #163; |
| ¥ | Yuan (yen) | & Yen; | & #165; |
| € | Euro (euro) | & Euro; | & #8364; |
| § | Section | & Sect; | & #167; |
| Copyright) | & Copy; | & #169; | |
| Registered Trademark | & Reg; | & #174; | |
| Trademark | & Trade; | & #8482; | |
| × | Multiplication number | & Times; | & #215; |
| Bytes | Division Number | & Divide; | & #247; |
3. graphical labels
Common attributes:
Src: Path of the image to be displayed. alt: prompt when the image is not loaded successfully. title: The prompt message when the mouse is suspended. width: The image width and height: The image height (the width and height attributes use only one to automatically proportional scaling .)
4. <a> hyperlink tag (anchor tag)
A hyperlink refers to the connection between a webpage and a target. The target can be another webpage, different locations on the same webpage, or an image, an email address, a file, or even an application
URL:
A URL is the abbreviation of a Uniform Resource Locator (Uniform Resource Locator). It is also called a webpage address and is the address of a standard Resource on the Internet. URL example Part 1: site address: it can be a domain name or IP address part 2: It is the directory of the page in the site: stu Part 2: It is the page name, for example, each part of index.html is separated by a slash.
Common attributes:
<A href = "" target = "_ blank"> click </a> the href attribute specifies the target webpage address. This address can have several types: 1. absolute URL-pointing to another site (such as href = "http://www.jd.com) 2. Relative URL-pointing to the relative path in the current site (href =" index.htm ") 3. The anchor URL points to "# top" in the anchor (href = "# top") anchor on the page. top is the id of other labels, you need to name the tag you want to point to. id is a common attribute that can be used by any tag to name the tag. The id attribute value is unique. target: _ The blank browser opens a new window to load the target document. _ Self (default) the browser loads the target document in the original window.
5. Table labels
Table concepts
A table is a two-dimensional data space. A table consists of several rows, and a row contains several cells, cells can contain text, lists, patterns, forms, numeric symbols, preset text, and other tables.
The most important purpose of a table is to display table-type data. Table data is the data that is most suitable for organizations in table format (by row and column.
Basic table structure:
<Table> table start <tr> row <th> title </th> column <th> title </th> </tr> <tr> row <td> content </ td> column <td> content </td> </tr> </table> end of table
<Th>, <td> difference, <th> is used to identify the header cell in the table. The result is that the text is bold, which is the same as <td>
Common attributes:
Border: Table border. cellpadding: margins cellspacing: margins. width: pixel percentage. (It is best to use css to set the length and width.) rowspan: number of rows vertically across a cell colspan: Number of columns across a cell (that is, merge cells)
Understanding attributes:
Bordercolor: border color bgcolor: background Color background: background image align: table or content position (left, center, right) <caption> title </caption>: labels are placed in table labels.
6. Exercise
Material:
Girl.jpglogo.png
Answer:
<! DOCTYPE html> Menu<! DOCTYPE html> Course schedule
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
