Shulou(Shulou.com)06/03 Report--

This article will explain in detail what are the basic knowledge points of HTML and CSS in front-end development. The editor thinks it is very practical, so I share it with you for reference. I hope you can get something after reading this article.

Front end

1 what is the front end

The front end is the front part of the website, which is displayed to users on browsers such as PC, mobile and other browsers. With the development of Internet technology, HTML5,CSS3, the application of front-end framework, cross-platform responsive web design can adapt to a variety of screen resolutions, perfect dynamic design, and bring users a very high user experience.

Front-end technology is generally divided into front-end design and front-end development, front-end design can be understood as the visual design of the website, front-end development is the front-end code implementation of the website, including basic HTML and CSS as well as JavaScript

2 the technology stack of front-end development

HTML

Hypertext markup language Hyper Text Markup Language

"Hypertext" means that the page can contain pictures, links, even music, programs and other non-text elements.

Responsible for completing the structure of the page

CSS

Cascading style sheet Cascading Style Sheet

Responsible for the style design, style and beauty of the page

JavaScript

Browser scripting language, you can write programs that run on browsers

A proper programming language

Responsible for writing page effects, calling browser's API (BOM), operating to change page content (DOM), getting data from the back end (Ajax), rendering pages, etc.

JQuery is a library of JavaScript

Vue, Angular, React and so on are JavaScript frameworks.

HTML5 Foundation

1.HTML

1.1 what is HTML

HTML is used to make a web markup language.

HTML is the abbreviation of Hypertext Markup Language, that is, Hypertext markup language.

HTML is a markup language that does not need to be compiled and is directly executed in a browser.

A HTML file is a text file that contains some HTML elements, tags, etc.

HTML files must use .html or .html to ask for the file name suffix

HTML is insensitive to size. Lowercase is recommended.

HTML is maintained by the World wide Web Consortium.

HTML is the key to the world of WEB technology

1.2 Development History

HTML started with version 2.0. in fact, there is no official specification of 1.0. it was released in June 1993 as a working draft of the Internet Engineering working Group (IETF) (not a standard). HTML 2.0 was released as RFC 1866 in November 1995 and was declared obsolete after RFC 2854 was released in June 2000.

HTML 3.2 Murray-January 14, 1997, W3C recommendation

HTML 4.0 Murray-December 18, 1997, W3C recommendation

HTML 4.01 (minor improvements)-December 24, 1999, W3C recommendation

HTML5-October 28th, 2014, W3C recommendation (we are now using HTML5)

1.3Origin of HTML5

The HTML5 draft, formerly known as Web Applications 1.0, was proposed by WHATWG in 2004 and accepted by W3C in 2007, and a new HTML working group was established.

The first formal draft of HTML 5 was published on 22 January 2008. HTML5 is still in the process of improvement. However, most modern browsers already have some HTML5 support.

On December 17, 2012, the World wide Web Consortium (W3C) officially announced that the HTML5 specification, which has condensed a large number of network workers, has been formally finalized. According to the W3C statement, "HTML5 is the cornerstone of the open Web network platform."

On May 6, 2013, the official draft of HTML 5.1 was published. The specification defines the fifth major version, with the first revision of the core language of the World wide Web: hypertext markup language (HTML). In this release, new features are being introduced to help authors of Web applications strive to improve the interoperability of new elements.

On October 29, 2014, the World wide Web Alliance announced that the standard specification had finally been developed after nearly eight years of hard work.

1.4 benefits of HTML5

1. Improve usability and user-friendly experience

2. There are several new tags that will help developers define important content

3. It can bring more multimedia elements (video and audio) to the site.

4. It can be a good substitute for FLASH and Silverlight

5. When it comes to crawling and indexing websites, it is very friendly to SEO (search engine).

6. Will be widely used in mobile applications and games

7. Good portability.

Compatibility of 1.5 HTML5

Internet Explorer 9 and above

Chrome, Safari, opera, Firefox and various domestic browsers with wekkit as the core

2 basic syntax of HTML

2.1 HTML tags

* tag is the most basic unit and an important part of HTML.

