Common tags in HTML

Common tags in HTML

1. Understanding HTML tags

In HTML, tags appear in pairs. In HTML, codes are organized by tags. The following shows the structure of HTML tags through the display of Hello World.

<html>
    <head></head>
    <body>
        Hello  World!
    </body>
</html>

As shown in the above code block, it is organized in angle brackets, and this thing that appears in pairs is called a tag (tag), and it can also be called an element (element);

Usually, a tag appears in pairs, start tag, end tag, and the content of the tag between these two tags. (A small number of tags appear as a tag, and these tags are also called single tags)
Tags can generally be nested. The content between a tag can be one or more tags. At this time, a tree structure is formed between these tags.
You can assign attributes to the tag in the start tag. The attribute is equivalent to a key-value pair, and there can be one or more.

The html in the above code segment is the topmost label in this file, that is, the root node of the tree. The head stores some attributes of this page, and the body stores what content this page contains.

Next, we need to introduce which tags are supported in HTML, what each tag does, and what key attributes each tag has.

2. Introduction to HTML tags

When writing html code in VS Code and IDEA, you can use shortcut keys to quickly generate a code frame. Enter ! (English) in VS and press the tab key to generate a basic code frame. content can be written.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    Hello World!
</body>
</html>

In this generated code framework, some basic properties of this page are roughly introduced

The following is an introduction to the commonly used tags in html:

annotation label

Code comments in html are usually quite different from comments in other languages. In html, // and / **/ and # are not legal comments, and the content of the comments will not be displayed on the page, but if you view the source code of the page Comments can usually be found in the .

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 这是一个html中的注释标签 -->
    Hello World!
</body>
</html>

In the page, F12 can view the source code and view comments

In VS Code, ctrl + / can be used to quickly comment on the code.

title tag

In html, h1-h6 is used to represent the first-level headings-sixth-level headings. The larger the number, the smaller the font.

</head>
<body>
    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6>
</body>
</html>

The displayed effect is as follows:

Whether the label wraps in html has nothing to do with the writing of the code, but has something to do with the nature of the label itself. Among the title tags, each label occupies a single line.

paragraph tag

use in html

To represent the paragraph tag, the method of use is to write the content of the paragraph to

and

Between, in order to clearly show the effect between each paragraph, use Lorem to generate a random text.

</head>
<body>
    <!--这是段落标签-->
    <p> 这是一个段落Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam illo quasi delectus necessitatibus reprehenderit atque explicabo labore inventore hic laudantium suscipit, ipsum veniam amet repellendus cupiditate consequuntur tenetur ad. Officiis?</p>
    <p> 这是一个段落Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam illo quasi delectus necessitatibus reprehenderit atque explicabo labore inventore hic laudantium suscipit, ipsum veniam amet repellendus cupiditate consequuntur tenetur ad. Officiis?</p>
    <p> 这是一个段落Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam illo quasi delectus necessitatibus reprehenderit atque explicabo labore inventore hic laudantium suscipit, ipsum veniam amet repellendus cupiditate consequuntur tenetur ad. Officiis?</p>
    <p> 这是一个段落Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam illo quasi delectus necessitatibus reprehenderit atque explicabo labore inventore hic laudantium suscipit, ipsum veniam amet repellendus cupiditate consequuntur tenetur ad. Officiis?</p> 
</body>
</html>

Between each paragraph, line breaks and obvious paragraph spacing can be adjusted through CSS.

Newline label: br

The br tag is used in html to wrap the text, and the br tag is added to the above paragraph to achieve the effect of wrapping.

The br tag is also a single tag, no end tag is required

formatting tags

Text can be formatted in html, and formatting related operations include: thicken, italic, strikethrough and underline.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 这是格式化标签,不独占一行, 加上<br>换行 -->
    <strong>加粗</strong>
    <b>加粗</b>
    <br>
    <em>倾斜</em>
    <i>倾斜</i>
    <br>
    <del>删除线</del>
    <s>删除线</s>
    <br>
    <ins>下划线</ins>
    <u>下划线</u>
</body>
</html>

The displayed effect is as follows:

The above formatting tags do not occupy a single line, and need to add line break tags. In the actual development process, CSS is usually used to achieve the above effects

image tag

Use the img tag to achieve the display effect of the image, where the img tag must contain the src attribute to describe the path of the image, including relative paths and absolute paths.

