Basic understanding of the front-end three-piece set of html/css/js and sample programs

Introduction

This article briefly explains html, css, and js. It mainly gives everyone a brief understanding of network knowledge.

Because in actual development, html & css are rarely written directly, so there is no need to worry too much, just understand the architecture.

I hope you can refer to MDN and w3school for deep learning.

HTML

Base

HTML (Hyper Text Markup Language) is not a programming language, but a markup language used to tell the browser how to organize the page.

Mainly used for organization of page structure

The simplest one is like this

<p>welcome to html</p>

Attributes

Use attributes to set additional information for elements. The basic writing method of attributes is

<p class="foobar">EESAST</p>

Separate it from the element name or previous attribute with a space 属性名="值"(single quotes or double quotes are acceptable)

A typical example is the element <a>, used to create links

<a href="https://eesast.com" title="科协官网">EESAST</a>

Common tags

Document structure tags:
- <!DOCTYPE html>: Define HTML document type and version.
- <html>: The root element of the HTML document.
- <head>: Contains meta-information of the document, such as title, character set, etc.
- <title>: Define the title of the document, displayed on the browser's title bar or tab page.
- <body>: Contains the main content of the document.
Text label:
- <h1>to <h6>: Define the title, h1which is the highest-level title and h6the lowest-level title.
- <p>: Define paragraph.
- <br>: Insert newline.
- <hr>: Insert a horizontal line.
Link and image tags:
- <a>: Define hyperlink.
- <img>: Insert image.
List tags:
- <ul>: Unordered list.
- <ol>: ordered list.
- <li>: list item.
Table tags:
- <table>: Define table.
- <tr>: Define table rows.
- <th>: Define the header cell.
- <td>: Define table data cells.
Form tags:
- <form>: Define the form.
- <input>: Define input fields.
- <textarea>: Define the text field.
- <button>: Define button.
- <select>: Define drop-down list.
- <label>: Define form labels.
Style and format tags:
- <style>: Define the style information of the document.
- <div>: Defines a section in the document.
- <span>: Defines a container for inline elements in the document.
- <strong>: Define emphasized text.
- <em>: Defines emphasized text.
Other commonly used tags:
- <meta>: Define the meta-information of the document, such as character set, keywords, etc.
- <script>: Insert JavaScript code.
- <iframe>: Insert an inline frame.
- <head>: Define the header of the document.
- <footer>: Defines the footer of the document.

basic structure

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>我的测试站点</title>
  </head>
  <body>
    <p>这是我的页面</p>
  </body>
</html>

basic layout

<header>: Header.
<nav>:Navigation Bar.
<main>: Main content. There can also be various sub-content sections in the main content, which can be represented by elements such as <article>, <section>and <div>.
<aside>: Sidebar, often nested within <main>.
<footer>:footer.

For complete html elements and attributes, you can refer to here

Apply CSS and JavaScript

For CSS, you need to add an <link>element. rel="stylesheet" indicates that this is the style sheet of the document, and href contains the path to the style sheet file. This element is generally placed in the head.

<link rel="stylesheet" href="my-css-file.css" />

For js scripts, add elements, src is the path to the script. It is a better choice to <script>put it before the tail tag of the document , which ensures that the browser has parsed the HTML content before loading the script.</body>

<script src="my-js-file.js"></script>

The script element here has no content, but it is not an empty element. You can also write the script directly in the element.

CSS

Base

CSS (Cascading Style Sheets) is used to define styles and implement many cool functions, such as

h1 {
    
    
  color: red;
  font-size: 5em;
}

The main syntax is as follows

Selector: The syntax starts with a selector. It selects the HTML elements that we will use to add styles. In this example we are <h1>adding styles to the first-level title (main title).

Style modification: Then enter a pair of braces { }. Define one or more forms inside the braces as property:value;

element selector

tag matching

Use element selectors to directly match an html element

p {
    
    
  color: green;
}

id match

#ID {
    
    
    color: red;
}

Multiple tag matching

Different selectors can be ,separated to use multiple selectors

p, li { color: green; }

This way of directly specifying the element type can only be applied to all similar elements at the same time, which is very inconvenient in actual use. Therefore, we can also use class names to further specify the objects. As mentioned earlier, elements in HTML can Add attributes. The class name selector here corresponds to the attributes in the tag class, such as

