HTML/CSS from scratch - HTML basics (1)-HTML Tutorial-php.cn

Home

Web Front-end

HTML Tutorial

HTML/CSS from scratch - HTML basics (1)

高洛峰

Oct 09, 2016 pm 03:29 PM

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

is as follows:
/> & lt; br/& gt; & lt;!-Change-& gt;

& lt; img src = "path"/& gt; & lt;! Space

4. Common tags (labels)

4.1 List

a, ordered list

 <ol>  ordered
  <li></li>
  <li></li>
  <li></li>  
</ol>

b, unordered list

<ul>  unordered
  <li></li>
  <li></li>
  <li></li>  
</ul>

c, custom list

<dl>  definition list
  <dt>被解释</dt>  
  <dd>解释</dd>  definition description
</dl>

Note: dd can be repeated, but dt Only one is allowed;

Parameters style="A", start="3" in the ordered list, //The first sequence starts from C.

4.2 Picture Tags

Image (when insertion error) replacement text

4.3 Hyperlink

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:

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.

tr>
t;

3. Cell merge attributes

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

4. Form

a, form box

Syntax:
Description:

b, text box

c, password box

d, radio button

as follows:
Male
Female

e, multiple check box

Mate selection criteria

185
黑
male
Northeast

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

Note: When the button is used as a label> ;Both jump and submit

h, drop-down list
(1)

i, text field
<br>

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

form>

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

Why are HTML tags important for web development?May 02, 2025 am 12:03 AM

HTMLtagsareessentialforwebdevelopmentastheystructureandenhancewebpages.1)Theydefinelayout,semantics,andinteractivity.2)SemantictagsimproveaccessibilityandSEO.3)Properuseoftagscanoptimizeperformanceandensurecross-browsercompatibility.

Explain the importance of using consistent coding style for HTML tags and attributes.May 01, 2025 am 12:01 AM

A consistent HTML encoding style is important because it improves the readability, maintainability and efficiency of the code. 1) Use lowercase tags and attributes, 2) Keep consistent indentation, 3) Select and stick to single or double quotes, 4) Avoid mixing different styles in projects, 5) Use automation tools such as Prettier or ESLint to ensure consistency in styles.

How to implement multi-project carousel in Bootstrap 4?Apr 30, 2025 pm 03:24 PM

Solution to implement multi-project carousel in Bootstrap4 Implementing multi-project carousel in Bootstrap4 is not an easy task. Although Bootstrap...

How does deepseek official website achieve the effect of penetrating mouse scroll event?Apr 30, 2025 pm 03:21 PM

How to achieve the effect of mouse scrolling event penetration? When we browse the web, we often encounter some special interaction designs. For example, on deepseek official website, �...

How to modify the playback control style of HTML videoApr 30, 2025 pm 03:18 PM

The default playback control style of HTML video cannot be modified directly through CSS. 1. Create custom controls using JavaScript. 2. Beautify these controls through CSS. 3. Consider compatibility, user experience and performance, using libraries such as Video.js or Plyr can simplify the process.

What problems will be caused by using native select on your phone?Apr 30, 2025 pm 03:15 PM

Potential problems with using native select on mobile phones When developing mobile applications, we often encounter the need for selecting boxes. Normally, developers...

What are the disadvantages of using native select on your phone?Apr 30, 2025 pm 03:12 PM

What are the disadvantages of using native select on your phone? When developing applications on mobile devices, it is very important to choose the right UI components. Many developers...

How to optimize collision handling of third-person roaming in a room using Three.js and Octree?Apr 30, 2025 pm 03:09 PM

Use Three.js and Octree to optimize collision handling of third-person roaming in the room. Use Octree in Three.js to implement third-person roaming in the room and add collisions...

See all articles