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

This article mainly introduces the HTML and css entry knowledge points of what the relevant knowledge, the content is detailed and easy to understand, the operation is simple and fast, has a certain reference value, I believe you read this HTML and css introduction knowledge points which articles will have a harvest, let's take a look at it.

First, web front-end technology

Question: can you follow the web standard when writing web pages? Do you know what web front-end technology has?

Web front-end technology is a collection of technologies developed by the W3C organization, including:

HTML-structural standard: responsible for web content (layout)

CSS-performance Standard, style Standard: beautification

JavaScript, abbreviated as js, behavior standard: responsible for behavior action, form validation, data exchange

Second, the development history of html

Html1.0-1993 drafted a draft in plain text format

Html2.0

Html3.0

Html4.0-consciousness: loose syntax: Aa-xhtml1.0 (x for strict, relatively strict: compatible with lower versions)-xhtml2.0 (idea: absolutely strict)-browser vendors object: we develop our own html for our own use-html5.0

In the end: html5.0 is still developed by W3C

Work: xhtml1.0 + html5.0

Vscode:

Tag syntax: content-double tags

-- single mark

Title: h2-h7

Paragraph p

Layout Block: div

Special effects text small picture: span

Picture label-img

Overview of HTML and basic structure of HTML documents

Overview of HTML

HTML is the acronym of HyperText Mark-up Language, meaning hypertext markup language, hypertext refers to hyperlinks, tags refer to tags, is a language used to make web pages, this language consists of tags, the file produced in this language saves a text file with a file extension of html or htm.

Basic structure of HTML document

The basic structure of a html is as follows:

Or:

The first line is the document declaration, the second line is the "tag and the last line" defines the html document as a whole, the "tag and" tag is its first layer of sub-elements, "" tag is responsible for some settings for the web page and define the title, settings include defining the coding format of the web page, outer chain css style files and JavaScript files, etc., the content of the settings will not be displayed on the web page, and the content of the title will be displayed in the title bar. Write what is displayed on the web page within ".

A html file is a web page. The html file is opened with an editor to display the text. You can edit it as text. If you open it with a browser, the browser will render the file into a web page according to the tag description.

Rapid creation of HTML documents

After you create a new html document, you can use keyboard shortcuts to quickly create html documents. Shortcut key:! + tab, or html:5+ tab

Getting started with HTML tags

Tag syntax:

To learn the html language is to learn the use of tags. There are more than 20 commonly used tags in html. If you learn the use of these tags, you will basically learn the use of HTML.

How to use the label:

Block element tags (line elements) and inline element tags (inline elements)

The tag appears as a square on the page. In addition to displaying as squares, they are generally divided into the following two categories:

Block element: a row is occupied by default in the layout, the width is equal to the width of the parent by default, and the elements after the block element need to be arranged in a new line.

Inline elements: elements can be arranged on a line, setting width and height is not valid, its width and height is supported by the content.

Commonly used block element tags

1. The title tag, which represents the title of the document, not only has the basic characteristics of block elements, but also contains the default margin and font size.

2. The paragraph tag, which represents a text paragraph in a document, not only has the basic properties of block elements, but also contains the default margin.

3. The generic block container tag, which represents a piece of content in a document, has the basic characteristics of block elements and has no other default styles.

Commonly used inline element tags

1. Hyperlink tag, linked to another web page, with basic features of inline elements, default text blue, underlined

2. General inline container tags with basic features of inline elements and no other default styles

3, picture tag, insert pictures in the web page, with the basic characteristics of inline elements, but it supports width and height settings.

Other commonly used function tags

1. Newline label

2. Html comments:

Comments can be inserted into the html documentation code. Comments are the description and interpretation of the code, and the contents of the comments are not displayed on the page. The way to insert comments in html code is:

Common html character entities

If you want to empty multiple spaces between the text, only one space will be displayed when rendering to a web page. If you want to display multiple spaces, you can use the character entity of the space. The code is as follows:

Displaying "" on a web page can be mistaken for tags, and you want to display "" on a web page with character entities that can use them, such as:

Principle of web page layout

Tags will be displayed in the web page into individual squares, first dividing the page into multiple rows according to the way of rows, and then dividing columns into rows, that is, nesting tags to represent columns in the tags that represent rows, as a whole, and then partial. Write the structure in the order of first big and then small.

Layout example

According to the principle of web page layout and the example above, write the html structure code of the web page.

Label semantics

We need to use semantic tags as much as possible in the layout. The purpose of using semantic tags is first of all to enable search engines to better understand the structure of web pages, to improve the ranking of websites in search (also known as SEO), and secondly to facilitate code reading and maintenance.

Tags with semantics

1. H2--h7: indicates the title

2. P: represents a paragraph

3. Img: indicates a picture

4. A: indicates a link

Tags without semantics

1. Div: indicates a piece of content

2. Span: indicates a piece of content within a line

So we need to use the appropriate tags according to the content displayed on the page, and we can optimize the previous code.

Overview of css

In order to enrich the style of web page elements and to separate the content and style of web pages, CSS was born. CSS is the acronym of Cascading Style Sheets, which means cascading style sheets. With most of the style tags in CSS,html are discarded, html is only responsible for the structure and content of the document, and the presentation is completely handed over to CSS,html documents to become more concise.

Basic syntax of css

Css is defined by:

Selector {attribute: value;}

The selector is the name that associates the style with the page element, and the attribute is the style property you want to set, each with one or more values. Use colons between attributes and values, semicolons between one attribute and value and the next, and the last semicolon can be omitted. Code example:

There are three ways that css can be introduced into a page:

1. Inline style: write the style directly on the tag through the style attribute of the tag.

2. Embedded: create embedded stylesheets on the web page through style tags.

3. Outer chain: link the external style file to the page through the link tag.

1. Tag selector

Tag selector, which has a wide range of influence, is generally used to make some general settings, or to be used in hierarchical selectors.

For example:

2. Class selector

Select elements through the class name, a class can be applied to multiple elements, an element can also use multiple classes, the application is flexible, reusable, is the most widely used selector in css.

For example:

3. Hierarchical selector

Mainly used in the tag nesting structure, hierarchical selector, is a combination of the above two selectors to write the selector, it can be used in combination with the tag selector to reduce naming, but also through the hierarchy, limit the scope of the style.

This is the end of the article on "what are the basic knowledge points of HTML and css". Thank you for reading! I believe you all have a certain understanding of "what are the basic knowledge points of HTML and css". If you want to learn more, you are welcome to follow the industry information channel.

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.