HTML Web page Design details summary and practical experience Summary

Source: Internet
Author: User
Tags button type

1) <link rel= "" type= "Text/css" href= "__.css" > is an empty element that contains only attributes. Used to define the relationship between a document and an external resource, often used to link style sheets. Where type refers to the type of document being linked, and href refers to the document being connected.

2) The difference between block-level elements and row-level elements:

Block-level elements wrap automatically, always start on new lines, and a block-level element occupies an entire row. You want to show the need to float (floa:left) or (display:inline) on the same line.

Row-level element multiple element amount and side-by, the default setting width is not working, you need to set Display:inline-block or block wrap to multi-line display.

3) commonly used block-level elements:

Title tags

Ordered labels <ol>, unordered tab <ul>, Forms <table>, Forms <form> and Sections <div>

4) Common line-level tags:

Text <input>, pictures , Hyperlinks <a>

Other related such as <spn>, <br/>

5) Absolute path (full path):

Visit the URL of a domain name such as: http://www.163.com/123.html

Access the file path on the local computer such as: d:/html/123.html

6) Relative path: refers to the path that passes from one file to another.

Attention:.. /indicates relative to the parent directory of the current directory .../represents the upper ancestor directory compared to the current directory

7) in HTML, the "type" property value represents the type of content displayed.

8) Meaning of common words:

SRC: The address information used to display open images

Href: The jump address information used to open the hyperlink

Target: Specifies where the target file is opened in the Web page, such as: In a new window, current, and so on.

9) HTML is only responsible for the content structure of the Web page, CSS (cascading style sheets) is responsible for the presentation (font size, color, background, display location, etc.) to facilitate site modification and maintenance

&nbsp; Indicates a space note there is a semicolon, and &quot represents a double quote

11) Table Common Properties:

CellSpacing: Sets the space between cells to set the 0 o'clock border is solid

CellPadding: Sets the gap between the cell edge and its contents 2017-05-17

Colspan: Cross-column

Rowspan: Cross-line

12) Form Common properties:

Value: Specifies the initial value of the form element for the displayed text. That is the first time you see a Web page open

14) of the information.

Checked: Indicates whether this property is selected.

Select: Used to define a selection list

Submit: Indicates the commit button

Reset: Indicates the reset button

) button: Normal button

document.write (""); In JavaScript represents "Output function", the content to be output.

You can only use document.write in HTML output, and you want to put it in <script> </script>.

<button type= "button" onclick= "alert (' welcome! ')" > Click here </button>

The alert () function represents a message popup dialog box in JavaScript to alert the user.

The onclick indicates that the event is triggered to facilitate subsequent action.

JavaScript: changing HTML content

<script>

function MyFunction ()

{

X=document.getelementbyid ("demo"); Find element

X.innerhtml= "Hello javascript!"; Change Content

}

</script>

23) in JavaScript, to ensure that the input value is "integer" in order to operate, must be in the prompt dialog box prompt parseint, that is, Number=parseint (prompt ()), such as the conversion in the binary. To ensure that the input values can perform other operations, you must add parsefloat, Number=parsefloat (Prompt ()) Before the prompt dialog box prompt. Like arithmetic.

24) in, the function of the document.write () method is used to output content on a Web page.

The sort () function in JavaScript is used for sorting, to achieve the correct ordering of numbers, the function must be defined, the implementation of string ordering does not need to be defined, can be called directly. If the string is a number, the overall sort is the first digit after the word. Also note that in the sort of string, the word is capitalized after the first letter, followed by lowercase. The entire sort renders "up". First define the function as follows:

A.push (value) adds value to the end of the array.

A.unshift (value) adds the value to the front of the array.

A.pop () deletes the last value of the array.

A.shift () deletes the first value of the array.

A.reverse () shifts the original array values in symmetry. As shown in the following:

A.concat (value) connects the value to the back of the original array.

A.join (value) separates each of the two strings in the array by value. For example, replace commas with dots.

A.slice (1,3) selects an element in the array, such as starting at the first position (including the first one) and ending at the third position (excluding the third one).

A.splice (2,3, "Dfsad") removes the element in the array and joins the element. such as starting from the second element (excluding the second element), a total of three elements deleted, and then deleted after the addition of the element Dfsad, and finally write out the elements not deleted later

31)

32)

33)

34)

65L

66L

37)

38)

39)

40)

Personal experience:

    1. When you make HTML appearance styles, you often use the F12 key to view basic information, so that you can write the relevant information directly. Combine external styles with inline styles to achieve unexpected results

HTML Web page Design details summary and practical experience Summary

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: info-contact@alibabacloud.com 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.