html entry learning (1)

Common browsers and their kernels

Google browser: Chromium/Blink, webkit used before
Internet Explorer: Trident—"Compatibility Mode"
Edge browser: EdgeHTML
Firefox browser: Gecko—Code disclosure
Safari browser: webkit
Opera browser: Presto—"predecessor kernel", currently using Blink kernel

Web standards

benefit:

Make the development of the Web more promising
Content can be accessed by a wider range of devices
Easier to be searched by search engines
Reduce website traffic costs
Make the website easier to maintain
Improve page browsing speed

constitute:

Structure standard: Structure is used to organize and classify webpage elements, mainly including XML and XHTML two part
style standards: performance is used to set the layout, color, size and other appearance styles of webpage elements, mainly refers to CSS
behavior standards: Behavior Refers to the definition of web page model and interactive writing, which mainly includes two parts: DOM and CMAScript

Ideally our source code: .html .css .js

development tools

Dreamweave
Sublime
WebStorm
HBuilder
Visual Studio Code

HTML first knowledge

Hypertext Markup Language mainly uses HTML tags to describe the text, pictures, sounds and other content in web pages.

HTML tags

HTML tag tags are usually called HTML tags (HTML tags).

HTML tags are keywords surrounded by angle brackets
HTML tags usually appear in pairs
The first tag in the tag pair is the start tag, and the second tag is the end tag
Start and end tags are also called open tags and closed tags

Grammatical skeleton

<html>      根标签
   <head>   头标签
      <title></title>   标题标签
   </head>
   <body>  主题标签
   </body>
</html>1234567

html tag: role: a root node of all tags in html
head tag: function: used to store: title, metal, base, style, script, link Note that the title tag must be set in the head tag
title tag: role: let the page have a title of its own
body tag: role: the main part of the page, used to store all html tags: p, h, a, b, u, i, s, em, dei, ins, strong, img

character set

utf-8 is currently the most commonly used character set encoding method. Commonly used character set encoding methods include gbk and gb2312

gb2312: Simplified Chinese
BIG5: Traditional Chinese
GBK: Contains all Chinese characters, compatible with GB2312
UTF-8: Contains characters required by all countries in the world

HTML tags

Typesetting label

Title tag (by heart)

Heading is defined by <h1>- <h6>and other tags. <h1>Define the largest headline. <h6>Define the smallest headline.

Paragraph tags (by heart)

Passage through the <p>tag is defined.

Horizontal line label (recognition)

<hr />The tags create horizontal lines in the HTML page.
hrElements can be used to separate content.

Newline label (by heart)

If you want to wrap (new line) without generating a new paragraph, may be used <br />labels.
<br />The element is an empty HTML element. Since the closing tag has no meaning, it has no closing tag.
Maybe it <br>is <br />very similar to. In XHTML, XML, and future HTML versions, HTML elements without closing tags (closing tags) are not allowed.
Even <br>displayed in all browsers have no problem, use <br />is more long-term protection.

div span tag (emphasis)

Div and span have no semantics, they are the two main boxes of our web page layout

<div> can define the division or section (division/section) in the document.
The <div> tag can divide the document into independent, different parts. It can be used as a strict organization tool and does not use any format associated with it. If you use id or class to tag <div>, then the role of the tag will become more effective.
<div> is a block-level element. This means that its content automatically starts a new line. In fact, line wrapping is the only format inherent in <div>. Additional styles can be applied via the class or id of <div>. It is not necessary to add a class or id to each <div>, although it also has certain advantages.
You can apply class or id attributes to the same <div> element, but it is more common to apply only one of them. The main difference between the two is that class is used for element groups (similar elements, or can be understood as a certain type of element), while id is used to identify a single unique element. The <span> tag is used to group inline elements in the document. If you don't apply styles to the span, the text in the span element will not be visually different from other text. Nevertheless, the span element in the above example still adds extra structure to the p element. The id or class attribute can be applied to the span, which not only adds appropriate semantics, but also facilitates the application of styles to the span. It is possible to apply the class or id attributes to the same <span> element, but it is more common to apply only one of them. The main difference between the two is that class is used for element groups (similar elements, or can be understood as a certain type of element), while id is used to identify a single unique element.

Text formatting tags (by heart)

html entry learning (1)

Label attributes

HTML tags can have attributes. Attributes provide more information about HTML elements.
Attributes always appear in the form of name/value pairs, such as: name="value".
Attributes are always specified in the opening tag of HTML elements.

<标签名 属性1="属性值1" 属性2="属性值2" ...> 内容 </标签名>1

Tags can have multiple attributes, which must be written in the opening tag, after the tag name
The attributes are in no particular order. The tag name and attribute, and the attribute and attribute are all separated by spaces
Any label attribute has a default value, if omitted, the default value is taken

Image label Img (emphasis)

In HTML, the image by the <img>custom labels.
<img>ooooooo is an empty tag, which means that it only contains attributes and there is no closing tag.
To display an image on the page, you need to use the source attribute (src). src means "source". The value of the source attribute is the URL address of the image.
The syntax for defining an image is:

<img src="图像URL" />1

<img /> tag attributes:

Attributes	Attribute value	description
scr	URL	Image path
alt	text	Replacement text when the image cannot be displayed
title	text	What to display on mouse hover
width	Pixel	Set the width of the image
height	Pixel	Set the height of the image
border	digital	Set the width of the image border

