A must-read, a systematic introduction to the basic knowledge points of front-end HTML and CSS

Front-end

1 What is the front-end

The front-end is the front-end part of the website, which runs on PC, mobile and other browsers and displays the web pages for users to browse. With the development of Internet technology, the application of HTML5, CSS3, and front-end frameworks, cross-platform responsive web design can adapt to various screen resolutions, and perfect dynamic design can 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 generally be understood as the visual design of the website, and front-end development is the front-end code implementation of the website, including basic HTML, CSS and JavaScript

2 Technology stack for front-end development

HTML

• Hyper Text Markup Language

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

• Responsible for completing the structure of the page

CSS

• 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 the browser

• Proper programming language

• Responsible for writing page special effects, calling the browser's API (BOM), operating to change the page content (DOM), obtaining data from the backend (Ajax), rendering the page, etc.

• jQuery is a library of JavaScript

• Vue, Angular, React, etc. are JavaScript frameworks

HTML5 basics

1.HTML

1.1 What is HTML

• HTML is a markup language used to make web pages

• ##HTML is Hypertext Markup The English abbreviation of Language, that is, Hypertext Markup Language

• HTML language is a markup language that does not require compilation and can be executed directly with the browser

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

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

• HTML is not size sensitive, it is recommended to use lowercase

• HTML is maintained by W3C (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 for 1.0. Released as an Internet Engineering Task Force (IETF) working draft (not a standard) in June 1993 HTML 2.0 - Released as RFC 1866 in November 1995, declared obsolete after the release of RFC 2854 in June 2000

• HTML 3.2——January 14, 1997, W3C Recommendation

• HTML 4.0——December 18, 1997, W3C Recommendation

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

• HTML 5 - October 28, 2014 Japan, W3C recommended standard (we are now using HTML5)

1.3 The origin of HTML5

• The predecessor of the HTML5 draft was called Web Applications 1.0 , proposed by WHATWG in 2004, accepted by W3C in 2007, and a new HTML working team was established.

• The first official draft of HTML 5 was released on January 22, 2008. HTML5 is still a work in progress. 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 the efforts of a large number of network workers, has been officially finalized. According to the W3C's speech: "HTML5 is the cornerstone of the open Web network platform."

• On May 6, 2013, the official draft of HTML 5.1 was announced. The specification defines the fifth major version, the first to revise the core language of the World Wide Web: Hypertext Markup Language (HTML). In this version, new features are continuously introduced to help web application authors in an effort to improve interoperability of new elements.

• On October 29, 2014, the World Wide Web Consortium announced that after nearly 8 years of hard work, the standard specification was finally completed.

1.4 Advantages of HTML5

• 1. Improve usability and user-friendly experience;

• 2. There are several new tags, which will help developers define important content;

• 3. Can bring more multimedia elements (video and audio) to the site );

• 4. Can be a good replacement for FLASH and Silverlight;

• 5. When it comes to website crawling and indexing , very friendly to SEO (search engines);

• 6, will be widely used in mobile applications and games;

• 7, can Good portability.

1.5 HTML5 compatibility

• Internet Explorer 9 and above

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

2 Basic HTML syntax

2.1 HTML tag

* Tag is HTML The most basic unit and important component

* usually uses two corner brackets: < and >

* Labels are closed (two forms: paired Paired with or not)

* 双标签（成对）： <标签名> 可以加内容 如：`

内容 ` 显示开始结束

* 单标签（不成对）： <标签名>两个单标签内不可加内容 如： `
` , `

---

` 里面的左斜杠可以省略

* 标签大小写都可以，推荐使用小写

* 对与HTML标签来将，最重要的是语义

2.2 HTML标签属性

• HTML属性一般都出现在HTML的开始标签中, 是HTML标签的一部分。

• 标签可以有属性,它包含了额外的信息.属性的值一定要在双引号中。

• 标签可以拥有多个属性。

• 属性由属性名和值成对出现。

• 语法格式如下：

<标签名 属性名1="属性值" 属性名2="属性值" ... 属性名n="属性值">

单标签

双标签

2.3 HTML代码格式

