Web page creation basics

Website update: www.dadaqianduan.cn/#/%E5%89%8D…

Web page creation basics

Note: As a learning aid only

So what can Web page creation basics teach you?

Section 1: Mastering Web basics.

Section two: Basic knowledge of HTML.

Section 3 Basic knowledge of the CSS.

Web Development Background

1. The concept of computer language
2. Interpretation and compilation
3. The introduction of Sublime does
4. Introduction to Developer Tools
5. Naming conventions

Naming conventions

• The English name
• Numbers should not start
• Hump nomenclature

Learn front-end contact with web basic languages, HTML, CSS, JavaScript

Web Basics

Read for 15 minutes each time:

1. InternetInternet Internet in Chinese.
2. It is a global network of computers that communicate with each other in a common language.
3. WWWisWorld Wide WebThe Abbreviation of the Chinese name world Wide Web.
4. WWWisInternetThe most important part of.
5. It is aInternetOn those who supportWWWServices andHTTPA collection of servers for the protocol.
6. WWWIn use is divided intoWebThe client andWebThe service side.
7. Users can useWebClient accessWebPages on the server.
8. Website, the Chinese name for website, refers to inInternetOn according to certain rules, useHTMLA collection of related web pages created to display specific content.
9. URL, it isUniform Resource LocatorThe abbreviation, The Chinese name is unified resource locator, commonly known as the website, it is a concise expression of the location and access method of resources that can be obtained from the Internet, is the address of the standard resources on the Internet.

General format of URL:

Protocol :// Host IP address + directory path + ParametersCopy the code

Common protocols are:

A. FTP: File Transfer Protocol. You can access files on the server through FTP. Generally, the host address is preceded by username: password @.

Example:

Url: ftp://admin:[email protected]/html.pdfCopy the code

B. file: mainly accesses files on the local computer.

C. Telent: Allows users to communicate with a remote device through a negotiation process.

HTTP: Hyper Text Transfer Protocol HTTP: Hyper Text Transfer Protocol HTTP: Hyper Text Transfer Protocol

10. Web Standard(WebStandard) isWebStandards that application development needs to adhere to.
11. Web page mainly consists of three parts: structure standard, performance standard, behavior standard.

Website Access Process

Url Uniform resource locator

The addresses of standard resources on the Internet, the locations and access methods of resources available on the Internet.

Components: protocol, server address, resource path.

12. Web BrowserWeb browser, in Chinese, is a software that displays HTML files in a web server or archive system and lets users interact with these files.
13. Web Server, web server in Chinese,WEBServer, mainly to provide online information browsing services.

The Web server can parse THE HTTP protocol. When the Web server receives an HTTP request, it returns an HTTP response. The client can obtain the HTML, including CSS, JS, video, and audio, from the server.

14. webDevelopment is mainly divided into front-end and back-end two parts.
15. The front end is the web page that is directly in contact with the userhtml,js,cssAnd so on.
16. The back-end refers to the application, database, and server levels

Web system development process

Project proposal, requirement analysis, (design, UI design, system design), (development, front-end development, background development), system testing, development and maintenance.

HTML Basics

1. History of HTML: HTML, XHTML
2. HTML global properties: global standard properties, global event properties
3. HTML elements:

4. Markup language is a type of computer coding that combines text and other text-related information to reveal details about document structure and data processing.
5. HTML, for hypertext markup language.
6. XHTMLIs extensible hypertext Markup language, is a purer, stricter, more normativehtmlThe code.
7. htmlA file consists of a header and a body.
8. Label classification: double label, single label.

Double label: Consists of start label and end label. It must be used in pairs and properly nested.

Single tag: Close the start tag (end at the end of the start tag).

HTML global standard attributes

In HTML, eight global standard attributes are specified.

1. classThe name of the class used to define the element.
2. idUsed to specify the uniqueness of the elementid.
3. styleUsed to specify the inline style of the element.
4. titleAdditional information for specifying elements.
5. accesskeyUse to specify the shortcut key for activating an element.

Elements that support the accesskey attribute are ,

, , , ,

, and < Textarea >.

6. tabindexUsed to specify the element intabThe order of the keys.

,

,,,

7. dirUsed to specify the text direction of the content in the element.

There are only LTR and RTL values for dir, which are left to right and right to left respectively.

8. langThe language used to specify the content of the element.

HTML global event properties

WindowWindow events

1. onloadIs triggered after the page has finished loading.
2. onunloadTriggered when the user leaves the page, such as clicking to jump, reloading the page, closing the browser window, etc.

FormForm events

1. onblurEmitted when an element loses focus.
2. onchangeEmitted when the element’s element value is changed.
3. onfocusEmitted when the element gains focus.
4. onresetTriggered when the reload button in the form is clicked.
5. onselectEmitted when the element text is selected.
6. onsubmitTriggered when the form is submitted.

KeyboardKeyboard events

1. onkeydownTriggered when the user presses a key.
2. onkeypress, triggered when the user presses the key.

This property does not apply to all keys, such as Alt, CTRL, Shift, and ESC.

3. onkeyupTriggered when the user releases the key.

MouseMouse events