* usually use parentheses with two corners:

* tags are closed (two forms: paired and unpaired)

* double tags (in pairs): you can add content such as: `Content 'display starts and ends

* single tags (not in pairs): the left slash in the two single tags, such as ``,``, can be omitted.

* tags can be uppercase or lowercase. Lowercase is recommended.

* for HTML tags, the most important thing is semantics

2.2 HTML tag attributes

The HTML attribute generally appears in the opening tag of the HTML and is part of the HTML tag.

Tags can have attributes, which contain additional information. The value of the attribute must be in double quotes.

Tags can have multiple attributes.

A property appears in pairs of a property name and a value.

The syntax format is as follows:

Single label

Double label

2.3 HTML code format

Any carriage return or spaces in the source code does not work, the general tag nesting indentation so when writing HTML code, you can use carriage return or spaces for code typesetting, which can make the code clear, but also to facilitate teamwork. Strict indentation rules must be maintained, subject to the Tab key.

2.4 HTML comments

You can write single-line comments or multiple lines in it.

In the notes! Symbols and-- must be connected without spaces.

2.5 HTML entity

Note: used to represent special symbols, similar to escape characters

& nbsq; represents a space

Import a css document, or specify the properties of the web page icon src, type, rel

Import css from a file

You can directly use the self-defined css in the head to modify.

H2 {

Color: red

}

Tags are used to define client script, such as JavaScript. The script element can either contain script statements or point to an external script file through the src attribute.

Alert ('OK')

3.3 format typesetting label

1x 6 title

Paragraph

Output as is

New line

Separation

There is no semantic label

3.4 text label

Emphasize the performance of italics

Emphasize that it is bold.

The addition of H5 indicates that it is selected

What is the power of the superscript

Subscript chemical element water

The content added is underlined.

A line is drawn in the middle of the deleted content

/ add Pinyin H5

Hello, nihao. Add the display of nihao on top of you.

Basic syntax of CSS

Use CSS

Link introduces external CSS files

Write in html

Use the style attribute of the html element

Format

Selector {

CSS attribute: valu

CSS attribute: valu

}

Selector {attribute: value; attribute: value}

Annotation

/ * /

CSS unit of length

Px pixel

Multiple of the default size of em

Percentage default size referenc

Cm

Mm

Pt

CSS color unit

ColorName: red/green/bue/purple/orange/yellow/pink/skyblue

Rgb Digital rgb (34, 45, 23) rgb (20%, 57%, 100%)

Hexadecimal # abcdef # f90 # ccc

5 CSS selector

# tag name Selector

TagName {

}

# Class name

.className {

}

# ID selector

# idName {

}

# Global Selector

* {

}

# combination descendant elements

Selector selector .list li

# combine child elements

Selector > selector .list > li

# Group

Selector, selector.

# multiple conditions. Item.frist _ item

P.item

6 selector priority

ID > CLASS > tagName > *

The number of combined selectors is compared by the number of priorities.

7 CSS attributes are commonly used

Font

Font-family font family font-family: "Arial", "Helvetica", "Arial", sans-serif; or serif font serif

Font-size font size 10px 1.3em is fine.

Font-weight normal/bold font width default and bold

Font-style normal/italic font style default italic

Font-variant normal/small-caps font deformation defaults to small uppercase letters

Font compound attribute

Font: [weight | style | variant] size family

Color

Color text Color

Text

Word-spacing word space

Letter-spacing letter space 1px 2em two-word space

Text-align: left / center / right text horizontal alignment left, middle left

Vertical-align: baseline / middle.... Vertical alignment defaults to pictures and text in the middle

Left center if the height of line-height line is the same as the height of row height

Text-decoration: none/overline/underline/line-through text decoration default overline, underline, strikeout

Text-indent: indent the first line of 2em text

Word-wrap: the word break-word is too long or url can be wrapped

Alias CSS3 for overflow-wrap word-wrap

White-space pre pre-wrap leaves the input as it is when the text touches the boundary to wrap

This is the end of this article on "what are the basic knowledge points of HTML and CSS in front-end development?" I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it out for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.