insert image description here

Hello everyone, and welcome to the second blog in the Getting Started with Front End series. In this series, together we'll learn the basics of front-end development, building web pages and web applications from scratch. This blog will introduce you to HTML (Hypertext Markup Language) common label elements, and help zero-based beginners get started quickly.

Preface: Learning Objectives

Master the use, basic features and uses of commonly used html expressions.

1. Heading tags: h1-h6

Introduction: The title tag is used to define the title text in the web page, from h1 to h6, which represent different levels of titles, h1 is the highest level title, and h6 is the lowest level title.

Features:

Heading tags have a semantic role and contribute to the structure and readability of web pages.
Heading tags typically appear in a larger font size on the page, with some styling effects.
The h1 tag is most commonly used for the main heading of a page, while the h2 through h6 tags are used for subheadings or secondary headings.

Sample code:

<h1>h1<h1>
<h2>h2<h2>
<h3>h3<h3>
<h4>h4<h4>
<h5>h5<h5>
<h6>h6<h6>

Rendering effect:
[External link picture transfer failed, the source site may have an anti-leeching mechanism, it is recommended to save the picture and upload it directly (img-Gep5MPbm-1687765067032)(/Users/adherezheng/mynote/note/csdn/html/assets/image-20230626135641762. png)]

2. Paragraph tags: p

Introduction: Paragraph tags are used to define paragraphs of text, and spaces are automatically added between paragraphs.

Features: Paragraph tags have default upper and lower margins and automatically wrap.

Sample code:

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

[External link picture transfer failed, the source site may have an anti-leeching mechanism, it is recommended to save the picture and upload it directly (img-XA89BjKk-1687765067039)(/Users/adherezheng/mynote/note/csdn/html/assets/image-20230626144749245. png)]

3. Comment tags: !

Introduction: It is used to convert the code into a comment. When the code is run, the comment will not be rendered on the page. The shortcut key ctrl+'/' can quickly turn the code into a comment

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>程序员小豪</title>
</head>
<body>
    <!-- <p>go go go</p> -->
    <p>
      test
    </p>
</body>
</html>

Rendering effect:
[External link picture transfer failed, the source site may have an anti-leeching mechanism, it is recommended to save the picture and upload it directly (img-qCdGNqWg-1687765067041)(/Users/adherezheng/mynote/note/csdn/html/assets/image-20230626144727625. png)]

4. Link label: a

Summary: Link tags are used to create hyperlinks, linking text or images to other pages or resources.

Features: The link tag has the href attribute, which specifies the address of the target URL or resource.

Sample code:

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

Attributes	effect
href	The URL address used to specify the link target (required attribute)
target	It is used to specify the way to open the link page, _self is the default way to jump directly to this page, and _blank opens in a new window

[External link picture transfer failed, the source site may have an anti-leeching mechanism, it is recommended to save the picture and upload it directly (img-hwvPoNKi-1687765067042)(/Users/adherezheng/mynote/note/csdn/html/assets/image-20230626144833795. png)]

use:

Navigation Links: <a>Tags can be used to create navigation menus or navigation links to other pages. For example:
```
<a href="index.html">首页</a>
<a href="about.html">关于我们</a>
```
External Links: <a>Tags can be used to create links to other websites. For example:
```
<a href="https://www.example.com">访问示例网站</a>
```
Anchor Links: <a>Tags can be used to create anchor links within pages for quick navigation to different sections within the same page. For example:
```
<a href="#section1">跳转到第一节</a>
...
<h2 id="section1">第一节</h2>
```
I placed 200 div tags below the a tag and finally the h2 tag

We set an id attribute for the h2 tag, set the href attribute in the a tag: "#section1", click the a tag to jump directly to the position of the h2 tag
Download Link: <a>The tag can be used to provide a download link for a file. For example:
```
<a href="files/document.pdf" download>下载文档</a>
```
Email Links: <a>Tags can be used to create links to send emails. For example:
```
<a href="mailto:[email protected]">发送邮件给我们</a>
```
JavaScript Actions: <a>Tags can be used with JavaScript code to perform specific actions or functions. For example:
```
<a href="javascript:void(0);" onclick="myFunction()">点击这里</a>
```

