Web front end overview

A brief history of HTML

October 1991: an informal CERN( European Center for Nuclear Research )For the first time, the document discloses 18 HTML tags. The author of this document is a physicist Tim Berners-Lee So he is web The inventor, too World Wide Web Consortium Chairman of the Committee.
November 1995: HTML 2.0 standard release (RFC 1866).
January 1997: HTML 3.2 as W3C Release of recommended standards.
December 1997: HTML 4.0 was released as a W3C recommendation.
December 1999: html4 01 was issued as a W3C recommendation.
January 2008: HTML5 was released as a working draft by W3C.
May 2011: W3C pushed HTML5 to the "Last Call" stage.
December 2012: W3C designated HTML5 as the "candidate recommendation" stage.
October 2014: HTML5 was released as a stable W3C recommendation, which means that the standardization of HTML5 has been completed.

New HTML5 features

Introduce native multimedia support (audio and video Tags)
Introducing programmable content (canvas tag)
Introduce semantic Web (article, aside, details, figure, footer, header, nav, section, summary and other tags)
Introduce new form controls (calendar, mailbox, search, slider, etc.)
Introduce better support for offline storage (localStorage and sessionStorage)
Introduce support for positioning, drag and drop, WebSocket, background tasks, etc

Use tags to host content

structure

html
- head
  - title
  - meta
- body

text

heading and paragraph
- h1 ~ h6
- p
superscript and subscript
- sup
- sub
Blank (white space fold)
break and horizontal ruler
- br
- hr
Semantic label
- Bold and emphasis - strong
- Reference - blockquote
- Abbreviations and acronyms - abbr / acronym
- Citation - cite
- Owner contact information - address
- Content modification - ins / del

list

ordered list - ol / li
unordered list - ul / li
definition list - dl / dt / dd

Link (anchor)

Page links
Anchor link
Function link

image

Image storage location

[the external link image transfer fails. The source station may have an anti-theft chain mechanism. It is recommended to save the image and upload it directly (img-UUmecoNr-1623374861056)(./res / relative path. png)]
Image and its width and height
Select the correct image format
- JPEG
- GIF
- PNG
Vector graph
Semantic tag - figure / figcaption

table

Basic table structure - table / tr / td / th
Table title - caption
Cross row and cross column - rowspan attribute / colspan attribute
Long form - thead / tbody / tfoot

form

Important attribute - action / method / enctype
Form control (input) - type attribute
- Text box - text / password box - password / number box - number
- Email - email / phone - tel / date - date / slider - range / URL - url / search - Search
- radio button - radio / check button - checkbox
- File upload - file / hidden field - hidden
- Submit button - submit / image button - image / reset button - reset
Drop down list - select / option
Text field (multiline text) - textarea
Combining form elements - fieldset / legend

audio / video

Video format and player
Video hosting service
Preparation for adding video
video Tags and properties - autoplay / controls / loop / muted / preload / src
audio tags and attributes - autoplay / controls / loop / muted / preload / src / width / height / poster

Window (frame)

Frameset (obsolete, not recommended) - frameset / frame
Embedded window - iframe

other

Document type

<!doctype html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

notes

<!-- This is a comment. Comments cannot be nested -->

attribute
- id: unique identification
- Class: the class to which the element belongs. It is used to distinguish different elements
- title: additional information of the element (tooltip text will be displayed when the mouse hovers)
- tabindex: Tab key to switch order
- Contentditable: whether the element is editable
- draggable: whether the element can be dragged
Block level element / row level element
Character entity (entity replacer)

[the external chain picture transfer fails. The source station may have an anti-theft chain mechanism. It is recommended to save the picture and upload it directly (img-kKkj4fq0-1623374861058)(./res / character entity. png)]

Rendering pages using CSS

brief introduction

Role of CSS
How CSS works
Rules, attributes, and values

[the external chain picture transfer fails. The source station may have an anti-theft chain mechanism. It is recommended to save the picture and upload it directly (IMG jinlfxcg-1623374861060) (. / RES / selector syntax. png)]
Common selector

[the external chain picture transfer fails. The source station may have an anti-theft chain mechanism. It is recommended to save the picture and upload it directly (img-nXc6odfQ-1623374861066)(./res / common selector. png)]

color

How to specify colors
Color terminology and color contrast
Background color

Text (text / font)

Text size and font type (font size / font family)

[the external chain picture transfer fails. The source station may have an anti-theft chain mechanism. It is recommended to save the picture and upload it directly (img-E6g3ZbrP-1623374861068)(./res / size unit. png)]

