1. What is HTML, CSS?
Do website programming language.
The browser looks after the code analysis is that we see the site, how to see the site of the original code it? By right mouse button and choose View Page Source.
How to write code? Where is it written?
A website is composed of N multiple pages. Each web page .html file
TV series, 40 episodes. .mp4 file
2. VSCode editor?
VS code Download: https: //code.visualstudio.com/
How to install plug-ins? Language packs, open in browser view in borwser
Learn to use the basic editor?
Settings: File -> Preferences -> Settings (size, whether or not wrap word wrap)
Create a file, create folders, rename, and delete, search
ctrl + s: Save
ctrl + a: Select
ctrl + x, ctrl + c, ctrl + v: Cut, Copy, Paste
ctrl + z, ctrl + y: revocation proceeds
shift + end: from the beginning, select one line
shift + home : select a line from the end of
shift + alt + ↓: to quickly copy a line
alt + ↑ or ↓: fast-moving line
tab: backward indent
tab + shift: Indent forward
Multi-Cursor: alt + mouse button
next element is selected from the same: ctrl + d
3. chrome browser?
Chrome Download: https://www.google.cn/intl/zh-CN/chrome/
Baidu browser market share statistics: https://tongji.baidu.com/data/browser chrome: 68.88%
4. In-depth understanding of web development?
UI Designer: Design draft
web front-end development engineers (H5 Development)
design draft -> Code
data in the database -> page to display
HTML + CSS
HTML: Structure
CSS: Style
web back-end development engineer
5. web three core technology?
HTML
CSS
JavaScript
6. HTML basic structure and properties?
HTML: HTML
Hypertext: text + non-text content (images, video, audio, etc.)
Tag: <word>
Language: Programming language
Also known as marker tags:
<header>
<footer>
wording of two types:
a single-label <header>
ditag <header> </ header>
Create a label shortcut keys: + tab key words -> <word>
Tag is arranged vertically, may be combined nested.
Common HTML tags: http: //www.html5star.com/manual/html5label-meaning/
Attribute label: to modify the label, set some of the features of the current label.
<Tag attribute = "value" attribute = 2 "value 2">
7. HTML initial code?
Each file has a .html code is called the initial code to standardize the wording of complex html file.
! + Tab key: to quickly create the initial code html
Document declaration <DOCTYPE html!>: Tells the browser which is a html file
<html lang = "en"> outermost tag html file: Code wrapped all html tags lang = "en" representation is a website in English lang = "zh-CN" represents a Chinese website
<head>
<meta charset = "UTF-8"> meta information: some auxiliary information charset = "UTF-8" international Numbering write pages, so pages garbled does not appear in the case
<title> Document </ title> provided the title page
</ head>
<body>
display region web content
</ body>
</ HTML>
8. HTML comments?
Writing: <! - content annotation -> less, you can only see the content of the comments in the code in the browser seen.
Meaning:
1. temporarily unused code comments up for later use.
2. prompt developers.
Fast add comments and delete comments:
1. Ctrl + /
2. the Shift + alt + A
9. The title and paragraphs?
Title -> ditag: <h1> </ h1> ... <h6> </ h6>
In one glance, h1 title of the most important, and a .html file can only appear once h1 tag.
h5, h6 tags are not often used in Web pages.
Paragraph -> ditag: <p> </ p>
10. The modified text label?
Stressed -> ditag: <strong> </ strong>, <em> </ em>
Difference:
1. writing and display of results there is a difference, a bold, italic
2. strong emphasis on stronger, em the emphatic weaker.
下标 : <sub></sub>
上标 : <sup></sup>
Delete text: <del> </ del>
Insert text: <ins> </ ins>
Note: In general, delete and insert text with text is used.
11. The image tag?
img -> single-label
src: Address introduction of the picture.
alt: When the picture there is a problem, it can display the text for some friendly tips.
title: prompt
width, height: size of the picture
12. The introduction of the path?
Relative path
absolute path
13. Links tab?
a -> double label </a> <a>
href attribute: Link Address
target property: You can change the link to open the way, by default: _self opens a new page in the current window opens _blank
base -> Single Tags: action is to change the default behavior of the link.
14. The anchor?
Two approaches
1. Number # + id attribute
2. Number # + name attribute (note name attribute is applied to a tag)
15. Special characters?
+ 1. & character
2. resolve conflicts ah angle brackets around added to achieve a plurality of spaces
3. & lt; & gt; & nbsp;
16. The list of labels?
1. unordered list -> ul li nested meet specifications
2. ordered list -> ol li generally use less, can be achieved by unordered list
3. Define a listing -> dl dt dd need to add a title list entry and describing the contents of the title
NOTE: between lists can be nested with each other, forming a multi-level list.
17. The table tags?
table、tr、th、td、caption 等
Note: Before there is a nested relationship, to meet the specifications nest.
Semantic tags: tHead, tBody, tFood
Note: In a table in, tBody can appear multiple times, but tHead, tFood can appear only once.
align : left、center、right
valign : top、middle、bottom
18. The form tag?
form, the INPUT, the TextArea, the SELECT, label ..
the INPUT (single tag) tag has a type attribute to determine what controls.
There are some common attributes:
the checked, Disabled, name, for ...
19. div and span?
div: a region dividing block made of
span: for inline text modification
20. CSS basic grammar?
Selector {Attribute 1: 1 value; Attribute 2: 2 value}
width: Width
height: high
background-color: the background color
Unit length:
1. PX -> pixel
2% -> the percentage of
the outer container 1 -> 600px container currently 50% -> 300px by
the outer container 2 -> 400px current container 50% -> 200px
21. CSS style manner of introduction?
1. inline styles within the
style attribute
2. Internal style
style tags
differences:
internal style code can be multiplexed composite W3C specification standards, so that the structure and style separately.
3. External style
introduced a separate CSS file, name.css
Link tag is introduced by external resources, rel attribute specifies the relationship with the resource page, address href attribute of the resource.
@Import external style introduced by way of (in this way has many problems, not recommended)
22. CSS in color representation?
1. The word notation: red blue green yellow ...
2. hexadecimal notation: #FFFFFF # 000000
0 2. 3. 1. 4. 5. 6. 7. 8. 9
0. 1
0 2. 3. 1. 4. 5. 6. 7. 8. 9 abcdef
3. rgb primary colors notation: rgb (255,255,255);
ranges from 0 to 255
Get color tools:
extraction of color Download: HTTPS: //www.baidufe.com/fehelper
Photoshop Tools