Using HTML tags--text, lists, tables, hyperlinks

Note: The article originates from the Bi Xiangdong podcast teacher using courseware and network.

HTML content

1. HTML is shorthand for Hypertext Markup Language, which is the most basic web language. 2. HTML is a language defined by tags, and the code is made up of tags. 3. The HTML code is not case sensitive. 4. The HTML code starts with 5. The first part is to add some auxiliary or attribute information to the HTML page, the content of which will be loaded first. 6. The body part is where the page data is actually stored.

L Most tags have start and end tags, with individual labels because only a single function, or no content to be decorated, can end within the tag.

L want to enrich the contents of the tagged content, use the attributes in the tag, and increase the effect selection by changing the value of the property.

The "=" connection between the property and the attribute value can be used in double quotation marks or single or no quotation marks, usually with double quotes. or the company stipulates written specifications.

L format:< Tag Name Property name = ' attribute value ' > data Content </label >

< Tag Name Property name = ' attribute value '/>

Operation Idea:

In order to manipulate data, it is necessary to encapsulate the data in different labels and manipulate the encapsulated data through the attributes in the tag. Labels are detailed and containers. Manipulating the data in a container is changing the value of the property in the container.

Use of commonly used tags

Font

1. Font label :<font> Example: <font size=5 color=red> Font label Example </font> Note: simple color but directly write the corresponding English, complex color with 16 binary representation, the expression form #ff0000 two numbers for a group, according to Red, green, blue arrangement, such as: #00FF00表示绿色. It is recommended to use tools to select. 2. Title label : Because headings are commonly used in text, they are defined for ease of operation. is actually a combination of a font size and a bold body. 3. Special characters: If you want to display some special symbols on the Web page, such as < > &. Because these symbols are recognized and interpreted by the browser in the code, they are represented in a special way. &lt; < &gt; > &amp; & &quot; “ &reg; ? &copy; ? &trade; ? &nbsp; Space Note: There is a Lenovo function in Dreamweaver8.

List

4. List Tags:<dl> <DT>: Upper Project <DD>: Lower-level project Cases: <dl> <dt> Game Name </dt> <dd> StarCraft </dd> <dd> Red Alert </dd> <dt> Department Name </dt> <dd> Technology Dept. </dd> <dd> Training Department </dd> </dl> Effect: Labels for bullets in the list <OL>: Digital Label (a a 1 I i) <ul>: Symbol tags (0) <LI>: Specific item content label. This tab is only valid in <ol> <ul>. Using the Type property to change bullets, if you want to make a better list, such as: black dots are represented by a picture, use CSS.

Image

5. Image Label : Example: Align: property defines how the picture is arranged, and border is used to set the border of the image. SRC Connect a file 6. image map :<map> Apply: When you want to select a part of the image as a connection. Such as: the region of each province of China map. The map tag should be used in conjunction with the IMG tag. HREF is hyper-connected <map > <area shape= "rect" coords= "50,59,116,104" href= "1.html"/> <area shape= "Circle" coords= "118,203,40" href= "2.html"/> </map>

Table

7. Table Label :<table> Composition: Title tag: <caption>, give the table a title. Header tags: <th> generally formatting the first or first column of a table is displayed in bold. Not used. Row Label:<tr> Cell Label: <TD>, loads the inside of the row label. It can be simply understood that there are rows first, and cells are added to the row. Format: <table border= "1" width= "40%" ><!-width value as a percentage allows the width of the table to vary with the size of the browser window- <caption> Table title </caption> <tr><!--First line-- <th> name </th> <th> Age </th> </tr> <TR algin= "center" ><!--second line-- <td> Zhang San </td> <td>23</td> </tr> </table> Effect: <table border= "1" width= "40%" > <tr> <tr> <th colspan= "2" > <!--colspan:th label two-- Personal information </th> </tr> <TR align= "center" > <td> Zhang San </td> <td>23</td> </tr> </tr> </table> Effect: Each table can have a header, a footer, and one or more table bodies (that is, the body), represented by THEAD, TFOOT, and tbody elements, respectively. THEAD, TFOOT contains information about the table columns. The Tbody function is: You can control the table branch download, thereby increasing the download speed. (The opening of the Web page is the first form of the contents of all downloaded, it is displayed, branch download can show some of the content, which will reduce the user wait time.) ） The purpose of using tbody is to make the included code appear without parsing the entire table, meaning that if you have more than one row, you can display a row first if you get a tbody row. Tbody This tab can control the table branch download, when the table content is very useful, in the need to branch download place <tbody> and </tbody>.

Hypertext links

