Html basics (1): html Basics

Html basics (1): html Basics

Overview
HTML is a language that combines content and content display forms. It controls content display forms mainly through the attributes of tags (elements, as it has many drawbacks to the "content display form", CSS will appear later, which is equivalent to the attribute of HTML tags.

HTML element format
Empty element. Example: <br>
Empty element with attribute. Example: Element with content. Example: <title> http://blog.csdn.net/jiben2qingshan </title>
Elements with content and attributes. Example: <font color = "red"> http://blog.csdn.net/jiben2qingshan </title>
Note: For <br> such labels, we 'd better write them like this <br/>

Link
Internal Link
Theory
1. Create a named anchor with the Syntax: <a name = "name anchor">
2. Create a link (link to the corresponding anchor). Syntax: <a href = "# anchor name">
Example (main code ):
<A href = "# poem"> click a to jump to B </a>
<! -- Two rows separated by one page have better results -->
<A name = "poem"> B: the position after the jump </a>
Purpose
In the same webpage; open the specified location of the specified webpage (href = "index.html #1", which can be an absolute address)

External link
Link to external website
<A href = "http://www.baidu.com" target = "_ blank"> Baidu </a>
Link to E-mail
<A href = "mailto: jiben2qingshan@163.com" target = "_ blank"> click here to open the default email software </a>
Link to FTP
<A href = "ftp: // ftp address" target = "_ blank"> click here to link to the corresponding FTP Server (generally, you need to enter the user name and password to access the FTP server) </a>
Link to Telnet
<A href = "telnet: // address" target = "_ blank"> click here to link to the corresponding Telnet server. </a>

Target attribute
Value: _ blank to open the linked document in a new window; _ self, default: to open the linked document in the same framework; _ parent, open the linked document in the parent framework; _ top: Open the linked document throughout the window; framename: Open the linked document in the specified framework

Download files

If the hyperlink points to a webpage file rather than a Web file, such as a zip file, the file <a href = ".zip"> song name </a> is downloaded when you click the link.

Image

Img notes attributes
Src: Image address
Alt: text that appears at the position (original display image) when the image is not displayed
Title: The text that appears when you move the cursor over the image.
Border: The Edge Width of the image. The default value is 0. The border color is black. If it is a hyperlink, it is consistent with the link text color.
Vspace: the vertical margin. The distance between the image and the nearest element in the vertical direction.
Hspace: horizontal margin. The distance between an image and its closest element in the horizontal direction.
Width, height: If the width and height attributes are not written, the image will be displayed according to its original size. If yes, the image will be displayed according to the size of their values.
Align: Layout between images and text
Bottom: the bottom of the image is aligned with the bottom of the text in the current row.
Top: Align the bottom of the image with the top Text of the current row
Middle: horizontal midline alignment of the image and text midline alignment of the current row
Left: left alignment of the image
Right: right-aligned Image
Center: horizontal midline alignment of the image and text midline alignment of the current line (same effect for Self-Test center and middle)

Note that the address is generally written as a relative address. Try not to write an absolute address; ".. /"indicates the upper-level directory of the current directory," .. /.. /"indicates the upper level of the current directory.

A table is an indispensable tool for web page layout. Create the common labels for a table: <table>, <caption>, <tr>, <th>, and <td>. Main operation objects: tables, rows, cells,

Table label <table> </table>

Create a table integrity tag. Its main attributes are as follows:

Width, height: Set the width and height of the table. The value can be a number or a percentage (the length and width of the table are relative to that of the browser and change with the size of the browser ), if the value is large, the system will automatically allocate a blank location based on the data volume. If the value is small, the system will display the complete data and the set value will automatically expire; if the attribute value is not specified, the system automatically calculates the width and height of the field data in the table to display the table in the smallest unit that can hold the data.

Bgcolor and background: Set the background color and background image of the table. Both attributes are set to the background. Generally, only one of these attributes is designed. If both attributes are set, the background image is displayed.

Border, bordercolor: Set the border Width and border color.

The default value of border is 0. The browser does not display any borders (around the table and cells). border only affects the size of the border around the table and does not affect the size of the cell border;

Bordercolor is black by default, and the color of the table border (four sides and cells) is changed.

Align: sets the horizontal alignment (left, center, and right) of the table. The align can only align the entire table within the browser page range, however, the cell alignment in the table does not change as a result. To change the cell alignment, You need to define the cell alignment in the row, column, or cell.

Cellspacing and cellpadding: Set the distance between each cell in the Table. Set the distance between the cell border and the content in the cell. By default, the content in the cell will closely follow the border of the table.

Example (core code): <table width = "50%"

Height = "50%"

Bgcolor = "red"

Background = "2.jpg"

Border = "5"

Bordercolor = "red"

Align = "center"

Cellspacing = "20"

Cellpadding = "20">