Home > Developer > Web Develop
HTML/CSS basics and htmlcss Basics
HTML: HyperText Markup Language (HyperText Markup Language). Unlike the programming Language, HyperText Markup Language only recommends the browser to display webpage content in any way or structure. It is the basic architecture of a webpage.
CSS: Cascading Style Sheet is a stacked Style sheet (Style sheet for short). It is a webpage page layout Style standard. It makes up for the shortcomings of HTML in Webpage formatting and plays a role in layout positioning.
By the way, JavaScript. The combination of HTML and CSS provides users with only static information and lacks interactivity. For such a requirement, JavaS came into being, implementing the page function of real-time dynamic interaction.
HTML
Html files use tag pairs or tags to mark the webpage structure and display webpage content. Most labels are displayed as tags, that is, starting with "<Tag Name>" and ending with "</Tag Name>.
The simplest html is as follows:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
First Action document type statementAn HTML document starts with a
The document header often contains the title (<title>) File Information (<meta>), such as the file keyword Type format, webpage expiration time, style sheet, etc.
Html documents are case-insensitive, but do not contain spaces. attributes in tags can be enclosed in double quotation marks or not.
Common body attributes
| Bgcolor | Set background color |
| Topmargin leftmargin rightmargin bottommargin | Set page margins |
| Text | Set body color |
Text and paragraph Effects
Edit the webpage text style <font face = "" size = "" color = ""> </font> mainly sets the font size and color of the text.
<B> bold text </B>
<I> italic text </I>
<U> underline text </u>
Text up/down Mark <sup> </sup> <sub> </sub>
Paragraph mark <p> </p>
Press ENTER <br>
Pre-format <pre> </pre>: pre-format text paragraphs on the webpage. During the input process, press the Enter key on the keyboard to generate a paragraph.
Text center display <center> </center>
<Blockquote> paragraph indent
Insert and set the horizontal line.
| Attribute | Description |
| Width | Set the horizontal line width, which can be pixels or percentages. |
| Size | Set the horizontal line height |
| Noshade | Set horizontal line without shadow |
| Color | Set the horizontal line color |
| Align | Set horizontal line center alignment |
Create and use list
| List type | Markup symbol |
| Definition list | Dl |
| Unordered list | Ul |
| Directory List | Dir |
| Menu list | Menu |
| Ordered list | Ol |
1. Insert a definition list <dl>
<Dl> <dt> name <dd> description </dl>Note: The dt mark defines the name part of the list item, and this mark is only used in the dl mark
2 insert unordered list <ul>
<Ul> <li> name </li> content </ul>3. Insert directory list <dir>
<Dir> <li> name </li> content </dir>4 menu list <menu> only a single li mark is required to display the menu list project value
<Menu> <li> name <menu>
<Ol Type = ""> <li> name </li> content </ol>The list symbols of 2-4 are all small dots in front of a line. You can customize the list symbols in the ordered list. The default value is 1, 2, 3 .....
Other values include a, A, I, etc. For the list symbols, they are a, B, c,... A, B, C,... roman numerals I, etc.
Hyperlink <a href = "URL"> link content </a>
Image ing: Click an image on the webpage to jump to the corresponding webpage.
Use the marker to insert the src file path of the image file
<Map> mark indicates inserting image ing. rshape indicates that the ing region has a rect rectangle. the cicle elliptical polygon and other coords indicate the coordinates of the sensing region.
</img><map name=" "><area shape=" " coords=" , , ," href="URL"></map>Production Table
Basic Structure
<Pre name = "code" class = "html"> <table> <caption> insert table title </caption> <tr> <td> </tr> </table><Tr> indicates inserting a row <td> indicates inserting a column.
Set the table header <th>. To use a row as the table file header, you only need to change the column mark <td> in this row to <th>. The header is centered and aligned in bold by default.
Set the partition structure table <thead> <tbody> <tfoot>
A table is divided into three parts and displayed on a webpage. Use <thead> </thead> <tbody> </tbody> <tfoot> </tfoot> to tag
<Thead> </thead> indicates defining a group of header rows.
<Tbody> </tbody> indicates defining the table body.
<Tfoot> </tfoot> indicates adding a label to the table.
Set table tag attributes
<Table> attributes
Set the width and height of the table.
Set border attribute border Width bordercolor border color of the table
Set the border style frame and rules to set the border display
Set table background bgcolor
<Tr> <td> attribute
Adjust the horizontal align of the row content <tr align = "left | center | right">
Adjust the row content hammer align <tr align = "top | middle | bottom | baseline"> to align the top of the content, center, and low-end alignment.
Set vertical merge of cells across rows <td rowspan = "2"> cells across two rows
Set cross-column cells to merge horizontally <td colspan = "2"> cells across two columns
Set cell spacing cellspacing and cell margin cellpadding
Form
Is an interactive operation method provided on a webpage.
Some attributes of form tag <form> </form> are as follows:
| Attribute | Description |
| Name | Set form name |
| Method | Set the form sending method post or get |
| Action | Set form handlers |
| Enctype | Set the form encoding method |
| Target | Set the display target of the form |
Common controls
| Type | Description |
| Text Box text | Type = "text" |
| Password box | Type = "password" |
| File domain | Type = "file" |
| Check box | Type = "checkbox" |
| Single region | Type = "radio" |
| Normal button | Type = "button" |
| Submit button | Type = "submit" |
| Reset button | Type = "reset" |
| Image domain (image button) | Type = "image" |
Insert the hidden field <input name = "" type = "hidden" value = "> invisible to the user, but the data is sent to the server as the form is
Insert drop-down menu and list items
<Form> <select name = "hobby" size = 4> <option value = "1"> music <option value = "2"> art <option value = "3"> sports </select> <select name = ""> <option value = "1"> singing <option value = "2"> painting <option value = "3"> long run </select> </form>
Practical application of forms
<Html> The actual situation is as follows:
Write css next time.
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
