Front-end technology: H5 form CSS optimization

Knowledge review:

1) HTML 5.0 (h5) is much more powerful than the previous version, adding many new tags

Enhanced function animation (flash memory leak, Apple ipad),
unified mobile terminal development (ios, Android) repetitive work, two software company teams

2) CSS 3.0 and H5 work together to enhance the performance of the entire web page

Electron turns web pages into desktop applications, word, excel, Baofengyingyin
is not yet mature enough

3) A lot of tags, front-end knowledge is 10% for back-end engineers, write it out and show it on the page

Probably commonly used memories

4) Style, look familiar, understand the meaning: font-size, font-weight

Visualization

5) The animation is very rich,

position: relative;
positioning: animation is generally quite positioning

6) For back-end developers, cooperate with front-end technology

Connect to the database (mysql) in the background to query the data in the database table student
(java jdbc)
After querying the data, display it on the page (h5+css3)

Form
html for developers

1) div, span, ul, li data display (static website)

2）form，input（text/radio/checkbox/button），select

Users fill in their own information, can interact, and can be differentiated by different users
(dynamic website). Submit user information to the background springmvc+spring+mybatis

label display name

The earliest only html
html+css
css package, bootstrap

bootstrap3 (not using 4 for the time being, 3 is now the mainstream in the market, 4 and 3 are not compatible)
bootstrap3 is a bunch of style definitions, pre-defined many beautiful styles.
How to use it? According to these case analysis, transform our existing page

1) Add a label to represent the form

2) Most divs add a style modification

<div class="form-group"> 大多文本框div修饰

    <label for="name">名称</label>
    <input type="text" class="form-control" id="name" placeholder="请输入名称">
  </div>

3) Check div modification

<div class="checkbox">

4) Button styles are also different

<button class="btn btn-default"

Summary: To use bootstrap, it must modify the elements on the page and add a lot of class style decoration

How to introduce bootstrap, it is called a style sheet file

Importing a style sheet file from the outside. The style sheet file is actually to put on the page

Style:
1) Add the style attribute directly on the element

<h1 style="color:red;">学生信息管理系统</h1>

2) Declare in the label on the page

<style>
			body{
     
     
				width: 400px;
				margin: 30px;
			}
		</style>

3) link tag, multiple html sharing

<link rel="stylesheet" href="css/bootstrap.min.css">

bootstrap.min.css As long as .min, compress the file, put all content on one line.
Compression is format, space, line break, indent tab (fast download)
bootstrap.css normal file (for developers to see)

---