Web development basics HTML+CSS
Learning objectives and content
1. Be able to describe the technical points required for web development
2. Be able to describe the function of HTML
3. Able to implement a list
4. Ability to create a form
5. Ability to implement a form
6. Be able to describe the role of CSS
7. Able to use selectors to obtain tags
8. Ability to set font color and size using CSS
1. Introduction to Web development
1. Why should you learn web development?
Operation and Maintenance Engineer
Junior Engineer: Responsible for maintaining the basic environment (installing the system, handling server issues, implementation, viewing and monitoring)
Intermediate engineer: maintain large clusters and deploy cluster architecture
==Senior Engineer: Carry out page-based development of existing tedious work and simplify operation and maintenance work (when there are 1,000 servers, use system management)==
==Asset Management System==
Asset management system, referred to as ==cmdb==.
The open source asset management system ==jumpserver== cannot complete 100% of the company's business
In order to protect the network and data from intrusion and damage from external and internal users, bastion machines use various technical means to collect and monitor the system status, security events, and network activities of each component in the network environment in real time to provide centralized alarms. , timely processing and auditing.
Senior engineers need to develop similar systems to meet their own business needs
Demonstration related demo projects
2. What to learn about web development
HTML hypertext markup text
CSS Cascading Style Sheets
JavaScript dynamic scripting language
DOM document
jQuery javaScript library
bootstrap html+css+js front-end template library
ajax a set of technologies asynchronous+JavaScript+xml
Combined with learning a back-end language (java, php, ==python==, ruby[howbrew]~~~)
3. Relevant learning materials
Rookie Tutorial:Rookie Tutorial - Learn not only skills, but also dreams!
2. HTML, the basics of web development
Ability to develop pages using HTML
1. Introduction to front-end languages
HTML provides the content on the page (structure and content)
CSS beautifies web pages (styles)
JavaScript controls (controls) the content on web pages
2. Preparation of development tools
Commonly used development tools:
Lightweight text type: ==VSCode==, Sublime
Weight IDE type: WebStrom
3. Initial HTML
What is HTML
HTML (the abbreviation of English Hyper Text Markup Language) is translated into Chinese as ==Hypertext Markup Language==
Use HTML tags to describe text, pictures, sounds and other content in web pages
Open a page on the Internet and view the source code through browser debugging tools
HTML format
basic format
<html> <head> <title>标题显示</title> </head> <body> </body> </html>
html tag: the root node of all html tags
head tag: describes some information of the web page, the content inside will not be displayed.
title tag: the title of the web page
==body== tag: the theme part of the page, mainly writing and developing content
Tip: Quickly create HTML page structure through the editor
After creating a new html file in vscode, enter! Press the tab key to quickly generate a page structure based on HTML5 standards.
4. HTML tag classification
①Double label
Syntax format:
<tag name>content</tag name>
<Tag name> is at the front of the entire tag, called the "start tag"
</tag name> At the end of the entire tag, it is called the "end tag"
The end tag just has one more closing character "/" in front of the start tag.
For example:
<body>I am the main content of the page</body>
②Single label
Syntax format:
<Tag name/>
A single label is also called an empty label, which refers to a label that can completely describe a certain function with one label symbol.
For example:
<br /> Line break tag <hr /> Horizontal line horizontal line label
5. Character set
<meta charset=“UTF-8”>
==UTF-8== is currently the most commonly used character set encoding method. Commonly used character set encoding methods include gbk and gb2312.
GB2312 Simple Chinese includes 6763 Chinese characters
BIG5 Traditional Chinese for Hong Kong, Macao and Taiwan
GBK contains all Chinese characters and is an extension of GB2312. It adds support for traditional characters and is compatible with GB2312.
UTF-8 contains characters needed by all countries in the world
Tip: In the future, we can use the UTF-8 character set uniformly to avoid garbled characters caused by inconsistent character sets.
6. Commonly used HTML basic tags
6.1. Title tag
Word abbreviation: head header
grammar:
<h1>This is the h1 tag</h1> <h2>This is the h2 tag</h2> <h3>This is the h3 tag</h3> <h4>This is the h4 tag</h4> <h5>This is the h5 tag</h5> <h6>This is the h6 tag</h6>
6.2. Paragraph tags
Word abbreviation: paragraph paragraph
Using paragraph tags, the text in the web page can be formatted one paragraph at a time.
grammar:
<p>Paragraph content</p>
6.3. Horizontal line label
Word abbreviation: horizontal horizontal line
grammar:
<hr /> is a single tag
6.4. Line feed label
Word abbreviation: break, break, newline
In HTML, the default line wrapping requires automatic line wrapping at the rightmost end of the browser window, so the rendering effect is inconsistent on each device. If you need to force a line break for a certain text, you need to use a line break tag.
grammar:
<br />
Exercise: Implement a simple news page
6.5. div span tag
Two layout methods in the box model:
The abbreviation of div division means division. In fact, there are many divs to combine web pages. block-level elements
span span, span; range, inline element
grammar:
<div>This is the header</div> <span>Today’s Price</span>
6.6. Label attributes
When using HTML to create a web page, if you want the tag to provide more information, you can use some attributes of the tag to set it.
grammar:
<Tag name Attribute 1="Attribute value 1" Attribute 2="Attribute value 2" ...> Content </Tag name>
example:
<hr width="200" align="left" />
width attribute, value 200 controls the width
align attribute, the value left controls the horizontal alignment
6.7. Image tag img
Word abbreviation: image image
grammar:
<img src="Image URL" />
Set the path and file name of the image file through the src attribute. It is a required attribute of the img tag.
6.8. Link tags
Abbreviation: anchor anchor
grammar:
<a href="Jump target">Text or image</a>
The href attribute specifies the target URL address to be linked to.
URL address, you can use absolute path and relative path. Including agreements, etc.
Tip:
href can use "#" to indicate an empty connection and there is no jump link address for the time being.
Open a new page tab
6.9. Special character tags
Some tags in HTML have special meanings and will be parsed directly by the browser. If you need to output these tags, you need to use escape and substitution syntax.
6.10 Annotation tags
Comment tags can add some text to HTML documents that are easy to read and understand. The content in this tag will not be displayed directly and can only be seen through the source code.
grammar:
<!-- Comment statement -->
7. List tag ul li
grammar:
<ul> <li>列表项1</li> <li>列表项2</li> <li>列表项3</li> ...... </ul>
Tip:
①In the <ul></ul> tag, only the <li></li> tag can be nested. Direct nesting of other tags is not allowed due to syntax.
②<li></li>The tag serves as a container and can accommodate other tag elements.
③The unordered list has a default style and can be modified with CSS.
8. Table
It is usually necessary to use tables to display data so that the data can be presented more regularly.
8.1. Create a table
grammar:
<table> <tr> <td>单元格内的文字</td> ... </tr> ... </table>
table defines a table
tr defines a row in the table and must be nested in the table tag. Several pairs of tr tags represent how many rows of tables there are.
td defines cells in the table and must be nested in tr tags. There are several pairs of td tags in a pair of tr tags, which means how many cells there are in a row. td can be used as a container to contain other label elements.
8.2. Table attributes
Tip:
①You can use the th tag to set the header
②You can then use CSS to modify the style of the table
9. Form
9.1. Form introduction
In HTML, the form tag is used to define a form. Used to collect and transmit user-related information and interact with the backend. All content in the form will be submitted to the server.
grammar:
<form action="url address" method="Submission method"> Various form controls </form>
Common properties:
The action value is the URL address submitted to the backend.
method sets the form submission method. The value is get or post.
9.2. Form control composition
The form provides a variety of form spaces, such as single-line text input boxes, password input boxes, check boxes, submit buttons, reset buttons, etc.
9.3. Input control (key point)
The input control is the most commonly used in forms, and it is also something that needs to be mastered. The basic label attribute is the type attribute, which is used to define different control types.
Other common attributes:
9.4. textarea control (text area)
When a large amount of information needs to be entered, the textarea tag can be used. Implement a multi-line text input box.
grammar:
<textarea cols="Number of characters in each line" rows="Number of rows displayed"> Text content </textarea>
9.5. Select control (drop-down menu)
The select control can provide users with some common options.
grammar:
<select> <option>选项1</option <option>选项2</option> <option>选项3</option> ... </select>
Tip:
The select tag must contain an option tag.
In the option tag, you can define selected="selected" to set the current value as the default option.
9.6, label label
The label label is the definition label (label) of the input element.
It can be used to bind a form element. When the label label is clicked, the bound form element will gain input focus.
grammar:
<label for="male">Male</label> <input type="radio" name="sex" id="male" value="male">
3. CSS, the basics of web development
1. Introduction to CSS
1.1. The role of CSS
1.2. What is CSS?
CSS (Cascading Style Sheets), often called CSS style sheets or cascading style sheets (cascading style sheets)
Mainly used to set the text content (font, size, alignment, etc.), the shape of the box (width and height, border style, margins, etc.) and the layout of the layout in the HTML page.
Based on HTML, it provides a wealth of functions, such as font, color, background control and overall typesetting, etc.
2. Where and how CSS is defined
1.1. Inline style (inline style)
Inline styles set the style of elements through the style attribute of the tag.
grammar:
<Tag name style="Attribute 1: Attribute value 1; Attribute 2: Attribute value 2; Attribute 3: Attribute value 3;"> Content </Tag name>
Style is an attribute of the tag. Any HTML tag has the style attribute, which is used to set the inline style.
1.2. Embedded styles
Embedded is to write CSS code in the head tag of the HTML document and define it with the style tag.
<head>
<style type="text/CSS">
Selector {Attribute 1: Attribute value 1; Attribute 2: Attribute value 2; Attribute 3: Attribute value 3;}
</style>
</head>
Tip：
①The style tag is generally located in the head tag and can actually be placed anywhere in the HTML document.
②The type="text/css" attribute can be omitted. Of course, adding it will make it more standardized.
1.3. External style sheet (imported file)
An external style sheet stores all styles in one or more files ending with .css. Link external style sheet files to HTML documents through the link tag.
grammar:
<head> <link href="CSS文件的路径" type="text/CSS" rel="stylesheet" /> </head>
href: Defines the URL of the style sheet file introduced by the link, both relative and absolute paths are acceptable.
type: defines the type of linked document, "text/CSS" indicates that the linked external file is a CSS style sheet
rel: Defines the relationship between the current document and the linked document. It needs to be specified as "stylesheet" here, indicating that the linked document is a style sheet file.
Summarize:
| style sheet | advantage | shortcoming | Usage | Control range |
|---|---|---|---|---|
| inline style sheet | Easy to write | No separation of style and structure is achieved | less | Control one label (less) |
| internal style sheet | Partial structure and style separation | not completely separated | more | Control a page (medium) |
| external style sheet | Completely separate structure and style | Need to be introduced | Most, highly recommended | Control entire site(s) |
priority:
==inline>outside=inline==
3. CSS selector
In HTML, if you want to apply CSS styles to tags, you first need to find the (class) tag. In CSS, it can be found through selectors (selectors).
3.1. Tag selector
Tag selector refers to using ==HTML tag name== as a selector to set a unified CSS style for tags defined with such tag names in the page.
grammar:
Tag name {Attribute 1: Attribute value 1; Attribute 2: Attribute value 2; Attribute 3: Attribute value 3; }
3.2. ID selector
The id selector can specify a specific style for HTML elements marked with a specific id.
grammar:
#id name {Attribute 1: Attribute value 1; Attribute 2: Attribute value 2; Attribute 3: Attribute value 3; }
Tip:
①The id name is the value of the id attribute in the HTML tag
②The id value of an element is unique and can only be applied to a specific element in the document.
3.3. Class selector
The class selector is used to describe the style of a group of elements. The class selector is different from the id selector. Class can be used in multiple elements.
grammar:
.Class name {Attribute 1: Attribute value 1; Attribute 2: Attribute value 2; Attribute 3: Attribute value 3; }
Tip:
The difference between id selector and class selector:
①The class selector can be reused multiple times
②The unique identifier of the id selector can only be used once and cannot be repeated.
In other words, the difference in the number of uses. In the same HTML document, the same id attribute value in multiple tags is not allowed.
Tip: Priority of selector
==id > class > tag==
3.4. Multi-category name selector
Multiple class names can be assigned to labels to achieve more choices.
<div class="font14 colorred">Ahn'Qiraj</div>
==Tip: Combination selector==
CSS Combination Selectors | Tutorial for Newbies
Four combination methods are provided in CSS3:
① Descendant selectors (separated by spaces)
The descendant selector is used to select descendant elements of an element.
grammar:
div p { background-color:yellow; }②Sub-element selector (separated by greater than sign)
Compared with descendant selectors, child selectors can only select elements that are children of an element.
div>p { background-color:yellow; }③Adjacent sibling selector (separated by plus sign) Adjacent sibling selector can select an element immediately after another element, and both have the same parent element. If you need to select an element immediately after another element, and the two elements have the same parent element, you can use the adjacent sibling selector (Adjacent sibling > selector).
div+p { background-color:yellow; }④Common sibling selectors (separated by dashes)
The subsequent sibling selector selects all adjacent sibling elements after the specified element.
div~p { background-color:yellow; }
4. Basic style properties of CSS
4.1. CSS Fonts
font-size font size, the unit is generally px (pixel)
font-family font style Microsoft Yahei Song Ti Kai Ti
4.2, CSS Text (text)
color text color
There are three setting methods:
①Hexadecimal value such as: #FF0000
②RGB value such as: RGB(255,0,0)
③The name of the color such as: red
text-align horizontal alignment
There are three setting methods:
①left left aligned (default)
②right right aligned
③center center alignment
text-decoration text decoration
| value | describe |
|---|---|
| none | default. Text that defines the standard. |
| underline | Defines a line under the text. Underscores are also included in our links. |
| overline | Defines a line on text. |
| line-through | Defines a line that passes under the text. |
4.3. Show and hide
display:none can hide an element, and the hidden element will not take up any space. In other words, not only is the element hidden, but the space originally occupied by the element will also disappear from the page layout.
grammar:
h1{display:none;}
4.4. Box size
width sets the width of the box, unit: px percentage
height sets the width of the box, unit: px percentage
grammar:
div{
width:400px;
height:200px;
}
4.5, border (box border)
CSS Border | Tutorial for beginners
grammar:
border : border-width || border-style || border-color
border-style often sets the style of the border
- none: There is no border, i.e. the width of all borders is ignored (default value)
- solid: The border is a single solid line (the most commonly used)
- dashed: the border is dotted
- dotted: The border is a dotted line
- double: The border is a double solid line
4.6, background (background)
①Background color
body {background-color:red;}
②Background image
body {background-image:url('bg.jpg');}