Table of contents

1.1 Web standards:

First of all, why do we have web standards? The rendering engines of different browsers are different, resulting in different display effects for the same code we write in different browsers, and even typesetting problems. At this time, we make different browsers display the results according to the same standard, so that the display effect can be unified. This is the web standard.

Three components of web standards:

HTML (structure)

CSS (beautification)

JavaScript ( action )

HTML is the hyperlink language used to display the elements and content of the page.

CSS controls page styles such as the appearance (color, size) and position of page elements.

Javascript controls the behavior of web pages.

1.2 Introduction to HTML:

HTML is a hypertext markup language, which is mainly used to implement static pages. The text, pictures, videos, sounds, tables, links, etc. we see on the page are all described by HTML language, and the hypertext in hypertext is beyond 'Text', you can set styles, display pictures, and play videos. HTML is composed of tags, giving different attributes to different tags can achieve colorful effects on web pages.

1.3 HTML tags:

1.3 HTML basic structure tags:

A web page is similar to an article: each page of an article has a fixed structure, such as: beginning, body, signature, etc... There is also a fixed structure in the web page, such as: whole, head, title, and body. The fixed structure in the webpage is to be described by the characteristic HTML tags

code:

<!-- 文档声明：使用的是HTML5 -->
<!DOCTYPE html>
<html lang="en">
    <!-- 页面头部区域 -->
<head>
    <!-- 字符集编码格式设置--uft-8（万国码）防止页面中文乱码 -->
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<!-- 页面显示区域 -->
<body>
     
</body>
</html>

1.3.1 HTML common tags:

Tags are composed of < , > , / , English words or letters. And the English words or letters included in <> in the label are called the label name. Common labels are composed of two parts, which we call: double labels . The first part is called the start tag , the second part is called the end tag , and the content is wrapped between the two parts. A minority label consists of a part, which we call: a single label . Self-contained, unable to wrap content.

title tag:

h series label

h1: level 1 heading

h2: level 2 heading

h3: Level 3 heading

h4: Level 4 heading

h5: Level 5 heading

h6: Heading level 6

Features:

1. The text of the label is bold

2. The text of the label has become larger, and the text from h1 to h6 has gradually decreased

3. Each title occupies its own line

important point;

Generally, we only need one h1 tag for a page, because some search keywords are our h1 tags.

Paragraph tags:

Paragraph tags: p tag double tag 

Features:

1. There are gaps between paragraphs

2. Each paragraph is on its own line

Newline tab:

Newline label: br single label

Function: force line break

Horizontal line labels:

Horizontal line label: hr label single label

Function: divide the horizontal lines of different themes

Text formatting tags:

Text formatting tab: make the text have the formatting effects of bold, underline, italic, strikethrough text

-->



 Bold 

 Underline 

 倾斜 

<s> Strikethrough </s>

 



 Bold 

<ins> underline </ins>

 Tilt 

<del> Strikethrough </del>

image tag

Image tags: img single tag

Function: display a picture on a web page

Attributes:

1. src : tell the browser which picture to display

Attribute value: path (if the picture and the current page are in the same level directory, just write the name of the picture directly at this time), in other directories of the picture, use the relative path relative to the file at this time, not the absolute path

2 , alt : replace text

The text displayed when the image fails to load (for example: the path is wrongly written)

3. title : Prompt text

The text displayed when the mouse hovers over the image

4. width : the width of the picture

5. height : the height of the picture

important point:

1. If you only set the width or height of the picture, the other one will be automatically scaled proportionally

2. If both are set at the same time, the picture may be deformed if it is not set properly

3. The relative path is the process of finding the target file starting from the current file . The target file and the current file have different relative paths, so our writing methods are also different.

Same-level directory: directly write: the name of the target file!
Subdirectory: Write directly: folder name / target file name!
Upper-level directory: directly under: ../target file name!

Multimedia tab:

Audio label: audio

Attributes:

1. src: path

2. controls: Playback controls

3. autoplay: autoplay (some browsers do not support it)

4. loop: loop playback

Video label: video

Attributes:

1. src: path

2. controls: Playback controls

3. autoplay: autoplay (not supported by some browsers) —— "write muted in Google Chrome to complete static

autoplay

4. loop: loop playback

code:

<audio src="./music.mp3" controls autoplay loop></audio>

<video src="./video.mp4" controls autoplay muted loop></video>

Link tags:

Hyperlink: a tag double tag

Function: Jump to the webpage after clicking

Attributes:

1. href: tell the browser which page to jump to after clicking

Value: path

1. External link: absolute path on the Internet

2. Internal links: relative paths are recommended

2. target: the opening method of the target web page

Value:

1. _self: (default value) Jump in the current window, the original web page will be overwritten

2. _blank: jump in a new window, and keep the original page

In addition to the above tags, we also have layout tags for the layout of the entire web page:

div tag: only one display per line (exclusive line, block-level element)

span tag: one line can display multiple

list:

unordered list <ul>





ordered list <ol>

sheet:

Display and data neatly in the form of row + column cells in the web page ,







Other tags:

code:

<table>
 <tr>
<td>姓名</td> 
<td>成绩</td>
 <td>评语</td> 
</tr>

Notice:

Sometimes the table we create is very ugly and has two horizontal lines, you can use

border="1" style="border-collapse: collapse;"

modify

Merge tables:

Set for reserved cells: merge across rows ( rowspan ) or merge across columns ( colspan )

For the specific practice code of merging tables, you can see the production of personal resume

form:

The form effect of collecting user information is displayed on the webpage, such as: login page, registration page

Tag name: input

• The input tag can display different effects through different values of the type attribute

button button label:

The button that the user clicks is displayed on the page

input type attribute value:

button type attribute value:

Notice:

1. The field name of the database to be submitted in the form, so that the database data can be obtained.

<!-- 2、密码框：password -->
 密码：<input type="password" placeholder="请输入您的密码">
<!-- 3、单选框：radio -->
 性别：
<input type="radio" name="sex" checked>男 
<input type="radio" name="sex">女

2. We generally rarely use forms to submit data in this way because it is very unsafe and user data is easy to obtain.

select：

A drop-down menu form control that provides multiple options in a web page

Label composition:

select tag: the overall drop-down menu

option tag: each item of the drop-down menu

Common properties:

selected : The default selection of the drop-down menu

textarea text field label

Provides form controls that can enter multiple lines of text

cols : Specifies the visible width of the text field

rows : Specifies the number of visible rows in the text field

Form exercise - form personal information http://t.csdn.cn/04TsU

Front-end "three-piece suit" - HTML, CSS, Javascript (1)

1. HTML:

In addition to the above tags, we also have layout tags for the layout of the entire web page:

Form exercise - form personal information http://t.csdn.cn/04TsU

Guess you like