These are just <a>some of the common uses of the tag, it also has other properties and functionality that can be extended and customized as needed.

5. Image tag: img

Introduction: Image tags are used to insert images into web pages.

Features: The image tag has a src attribute, which specifies the URL or file path of the image.

Sample code:

<img src="image.jpg" alt="图像描述">

Attributes	describe	example
`src`	Image URL or file path	`<img src="image.jpg">`
`alt`	Alt text for images	`<img src="image.jpg" alt="描述文本">`
`title`	Title text to display on mouseover	`<img src="image.jpg" title="标题">`
`loading`	Hints for how images are loaded ( `lazy`, `eager`, `auto`)	`<img src="image.jpg" loading="lazy">`

[External link picture transfer failed, the source site may have an anti-theft link mechanism, it is recommended to save the picture and upload it directly (img-7fEBiWs1-1687765067044)(/Users/adherezheng/mynote/note/csdn/html/assets/image-20230626150328058. png)]

6. List labels: ul and ol

Introduction: The unordered list tag (ul) is used to create an unordered list, and the ordered list tag (ol) is used to create an ordered list.

Features: Unordered lists use dots or other symbols to mark list items, and ordered lists use numbers or letters to mark list items.

Sample code:

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

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

[External link image transfer failed, the source site may have an anti-leeching mechanism, it is recommended to save the image and upload it directly (img-yTzzCLIl-1687765067044) (/Users/adherezheng/mynote/note/csdn/html/assets/image-20230626150411019. png)]

7. div tag and span tag

Introduction:

A tag is a generic container tag used to wrap a group of related elements together and apply styles or JavaScript to them.
<span>Tags are used to label or group a section of text.

Features:

``
`Tags have no specific semantics and are mainly used for layout and organization of page structure.
<span> is an inline element, it will not occupy a single line, it will only wrap the text or other inline elements inside it.
It has no default styling or behavior of its own, and is intended primarily to manipulate it via CSS or JavaScript.

Sample code:

<div>
  <h1>这是一个 div 容器</h1>
  <p>这是 div 容器中的段落。</p>
  <img src="image.jpg" alt="图像描述">
</div>
<span onclick="myFunction()">Click me</span>

[External link picture transfer failed, the source site may have an anti-theft link mechanism, it is recommended to save the picture and upload it directly (img-d1tDGRUy-1687765067045)(/Users/adherezheng/mynote/note/csdn/html/assets/image-20230626150911603. png)]

<div>Tags have the following differences compared to tags:

Type: <span> is an inline element, rather <div>than a block-level element.
Scope: <span> Typically used to mark up a portion of text or an inline element, while <div>generally used to separate and wrap larger blocks of text or other elements.
Default style: <span> There is no default style, and it will not occupy a single line. <div>By default, it has the characteristics of a block-level element, which will automatically occupy a line and fill the width of the parent container.
Nesting: Since <span> is an inline element, it can be nested inside other inline elements, such as text or other inline elements. Rather, <div>it is a block-level element that cannot be nested within an inline element, and can only be used as a container to nest other block-level or inline elements.

8. Table tags: table, tr, td

Introduction: Table tags are used to create tables in web pages, including headers, rows, and cells.

Features: <table>Represent the entire table, <tr>represent the rows in the table, and <td>represent the cells in the table.

Sample code:

<table>
  <tr>
    <th>表头1</th>
    <th>表头2</th>
  </tr>
  <tr>
    <td>行1单元格1</td>
    <td>行1单元格2</td>
  </tr>
  <tr>
    <td>行2单元格1</td>
    <td>行2单元格2</td>
  </tr>
</table>

[External link image transfer failed, the source site may have an anti-leeching mechanism, it is recommended to save the image and upload it directly (img-xQdE75SF-1687765067045) (/Users/adherezheng/mynote/note/csdn/html/assets/image-20230626151006757. png)]

The following attributes are <table>unique to tags:

Attributes	describe	example
`border`	Specifies the width of the table border	`<table border="1">`
`cellspacing`	Specifies the spacing between cells	`<table cellspacing="10">`
`cellpadding`	Specifies the spacing between the cell content and the border	`<table cellpadding="5">`
`width`	Specifies the width of the table	`<table width="400">`
`height`	Specifies the height of the table	`<table height="300">`
`align`	Specifies the alignment of the table relative to surrounding content	`<table align="center">`
`bgcolor`	Specifies the background color of the table	`<table bgcolor="#f0f0f0">`
`summary`	Provide a summary or description of the content of the form	`<table summary="这是一个数据表格">`
`caption`	Define the title of the table	`<caption>这是一个表格标题</caption>`
`colspan`	Specifies the number of columns the cell spans	`<td colspan="2">跨两列</td>`
`rowspan`	Specifies the number of rows the cell spans vertically	`<td rowspan="3">跨三行</td>`
`headers`	Define the relationship between the current cell and other cells	`<th headers="col1 row1">表头</th>`
`scope`	Define the range of header cells	`<th scope="col">列标题</th>`
`colgroup`	Group table columns and apply common attributes	`<colgroup><col span="2" style="background-color:#f0f0f0;"></colgroup>`
`thead`	Define the header section of the table	`<thead><tr><th>表头1</th><th>表头2</th></tr></thead>`
`tbody`	Define the body content section of the table	`<tbody><tr><td>数据1</td><td>数据2</td></tr></tbody>`
`tfoot`	Define the footer section of the table	`<tfoot><tr><td>总计</td><td>100</td></tr></tfoot>`
`sortable`	Indicates whether the table is sortable	`<table sortable>`

9. Text Formatting Tab

Text formatting tags are mainly used to adjust the style, format and presentation of text. The following is an introduction to some commonly used text formatting tags:

9.1 Bold labels: `<b>`and`<strong>`

<b>Tags are used to style text in bold.
<strong>Labels indicate greater importance or emphasize text, usually in bold. Sample code:

<p>This is <b>bold</b> text.</p>
<p>This is <strong>strong</strong> text.</p>

[External link picture transfer failed, the source site may have an anti-leeching mechanism, it is recommended to save the picture and upload it directly (img-KlIcwnbv-1687765067045)(/Users/adherezheng/mynote/note/csdn/html/assets/image-20230626151101612. png)]

9.2 Italicized labels: `<i>` and`<em>`

<i> Tags are used to italicize text.
<em>Labels indicate emphasized text, usually in italics, for stronger semantics. Sample code:

<p>This is <i>italic</i> text.</p>
<p>This is <em>emphasized</em> text.</p>

[External link picture transfer failed, the source site may have an anti-leeching mechanism, it is recommended to save the picture and upload it directly (img-ByHy5xY8-1687765067045)(/Users/adherezheng/mynote/note/csdn/html/assets/image-20230626151136345. png)]

9.3 Underlined tags:`<u>`

<u>Tags are used to underline text. Sample code:

<p>This is <u>underlined</u> text.</p>

[External link picture transfer failed, the source site may have an anti-leeching mechanism, it is recommended to save the picture and upload it directly (img-pygp6jeH-1687765067045)(/Users/adherezheng/mynote/note/csdn/html/assets/image-20230626151204998. png)]

9.4 Strikethrough labels: `<s>`and`<del>`

<s>Tags are used to strikethrough text.
<del>Tags represent text that has been removed, and are usually shown in strikethrough, to denote deleted or obsolete content. Sample code:

<p>This is <s>strikethrough</s> text.</p>
<p>This is <del>deleted</del> text.</p>

insert image description here

9.5 Superscript and subscript labels: `<sup>`and`<sub>`

^{Labels are used to set text to be superscripted, typically to denote exponents, superscripted numbers, etc.}
_{Labels are used to set text as subscripts, and are usually used to represent chemical formulas, mathematical formulas, etc. Sample code:}

<p>This is superscript: X<sup>2</sup></p>
<p>This is subscript: H<sub>2</sub>O</p>

insert image description here

These text formatting tags can be further customized and beautified through CSS styles to meet the needs of web design. Remember, in actual development, you should try to avoid abusing formatting tags, and give priority to using CSS to control text styles.

10. Form Labels

Form tags play a key role in HTML for creating user-interactive forms that enable users to enter data and submit it to the server for processing. The following is a detailed introduction to some commonly used form tags:

10.1 `<form>` Labels:

Introduction: <form>Tags are used to create forms, which contain a set of elements for user input data.
Features: The form can specify the target and method of data submission by setting different attributes.

Sample code:

<form action="/submit-form" method="POST">
  <!-- 表单元素 -->
</form>

10.2 `<input>`Labels:

Introduction: <input>Tags are used to create different types of input fields such as text boxes, check boxes, radio buttons, etc.
typeFeatures: Different input field types can be defined through different attribute values.

Sample code:

<input type="text" name="username" placeholder="用户名">
<input type="password" name="password" placeholder="密码">
<input type="checkbox" name="remember" id="remember">
<label for="remember">记住我</label>
<input type="radio" name="gender" value="male"> 男
<input type="radio" name="gender" value="female"> 女

[External link image transfer failed, the source site may have an anti-leeching mechanism, it is recommended to save the image and upload it directly (img-KxCdE4XU-1687765067045) (/Users/adherezheng/mynote/note/csdn/html/assets/image-20230626151439841. png)]

The meaning of different types of input tags:

`type`Attributes	describe	example
`text`	single line text input box	`<input type="text">`
`password`	password input box	`<input type="password">`
`number`	number input box	`<input type="number">`
`email`	Email input box	`<input type="email">`
`tel`	phone number input box	`<input type="tel">`
`url`	URL input box	`<input type="url">`
`date`	date picker	`<input type="date">`
`time`	time picker	`<input type="time">`
`datetime`	date time picker	`<input type="datetime">`
`checkbox`	Checkbox	`<input type="checkbox">`
`radio`	Single box	`<input type="radio">`
`file`	File Upload	`<input type="file">`
`submit`	submit button	`<input type="submit">`

10.3 `<label>`Labels:

Introduction: Labels are used to create label descriptions for form elements and provide clickable label text.
Feature: By associating the element with the element, you can focus to the related form field by clicking the label.

Sample code:

<label for="username">用户名：</label>
<input type="text" id="username" name="username">

[External link image transfer failed, the source site may have an anti-leeching mechanism, it is recommended to save the image and upload it directly (img-jsB32oRD-1687765067045) (/Users/adherezheng/mynote/note/csdn/html/assets/image-20230626151647610. png)]

10.4 `<select>`and `<option>`tags:

Introduction: <select>Labels are used to create drop-down lists, and <option>labels define the options in the drop-down list.
Features: User can select a value from predefined options.

Sample code:

<select name="country">
  <option value="china">中国</option>
  <option value="us">美国</option>
  <option value="uk">英国</option>
</select>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Ob1X7OHE-1687765067045)(/Users/adherezheng/mynote/note/csdn/html/assets/image-20230626151750192.png)]

10.5 `<textarea>`Labels:

Introduction: <textarea>Labels are used to create multi-line text input boxes.
Features: It can be used to input large paragraphs of text or multi-line content.

Sample code:

<textarea name="message" rows="4" cols="40"></textarea>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4EaWPKVi-1687765067046)(/Users/adherezheng/mynote/note/csdn/html/assets/image-20230626151834441.png)]

10.6 `<button>`Labels:

Summary: <button>Tags are used to create clickable buttons.
Features: Can be used to submit forms, reset forms or perform custom JavaScript actions.

Sample code:

<button type="submit">提交</button>
<button type="reset">重置</button>
<button type="button" onclick="myFunction()">点击我</button>

These are some common form tags that can be combined to create rich and interactive forms. Data entry, validation, and submission can be achieved through the use of these tags along with appropriate attributes and event handling.

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gPjmvDLW-1687765067046)(/Users/adherezheng/mynote/note/csdn/html/assets/image-20230626151855198.png)]

11. `<br>`Tags:

Summary: <br>Tags are used to create line breaks in text.
Features: <br>The tag is an empty tag, no closing tag is required.

Sample code:

<p>This is the first line.<br>
This is the second line.</p>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wxUR33ty-1687765067046)(/Users/adherezheng/mynote/note/csdn/html/assets/image-20230626151919098.png)]

12. Special characters

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-N7WNj5d7-1687765067046)(/Users/adherezheng/mynote/note/csdn/html/assets/image-20230626152520854.png)]

Summarize

This article introduces in detail the characteristics, presentation, attributes, and applications of commonly used tags in HTML. It is hoped that it can help beginners with zero foundation get started with HTML quickly, and it can also be used as a search tool for everyone to query how to use commonly used tags in HTML. If you think the writing is good, please pay attention to Xiaohao!

[Frontend｜HTML Series Part 2] Label elements for HTML zero-based entry

Write directory title here

Preface: Learning Objectives

1. Heading tags: h1-h6

2. Paragraph tags: p

3. Comment tags: !

4. Link label: a

5. Image tag: img

6. List labels: ul and ol

7. div tag and span tag

8. Table tags: table, tr, td

9. Text Formatting Tab

9.1 Bold labels: `<b>`and`<strong>`

9.2 Italicized labels: `<i>` and`<em>`

9.3 Underlined tags:`<u>`

9.4 Strikethrough labels: `<s>`and`<del>`

9.5 Superscript and subscript labels: `<sup>`and`<sub>`

10. Form Labels

10.1 `<form>` Labels:

10.2 `<input>`Labels:

10.3 `<label>`Labels:

10.4 `<select>`and `<option>`tags:

10.5 `<textarea>`Labels:

10.6 `<button>`Labels:

11. `<br>`Tags:

12. Special characters

Summarize

Guess you like

[Frontend｜HTML Series Part 2] Label elements for HTML zero-based entry

Write directory title here

Preface: Learning Objectives

1. Heading tags: h1-h6

2. Paragraph tags: p

3. Comment tags: !

4. Link label: a

5. Image tag: img

6. List labels: ul and ol

7. div tag and span tag

8. Table tags: table, tr, td

9. Text Formatting Tab

9.1 Bold labels: <b>and<strong>

9.2 Italicized labels: <i> and<em>

9.3 Underlined tags:<u>

9.4 Strikethrough labels: <s>and<del>

9.5 Superscript and subscript labels: <sup>and<sub>

10. Form Labels

10.1 <form> Labels:

10.2 <input>Labels:

10.3 <label>Labels:

10.4 <select>and <option>tags:

10.5 <textarea>Labels:

10.6 <button>Labels:

11. <br>Tags:

12. Special characters

Summarize

Guess you like

9.1 Bold labels: `<b>`and`<strong>`

9.2 Italicized labels: `<i>` and`<em>`

9.3 Underlined tags:`<u>`

9.4 Strikethrough labels: `<s>`and`<del>`

9.5 Superscript and subscript labels: `<sup>`and`<sub>`

10.1 `<form>` Labels:

10.2 `<input>`Labels:

10.3 `<label>`Labels:

10.4 `<select>`and `<option>`tags:

10.5 `<textarea>`Labels:

10.6 `<button>`Labels:

11. `<br>`Tags: