Home > Article > Web Front-end > HTML/CSS from scratch - HTML basics (1)

HTML/CSS from scratch - HTML basics (1)

高洛峰Original: 2016-10-09 15:29:01980browse

1. Web standards

1.1 structure

(1)xhtml (Extensible Hypertext Markup language) Extensible Hypertext Markup Language
(2)W3C (world wide web consortium) World Wide Web Consortium

a, formulated the structure ( xhtml, xml), performance (css), standards.

1.2 Performance

(1) css (cascading style sheets) cascading style sheets

1.3 Behavior

(1) ECMA (Europan Computer Manufactures Association) European Computer Manufacturers Association
a, formulated the behavior DOM (Document Object Model) text object model
b, ECMAscript standard

2. HTML basic structure

<!doctype html>
<html>
  <head>
  <meta charest="utf-8">     <!--编码格式-->
  <title></title>
  </head>
  <body>
  <h1></h1>                   <!--标题-->
      .
      .
      .
  <h6></h6>
  <p></p>                      <!--段落-->
  </body>
</html>

3. Basic syntax

3.1 General tags

e478e7e8778e3b489e9dc698798b06b0ee15d5864733761b2441a93ca4c07fdb
is as follows:
8e99a69fbe029cd4e2b854e244eab143128dba7a3a77be0113eb0bea6ea0a5d0 a4b561c25d9afb9ac8dc4d70affff4190d36329ec37a2cc24d42c7229b69747a d1c6776b927dc33c5d9114750b586338 5a8028ccc7a7e27417bff9f05adf593272ac96585ae54b6ae11f849d2649d9e6 /> d289c8d849cedaace1bf7530ae7d4eb5

4.3 Hyperlink

8b0ed374c197301a1848353a1e02f2b25db79b134e9f6b82c0b36e0489ee08ed

The path is divided into: absolute path (https//www.baidu.com), relative path such as (images/inder.html).
target The default attribute value is _Self; _blank to open the new window

4.4 label

Instructions: A. Automatically exchange between blocks
B. If P block is limited to wide and high, the content is in Chinese, automatic change; if it is English does not wrap lines and will overflow.

Note: a. There is no line break between span blocks. The width and height cannot be limited and change with the length of the text.

4.5 Table tag

1. Syntax:

f76ba746663a34cc0ee08e288c4d1ff4

2. Description: After the width and height of the table are given, when using the attribute cellpadding, if the given width exceeds the set width and height, the table will be stretched.

a34de1251f0d9fe1e645927f19a896e8
tr>
t;
fd273fcf5bcad3dfdad3c41bd81ad3e5

3. Cell merge attributes

colspan Merge columns
rowspan Merge rows
Syntax: rowspan="3" //Merge three rows

4. Form

a, form box

Syntax: e834e87ef0ec976fb673c9094731ea56f5a47148e367a6035fd7a2faa965022e
Description:

b, text box

feb8ca73253e04c4493c4d4944887306

c, password box
58f499c6232da2617326193fc9bdf074

d, radio button
3d38cf5e7903745badbc954c858078c1
as follows:
2c8e3ae439eb868f16f3ae864e105088Male
0e86ffefb8cff9cd54d9508acd0d2c26Female

e, multiple check box
e388a4556c0f65e1904146cc1a846beeMate selection criteria94b3e26ee717c64999d7867364b1b4a3
1eb8d0e399819e2229d02922ade1aa69185
3cd3aad435bdc3266a10d02d95c5373a黑
be42a5ccd2ddaa2538b2894ee08b4c43male
7bed5c722efec1c8e9f8e23996abb5a2Northeast

disabled="disabled"(disabled, disabled)
checked="checked"(default selected)
f, reset
(1) 7dde62f5fad20232dee740f046a5651a (Reset, clear the data filled in above)
g, button
(1)5fd8cb57ffd22e0df7649c2ea8725c24
(2)a7b4f6776995ef2c9170d948d726fd8d

Note: When the button is used as a labelbb9345e55eb71822850ff156dfde57c8Buttonab81495d3c467314bd292ce53ea92325
5a07473c87748fb1bf73f23d45547ab84afa15d3069109ac30911f04c56f3338
5a07473c87748fb1bf73f23d45547ab84afa15d3069109ac30911f04c56f3338
18bb6ffaf0152bbe49cd8a3620346341

i, text field
9ee97f5f976d77e0cd4e16225b648dec
40587128eee8df8f03d0b607fe983014

Note:
(1) The above text box is placed in the form;

(2) What is the difference between post/get attribute value of attribute method in form?
a. Get is to obtain data from the server, and post is to transmit data to the server;
b. Get is to add the parameter value to the URL pointed to by the attribute of the Action that submits the form. The value corresponds to each field in the form. , can be seen in the URL,
Post is through HTTP, the post mechanism places each field in the form and its content in the HTML HEADER and transmits it to the URL address of the ACTION attribute. The user 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 data transmission volume of get is small and not more than 2kb. The transmission volume of post is large and generally unrestricted.
f. The security of get is low, but the security of post is high, but the transmission efficiency is high

(3) How to use value in input
a. type="button"/"reset"/"submit"; represents the text on the button
b. type="text"/"password"; represents the initial value
c. type="check"/"radio" Definition and input related values

(4) Form nesting
f5d188ed2c074f8b944552db028f98a1
ff9c23ada1bcecdd1a0fb5d5a0f18437
a34de1251f0d9fe1e645927f19a896e8
b90dd5946f0946207856a8a37f441edf
b6c5a531a458a2e790c1fd6421739d1c20d0c8135ab668718b6cda03266d1bdbb90dd5946f0946207856a8a37f441edf
fd273fcf5bcad3dfdad3c41bd81ad3e5
a34de1251f0d9fe1e645927f19a896e8
b6c5a531a458a2e790c1fd6421739d1cffac92d48639d9258ca3e4d7cccb46ecb90dd5946f0946207856a8a37f441edf
b6c5a531a458a2e790c1fd6421739d1cbb9345e55eb71822850ff156dfde57c8Login65281c5ac262bf6d81768915a4a77ac0b90dd5946f0946207856a8a37f441edf
fd273fcf5bcad3dfdad3c41bd81ad3e5
e083986a812e016ef20466f844ca7465
f16b1740fad44fb09bfe928bcc527e08

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：[HTML element] How to embed imagesNext article：[HTML element] How to embed images

See more

HTML/CSS from scratch - HTML basics (1)

Related articles