[the external chain picture transfer fails. The source station may have anti-theft chain mechanism. It is recommended to save the picture and upload it directly (img-DNDQFbIw-1623374861069)(./res / serif font + non serif font + equal width font. png)]
Thickness, style, stretch and decoration (font weight / font style / font stretch / text decoration)

[the external link image transfer fails. The source station may have an anti-theft chain mechanism. It is recommended to save the image and upload it directly (img-9HHNsnXz-1623374861069)(./res / font style. png)]
Line height, letter spacing, and word spacing
Text align and text indent
Link style (: link /: visited /: active /: hover)
New CSS3 properties
- Shadow effect - text shadow
- Initial letter and first line text (: first letter /: first line)
- Response user

box model

Box size control (width / height)

[the external chain picture transfer fails. The source station may have an anti-theft chain mechanism. It is recommended to save the picture and upload it directly (img-NI0XGSz1-1623374861070)(./res / size unit. png)]
border / margin / padding of the box

[the external chain image transfer fails. The source station may have an anti-theft chain mechanism. It is recommended to save the image and upload it directly (img-n6iezhe-1623374861070) (. / RES / box model. png)]
display / visibility of box
CSS3 new properties
- Border image
- Projection (border shadow)
- Border radius

Lists, tables, and forms

Bullet in list (list style)
Table border and background
Appearance of form controls
Alignment of form controls
Browser developer tools

image

Control the size of the image (display: inline block)
Align images
Background / background image / background repeat / background position

layout

Position of control element (position / z-index)
- Ordinary flow
- Relative positioning
- Absolute positioning
- Fixed positioning
- Floating element (float / clear)
Website layout
- HTML5 layout
  
  [the external chain picture transfer fails. The source station may have an anti-theft chain mechanism. It is recommended to save the picture and upload it directly (img-WngLudcL-1623374861071)(./res / classic layout-2.png)]
Fit screen size
- Fixed width layout
- Fluid layout
- Layout grid

Use JavaScript to control behavior

Basic JavaScript syntax

Statements and comments
Variables and data types
- Declaration and assignment
- Simple and complex data types
- Naming rules for variables
Expressions and operators
- Assignment Operators
- Arithmetic operator
- Comparison operator
- Logical operator
Branching structure
- if...else...
- switch...cas...default...
Cyclic structure
- for loop
- while Loop
- do...while Loop
array
- Create array
- Manipulating elements in an array
function
- Declarative function
- Call function
- Parameters and return values
- Anonymous function
- Call function immediately

object-oriented

Concept of object
Literal syntax for creating objects
Access member operator
Constructor syntax for creating objects
- this keyword
Add and remove attributes
- delete keyword
Standard object
- Number / String / Boolean / Symbol / Array / Function
- Date / Error / Math / RegExp / Object / Map / Set
- JSON / Promise / Generator / Reflect / Proxy

BOM

Properties and methods of window object
history object
- forward() / back() / go()
location object
navigator object
screen object

DOM

DOM tree
Access element
- getElementById() / querySelector()
- getElementsByClassName() / getElementsByTagName() / querySelectorAll()
- parentNode / previousSibling / nextSibling / children / firstChild / lastChild
Operation element
- nodeValue
- innerHTML / textContent / createElement() / createTextNode() / appendChild() / insertBefore() / removeChild()
- className / id / hasAttribute() / getAttribute() / setAttribute() / removeAttribute()
event processing
- Event type
  - UI events: load / unload / error / resize / scroll
  - Keyboard events: keydown / keyup / keypress
  - Mouse events: click / dbclick / mousedown / mouseup / mousemove / mouseover / mouseout
  - Focus event: focus / blur
  - Form events: input / change / submit / reset / cut / copy / paste / select
- Event binding
  - HTML event handler (not recommended because the tag and code should be separated)
  - Traditional DOM event handlers (only one callback function can be attached)
  - Event listener (not supported in old browsers)
- Event flow: event capture / event bubbling
- Event object (window.event in lower version IE)
  - target (some browsers use srclelement)
  - type
  - cancelable
  - preventDefault()
  - stopPropagation() (cancelBubble in IE of lower version)
- Mouse event - where the event occurred
  - Screen position: screenX and screenY
  - Page location: pageX and pageY
  - Client location: clientX and clientY
- Keyboard event - which key was pressed
  - keyCode attribute (which is used by some browsers)
  - String.fromCharCode(event.keyCode)
- HTML5 events
  - DOMContentLoaded
  - hashchange
  - beforeunload

JavaScript API

Client storage - localStorage and sessionStorage