Relative path: based on the location of the html file, find the location of the picture
- Same-level path: Just write the file name directly (or ./)
- Next level path: image/1.jpg
- Upper level path: …/image/1.jpg
Absolute Path: A complete disk path, or network path. For example:
- Disk path: E:\test.jpg
- Network path: https://tse1-mm.cn.bing.net/th/id/OIP-C.xq6cOv82ubIhJY9qkFd5AgHaEK?pid=ImgDet&rs=1
Additional attributes in the img tag:

alt tag: When the image does not display correctly, an alternate text will be displayed

title tag: When the mouse hovers over the image, a replacement text will be displayed

width / height describe the size of the picture, control the width and height.

 <img src="./test.jpg width="500px" height="800px">

hyperlink label

The hyperlink tag in html uses the a tag, and there are two attributes in the a tag: href and target attributes
- href : Must have, indicating which page will jump to after clicking, overwriting the original page.
- target : generally written as targrt = “_blank”, the function is to jump to a new page without overwriting the original page.

<!-- 这是一个超链接标签 其中的链接也可以替换为ip地址-->
<body>
    <a href="https://www.baidu.com">百度</a>
    <!-- target 使用, 不会覆盖原来的页面,打开了一个新的页面-->
    <a href="https://www.baidu.com" target="_blank">百度</a>
</body>

form tab

HTML uses table as a table tag, where the tr tag represents a row, the td tag represents a cell, and the th tag represents a cell in the header.

The following attributes can be added to the table tag:

Width and height attributes, set the length and width of the table
align attribute: Indicates the alignment center/left/right of the table relative to the surrounding elements
The border attribute adds a border line to the table, 1 means there is a border (the larger the number, the thicker the border), "" means no border.
The cellspacing attribute means to set the distance between cells, generally the default is 2px, usually in order to set the border of the table to be completely filled, generally set this attribute to 0 px
cellpadding attribute: Indicates the distance between the content in the cell and the border, generally the default is 2 px

In order to make the table look more beautiful, the css class is usually set to center the text in the table.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- css使表格中的文字居中 -->
    <style>
        td{
      
      
            text-align: center;
        }
    </style>
</head>
<!-- 这是一个表格标签 -->
<body>
<!-- 设置table标签的相关属性 -->
    <table width="500px" height="300px" border="1px" cellspacing="0" cellpadding = "5">
        <tr>
            <th>姓名</th>
            <th>电话</th>
        </tr>
        <tr>
            <td>张三</td>
            <td>1233</td>
        </tr>
        <tr>
            <td>宋六</td>
            <td>1156</td>
        </tr>
    </table>
</body>
</html>

When the align attribute in the table tag is set, the table is centered/left/right relative to the surrounding elements of the page

<!-- 将表格设置为水平居中 -->
<table border="1px" cellspacing="0" cellpadding = "5" align="center">

list label

The role of list tags is usually to lay out elements, including ordered lists and unordered lists. Generally, when representing a parallel item, an unordered list will be used

Ordered list: ol li Unordered list: ul li

<body>
    <h3>我的列表如下</h3>
<!-- 有序列表 -->
    <ol>
        <li>aa</li>
        <li>bb</li>
        <li>cc</li>
    </ol>
<!-- 无序列表 -->
    <ul>
        <li>aa</li>
        <li>bb</li>
        <li>cc</li>
    </ul>
</body>

The display effect is as follows:

form label

Form tags are an important way for users to enter, including form fields and form controls, and the most commonly used form controls are input tags.

input tag

Various input controls can be implemented using the input tag, including single-line text boxes, password boxes, buttons, radio boxes and check boxes, etc.;

input tag attribute
- type : There are many types of values (must have), including text, password, button, checkbox, image, radio, etc.
- name : Give the input tag a name. For radio buttons, only buttons with the same name can select one more.
- value : the default value in the input tag
- checked : It is used to set the radio button and checkbox to be checked by default.
- maxlength : Set the maximum length.
The input tag uses
- text box
```
 <input type="text">
```
- password box
```
 <input type="password">
```
- Single box
Choose one of male and female, the default selection is male
```
<input type="radio" name ="sex" checked = "checked">男
<input type="radio" name = "sex">女
```
- check box
```
<h4>今天干什么</h4>
<input type="checkbox">写博客
<input type="checkbox">刷力扣
<input type="checkbox">学html
```
- normal button
```
 <input type="button" value="我是个按钮">
```
There is no response after clicking the button here, and it can be used with js later to display the click effect
- Submit button (used with form)
```
<form action="test.html">
    <input type="text" name="username">
    <input type="submit" value="提交">
</form>
```
The appearance of the submit button is similar to button 1, which will trigger the interaction between the form and the server.
- file selection box
After clicking, the file explorer will be triggered, and the file will be selected for upload.
```
 <input type="file">
```
select tag

