HTML basic structure, tag, list

Posted by srdva59 on Thu, 03 Mar 2022 17:57:18 +0100

Relationship between HTML, CSS and JS

HTML is the skeleton of web pages, which is mainly responsible for the structure of web pages
CSS provides styles for web pages to beautify and decorate web pages
JavaScript is a scripting language used to control DOM elements, which is mainly used for DOM processing of front-end pages

Mainstream browser and its kernel

Firefox - > gecko
Chrome - > WebKit - > blink
IE(IE6,IE7,IE8,IE9,IE10,IE11)->Trident
Opera - > WebKit
Safari->Webkit

HTML introduction

HyperText Markup Language (HTML) is a standard markup language for creating web pages. Html is specifically responsible for the structural skeleton of web pages, so we should pay attention to its semantics rather than its style.

route

When we jump to a page inside another server. Generally, we will use relative paths, and relative paths will be used Or start with.
Relative path:/ Indicates the directory where the current file is located... / indicates the upper directory of the directory where the current file is located
Absolute path: the path starting from the root directory of the disk

HTML tags

HTML tag structure

<!DOCTYPE html> : Indicates the current html File is html5 Document(html5 Specification of)

<html lang="en"> :  lang Presentation development language( en (in English)

<meta charset="UTF-8"> : charset Represents the character set used. UTF-8 Support Chinese
gbk,GB2312,iso-8859-1

<html></html> : The root label of the page.

<head></head> : Header tags, general information of the page, can be used to import as external css Documents, etc

<body></body>: Main label, the main information of the page, and the part that users can see

HTML tag classification

Single label: < label name / >
Double label: < tag name > < / tag name >
Block level element: the element that monopolizes one line in the page is called a block element, and the width and height can be set.
In line element (inline element): you cannot monopolize a line in the page, and you cannot set the width and height. The width and height are determined by the content size.

Common labels

Title label

Title label: h1~h6 the smaller the number, the larger the font, and it will be bold and wrap automatically

         <h1>Primary label</h1>
         <h2>Secondary label</h2>
         <h3>Tertiary label</h3>

Paragraph label

Paragraph label: indicates a paragraph, which can wrap automatically

<p>p The content in the label represents a paragraph</p>

Split line (horizontal line)

<hr color="colour" size="thickness" width="width"/>

Wrap label

<br />

Text modifier label

<span>Style adjustment of some text</span>
<ins>Underline content</ins>
<del>Add delete line to content</del>
<b>Bold</b>
<strong>Bold and semantic</strong>
<i>tilt</i>
<em>It is inclined and has semantic effect</em>
<mark>Highlight</mark>

Hyperlink label

Hyperlinks allow us to jump from one page to another or to the current page
At a certain location, href specifies the target path of the jump.

The target attribute is used to specify where the hyperlink is opened.
-Optional value
_ The default value of self opens the hyperlink on the current page
_ blank opens a hyperlink on a new page

<a href="https://www.baidu. com" target="_ Blank "> hyperlink</a>

A hyperlink is also an inline element. Any element other than itself can be nested in the a tag

<a href="Jump path" target="_blank">
    <img src="Picture path" />
</a>

Picture label

<img src="./Picture path/Picture name.png" alt="Information displayed when the picture is not loaded" />

Audio tag

Controls controls playback
Autoplay autoplay
Loop loop

<audio src="./Audio file directory/Audio file.mp3" controls autoplay loop></audio>

You can also use this form

<audio controls autoplay loop>
     <source src="./source/So dream.mp3">
</audio>

Video tag

<video width="320" height="240" controls autoplay>
  <source src="movie.ogg" type="video/ogg">
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.webm" type="video/webm">
</video>

Special characters

    (1)Space:&nbsp; 
	
	(2)Less than: &lt;
	
	(3)Greater than:&gt;
	
	(4)Copyright symbol:&copy;
	
	(5)Registered trademark:&reg;
	
	(6)Celsius temperature:&deg;
	
	(7)multiplication sign:&times;
	
	(8)division sign:&divide;
	
	(9)Square:&sup2;

list

html can also create lists. There are three types of html lists

Unordered list
Ordered list
Definition list

Unordered list

<ul>
        <li>structure</li>
        <li>performance</li>
        <li>behavior</li>
        ······
</ul>

Ordered list

<ol>
        <li>structure</li>
        <li>performance</li>
        <li>behavior</li>
        ······
</ol>

Definition list

<dl>
        <dt>title</dt>
        <dd>Content 1</dd>
        <dd>Content 2</dd>
        <dd>Content 3</dd>
</dl>

Topics: Javascript html css

Programmer Think