Basic concepts of web pages

  • What is a website?

A website is a collection of web pages.

  • What is a web page

Web pages are made up of HTML, CSS, and javascript

  • What is HTML

HTML is a hypertext markup language, not a programming language.

  • Web page formation

The front-end engineer writes the code, and the browser interprets and renders the code

Common browsers and kernels

  • Common Browsers

1. Google Chrome (V8)

2. Firefox

3.IE/Edge (Microsoft)

Safari (MAC)/iPhone/iPAD

Opera for Auburn

  • What does the browser kernel do
The browser The kernel note
chrome / Opera Blink Blink is actually an offshoot of Webkit
IE Trident IE, Cheetah security, 360 speed browser, Baidu browser
FireFox Gecko Firefox kernel
Safari webkit Apple Browser kernel

The HTML element

HTML is made up of a series of elements,

HTML syntax specification

  • What are the features of double label and single label?

    1. Double tags come in pairs, beginning and ending. For example:
    2. A single label does not require an end label. For example:

  • The relationship of the tag is

    1. Inclusive relations: father and son
    2. Juxtaposition: brother

Front-end development tools

  • Web development tools commonly used
The development tools The characteristics of
Dreamweaver Antique, once one of the three musketeers of the web
Sublime Fast speed, small size, plug-in, plug-in installation complex
Webstrom Powerful, paid, slow
HBuilder X Vue projects can be packaged as apps
The Visual Studio Code do Front end artifact, fast speed, small size, many plug-ins

DOCTYPE and lang and the role of character sets

  • tag

    <! DOCTYPE HTML > is used to tell the browser that this is an HTML page

    Not an HTML tag, but a declaration tag for the document type

  • What does lang do?

    Lang is used to define the current document display language;

    En English;

    Useful – CN in Chinese.

  • Which charset character set should be used?

    Charset = “utf-8”;

    Web pages must be written, otherwise there may be garbled;

    Utf-8 (Universal code) previously common character set;

HTML tags

  • <img> attribute value and effect

    attribute Attribute values role
    src Image path Specifies the path to the image file
    ait The text Replace text and display images when they are not displayed
    The title text The text Prompt text, mouse hover time display

  • What is the role of anchor links? Grammar is a href = "# id"

    1. Href = “#id”
    2. The anchor link can realize the jump within the page
    3. Href = “#id” href= “#id”

  • Several special symbols

    1. Space & NBSP: no break space
    2. > : greater than than
    3. Less than: <: less than
    4. Emsp: is a full-angle Chinese space that is sometimes useful in interface layout 🙂.

The appendix

Modern society is more important for knowledge retrieval ability, to be good at using tools rather than rote memorization.

Skeleton label

Tag name instructions
html Root TAB, the largest TAB on the page
head Set the page information, such as the page title and the information to tell the browser or crawler
title The title of the web page, displayed on the browser TAB
body Content tags, write content

Commonly used tags

The serial number Tag name instructions
1 h1~ h6 The title tag is a single line
2 p Paragraph tags have an exclusive line with space between paragraphs
3 br Line breaks are straight line breaks without significant spacing
4 Strong or b Bold characters, em is more recommended (strong semantics)
5 Em, or i. Slant, more recommended de L (more semantic)
6 Del or s Delete line is more recommended for Ins (more semantic)
7 Ins or u U is preferred for underlining (stronger language)
8 div Big box, all on one line
9 span Small box, can display more than one line
10 img The image must have the SRC attribute
11 a Hyperlinks must have the href attribute
12 ul Unordered list
13 ol An ordered list
14 li Ul, OL list item
15 hr Dividing line

Table label

The serial number The label describe
1 table form
2 thead Table header
3 tbody Table body
4 th The cells in the table header
5 td Cells in the body of the table
6 tr Rows in a table

Table properties

The property name Attribute values describe
align Left, center, right alignment
border Degree pixel value or “” Table default rimless box line
cellspacing Pixel values Spacing between cells, 2 pixels by default
cellpadding Pixel values Distance between content and border, default 1 pixel
rowspan value An inter-bank mergers
colsspan value Across the columns

The form tag

The serial number The label describe
1 form The form
2 input Input box
3 buttom button
4 lable Common works with input forms to increase click range
5 textarea Multi-line plain text input box
6 datalist Data list
7 optgroup Option group
8 select Select menu
9 option Multiple choice menu 
<label for="genderMale">Small handsome</label>
<input type="radio" name="gender" value="male" id="genderMale" />
Copy the code

The attribute of the input

attribute value describe
type Type name describe
name text The name used to distinguish the control
value text Value to record or set the value of the control
checked checked A radio or check box is selected by default
id text Control identifier, used in conjunction with lab tags
maxlength number The maximum length allowed in the input box
required required If the form has this property, the content cannot be empty
placeholder Tooltip text Form prompt message, existing content will not be displayed
autofocus autofocus Automatic aggregation attribute
autocomplete on /off
multiple multiple You can select multiple file submissions

Input Common attribute value of tag type

type Attribute values describe
The input text Enter text
The input password Enter the password
choose radio Radio button, select one or more
choose checkbox Check box (tick)
I’m gonna go ahead and select file file Upload a file
Click on the buttom button
Click on the image button
Form action submit Commit, which sends the data to the server
Form action reset Reset clears all data on the form
The input number Limits the number type that the user must enter
The input tel Mobile phone number
The input search The search box
The input email Restrict the E-mail type that users must enter
The input url Restrict the user to entering the url type
choose date Restrict the user to entering a date type
choose time Limit the time type that the user must enter
choose month Restricted users must enter a month type
choose week Restricted users must enter a week type
choose color Pop-up window to select color

The list of

The list of The label instructions
An ordered list ol Unordered lists are only allowed to contain multiple LI tags
Unordered list ul An ordered list is only allowed to contain multiple Li tags
Custom list dl The custom list only contains DT, dd is the eldest dt, dd is the younger dd, so DD must follow dt

Content Tags (semantic tags added in H5)

The serial number The label describe
1 header Header tags usually contain a set of introductory or navigational utility elements
2 nav Navigation TAB that provides navigation links in the current document or other documents
3 article Content tags that represent independent structures within a document, page, application, or website
4 section Defines an area of the document, without more specific semantics
5 aside A sidebar tag that represents a section that has little to do with the rest of the page
6 footer Tail tag, representing footer

Media label

The serial number The label describe
1 audio audio
2 video video

VsCode shortcuts

shortcuts role
ctrl +n The new file
ctrl+ s Save the file
ctrl + z undo
ctrl+shift+z To resume the cancellation
CTRL + plus/minus Zoom in/out
ctrl + c / v Copy and paste a line (no text selected)
ctrl + x Delete a line (cannot select text)
Alt + ↑ / ↓ Move one or more lines up or down
Alt + Shift + ↑ / ↓ Copy one or more rows up and down
ctrl + / annotation
alt + z Word wrap

Chrome shortcuts

shortcuts role
F5 Refresh the page
CTRL + plus/minus Zoom in/out
F12 Open/close the console
ctrl +alt +i Open/close the console
ctrl+shift+c Open the console and launch the selected element mode
ctrl + alt + j Open the Console and open the Console window

“Likes, favorites and comments”

❤️ follow + like + favorites + comments + forward ❤️, encourage the author to create a better article, thank 🙏 everyone.