Home > Developer > Web Develop
HTML tags can have properties . The properties provide more information about the HTML element. A property is always in the form of a name/value pair, such as:name= "value".
Attributes are always specified in the start tag of an HTML element.
attribute Example 1:
<H1 align= "Center" > has additional information about alignment.
attribute Example 2:
<body> defines the body of the HTML document.
<body bgcolor= "Yellow" > has additional information about the background color.
attribute Example 3:
<table> define HTML tables.
<table border= "1" > has additional information about the table border.
The Complete HTML reference manual provides a complete list of the legitimate attributes that each HTML element can use:
HTML Reference Manual: Http://www.w3school.com.cn/tags/index.asp
2. TitleThe title (Heading) is defined by tags such as
<HR/> Tags Create horizontal lines in the HTML page. Can be used to split elements
3. ParagraphThe paragraph is defined by the <p> tag.
① using empty paragraph marks <p></p> to insert a blank line is a bad habit. Replace it with a <br/> tag.
② if you want to wrap (a new line) without creating a new paragraph, use the <BR/> Label
4. StyleThe Style property is used to change the styles of HTML elements.
The function of the style property is to provide a common way to change the style of all HTML elements. HTML styles enable you to add styles directly to HTML elements by using the Style property, or indirectly in a separate style sheet (CSS file).
The Background-color property defines the background color for the element, such as: <body style= "
The font-family, color, and Font-size properties define the font families, colors, and font sizes of the text in the element, respectively.
The Text-align property specifies the horizontal alignment of the text in the element:
5. References①html <q> element defines a short reference . Browsers typically surround quotes for <q> elements.
The goal of <P>WWF is to build a world in which man and nature coexist in harmony with:<q>. </q></p>
The ② is used for long-referenced HTML <blockquote>,html <blockquote> elements to define the referenced section. The browser typically indents the <blockquote> elements.
<p> The following are referenced from WWF's website: </p><blockquote cite= "http://www.worldwildlife.org/who/index.html" > For 50 years, WWF has been committed to protecting the future of nature. WWF, the world's leading environmental organization, works in 100 countries and is supported by 1.2 million members of the United States and nearly 5 million members worldwide. </blockquote>
③ HTML <abbr> HTML <abbr> element definition abbreviations or acronyms for acronyms. Marking abbreviations can provide useful information for browsers, translation systems, and search engines.
6.CSS Style Introduction methodThere are three ways to insert the style sheet:
① external: When the style needs to be applied to many pages, the external style sheet will be the ideal choice. With an external style sheet, you can change the appearance of the entire site by changing a file.
② internal: You can use an internal style sheet when a particular style is required for a single file. You can define an internal style sheet in the head section through the <style> tag.
③ Inline: You can use inline styles when special styles need to be applied to individual elements. The way to use inline styles is to use style attributes in related tags. Style properties can contain any CSS properties. The following example shows how to change the color and left margin of a paragraph.
7. Links<p style= "color:red; margin-left:20px ">this is a paragraph</p>HTML uses hyperlinks to connect to another document on the network. Links can be found in almost all web pages. Click the link to jump from one page to another.
We create links in HTML by using the <a> tag.
There are two ways to use <a> tags:
- Create a link to another document by using the HREF attribute-
- Create a bookmark within a document by using the Name property
① using the Target property, you can define where the linked document is displayed. If you set the target property of the link to "_blank", the link opens in a new window.
<a href= "http://www.w3school.com.cn/" target= "_blank" >visit w3school!</a>② link to a different location on the same page: Add the Name property to the title of the location, and the link, and note that you add "#" to the value of name before adding the link, such as:
8. ImageImage label () and source attribute (SRC). In HTML, the image is defined by the tag. is an empty label, meaning that it contains only attributes and does not have a closed label. To display an image on a page, you need to use the source attribute (SRC). SRC refers to "source". The value of the Source property is the URL address of the image.
Grammar:
The browser displays the image in the document where the image label appears. If you place an image label between two paragraphs, the browser first displays the first paragraph, then displays the picture, and the second paragraph is displayed.
① Replace Text property (ALT)
The ALT attribute is used to define a string of prepared, replaceable text for an image. The value of the replacement Text property is user-defined.
When the browser fails to load the image, the replacement Text property tells the reader what information they have lost. At this point, the browser will display this alternative text instead of the image. It is a good practice to add alternate text attributes to the images on the page, which helps to better display the information and is useful for those who use a plain text browser.
② Setting the picture background
<body background= "/i/eg_background.jpg" >The ③align property can set the location of the picture, such as:
<p> a paragraph with an image. The Align property of the image is set to "left". The image floats to the left of the text. </p>The ④height,width property sets the picture size, such as:
⑤ Image Links:
<a href= "/example/html/lastpage.html" ></a>⑥<area> make different areas of the picture link different URLs:
Map defines image maps to quantify different areas
9. Forms<map name= "Planetmap" id= " Planetmap "><areashape=" Circle "coords=" 180,139,14 "href ="/example/html/venus.html "target =" _blank "alt=" Venus "/><areashape=" Circle "coords=" 129,161,10 "href ="/example/html/mercur.html "target =" _blank "alt=" Mercury "/><areashape=" rect "coords=" 0,0,110,260 "href ="/example/html/sun.html "target =" _blank "alt=" Sun "/ ></map>The table is defined by the <table> tag. Each table has several rows (defined by the <tr> tag) and each row is split into several cells (defined by the <td> tag). The letter TD refers to the table data, which is the contents of the data cell. Data cells can contain text, pictures, lists, paragraphs, forms, horizontal lines, tables, and so on.
Here is a table of two rows and two columns:
<table><tr><td>row 1, cell 1</td><td>row 1, cell 2</td></tr><tr>< Td>row 2, cell 1</td><td>row 2, cell 2</td></tr></table>① If you do not define a border property, the table will not display a border. Use the attribute border to define the border, such as:
<table border= "1" >The header of the ② table is defined using the <th> tag. Most browsers display the header as a text centered in bold.
③ empty cell problem: In some browsers, table cells with no content are not displayed well. If a cell is empty (no content), the browser may not be able to display the border of the cell. To avoid this situation, add a space placeholder to the empty cell, and you can display the border, such as:
10. List<td> </td>HTML supports unordered, ordered, and defined lists
① unordered list:
An unordered list is a list of items that are marked with a bold dot (typically a small black circle).
The unordered list starts with the <ul> tag. Each list item starts at <li>.
<ul><li>Coffee</li><li>Milk</li></ul>Within a list item, you can use paragraphs, line breaks, pictures, links, and other lists, and so on.
② has a sequence table:
Similarly, a sequence table is a list of items that are marked with numbers.
The sequence list starts with the <ol> tag. Each list item starts with the <li> label.
<ol><li>Coffee</li><li>Milk</li></ol>Within a list item, you can use paragraphs, line breaks, pictures, links, and other lists, and so on.
③ definition list:
A custom list is not just a column of items, but a combination of items and their annotations.
The custom list starts with the <dl> tag. Each custom list item starts with <dt>. the definition of each custom list item starts with <dd>.
<dl><dt>coffee</dt><dd>black Hot drink</dd><dt>milk</dt><dd> White Cold drink</dd></dl>④ can use the type to change the tag that precedes each list item:
11. Block<ul type= "disc" > solid dots <ul type= "circle" > Hollow dot <ol type= "A" > A,b,c...<ol type= "i" > Lowercase RomeMost HTML elements are defined as block-level elements or inline elements. Block-level elements usually start (and end) with new lines when displayed in the browser, and inline elements typically do not start with new lines when they are displayed.
①<div>
HTML <div> elements are block-level elements that are containers that you can use to combine other HTML elements.
The <div> element has no specific meaning. In addition, because it belongs to a block-level element, the browser displays the folded line before and after it.
If used with CSS, the,<div> element can be used to set style properties on large chunks of 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.
The <span> element also has no specific meaning.
When used with CSS, the,<span> element can be used to set style properties for some text.
12. ClassClassifying HTML (Setting the Class) allows us to define CSS styles for the class of the element.
Set the same style for the same class, or set different styles for different classes.
① categorical block-level elements
HTML <div> elements are block-level elements . It can be used as a container for other HTML elements.
Set the class of the <div> element so that we can set the same class for the same <div> element:
Instance:
<! DOCTYPE html>② the inline elements, HTML <span> elements are inline elements that can be used as a container for text. Sets the class of the <span> element to be able to set the same style for the same <span> elements.
Instance:
<! DOCTYPE html>Start from zero 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