Link label (emphasis)

HTML uses hyperlinks to connect to another document on the web.
You can find links on almost all web pages. Click the link to jump from one page to another.
A hyperlink can be a word, a word, or a group of words, or an image. You can click on these contents to jump to a new document or a certain part of the current document.
When you move the mouse pointer to a link in a web page, the arrow will change to a small hand.
We <a>create links in HTML by using tags.
There are two ways to use <a>tags:

By using the href attribute-create a link to another document
By using the name attribute-create a bookmark within the document

Basic syntax:

<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>1

The href attribute specifies the URL of the page to which the link points.
The target attribute specifies where to open the linked document.
html entry learning (1)
Anchor Point Positioning (Difficulty)
By creating anchor point links, users can quickly locate the target content and
creating an anchor point requires two steps:

Use "a href="#idname" link text/a" to create link text
Use the corresponding Id name to mark the location of the jump target

base tag
base tag can set the open state of the overall link, written in <head></head>between

Special character label (understand)

Special characters	description	Character code
	Space character
<	Less than sign	`<`
>	Greater than	`>`
&	And sign	`&`
¥	RMB	`¥`
©	copyright	`©`
®	Trademark	`®`
°	Celsius	`°`
±	Sign	`±`
×	Multiplication sign	`×`
÷	Division sign	`÷`
²	Square 2	`²`
³	Cube 3	`³`

Annotation tag

There is also a special tag in html- comment tag . If you need to add some annotation text to the html document that is easy to read and understand but does not need to be displayed on the page, you need to use the annotation tag. The basic syntax format is as follows:

<!-- 注释语句 -->1

path

HTML has two ways of writing paths: relative path\ and absolute path\ .

HTML relative path (Relative Path)

File references
in the same directory If the source file and the reference file are in the same directory, just write the reference file name directly.

We now create a source file index.html, in index.html we need to quote the login.html file as a hyperlink.

Assuming the index.html path is: C:\Users\lenovo\Desktop\index.html
Assuming the login.html path is: C:\Users\lenovo\Desktop\login.html
Add the code for the login.html hyperlink in index.html It should be written like this:

<a href = "login.html">login.html</a> 1

Represents the parent directory
../ represents the parent directory of the directory where the source file is located, ../../ represents the parent directory of the directory where the source file is located, and so on.

Assuming that the index.html path is: C:\Users\lenovo\Desktop\index.html
Assuming that the login.html path is: C:\Users\lenovo\login.html
The code to add the login.html hyperlink to index.html should be like this write:

<a href = "../login.html">login.html</a> 1

Assuming the index.html path is: C:\Users\lenovo\Desktop\index.html
Assuming the login.html path is: C:\Users\login.html
The code to add the login.html hyperlink in index.html should be written like this:

<a href = "../../login.html">loginx.html</a> 1

Assuming the index.html path is: C:\Users\lenovo\Desktop\index.html
Assuming the login.html path is: C:\Users\lenovo\Desktop\Dreamweave\login.html
Add the login.html hyperlink in index.html The code should be written like this:

<a href = "../Dreamweave/login.html">loginx.html</a> 1

It means that the lower-level directory
refers to the file in the lower-level directory, and you can write down the path of the lower-level directory file directly.

Assuming the index.html path is: C:\Users\lenovo\Desktop\index.html
Assuming the login.html path is: C:\Users\lenovo\Desktop\html\login.html
Add the login.html hyperlink in index.html The code should be written like this:

<a href = "html/login.html">login.html</a> 1

Assuming the index.html path is: C:\Users\lenovo\Desktop\index.html
Assuming the login.html path is: C:\Users\lenovo\Desktop\html\student\login.html
Add login.html to index.html The hyperlink code should be written like this:

<a href = "html/student/login.html">login.html</a> 1

HTML absolute path (Absolute Path)

HTML absolute path (absolute path) refers to the full path of the file with the domain name.

Assuming you have registered the domain name www.php.cn and applied for a virtual host, your virtual host provider will give you a directory, such as www. This www is the root directory of your website.

Suppose you put a file index.html in the www root directory, the absolute path of this file is: http:// www.php.cn/index.html.

Suppose you create a directory called html_student under the www root directory, and then put a file index.html under the directory. The absolute path of this file is http://www.php.cn/html_student/index.html.

List label

HTML supports ordered, unordered and custom lists

Unordered list ul (emphasis) An
unordered list is a list of items. The items in this column are marked with bold dots (typical small black circles).
The unordered list starts with the <ul>label. Each list item starts at <li>.
The browser displays as follows:

<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>1234

Coffee
Milk

Note : ul tags can only be placed in li tags
. All tag
list items can be stored in li tags. Paragraphs, line breaks, pictures, links, and other lists can be used inside.

Ordered list ol (understand)
Similarly, an ordered list is a list of items, and the list items are marked with numbers.
The ordered list starts with the <ol>label. Each list item starts with a <li>label.

<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>1234

The browser displays as follows:

Coffee
Milk

Paragraphs, line breaks, pictures, links, and other lists can be used inside list items.

Custom list (understanding)
A custom list is not just a list of items, but a combination of items and their comments.
The custom list <dl>starts with a label. Each custom list item <dt>starts with. The definition of each custom list item <dd>starts.

<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>123456

The browser displays as follows:

Paragraphs, line breaks, pictures, links, and other lists can be used inside the list items of the definition list.