1. onclickTriggered when the mouse is clicked on the element.
2. ondblclickTriggered when you double-click on an element.
3. onmousedownTriggered when the mouse button is pressed on the element.
4. onmousemoveEvent occurs when the mouse pointer moves.
5. onmouseoutTriggered when the mouse pointer moves out of the element.
6. onmouseoverEvent occurs when the mouse pointer moves over the specified element.
7. onmouseupTriggered when the mouse button is released on the element.

Media Events

1. onabortTriggered when exiting the media player.
2. onwaitingTriggered when the media has stopped playing but intends to continue playing.

The HTML element

The tags contained in an HTML document

1. <! DOCTYPE>Declare the document type.
2. <html>, the true root of the HTML element.
3. <head>To definehtmlThe document header of the document.

The element contained in the head, title, defines the title base of the HTML document, specifies the default address or default target link for all links on the page, defines the relationship between the document and external resources, meta, provides metadata style about the HTML, Used to define style information scripts for HTML documents, used to define client-side scriptsCopy the code

4. bodyTo definehtmlThe body of a document.
5. content-Type, which is used to set the character set of a web page to facilitate the browser to parse and render the page.

Code:

<meta http-equiv="content-Type` content="text/html"; charset=utf-8">
Copy the code

6. cache-control, which tells the browser how to cache a response and for how long.

Parameters:

No-cache: sends a request to the server to confirm whether the resource has been changed. If not, use the cache no-store to allow caching. Download the complete response from the server each time. <meta http-equiv=cache-control" content="no-cache">Copy the code

7. expires, which is used to set the expiration time of the web page. After the expiration time, the web page is re-transmitted to the server.
8. refresh, the page will automatically refresh and redirect to the specified url within the specified time
9. Set-CookieTo set the expiration of a web page.
10. Non-semantic elements:<span>,<div>.<span>Inline tag, used in a line of text,<div>It is a block-level label.

DIV+CSS

Div is used to store the data to be displayed, and CSS is used to specify how to display the data style, separating structure from style.

View div+ CSS style HTML: Click the link below to jump, you can view the source code:

div-css.html

Formatting element

1. Plain text

• <b>, define bold text
• <big>, define large words
• <em>Definition focuses on words
• <i>, define italics
• <small>, define small words
• <strong>, define the emphatic mood
• <sub>, define the subscript
• <sup>, define superscript words
• <ins>, define the insert word
• <del>, define the delete word

2. Computer output

• <code>Define the computer code
• <kbd>To define the keyboard output style
• <samp>, define computer code samples
• <tt>To define typewriter input styles
• <pre>, define preformatted text

3. The term

• <abbr>, define abbreviations
• <acronym>, define acronyms
• <address>, define address
• <bdo>, define text direction
• <blockquote>Defining long references
• <q>Define short quotations
• <cite>, define quote, quote
• <dfn>Define a concept, project

Image element

<img SRC =" image url" Alt =" image substitute text ">Copy the code

Hyperlinked element

1. <a>Of the labeltargetProperty, the default value is_self.

2. Text links are<a></a>The element content between the tags is the text content.
3. Anchor point links are used#+ corresponding anchor point, anchor points usually have unique attribute valuesidSetting.

Image hotspots link

Image hotspot links, what are they? When you look at some shopping web pages, a picture, you can link to different target locations in different places, click on different places to jump to different web pages, which is generally used to do mall projects.

Instead of a tag element, this is a

element.

The

element has two shape, records properties.

coordinate system, the origin is the upper left corner of the image, X-axis positive direction to the right, Y-axis positive direction downward

The use of image hotlinks. The

map -> name="image_link"

img -> usemap="#image_link"
Copy the code

<a href="mailto:[email protected]">Copy the code

<a href="javascript:alert(' Ha ha, you clicked! ');" > Click popover </a>Copy the code

javascript: void(0)

<a href=""></a>

<a href="#"></a>

<a href="javascript:void(0)"></a>
Copy the code

<input type="text">

<input type="password">

<input type="radio">

<input type="checkbox">

<input type="submit">

<input type="reset">

<input type="button">

<input type="image">

<input type="file">

<input type="hidden">
Copy the code

The <select> <option> size attribute is used to set the height of the selection bar, and the multiple attribute is used to determine whether the list is selected or selected="selected".Copy the code

<form action="web" method="post"> <br/> <textarea rows="10" cols="50" name="introduce"> </textarea> <br/> <input type="submit" id="" name=""> </form>Copy the code

<! DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>frameset</title> </head> <frameset cols="25%,50%,25%"> <frame src="https://blog.csdn.net/qq_36232611" scrolling="no" noresize="noresize"></frame> <frame src="https://juejin.cn/user/1451011081249175" ></frame> <frame src="https://www.jianshu.com/u/c785ece603d1" ></frame> </frameset> <noframes> <body> Your browser cannot handle frames, please change your browser to open </body> </noframes> </ HTML >Copy the code

<link type="text/ CSS "rel="stylesheet" href=" CSS style file URL "/>Copy the code

<style type="text/ CSS "> @import "CSS style file url"; </style>Copy the code

<style type="text/css">
 div {
     background-color: #ffffff;
     width: 300px;
     height: 300px;
 }
</style>
Copy the code

<div style="background-color: #ffffff; width: 100px; height: 100px;" > </div>Copy the code

E[attribute]{property1:value1; property2:value2;...}
Copy the code

padding: 10px 10px 10px 10px;
Copy the code