localStorage.colorSetting = '#a4509b';
localStorage['colorSetting'] = '#a4509b';
localStorage.setItem('colorSetting', '#a4509b');

Get location information - Location

navigator.geolocation.getCurrentPosition(function(pos) { 		  
    console.log(pos.coords.latitude)
    console.log(pos.coords.longitude)
})

Get data from server - Fetch API
Drawing graphics - < canvas > API
Audio and video - < audio > and < video > API s

Using jQuery

jQuery overview

Write Less Do More
Use CSS selectors to find elements (simpler and more convenient)
Use jQuery methods to manipulate elements (resolve browser compatibility issues, apply to all elements, and impose multiple methods)

Introducing jQuery

Download the development and compressed versions of jQuery
Load jQuery from CDN

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script>
    window.jQuery || 
        document.write('<script src="js/jquery-3.3.1.min.js"></script>')
</script>

Find element

selector
- * / element / #id / .class / selector1, selector2
- ancestor descendant / parent>child / previous+next / previous~siblings
Filter
- Basic filter:: not (selector) /: first /: last /: even /: odd /: EQ (index) /: GT (index) /: LT (index) /: animated /: focus
- Content filter:: contains('...') /: empty /: parent /: has (selector)
- Visibility filter:: Hidden /: visible
- Child node filter:: nth child (expr) /: first child /: last child /: only child
- Attribute filter: [attribute] / [attribute ='value '] / [attribute! ='value'] / [attribute ^ ='value '] / [attribute $='value'] / [attribute| ='value '] / [attribute ~ ='value']
Form:: input /: text /: password /: Radio /: checkbox /: submit /: image /: reset /: button /: file /: selected /: enabled /: Disabled /: checked

Perform operations

Content operation
- Get / modify content: html() / text() / replaceWith() / remove()
- Get / set elements: before() / after() / prepend() / append() / remove() / clone() / unwrap() / detach() / empty() / add()
- Get / modify attributes: attr() / removeAttr() / addClass() / removeClass() / css()
- Get / set form value: val()
Find operation
- Search method: find() / parent() / children() / siblings() / next() / nextAll() / prev() / prevAll()
- filter() / not() / has() / is() / contains()
- Index No.: eq()
Size and location
- Size related: height() / width() / innerHeight() / innerWidth() / outerWidth() / outerHeight()
- Location dependent: offset() / position() / scrollLeft() / scrollTop()
Special effects and animation
- Basic animation: show() / hide() / toggle()
- Disappear: fadeIn() / fadeOut() / fadeTo() / fadeToggle()
- Sliding effect: slideDown() / slideUp() / slideToggle()
- Customization: delay() / stop() / animate()
event
- Document loading: ready() / load()
- User interaction: on() / off()

Chain operation

Detect whether the page is available

<script>
    $(document).ready(function() {
        
    });
</script>

<script>
    $(function() {
        
    });
</script>

jQuery plug-in

jQuery Validation
jQuery Treeview
jQuery Autocomplete
jQuery UI

Avoid conflicts with other libraries

In the case of introducing jQuery library first and then other libraries.

<script src="other.js"></script>
<script src="jquery.js"></script>
<script>
	jQuery.noConflict();
    jQuery(function() {
        jQuery('div').hide();
    });
</script>

The case of introducing jQuery first and then other libraries.

<script src="jquery.js"></script>
<script src="other.js"></script>
<script>
    jQuery(function() {
        jQuery('div').hide();
    });
</script>

Using Ajax

Ajax is a technology that can update some web pages without reloading the whole web page.

Native Ajax
Ajax based on jQuery
- Load content
- Submit Form

Front end frame

Progressive framework- Vue.js

The required framework for front-end and back-end separation development (front-end rendering).

Get started quickly

With the introduction of Vue's JavaScript file, we still recommend loading it from the CDN server.
```
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
```

Data binding (declarative rendering).

<div id="app">
	<h1>{{ product }}Inventory information</h1>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
	const app = new Vue({
		el: '#app',
		data: {
			product: 'iPhone X'
		}
	});
</script>

Conditions and cycles.

<div id="app">
	<h1>Inventory information</h1>
    <hr>
	<ul>
		<li v-for="product in products">
			{{ product.name }} - {{ product.quantity }}
			<span v-if="product.quantity === 0">
				It's sold out
			</span>
		</li>
	</ul>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
	const app = new Vue({
		el: '#app',
		data: {
			products: [
				{"id": 1, "name": "iPhone X", "quantity": 20},
				{"id": 2, "name": "Huawei Mate20", "quantity": 0},
				{"id": 3, "name": "millet Mix3", "quantity": 50}
			]
		}
	});