8. Hyperlink Tags:<a> Two ways to use: One, Hyperlink <a href= "" > Cases: <a href= "http://www.sina.com.cn" target= "_blank" > Sina </a> <!--the href attribute value can be a URL, or it can be a local file. The target property is the specified window or frame in which to open. - Second, the positioning Mark <a name= "" > Generally used in this page, when the page content is too long, the anchor is more convenient than dragging the scroll bar. Note: The anchor tag is valid for use with hyperlinks. Cases: <a name= "marker" > Marker location </a> <p>.......<!--A lot of empty lines to make Web pages too long to effect-- <a href= "#标记" > Return marker location </a> Note: You must add the # tag name at the beginning of the HREF value when using the anchor tag.

Framework

9. Frame Tags:<frameset> Note: The frame label can not be placed in <body>, generally for the readability of the code, will be between Cases: <frameset rows= "10%,*" > <frame src= "1.html" name= "Top"/> <frameset cols= "30%,*" > <frame src= "2.html" name= "left"/> <frame src= "3.html" name= "right"/> </frameset> </frameset> This code will require 3 HTML pages that already exist, namely: 1.html,2,html,3.html Effect: Note: When the frame size does not want to be dragged by the mouse to change, you can add the Noresize attribute in the frame tag, this property has no attribute value, called the tag attribute, plus is fixed. In the XHTML specification, all attributes must have attribute values, so the attribute value of the tag attribute is itself, such as: Noresize= "Noresize" 10. Picture in picture label:<iframe> <iframe src= "1.html" > Unfortunately, Pip you don't see, because your browser does not support IFRAME tags. </iframe> Frame labels are now not very common, and layouts are div+css+table. Frames are seldom used.

? Table    single?

11. Form Tags: <form> Form labels are the most commonly used labels for interacting with the server side. <input>: Enter Tags: receive user input information. The Type property of the Specifies the types of input labels. The l  text box. The text information you enter is displayed directly in the box. The l  Password box password. The text you enter is displayed in the form of an origin or an asterisk. l  Radio box Radio such as: Gender selection. The l  check box is a checkbox such as: Interest selection. The l  hidden fields hidden not appear on the page, but are submitted with other content at the time of submission. The l  submit button is used to submit the contents of the form. l  reset button Reset sets the contents of the form to the initial value. The l  button can customize the event for it. The l  file uploads files for post-extension content and automatically generates a text box and a browse button. l  image It can replace the submit button. <select>: Select label to provide user selection. Such as: The Provinces and cities where the user resides. The Size property displays the number of items. <option>: Subkey Label Property selected has no attribute value, plus a subkey on which a subkey becomes the default option. <textarea>: Multi-line text box. such as: Personal information description. <label>: Used to define shortcut keys for each element. For property: Specifies the form element that the shortcut key acts on. Must be the same as the ID value of the form element you want to work with. AccessKey Property: Specifies a shortcut key that needs to be combined with the ALT key. Example: <label for= "user" accesskey= "u" > User name (U) </label> <input type= "text" id= "user"/

Head label

The head labels are placed between the <title>.: Specifies what the browser's title bar displays. <base>: HREF attribute: Specifies the directory for all hyperlinks in the Web page. Can be either a local directory or a network directory. Note the list must be used/represented at the end. A hyperlink file that is used only for relative paths. Target property: Specifies how hyperlinks are opened. For example, _blank indicates that all hyperlinks are opened with a new window. <meta>: Name property: A description of the Web page. When keywords is taken, the contents of the content attribute are searched as search engine keywords. Http-equiv property: Simulates the response message header of the HTTP protocol. Cases: <meta http-equiv= "Refresh" content= "3;url=http://www.sina.com.cn"/> Indicates that 3 seconds after opening this page automatically goes to the Sina page. <link>: REL attribute: Describes the relationship of the target document to the current document. Type property: Document type. Media: Specifies the device on which the target document works. Cases: <link rel= "stylesheet" type= "Text/css" media= "Screen,print" href= "A.css"/>

Other

<marquee> let the content get moving. Direction property: Left-right-up Behavior properties: Scroll Alternate slide <pre>.: You can display text content on the page as it appears in the code area.

XHTML XML

XHTML is an extensible Hypertext Markup Language (extensible Hypertext Markup Language). L XHTML is the world of organizations in the 2000 to enhance the introduction of HTML, originally wanted to replace HTML, but found that the Internet on the HTML to write too many pages, attempted! It can be understood that it is an upgraded version of HTML (HTML4.01). The code structure of XHTML is more rigorous and is an application based on XML. XML is Extensible Markup Language (extensible Markup Language) L XML is a description of the data information. HTML is a description of the data display. The XML code is more restrictive, such as: The label does not end up being treated as an error. The XML specification can be interpreted by more applications and becomes a common data exchange language. L each server, the framework takes XML as a configuration file.

Using HTML tags--text, lists, tables, hyperlinks