HTML basics

Front-end development introduction

1. What is front-end development?

Create front-end pages such as web pages or apps to present to users
Core HTML, CSS, JS and derivative technology framework
Application scenarios PC, APP, applet, game, server

2. Learning route

HTML syntax, semantics, SEO basis
CSS syntax, page layout, media queries, CSS3
CSS advanced preprocessor, framework, architecture specifications
JS Syntax Data Structure WebAPI ES6+ Modular Tyscript
Build tool npm
Framework VUE React Angular
Continue to learn Node.js server rendering

3. Principles of the Internet

Front-end three-layer HTML (structure), CSS (style), JS (behavior)
Multimedia content: pictures, videos, audios, hyperlinks
Internet operation process

Client—>Send HTTL request—>Server

Server—>HTTL response---->Client

Server : Including processor, hard disk, memory system bus, etc., with high requirements for business processing, stability, reliability, and security, and storing data in response to requests and processing
( cloud server : simple, efficient, safe, reliable, and scalable computing service )

Client : user interruption, most commonly used app browser (Google, ie, Firefox)

HTTP protocol : Hypertext transfer protocol, application layer communication protocol between client and WEB server

4. Plain text format (HTML, CSS, JS)

Only save text, not other formats or non-text content, which is conducive to network transmission
You can directly change the extension save format
Plain text format files can use any plain text editor

5. HTML theory

concept

Hypertext is used to link pictures, audio, video, and program text
A grammatical format written to the browser to achieve special semantics or display content

Features

Markers add semantics to ordinary text, describe hypertext content, and build the basic structure of web pages
Semanticization: Add special semantic tags to facilitate code reading and maintenance, which is conducive to web crawlers and improves SEO search engine optimization

detail

All contents of HTML element from start tag to end tag, including start tag, element content, end tag
Label level
Container level: Any content can be stored inside
Text level: Only text can be written
The white space outside the label is ignored, and the white space in the element content will be folded and displayed
Attributes of the label: attribute name: the format of "attribute value", multiples are separated by spaces

skeleton

<html><head><titile></title></head></html>

Titile page title, keywords as engine keywords, SEO search optimization, as the default page title of favorites, add titile content to streamline the page, extract the page keywords
body to store page display content

DTD, namespace, character set

Reference standard for DTD parsing
xml extensible markup language is used to transfer and store data, lang is used to set the namespace
Character set, which defines the character encoding used by the current web page, does not require speed to use utf-8, and requires speed to use gbk

6. Specific label

Title tag

 <h1> </h1>

Add semantics to the internal elements of the label element, and the title tags cannot be nested
The weight of the h1 title is the highest. Generally, when we put our most important content, only one h1 can appear

Paragraph tag

<p></p>      <br/>

The P tag adds a complete semantics to the content, and is not responsible for the style of automatic content wrapping
The mandatory newline character of the br tag is an empty element

Text formatting

The label is used to bold the b label
Tags are used for italicized i tags
Emphasize text, with italicized em tags
Define the underscore u tag
Insert underscore ins tag
~~Strikethrough del tag~~

Image tag

<img></img> 支持格式png、jpg、jif

src attribute: image link path
relative path: triggered from the html file itself, searched according to relative position, there are same level, sublevel, and superior search respectively.
Absolute path: search from the root directory of the computer drive letter, usually the address of the picture
Width and height display, title: text display when the mouse is placed on the picture, alt: picture prompt text cannot be displayed normally

Audio tag

<audio></audio>  支持格式mp3、ogg、wav controls=“controls”

Video tag

<video></video>支持格式mp4、ogg、webm

hyperlink

<a></a>锚

url jump to page
target: define where to jump to the linked document, _self default value (in the current window) _blank: new window

title: text reminder when the mouse is on

Anchor jump

Anchor jump in the page

  <h2 id="html"></h2> ——<a href="#html"></a>
  <a name="html"></a> ——<a href="#html"></a>

Specify jump outside the page

Set anchor point <a href="jump page"#specific location> link to anchor point

List

Unordered list

<ul><li></li></ul>

Note: ul can only nest li, li cannot exist alone, but ul can be nested

Ordered list

<ol><li></li></ol>

indicates the sequence number

Definition list

<dl><dt>关键词</dt><dd>描述</dd></dl>
<dd>是用来描述最近的<dt>,为容量级标签，内部可以放东西

It is best to add only one set of dt and dd to each dl for easy management

Layout label

div

Can put any content, classic container-level label, relatively large range

span

In small areas, assist in local adjustments without changing the overall effect

Form basis

<table><tr><td>/<th></th>/</tr></table>

It is used to set the header, the default CSS style

Layout display

Cell merge

rowspan: merge across rows, merge up and down, and finally give an attribute value to indicate the number of rows and columns spanned
colspan: row and column merge, left and right merge

Tips: When dividing the row of the cell, the top will be aligned to the same row

Form

Form field

It is equivalent to a container, which is used to hold all the form controls and prompt information, through which it defines the url address of the program used to process the form data, and transmits the data to the background server

Specify the method and location of data submission through corresponding attributes
action: url specifies the url address of the server that receives and processes data
method: get/post is used to set the submission method of form data
name: custom name, specifies the name of the form

Prompt information

Descriptive text, prompting the user to perform specific filling operations

<input>

Different type attribute values indicate different input content

text single line text value, value value is used to set the default display content

<input type="text"> value="请输入">

The password field will be masked

<input type="password">

radio is a single selection box (the mutually exclusive relationship sets the same name attribute), checked is used to set the default selection

<input type="radio" name="sex" checked="男">男

checkbox checkbox (grouping uses the same name attribute)

<input type="checkbox" name="hobby">绘画

The file attribute defines the file upload button, select the local file upload server, multiple is used to set up multiple uploads at once

<input type="file" multiple="multiple"/>

Form control

Form function items, single line text input, password input, buttons

Button

button: Normal button, without any special function

<input type="button" value="普通按钮">

reset: reset button, clear the content in the form, restore the default

submit: submit button, submit the data to the backend server specified by the form, and clear the default

image: as a picture

Text field, you can enter multiple lines of text

Row attribute value, display the maximum number of rows, cols column attribute value, display the maximum number of bytes per row (1 Chinese character has 2 bytes)

Drop-down menu

<select><option></option></select>

Default selection, add selected attribute to option, the attribute value is itself
The optgroup label groups the options, between the two, label="group name" for grouping, no selection is allowed

label

(The distance is far away) Set the id attribute to the form, write the binding content into the label tag, and set the for attribute, the attribute value is the id attribute value
(Closer distance), directly write the content of the input label into the label, you can directly bind

Character entity

There are specific corresponding options in W3C
Start with & and end with ;, generally use entity name

7. Summary of wrong questions

The programmer uploads the webpage source file to the server for storage
HTML elements are everything from the start tag to the end tag, including the start tag, element tag, and end tag
The paragraph tag P is a double tag and a text tag, but pictures can be placed inside

More exciting:
CSS basic review

Basic review (1) | HTML