</script>

Calculate properties.

<div id="app">
	<h1>Inventory information</h1>
	<hr>
	<ul>
		<li v-for="product in products">
			{{ product.name }} - {{ product.quantity }}
			<span v-if="product.quantity === 0">
				It's sold out
			</span>
		</li>
	</ul>
	<h2>Total inventory:{{ totalQuantity }}platform</h2>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
	const app = new Vue({
		el: '#app',
		data: {
			products: [
				{"id": 1, "name": "iPhone X", "quantity": 20},
				{"id": 2, "name": "Huawei Mate20", "quantity": 0},
				{"id": 3, "name": "millet Mix3", "quantity": 50}
			]
		},
		computed: {
			totalQuantity() {
				return this.products.reduce((sum, product) => {
					return sum + product.quantity
				}, 0);
			}
		}
	});
</script>

Handle events.

<div id="app">
	<h1>Inventory information</h1>
	<hr>
	<ul>
		<li v-for="product in products">
			{{ product.name }} - {{ product.quantity }}
			<span v-if="product.quantity === 0">
				It's sold out
			</span>
			<button @click="product.quantity += 1">
				Increase inventory
			</button>
		</li>
	</ul>
	<h2>Total inventory:{{ totalQuantity }}platform</h2>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
	const app = new Vue({
		el: '#app',
		data: {
			products: [
				{"id": 1, "name": "iPhone X", "quantity": 20},
				{"id": 2, "name": "Huawei Mate20", "quantity": 0},
				{"id": 3, "name": "millet Mix3", "quantity": 50}
			]
		},
		computed: {
			totalQuantity() {
				return this.products.reduce((sum, product) => {
					return sum + product.quantity
				}, 0);
			}
		}
	});
</script>

User input.

<div id="app">
	<h1>Inventory information</h1>
	<hr>
	<ul>
		<li v-for="product in products">
			{{ product.name }} - 
			<input type="number" v-model.number="product.quantity" min="0">
			<span v-if="product.quantity === 0">
				It's sold out
			</span>
			<button @click="product.quantity += 1">
				Increase inventory
			</button>
		</li>
	</ul>
	<h2>Total inventory:{{ totalQuantity }}platform</h2>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
	const app = new Vue({
		el: '#app',
		data: {
			products: [
				{"id": 1, "name": "iPhone X", "quantity": 20},
				{"id": 2, "name": "Huawei Mate20", "quantity": 0},
				{"id": 3, "name": "millet Mix3", "quantity": 50}
			]
		},
		computed: {
			totalQuantity() {
				return this.products.reduce((sum, product) => {
					return sum + product.quantity
				}, 0);
			}
		}
	});
</script>

Load JSON data through the network.

<div id="app">
	<h2>Inventory information</h2>
	<ul>
		<li v-for="product in products">
			{{ product.name }} - {{ product.quantity }}
			<span v-if="product.quantity === 0">
				It's sold out
			</span>
		</li>
	</ul>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
	const app = new Vue({
		el: '#app',
		data: {
			products: []
		}，
		created() {
			fetch('https://jackfrued.top/api/products')
				.then(response => response.json())
				.then(json => {
					this.products = json
				});
		}
	});
</script>

Using scaffolding - Vue cli

Vue provides a very convenient scaffold tool Vue cli for commercial project development. Through the tool, the steps of manually configuring the development environment, test environment and running environment can be omitted, so that developers only need to pay attention to the problems to be solved.

Install scaffolding.
Create project.
Install dependent packages.
Run the project.

UI framework- Element

The desktop component library based on Vue 2.0 is used to construct the user interface and support responsive layout.

Introduce CSS and JavaScript files of Element.

<!-- Import style -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- Import component library -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

A simple example.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
	</head>
	<body>
		<div id="app">
			<el-button @click="visible = true">Point me</el-button>
			<el-dialog :visible.sync="visible" title="Hello world">
				<p>Start using Element bar</p>
			</el-dialog>
            </div>
	</body>
	<script src="https://unpkg.com/vue/dist/vue.js"></script>
	<script src="https://unpkg.com/element-ui/lib/index.js"></script>
	<script>
		new Vue({
			el: '#app',
			data: {
				visible: false,
			}
		})
	</script>
</html>