The select tag is mainly used in drop-down menus, and the options in the drop-down menu are defined in the option tag

selected="selected" means that it is selected by default, if you do not specify the default selection, it will be the first one by default

 <select>
        <option>2010</option>
        <option>2011</option>
        <option>2012</option>
        <option>2013</option>
        <option>2014</option>
        <option>2015</option>
    </select>

    <select>
        <option>北京</option>
        <option selected="selected">上海</option>
        <option>郑州</option>
        <option>西安</option>
     </select>

[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-nM3lkSzw-1680319948963)(C:/Users/love46/AppData/Roaming/Typora/typora-user-images/ image-20230306101732436.png)]

textarea tag

Multi-line edit box: An unlimited amount of text can be accommodated in the text area, and the default font of the text is a monospaced font (usually Courier). The size of the textarea can be specified through the cols and rows attributes, but a better way is to use the height and width attributes of CSS

<textarea name="" id="" cols="30" rows="10"></textarea>
</body>

[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-VhWR1tpd-1680319948964)(C:/Users/love46/AppData/Roaming/Typora/typora-user-images/ image-20230306102647356.png)]

The above tags can also be called controls, which are the basic elements of a graphical interface

no semantic label

div tags and span tags are commonly used for web page layout.
- div is a single line and a big box. It is often used to define a split block and an area part in an html document, and is often used to combine block-level elements so that these elements can be formatted through css
- span is not a single line, it is a small box. It is used to combine inline elements in the document.
```
<div>
  <span>html</span>
  <span>css</span>
  <span>js</span>
</div>

<div>
   <span>c</span>
   <span>java</span>
   <span>c++</span>
   <span>go</span>
 </div>
```

3. Case application

Comprehensive application of html page tags – resume display

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简历信息页</title>
</head>
<!-- 简历展示信息 -->
<body>
    <h1>张三</h1>
    <!--基本信息  -->
    <div>
        <h2>基本信息</h2>
        <img width = "500px"src="test.jpg">
        <p>
            <span>求职意向:</span>
            <span>Java开发工程师</span>
        </p>
        <p>
            <span>联系电话:</span>
            <span>XXX-XXXX-XXXX</span>
        </p>
        <p>
            <span>邮箱</span>
            <span>[email protected]</span>
        </p>
        <p>
            <a href="https://github.com/echoyter">我的github博客</a>
        </p>
        <p>
            <a href="https://www.csdn.net/">我的CSDN博客</a>
        </p>
    </div>
    <!-- 教育背景 -->
    <div>
        <h2>教育背景</h2>
        <ol>
            <li>1990-1996 幼儿园 </li>
            <li>1996-2002 小学</li>
            <li>2002-2005 初中</li>
            <li>2005-2008 高中</li>
            <li>2008-2012 本科</li>
        </ol>

        <h2>专业技能</h2>
        <ul>
            <li>Java基础语法扎实</li>
            <li>数据结构熟练应用</li>
            <li>熟悉计算机网络理论</li>
            <li>掌握Web开发功能</li>
        </ul>

        <h2>我的项目</h2>
        <ol>
            <li>留言墙</li>
            <p>
                <span>开发时间:<span>
                <span>2008年9月到2008年12月</span>
            </p>
            <p>功能介绍</p>
            <ul>
                <li>支持留言发布</li>
                <li>支持匿名留言</li>
            </ul>
            <li>学习小助手</li>
            <p>
                <span>开发时间:</span>
                <span>2008.9-2008.12</span>
            </p>
            <p>功能介绍</p>
            <ul>
             <li>支持错题检索</li>
             <li>支持同学探讨</li> 
            </ul>
        </ol>
    </div>
    <div>
        <h2>个人评价</h2>
        <p>在校期间学习成绩优良,多次获得奖学金</p>
    </div>
</body>
</html>

Results as shown below :

[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-dcNPZrPF-1680319948965)(C:/Users/love46/AppData/Roaming/Typora/typora-user-images/ image-20230306111147615.png)]

The above html tags only describe the skeleton structure of the page. In the next part, we will learn how to beautify the page by learning css

"Front-end Three Musketeers": Common tags in HTML

Common tags in HTML

1. Understanding HTML tags

2. Introduction to HTML tags

3. Case application

Guess you like