Related concepts in front-end

Who knows that there is nothing left in life?

The flowing water in front of the door can still reach the west.

The peach blossoms have fallen and their rouge is transparent,

The chickens watch silently in the courtyard.

——Du Fu's "Dragon Boat Festival"

class attribute in HTML

The class attribute in HTML is an attribute used to define styles and identification for elements. The following are several common usage examples of the class attribute, including identifying elements, defining styles, grouping elements, and providing semantic information:

1. Identity elements

Use the class attribute to give an element an identity that can be easily referenced in JavaScript and CSS stylesheets. For example, you can set the class attribute to "header" to identify the title on the page.

<h1 class="header">这是一个标题</h1>

2. Define styles

Styles can be applied to elements using the class attribute. You can apply the same style to multiple elements by defining a style that matches the class name in a CSS style sheet.


<style>
    .heading {
        font-size: 24px;
        font-weight: bold;
    }

    .highlight {
        color: red;
        font-weight: bold;
    }
</style>
<h1 class="heading">这是一个标题</h1>
<p class="highlight">这是一个突出显示的文本。</p>

3. Group elements

Multiple elements can be grouped together using the class attribute. For example, you can group all elements with the same style into a class.


<style>
    .box {
        border: 1px solid #ccc;
        padding: 10px;
    }
</style>
<div class="box">这是一个盒子</div>
<div class="box">这是另一个盒子</div>

4. Provide semantics

Use the class attribute to provide semantic information for an element. For example, you can set the class attribute to "important" to indicate that the content of the element is important.


<style>
    .important {
        color: red;
        font-weight: bold;
    }
</style>
<p class="important">这是一个非常重要的消息。</p>

Common tags

1,<p>: Paragraph tag

<p>这是一个段落</p>

Effect:
This is a paragraph

2,<h1>~<h6>: Title tag


<h1>这是一级标题</h1>
<h2>这是二级标题</h2>
<h3>这是三级标题</h3>

Effect:

This is a first-level title

This is a secondary title

This is a third-level title

3,<a>: hyperlink tag

<a href="https://www.example.com/">这是一个超链接</a>

Effect:

This is a hyperlink

4,<img>：image tag

<img src="https://pics6.baidu.com/feed/fd039245d688d43f7c325738f98f8f170cf43bfb.jpeg@f_auto?token=ea6d90c809e146b9fe8712a20ea6dcc5" alt="这是一张清华园图片">

Actual display effect:
5, <ul> and <ol>: list tags

<ul>
  <li>无序列表项1</li>
  <li>无序列表项2</li>
</ul>

<ol>
  <li>有序列表项1</li>
  <li>有序列表项2</li>
</ol>

Effect:

Unordered list item 1
Unordered list item 2

Ordered list item 1
Ordered list item 2

6,<div>: container tag

<div>
  <h3>这是一个容器</h3>
  <p>这是容器中的内容</p>
</div>

Effect:

This is a container

This is the content of the container

7,<span>: inline tag

<span style="color: red;">这是红色字体</span>

Actual display effect:

This is red font

8,<form>: form tag

<form>
  <label>用户名：</label>
  <input type="text" name="username" placeholder="请输入用户名">
  <label>密码：</label>
  <input type="password" name="password">
  <input type="submit" value="登录">
</form>

Actual display effect:

9,<input>: input box label

<input type="text" name="username" placeholder="请输入用户名">
<input type="password" name="password">

Effect:

10,<label> label

The <label> tag defines a label (marker) for the input element.

The label element does not present any special effects to the user. However, it improves usability for mouse users. This control is triggered if you click on the text within the label element. That is to say, when the user selects the label, the browser will automatically turn the focus to the form control related to the label.

The for attribute of the <label> tag should be the same as the id attribute of the related element.

<label for="male">Male</label>
<input type="radio" name="sex" id="male" value="male"><br>
<label for="female">Female</label>
<input type="radio" name="sex" id="female" value="female"><br>
<label for="username">用户名：</label>
<input type="text" id="username" name="username"><br>

Effect:

11. { {}} in vue

In the front-end, { {}} usually represents an interpolation expression in template syntax and is used to bind dynamic data into the template.

{ {}} is a simple template syntax commonly used in front-end frameworks (such as Vue.js, AngularJS, React, etc.). In the template, we can use double curly braces { {}} to wrap an expression, which will be parsed and rendered into the page. For example, here is an example of a Vue.js template using { {}}:

<div>
  <h1>{
   
   { title }}</h1>
  <p>{
   
   { message }}</p>
</div>

In the above code, { { title }} and { { message }} are interpolation expressions, which will be parsed and replaced by Vue.js with the corresponding data. For example, if we have a data object:

const data = {
  title: 'Hello',
  message: 'Welcome to my website!'
}

Then the result after rendering the above template will be:

<div>
  <h1>Hello</h1>
  <p>Welcome to my website!</p>
</div>

Interpolation expressions can contain any valid JavaScript expressions, such as variables, function calls, operators, conditional expressions, etc., which allows us to control the rendering of templates very flexibly.