Front-end learning the basics (a) -HTML basics

I recently learning content related to Java back-end, it is necessary to look at the contents of the front end. This article is to record some feel important and difficult to understand the content and some of their own ideas in the learning process. Because he is learning the backend, so much of the content of the front end does not do in-depth research, just to understand it. This article does not fully cover the knowledge points, some not so professional but also described, for reference only, thank you.

A front-end overview

(1) defines a front end

Before learning, we must first know what the front Yes.

"Front end" is part interact directly with the user, including all visual content that you contact when browsing the web - from font to color, as well as drop-down menu and sidebar. These visual contents are parsed by the browser, treatment, rendering the relevant HTML, comes after presenting CSS, Javascript files.

https://jingyan.baidu.com/article/0320e2c13be9381b87507b04.html

This simply means that the front end is something users can see (like the user interface), while the rear end is generally not open to users, developers design architecture is, like the management of data.

(2) the front end of the basic technology is primarily concerned

Three languages: HTMl, CSS, and JavaScript

Common Framework: jQuery, vue, react, angular

This is mainly to learn some basic knowledge of these three languages, frameworks and the like fall do not worry. As development tools (editors) touches on personal preference, and not the back end of the tool are less stringent, we recommended sublime txt and webstorm. And beginners just start with some simple text editor (Notepad that comes with the computer can be) just fine, do not have to configure the software, very convenient.

Learning website is strongly recommended w3school , to go along with the site above, entry is no problem.

Two, HTML learning (the basics)

(1) HTML Overview

HTML is a language used to describe web pages.

Refers to an HTML hypertext markup language ( H yper T EXT M arkup L anguage)

HTML is not a programming language, but a markup language (markup language)

Markup Language is a set of markup tags (markup tag)

HTML uses markup tags to describe web pages

HTML tags

Commonly referred to as HTML markup tags HTML tags (HTML tag).

HTML tags by angle brackets enclosing keywords, such as

HTML tags are usually in pairs , for example , and

The label on the label is the first start tag , the second tag is the end tag

Start and end tags are also called opening tags and closing tags

HTML Documents = Web

HTML documents describe web pages

HTML documents contain HTML tags and plain text

HTML documents are also called web pages

https://www.w3school.com.cn/html/html_jianjie.asp

In addition there are about HTML HTML5, you can see the difference between the two heavyweights of the blog Talking about the difference between the three of HTML5 html , as a beginner, do not tangle, and both can learn, have a lot of information online, and also did not go out to distinguish, say this is mainly related content on the HTML.

(2) HTML Example

Before writing HTML to note that comments are as follows way

<!--注释-->

Here is a complete example:

<!--!DOCTYPE用于指定文档类型-->
<!DOCTYPE html>

<!--html标签是整个html文件的开始，注意标签要成对出现-->
<html>

<!--head标签用于定义文档的头部，它是所有头部元素的容器。head中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等-->
<head>
	<title>文档的标题</title>
</head>

<!--body定义文档的主体-->
<body>
	<!--h+数字用于定义标题，数字代表标题的级数-->
	<h1>这是一级标题</h1>
	<h6>这是六级标题</h6>

	<!--p表示段落-->
	<p>这是第一段</p>
	<p>这是第二段</p>

	<!--br/用于换行-->
	<p>
		这是第三段。换行,<br/>换行,<br/>换行。<br/>
	</p>

	<!--b用作定义粗体文本-->
	<p>
		<b>这是一段粗体文字</b>
	</p>

	<!--img用于指定图像，其中src表示图像的路径（url），alt表示图像的替代文本-->
	<p>
		<img src="J:\杂物\美化\壁纸\壁纸1.jpg" alt="这是一张壁纸">
	</p>


</body>

</html>

This involves only above some very common label, for some very simple static pages have been written enough about the other labels refer to the HTML tutorial , when practice again refer to relevant information is also possible, after such investigation will be several times a.

Note that the final edited file to be saved as .html format in order to allow the browser to identify the open. And while HTML tags are not case sensitive but it is recommended lowercase, easy to read source code, and will be forced to use lower case in the future.

(3) HTML important concepts

① elements

HTML element

HTML element

Element refers to all HTML tags from the tag start (start tag) to the end tag (end tag) of.

Start tag Element content End tag

This is a paragraph

This is a link

Start tag is often called an open-label (opening tag), the end tag is often called the closing tag (closing tag).

Element Syntax

HTML element syntax

HTML element to start tag start

HTML elements with an end tag termination

Content element is the content between the opening and closing tags

Some HTML elements have empty content (empty content)

Empty element to shut down at the start tag (tag beginning to end and end)

Most HTML elements can have attributes

Nested HTML elements

Nested HTML elements

Most HTML elements can be nested (can contain other HTML elements).

HTML document consists of nested HTML elements.

② property

HTML attributes

HTML attributes

HTML tags can have attributes . Attribute provides information about HTML elements for more information .

Attributes are always in the form of name / value, such as: name = "value" .

HTML element attributes always start labeling provisions.