HTML/CSS from scratch-html basics (1), css-html

Source: Internet
Author: User
Tags html header custom name

HTML/CSS from scratch-html basics (1), css-html
I. web standard 1.1 Structure

(1) extended Hypertext Markup language (xhtml)
(2) W3C (world wide web consortium)

A. the structure (xhtml, xml), presentation (css), and standards are developed.

1.2 Performance

(1) css (cascading style Sheet) stacked style sheets

1.3 actions

(1) ECMA (Europan Computer Manufactures Association) European Computer field Commerce Federation
A. Developed the Document Object Model (DOM) Text Object Model.
B. ECMAscript standards

Ii. Basic HTML Structure

<! Doctype html>

<Meta charest = "UTF-8"> <! -- Encoding format -->
<Title> </title>
<H1> .
<H6> <P> </p> <! -- Paragraph -->

III. Basic syntax 3.1 General Markup

<Tag attribute 1 = "attribute value 1" attribute 2 = "attribute value 2"> </Tag>
As follows:
<Strong> </strong> <B> </B> <! -- Bold -->
<Em> </em> <I> </I> <! -- Tilt -->

3.2 empty tag

<Tag attribute = "property value"/>
As follows:
<Hr/> <! -- Horizontal line -->
<Br/> <! -- Line feed -->
<! -- Insert an image -->

& Nbsp; space

Iv. Common tags)

4.1 List

A. ordered list
<Ol> ordered
<Li> </li>
<Li> </li>
<Li> </li>

B. unordered list
<Ul> unordered
<Li> </li>
<Li> </li>
<Li> </li>

C. Custom list
<Dl> definition list
<Dt> interpreted </dt>
<Dd> description </dd> definition description

Note: The dd can be repeated, but only one dt is allowed;
In the ordered list, the parameter tyle = "A", start = "3", // the first sequence starts from C.

4.2 image tags

4.3 hyperlink

<A href = "path address" target = "_ blank"> </a>

The path is divided into: absolute path (https //, relative path such as (images/inder.html ).
The default target attribute value is _ self; _ blank indicates that a new window is opened.

4.4 tags

<Div> </div>
Note: a. Automatic line feed between blocks
B. If the div block is limited to width and height and the content is Chinese, the new line is automatically wrapped. If it is English, it will overflow.
<Span> </span>
Note: line breaks are not provided between blocks a and span, and the width and height cannot be limited. The length varies with the length of the text.

4.5 table tags

1. Syntax: <table width = "" height = "" border = "1 (table box pixel)" bordercolor = "table box color" cellspacing = "0 (cell spacing) "cellpadding =" the content is pixel away from the Left Border ">
2. description; when the cellpadding attribute is used in the table to set the width and height, if the given width exceeds the configured width and height, the table will be opened.
<Th> <! -- Th header becomes thick -->
<Td> <! -- Td cell, tr row -->

3. Cell merging attributes
Colspan merge Columns
Rowspan merge rows
Syntax: rowspan = "3" // merge three rows

4. Form

A. Form box
Syntax: <form name = "form name" method = "post/get" action = ""> </form>

B. Text Box
<Input type = "text" value = "Default value"/>

C. Password box
<Input type = "password" placeholder = "prompt message"/>

D. Single region
<Input type = "radio" name = "custom name (consistent, required)"/>
As follows:
<Input type = "radio" name = "sex" value = "male"/> male
<Input type = "radio" name = "sex" value = "female"/> female

E. Multi-choice box
<P> mate selection criteria </p>
<Input type = "checkbox" name = "boy" value = "185"/> 185
<Input type = "checkbox" name = "boy" value = ""/> black
<Input type = "checkbox" name = "boy" value = "male"/> male
<Input type = "chechbox" name = "boy" value = "Northeast"/> Northeast China

Disabled = "disabled" (disabled or disabled)
Checked = "checked" (selected by default)
F. Reset
(1) <input type = "reset" value = "default"/> (reset, clear the data filled in above)
G. Button
(1) <input type = "button" value = "Only jump, not submit"/>
(2) <input type = "submit" value = "both jump and submit"/>

Note: When a button is used as a tag, both the <button> button </button> jump and submit

H. drop-down list
(1) <select name = "">
<Option> </option>
<Option> </option>

I. text fields
<Textarea cols = "width" rows = "number of rows" name = "">

(1) Place the preceding text box in form;

(2) What is the difference between the post/get attribute value of the method attribute in form?
A. get is used to obtain data from the server, and post is used to transmit data to the server;
B. get is to add the parameter value to the URL specified by the Action attribute of the submitted form. The value corresponds to each field in the form one by one. You can see it in the URL,
Post uses HTTP. The post Mechanism places the fields in the form and their content in the html header and sends them to the URL address of the ACTION attribute. You cannot see this process.
C. For the get method, the server-side ReqestQueryString obtains the value of the variable. For the post method, the server uses Request. Form to obtain the submitted data.
D. The size of get data transmission is not greater than 2 kb, and the size of post data is large, which is generally unrestricted.
F. Low get security, high post security, but high transmission efficiency

(3) usage of value in input
A. type = "button"/"reset"/"submit"; indicates the text on the button.
B. type = "text"/"password"; indicates the initial value.
C. type = "check"/"radio" definition and input values

(4) form nesting
<Td> <input type = "text" placeholder = "Enter the user name"> </td>
<Td> <input type = "password" placeholder = "enter the password"> </td>
<Td> <input type = "button" value = "forgot password? "> </Td>
<Td> <button> log on </button> </td>

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.