任何回车或空格在源代码中都是不起作用，一般标签嵌套用缩进所以在编写HTML代码时，都可以使用回车或者空格进行代码排版，这样可以使代码清晰，也便于团队合作。必须保持严格的缩进规则，以Tab键为准。

2.4 HTML 注释

可以在里面写单行注释，也可以写多行

注释里的！符号和-- 要连起来不能空格

2.5 HTML实体

注意：用来表示特殊符号，跟转义字符有像

• &nbsq; 表示一个空格

• <表示特殊符号 <

• > 表示符号 <

• ©表示版权符号 ©上海公安 版权号333333455

• ¥表示人民币符号 ¥1000

• &表示实体本身& 如果是空格则就显示& 如果是符号 则&符号

3 HTML常用标签

文档声明

3.1 主体结构

• 此元素可告知浏览器其自身是一个 HTML 文档。

• 
  
  用于定义文档的头部，它是所有头部元素的容器,对文件的描述。中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。

• 代表文件内容,定义文档的主体

3.2HEAD头部标签

• 双标签内写标题，网页标题

• 标签为页面上的所有链接规定默认地址或默认目标

• 写在最上面，因为下面有输入字符，指定网页的元信息可指定字符编码，关键字，描述信息属性：charset , name ,content

指定编码

• 导入css 文档，或者指定的网页图标 属性 src ， type ，rel

从文件导入css

• 标签用于定义客户端脚本，比如 JavaScript。script 元素既可以包含脚本语句，也可以通过 src 属性指向外部脚本文件。

3.3 Formatting tags

• 1~6 Title

• < /p> Paragraph

• Output as is

• 
  Line break

• ---

  Delimited

• Tags without any semantics

##3.4 Text tag

• Emphasis is shown in italics

• Emphasis is shown For bold

• H5 is added to indicate that it is selected

• Subscript chemical element water

• < ;/ins> The added content is underlined

• The deleted content is underlined

• /Pinyin H5 added

## Hellonihao< ;/rt>Add nihao’s display above Hello

CSS basic syntax

Use CSS

link to introduce external CSS file
Write in html
Use the style attribute of the html element
Format

Selector{

CSS property: value;

CSS property: value;

}

Selector{Attribute:value;Attribute:value}

Comments

/* */

CSS length unit

px pixels

em Multiples of the default size

Percent Default size refers to

cm

mm

pt

CSS color unit

colorName： red/green/bue/purple/orange/yellow/pink/skyblue

rgb number rgb(34,45,23) rgb(20%, 57%, 100%)

16 hexadecimal #abcdef #f90 #ccc

5 CSS selector

#tag name selector

tagName {

}

# Class Name

.className {

}

#ID Selector

#idName {

}

# Global selector

* {

}

# Combined descendant elements

Selector Selector .list li

# Combination of child elements

Selector>Selector .list>li

# Group

Selector, selector, selector h1, h2,p,.list

# Multiple conditions .item.frist_item

p.item

6 Selector priority

ID > CLASS > ; tagName > ##font-family font-family: "Arial", "Helvetica", "宋体", sans-serif; or serif font serif

font-size font size 10px 1.3em can be used

font-weight normal/bold font width default and bold

• ##font-style normal/italic font style default italic

• font-variant normal/small-caps font variant default small caps

• font compound attribute

• font:[weight | style | variant] size family
  Color

• color Text color

• Text

word-spacing word space

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

• text-align: left / center /right The text is aligned horizontally to the left, middle and left

vertical-align: baseline / middle .... The default vertical alignment method for images and text is in the middle

• line-height When the line height is one line, the height is the same as the line height. When the height is the same, it is left centered

• text-decoration: none/overline/underline/line-through Text decoration defaults to overline and underline strikethrough

• text-indent: 2em first line of text indent

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

• overflow-wrap alias of word-wrap CSS3

• white-space pre pre-wrap Keep the input as it is Line breaks when text hits the boundary

• Related articles:

Front-end basics (zero)CSS basics

• ##Front-end Study notes for newbies - basic knowledge points of html/css/js

• Related videos:

HTML and CSS basic introductory video tutorial-free online video tutorial

The above is the detailed content of A must-read, a systematic introduction to the basic knowledge points of front-end HTML and CSS. For more information, please follow other related articles on the PHP Chinese website!