Home > Developer > Web Develop
The main knowledge points of this chapter:
1. What is the most basic HTML file format?
2, commonly used tags: font, list (UL, OL, LI), img
3. Table Label: Table, TR, TD;
4. Hyperlinks, hyperlinks that are open in new windows, hyperlink anchor points.
5. Frame: Frameset
6. Form: Input (text, radio, checkbox, hidden field, submit); Select drop-down list; Textarea;label;
7. The difference between div and span.
------------------------------------------------------------------------------------------------
Understand what HTML knows about HTML history mastering HTML programming specifications Mastering HTML Common tags HTML Basic IntroductionHTML ( HYper TExt MArkup LAnguage)- Hypertext Markup Language-Interpreted by the browser execution-written hypertext document called Web xhtml- HTML upgrade to XML transition product-Fully compatible with html4.01-and with XML syntax HTML Tag SpecificationHTML is a language defined by tags, and the code is labelComposition HTML code Case insensitive。 The HTML code starts with <HTML> </HTML> ends with the head part <HEAD></HEAD> and the body part <BODY></BODY> two parts. The first part is to add some auxiliary or attribute information to the HTML page, the contents of which will be loaded first. The body part is where the page data is actually stored. Most tags are start and end tags, where individual tags have only a single function, or no content to be decorated, and can end with "/" within the start tag. Double tag label: HTML Development ToolsYou can use the Professional HTML editor to edit html: Adobe dreamweaver Microsoft Expression web coffeecup HTML editor But for starters, we recommend using a text editor to learn HTML, Like editplus,notepad++------------------------------------------------------------------------------------------ ------------ HTML Common Tags--fonts Font Labels <font>Example: <font color= "Red" >html font label </font>, Common properties size color, and other properties, such as: Face Title label<H1></H1>...<H6></H6> Special CharactersIf 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.| < | < | " | " | | Space |
| > | > | ® | ® | ™ | ™ |
| & | & | © | © |
-------------------------------------------------------------------------------------------
List LabelUnordered list <ul> <!--symbol labels (0)--<li> games </li> <li> Department </li></ul> NOTE: UL The type attribute has three values [C Ircle|disc|square], used to specify a bulleted list, but not in favor of it. Sequential Tables <ol> <!--digital labels (a a 1 I i)-<li> games </li> <li> Department </li></ol> Note: The type attribute in OL is also Do not approve of use. If you want to make a better list, such as: the black dots are represented by a picture, use CSS. Definition list ( DEfinition LIST) <dl> <dt> Games </dt><dd> Cross firewire </dd><dd> League of Legends </dd> <dt> Division </dt> <dd> Research Department </dd><dd> Sales </dd></dl>------------------------------------------------- ---------------------------------------------- Image Label Image Labels Example: Table Labels Table Labels <table>Used to format the data. Example: <table border width cellpadding cellspacing> <caption> title </caption> <thead> <th> name < ;/th> <!--to the first row or column of the table--<th> Age </th> <!--formatting, which is centered in bold-</thead> <tbody& Gt <tr> <!--row Labels--<td> Zhang San </td><td>20</td> <!--cell Labels--</tr> & lt;tr><td> John Doe </td><td>25</td></tr> </tbody> </table> <table> Common Properties Caption: Titleborder: Frame thickness 0 for no width: Width receive integer value、 percentageCellPadding: The distance between the cell contents and the border cellspacing: the distance between the cell and the adjacent cell <td> Common PropertiesColspan: Merge Peer cell rowspan: Merge same column cell <th> Default center, bold each table can have a header, a footer, and one or more table bodies (that is, the body) thead tbody tfoottbody can control the table branch download, To improve the download speed (the opening of the Web page is the first form of the contents of all downloaded, before the display, branch download can show some of the content, which will reduce the user wait time). ---------------------------------------------------------------------------------------------------------- Hyperlink Label Hyperlink Tags <a>A hyperlink (Hyperlink) can be seen as a "hotspot" that jumps from a location defined by the current Web page to another location, including a location on the current page, the Internet, a local hard disk, or other files on the LAN, or even a multimedia file such as a sound or picture. Browsing Web pages is one of the most common applications of hyperlinks, which can also be accessed through hyperlinks, such as file transfer, data query, e-mail, remote access, and so on, which is convenient to implement through hyperlinks. Usage One: Hyperlink <a href= "" ><a href= "http://www.163.com" target= "_blank" > NetEase </a>href: The path to open the resource, which can be a URL, It can also be a local file. Target: Specifies the window or frame in which to open. There are four values: _blank: Open the link in a new blank window _parent: Open the _self in the parent window: Open the link in its own page (default) _top: Open the link at the top (front) of the entire browser usage two: anchor tag <a name= "" > links to specific locations in the same document are called Anchor anchors (anchor link). 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. Example: <a name= "marker" > tag location </a><p>.......<!--Many empty rows to make a page too long--><a href= "#标记" > Return marker location </a> Note: When using the anchor tag, be sure to add the # tag name to the beginning of the HREF value use three: Define the marker point back to the top---------------------------------------------------------------------- --------------- HTML Common Tags--frameworkThe so-called framework is divided into a number of frame windows, the box window can be integrated with a lot of URLs (link address), convenient for users to browse and view. In particular, the early corporate portals are basically such frame frames.<frame> Common Properties Src= "top.html": Set the name of the page file to be displayed in this box, and each box window must correspond to a webpage file. Name= "Top": Sets the name of the frame window so that the frame can be specified as a link, but it must be named. scrolling= "Auto": Set whether to display the reel, yes means to display the reel, no means not to display anyway, auto is displayed as appropriate. Noresize: The settings do not allow the user to change the size of the box, nor set this parameter, the user can easily pull the frame, change its size.
<NOFRAMES> when using the browser is too old, do not support the framework of this feature, he will see a blank. To avoid this, use the <NOFRAMES> tag, and when the user's browser does not see the frame, he will see a hint between <NOFRAMES> and </NOFRAMES> instead of a blank. <frameset rows= "80,*" > <noframes> <body> Sorry, the browser you are using does not support frame functions, please switch to a new browser. </body> </noframes> <frame name= "Top" src= "a.html" > <frame name= "Bottom" src= "b.html" > </ Frameset>
<IFRAME> its role is to insert a box window in the middle of a page to display another linked resource. It is a containment tag, but the surrounding words are displayed only if the browser does not support the IFRAME tag. <body> <iframe src= "a.html" > If you see the text, your browser does not support the IFRAME tag. </iframe> </body>
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
Forms <form>
Action: The address of the form submission request
Method: Form Request parameter submission method, default get
Get
Post
Form labels are the most commonly used labels and are primarily used to collect and submit user input information and interact with the server side.
<INPUT> Tags: Accept user input information <input type= "text" value= "" "/> Type label specifies the types of input tags, total 10 values:
text box textbox text,
Password box password,
Radio Box Radio: Radio button must specify the same Name property (and provide value)
check box checkbox: The Check button must specify the same Name property (and provide value values)
Hide field Hidden: This property value allows the input label to be hidden within the page, but its name value is also submitted with the form.
Submit Push button Submit, reset button Reset:
button, File Upload files:
Image.
<SELECT> Tags:
Define a selection list
<select name= "City" >
<option value= "1" > Beijing </option>
<option value= "2" > Zhengzhou </option>
</select>
Note: <option>: Defines the options in the drop-down list, property selected No attribute value is added to one of the subkeys, and the subkey becomes the default selected item.
<TEXTAREA> Tags:
Multi-line text box
<textarea rows= "3" rols= "> </textarea>
The Cols and rows properties specify the size of the textarea, but a better approach is to use the height and width properties of the CSS.
<label> Tags:
<label for= "Male" >Male</label> <input type= "Radio" name= "Sex" id= "male"/>
<label for= "female" >Female</label> <input type= "Radio" name= "Sex" id= "female"/>
The label element does not present any special effects to the user.
However, it improves usability for the user of the mouse.
This control is triggered if you tap text inside a LABEL element. The For property value points to the ID value of the bound form element.
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
Block element
Most HTML elements are defined as block-level elements or inline elements.
-Block-level element block-level elements usually start (and end) with a new line when the browser is displayed. Wrap Line
Example:
-inline element inline elements do not usually start with new lines when they are displayed.
Example: <b>, <td>, <a>, ,<input>
<DIV> <SPAN>
Div
An HTML DIV is a block-level element that is a container that you can use to combine other HTML elements . Full line by default
The DIV element does not have a specific meaning. Used with CSS to quickly set style properties on large content.
Another common use of the <div> element is the document layout. It replaces the old-fashioned way of using tables to define layouts.
Using the <table> element for document layout is not the correct use of the table.
The function of the <table> element is to display tabular data.
SPAN
HTML <span> elements are inline elements that can be used as containers for text . Default matching text length
The <span> element also has no specific meaning, and can be used to set style properties for some text when used with CSS.
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
HTML syntax--header tag
title: Specify what the browser title bar displays
Base: label specifies default address or default destination for all links on the page
HREF attribute: The base URL for all relative links in the specified page (not commonly used)
Target property: Specifies how hyperlinks are opened
<base target= "_blank" href= "http://www.cnblogs.com/"/>
Meta: can provide meta-information about the page
Http-equiv property: Associating the Content property to the HTTP header
<meta http-equiv= "Content-type" content= "Text/html;charset=utf-8"/>
<meta http-equiv= "Refresh" content= "3;url=http://www.baidu.com"/>
Content properties: Define meta information related to the HTTP-EQUIV or Name property
Name property: Associate the Content property to a name
Link
Rel attribute: Relationship of the target document to the current document
Type attribute: Document type
HREF attribute: Document address
<link type= "Text/css" rel= "stylesheet" href= "Site.css" >
such as Peng Network: http://www.rupeng.com
such as Peng Network static web Development The first chapter: HTML
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