<ul>
  <li>项目一</li>
  <li class="special">项目二</li>
  <li>项目 <em>三</em></li>
</ul>

Special match with same tag

.special {
    
    
  color: orange;
  font-weight: bold;
}

Here, elements belonging to the special class are specified for setting. Adding at the beginning of the selector .specifies the class. Of course, the element and class can be specified at the same time.

li.special,
span.special {
    
    
  color: orange;
  font-weight: bold;
}

element position matching

Nested relationship

li em {
    
    
  color: rebeccapurple;
}

Represents selection nested <li>within<em>

Adjacency

h1 + p {
    
    
  font-size: 200%;
}

Indicates selection of <h1>the following<p>

example

You can try to interpret this selector

body h1 + p .special {
    
    
  color: yellow;
  background-color: black;
  padding: 5px;
}

box model

Reference: https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/The_box_model

In CSS, all elements are surrounded by "boxes". Understanding the basic principles of these "boxes" can help us use CSS to achieve accurate layout and handle element arrangement.

Composing a block-level box in CSS requires:

Content box : This area is used to display content. The size can be set by widthand height.
Padding box : A blank area enclosed outside the content area; the size paddingis set through related properties.
Border box : The border box wraps the content and padding. The size borderis set through related properties.
Margin box : This is the outermost area, the blank area between the box and other elements. The size is marginset through related properties.

As shown below:

In the standard model, if you set widthand for the box height, what is actually set is the content box . The padding and border plus the set width and height determine the size of the entire box.

.box {
    
    
  width: 350px;
  height: 150px;
  margin: 25px;
  padding: 25px;
  border: 5px solid black;
}

You can try to calculate the size of this box

JS

Introduction

Here we mainly introduce the browser object model, which is used for daily development of browsers. We can conveniently control these objects through js.

BOM

BOM is a browser object based on js, but it is not W3C (World Wide Web Consortium, World Wide Web Consortium) standard, and there are differences in different browsers.

As shown in the figure, it is the basic structure of the browser model. In the browser environment, the window can generally be omitted.

What we mainly control is the DOM object

Common properties

open()/close() opens/closes the window
alert() pop-up warning

DOM

Complies with W3C standards and is more common in daily development

add/remove

// 添加/删除 HTML 元素
// appendChild(): 将新元素作为其它元素的子节点进行添加（添加到尾部）
// insertBefore(): 将新元素添加到其它元素的头部

let para = document.createElement("p"); // 创建一个段落
let text = document.createTextNode("abc"); // 创建一个文本节点
para.appendChild(text); // 将该段落与文本合成一个元素 <p>abc</p>
x.appendChild(para); // 将新元素 para 添加到 x 的尾部
x.insertBefore(para); // 将新元素 para 添加到 x 的头部

// 删除元素时需要知道该节点的父节点
// removeChild(): 将某元素的子节点移除
// 一般来说是这样删除节点的：
// child.parentNode.removeChild(child); // 先找父节点，再删除

Find

let x= document.getElementById ("content"); //通过id
let x = document.getElementsByClassName("content"); //通过

Revise

Implemented by searching and assigning

// 利用 innerHTML 属性修改元素的内容：
let x = document.getElementById("content"); // 找到对应的元素
x.innerHTML = "hello world";

// 利用 style 属性修改元素的 CSS 格式：
document.getElementById("content").style.color = "red";

use

Written directly in HTML:

Generally placed at the end of the body to avoid obstruction

<script>
  console.log("Hello World!");
</script>

Import via file path:

defer means to execute after the html is parsed to avoid blocking.

<script src="___.js" defer></script>

Example

The following is a simple example using html, css, and js

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello World Example</title>
    <style>
        body {
      
      
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100vh;
        }

        #helloText {
      
      
            color: red;
        }
    </style>
</head>

<body>
    <div>
        <p id="helloText">Hello World</p>
        <button id="changeColorButton" onclick="changeColor()">Change Color to black</button>
    </div>

    <script>
        function changeColor() {
      
      
            document.getElementById('helloText').style.color = 'black';
        }
    </script>
</body>

</html>