Use components.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
	</head>
	<body>
		<div id="app">
			<el-table :data="tableData" stripe style="width: 100%">
				<el-table-column prop="date" label="date" width="180">
				</el-table-column>
				<el-table-column prop="name" label="full name" width="180">
				</el-table-column>
				<el-table-column prop="address" label="address">
				</el-table-column>
			</el-table>
		</div>
	</body>
	<script src="https://unpkg.com/vue/dist/vue.js"></script>
	<script src="https://unpkg.com/element-ui/lib/index.js"></script>
	<script>
		new Vue({
			el: '#app',
			data: {
				tableData:  [
					{
						date: '2016-05-02',
						name: 'Wang Yiba',
						address: 'Lane 1518, Jinshajiang Road, Putuo District, Shanghai'
					}, 
					{
						date: '2016-05-04',
						name: 'Liu Ergou',
						address: 'Lane 1517, Jinshajiang Road, Putuo District, Shanghai'
					}, 
					{
						date: '2016-05-01',
						name: 'Yang sanmeng',
						address: 'Lane 1519, Jinshajiang Road, Putuo District, Shanghai'
					}, 
					{
						date: '2016-05-03',
						name: 'Si Chuan Chen',
						address: 'Lane 1516, Jinshajiang Road, Putuo District, Shanghai'
					}
				]
			}
		})
	</script>
</html>

Report frame- ECharts

Baidu's open source visualization library is often used to generate various types of reports.

[the external chain image transfer fails, and the source station may have an anti-theft chain mechanism. It is recommended to save the image and upload it directly (img-upxyt2ox-1623374861072) (. / RES / baidu_ecarts. PNG)]

CSS framework based on elastic box- Bulma

Bulma is a modern CSS framework based on Flexbox. Its original intention is Mobile First and modular design. It can be easily used to realize various simple or complex content layouts. Even developers who do not understand CSS can use it to customize beautiful pages.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Bulma</title>
	<link href="https://cdn.bootcss.com/bulma/0.7.4/css/bulma.min.css" rel="stylesheet">
	<style type="text/css">
		div { margin-top: 10px; }
		.column { color: #fff; background-color: #063; margin: 10px 10px; text-align: center; }
	</style>
</head>
<body>
	<div class="columns">
		<div class="column">1</div>
		<div class="column">2</div>
		<div class="column">3</div>
		<div class="column">4</div>
	</div>
	<div>
		<a class="button is-primary">Primary</a>
		<a class="button is-link">Link</a>
		<a class="button is-info">Info</a>
		<a class="button is-success">Success</a>
		<a class="button is-warning">Warning</a>
		<a class="button is-danger">Danger</a>
	</div>
	<div>
		<progress class="progress is-danger is-medium" max="100">60%</progress>
	</div>
	<div>
		<table class="table is-hoverable">
			<tr>
				<th>One</th>
				<th>Two</th>
			</tr>
			<tr>
				<td>Three</td>
				<td>Four</td>
			</tr>
			<tr>
				<td>Five</td>
				<td>Six</td>
			</tr>
			<tr>
				<td>Seven</td>
				<td>Eight</td>
			</tr>
			<tr>
				<td>Nine</td>
				<td>Ten</td>
			</tr>
			<tr>
				<td>Eleven</td>
				<td>Twelve</td>
			</tr>
		</table>
	</div>
</body>
</html>

Responsive Layout Framework- Bootstrap

Front end framework for rapid development of Web applications, supporting responsive layout.

characteristic
- Support mainstream browsers and mobile devices
- Easy to use
- Responsive design
content
- grid system
- Encapsulated CSS
- Off the shelf components
- JavaScript plugin
visualization

[the external chain picture transfer fails, and the source station may have an anti-theft chain mechanism. It is recommended to save the picture and upload it directly (img-srk0pelc-1623374861073) (. / RES / bootstrap layoutit. PNG)]

Keywords: Python html

Added by divito on Tue, 01 Feb 2022 23:17:15 +0200

Programming VIP

Web front end overview

A brief history of HTML

New HTML5 features

Use tags to host content

structure

text

list

Link (anchor)

image

table

form

audio / video

Window (frame)

other

Rendering pages using CSS

brief introduction

color

Text (text / font)

box model

Lists, tables, and forms

image

layout

Use JavaScript to control behavior

Basic JavaScript syntax

object-oriented

BOM

DOM

JavaScript API

Using jQuery

jQuery overview

Introducing jQuery

Find element

Perform operations

Chain operation

Detect whether the page is available

jQuery plug-in

Avoid conflicts with other libraries

Using Ajax

Front end frame

Progressive framework- Vue.js

Get started quickly

Using scaffolding - Vue cli

UI framework- Element

Report frame- ECharts

CSS framework based on elastic box- Bulma

Responsive Layout Framework- Bootstrap

Popular Keywords