A summary of common tags and their usage in html

A must-read for zero basics of HTML - a complete list of common HTML tags

Chapter 2: Common html tags

Preface
1. Common tags (1)
2. Commonly used labels (2)
3. List tags
Summarize

Preface

In the previous chapter, we learned about the html page structure and the tags. So what are the labels? What are the functions of various labels? This article will take you through a series of common tags!

1. Common tags (1)

1. body tag

Web page body tag, all web content is inside, and various tags are stored

2. div box tag

Generally divided into areas, the idea of building a skeleton will be used. Used to store: text, pictures, content, etc.

3. p text paragraph tag

It is a text paragraph label that can store large paragraphs of text.

4. h1~h6 title tags

The levels from h1 to h6 gradually decrease

Writing standards, only one h1 (first-level title tag) is allowed to appear on a page. If the web page appears repeatedly, it will be difficult to distinguish the primary and secondary content, just like an essay can only have one essay title.

5. b tag and strong tag (bold text tag)

They are all used for bold text. The difference between the two is: the strong tag is to highlight the key points

6. span text package label

A label that wraps text.

The difference between the p tag and the span tag is that the p tag will wrap automatically, but the span tag will not wrap automatically. Generally, short statements can be wrapped with span tags, and longer ones with p tags.

7. br line break tag and hr delimiter tag

The br tag and the hr tag are both but tags

The br tag is a line break tag

The hr tag is a separator tag

8. i tags and em tags (text italic tags)

Both are italic tags, giving the text a slanted effect.

The difference between the two: the em tag is easier to be recognized by the browser

9. del delete tag

Generally used for price strikethrough

10. center label

center text

11. sup superscript and sub subscript

The content of the label will be below/above the baseline half the current character height, and the font size will be smaller.

12. pre-formatted tags

Text enclosed in pre tags usually retains spaces and line breaks, and the text is also rendered in a monospaced font.

How to use the above tags and code display:

<body>
    <!-- 这是身体标签 -->

    <div class="div1">
        <!--这是一个盒子标签-->
        <p>我是段落文本p标签</p>
        <h1>我是一级标题标签</h1>
        <h2>我是二级标题标签</h2>
        <h3>我是三级标题标签</h3>
        <h4>我是四级标题标签</h4>
        <h5>我是五级标题标签</h5>
        <h6>我是六级标题标签</h6>
    </div>
    <hr>

    <div class="div2">
        <!--这也是一个盒子标签-->

        <!-- 区别是p会自动换行，而span不会自动换行，共用一行 -->
        <p>你好</p>
        <p>我爱前端</p>
        <p>好好学习</p>
        <hr>
        <!--分隔符-->
        <span>你好</span>
        <span>我爱前端</span>
        <span>好好学习</span>
        <br>
        <span>我被br强制换行了</span>
    </div>
    <hr>

    <div class="div3">
        <!--这还是一个盒子标签-->
        <p>我是正常的p</p>
        <p><i>我是被斜体i定义后的p</i></p>
        <p><em>我是被斜体em定义后的p，我更容易被浏览器识别</em></p>
    </div>
    <hr>

    <div class="div4">
        <span>现价：￥99
            <del>原价：￥399</del>
            <!--这是删除符-->
            <center>我是居中对齐</center>
            H<sub>2</sub>O
            CO<sup>2</sup>

        </span>
    </div>
    <hr>

    <div class="5">
        <p>
            你好 我是前端小白
            我爱学前端
            我的空格和换行没有被p保留
        </p>

        <pre>
            你好   我是前端小白
            我爱学前端
            我是被pre保留了空格和换行
        </pre>
    </div>
</body>

Presentation effect:
Insert image description here

2. Commonly used labels (2)

2.1.a tags (links, hyperlinks, anchor tags)

2.1.1.Hyperlink tag

<a href="https://www.baidu.com/" name="baidu" target="_blank" title="百度首页" accesskey="s">百度一下</a>

a:a tag (hyperlink tag)
href attribute: The address path that the hyperlink needs to jump to
name attribute: link name (generally used for anchor link binding jump links)
title attribute: the prompt text of the link (prompt when the mouse hovers)
target attribute: link target window, where the link is opened, web page location
- _self attribute value: The connection is opened on the current page ( this is the default value, if no attribute value is specified, the default is _self is opened on the current page )
- _blank attribute value: Open in new window (open several new windows with a few clicks)
- _new attribute value: Open in a new window (no matter how many times you click, only one will open, except for special product websites such as a certain east page, which requires several pages to be opened, in order to increase the number of visits)
accesskey attribute: link hotkey (to which letter is the value of the accesskey attribute set, use Alt+the letter of this value to automatically jump to the link)

<!--百度网站和哔哩哔哩网站
       1.用_blank属性点几次，打开几个新的页面
       2.用_new属性无论点几次都只会打开一个页面
       3.用_self属性，就在当前页面中跳转。它是默认属性
       特殊：京东网站用_new属性，点几次都会打开几个页面，因为人家是内部强制设定了，为了增加访问量。其他两个属性一样-->
   
   <a href="https://www.baidu.com/" target="_blank" >用_blank属性，百度一下</a><br>
   <a href="https://www.baidu.com/" target="_new" >用_new属性，百度一下</a><br>
   <a href="https://www.baidu.com/" target="_self" >用_self属性，百度一下</a><br>
   <br><br><hr>
   <!-- _self是默认值，在没有指定target属性值的时候，默认在当前页面打开 -->
   <a href="https://www.jd.com/" target="_blank" >用_blank属性，京东一下</a><br>
   <a href="https://www.jd.com/" target="_new" >用_new属性，京东一下</a><br>
   <a href="https://www.jd.com/" target="_self" >用_self属性，京东一下</a><br>
   <br><br><hr>
   <a href="https://www.bilibili.com/" target="_blank" >用_blank属性，哔哩哔哩</a><br>
   <a href="https://www.bilibili.com/" target="_new" >用_new属性，哔哩哔哩</a><br>
   <a href="https://www.bilibili.com/" target="_self" >用_self属性，哔哩哔哩</a><br>
   <br><br><hr>

2.1.2 Anchor links

Create anchor links, basic format:
<a name="锚点名称">链接对象名称</a>

Establish a link, basic format:
<a href="#跳转的锚点名称" name="锚点名称">链接对象名称</a>

Anchor links can not only jump to each other within the same page, but also jump to each other across pages.

Create a page named index01.html

<body>
     <!-- <a href="#跳转的锚点名称" name="锚点名称">链接对象名称</a> -->
     
    <a name="top" href="#bottom">我是顶部，点我可以跳到底部</a>
    <hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr>
    <hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr>
    <hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr>
    <hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr>
    <hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr>
    <hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr>
    <a name="bottom" href="#top">我是底部，点我可以跳到顶部</a>
   
    <!-- 锚点不但可以在同一个页面中互跳，也可在不同页面中互跳 -->
    <hr>
    <hr>
    <a href="index02.html#top">点我跳到index02.html页面中的top锚点链接</a>
</body>

Create another page named index02.html

<body>
    <!-- 空连接：href属性值就只写个#，空连接不跳转-->
    <a href="#">我是空连接</a>
    <hr>
    <a ></a>
    <a href="index01.html">点我回到index01.html网页，实现跨页面互跳</a>
    <hr>
    <a name="top" href="index01.html#bottom">点我回到index01.html的底部,实现跨页面互跳锚点链接</a>
</body>

2.1.3 Null connection

An empty link means that the target link is empty, represented by "#". After clicking the empty link, the page will still stay on the current page.
Format:<a href="#">我是空连接</a>

2.2 Image tags

Format:<img src="./img/1.jpg" alt="图片加载失败" title="这是漂亮的小姐姐" width="200px" height="200px">

img image tag

src image address attribute: used to put the image address

alt: When the image path is wrong, the alt text prompt will appear.

Title: Description of the image. When the mouse is placed on the image, the text describing the image will appear. The
width, height, and height attributes are displayed. The attribute values are numbers, and the unit is generally px pixels. (The image size can be controlled in the img image tag)

Additional information on path issues:

./Directory files in the same folder (commonly used)

.../Directory files in the upper-level folder

How to import images:

1. Relative path: [./ Find directory files in the same folder. 】【.../Find the directory file in the upper-level folder】.
2. Absolute path: the path starting from the C/D/F drive in the computer. It is not commonly used, because the picture is in your own computer, which is not conducive to other people's use.
3. Network address: directly find an online picture link address. The limitation is that you can view the pictures when there is an Internet connection and the pictures have not been deleted from the Internet.

Demo:

 <!-- 相对路径引入图片 -->

    <img src="./img/1.jpg" alt="图片加载失败" title="这是漂亮的小姐姐" ><!-- 这个是图片实际大小 -->
    <hr>
    <!-- 这个是通过img标签行内设置宽高之后的 -->
    <img src="./img/1.jpg" alt="图片加载失败" title="这是漂亮的小姐姐" width="200px" height="200px">
    <!-- 故意放错图片，alt里的文字就会显现出来 -->
    <img src="1.jpg" alt="图片加载失败">

    <!-- 网路地址引入图片 -->
    <img src="http://www.jj20.com/tx/qita/213161.html" alt="">

3. List tags

3.1 Unordered list tags`<ul>`

1. Unordered list tags are <ul>marked, and sub-elements are <li>tag list items
. 2. Shortcuts can be used to generate multiple <li>sub-element list tags. Such as: ul>li*3；li*6. Several li sublist items will be generated.
3. In the label, you can use the type attribute to modify the black point type in front of <ul>the sublist item.<li>

<ul type="disC">

-Default: disc (filled circle)

Hollow point: circle

Solid square: square

Do not display the symbol none

code demo

 <body>
    <!-- 快捷生成多个子列表项：ul>li*3或li*5或ul.li{$}*5 -->
    <ul>
        <!-- 列表项的默认样式是实心圆 -->
        <li>我是列表项一</li>
        <li>我是列表项二</li>
        <li>我是列表项三</li>
    </ul>

    <ul type="circle">
        <!-- 指定列表项的样式是空心点 -->
        <li>我是列表项一</li>
        <li>我是列表项二</li>
        <li>我是列表项三</li>
    </ul>
    <ul type="square">
        <!-- 指定列表项的样式是实心方块 -->
        <li>我是列表项一</li>
        <li>我是列表项二</li>
        <li>我是列表项三</li>
    </ul>
    <ul type="none">
        <!-- 指定列表项不显示符号 -->
        <li>我是列表项一</li>
        <li>我是列表项二</li>
        <li>我是列表项三</li>
    </ul>

</body>

Show results:
Insert image description here

3.2 Ordered list tags`<ol>`

1. The ordered list label is <ol>marked, and the sub-element is <li>the label list item
2. Modify the sorting type through the type attribute: the default is Arabic numeral 1 to start sorting

<ol type="a"><!--用小写字母a开始排序-->

The value of the type attribute can be: List several types

aStart sorting with a lowercase letter

A starts sorting with a capital letter

i/I Start sorting with Roman letters

Code demo:

<!-- 默认是阿拉伯数字123排序 -->
    <ol>
        <li>张三</li>
        <li>李四</li>
        <li>王五</li>
    </ol>
    <ol type="a">
        <!-- 指定用小写字母a开始排序 -->
        <li>张三</li>
        <li>李四</li>
        <li>王五</li>
    </ol>
    <ol type="A">
        <!-- 指定用大写字母A开始排序 -->
        <li>张三</li>
        <li>李四</li>
        <li>王五</li>
    </ol>
    <ol type="i">
        <!-- 指定用小写罗马字母i开始排序 -->
        <li>张三</li>
        <li>李四</li>
        <li>王五</li>
    </ol>
    <ol type="I">
        <!-- 指定用大写罗马字母I开始排序 -->
        <li>张三</li>
        <li>李四</li>
        <li>王五</li>
    </ol>

Effect display:
Insert image description here
3. Display unsymbols in front of the ordered list
. Note that the ordered list, as its name implies, must have order. If the ordered list must have no order, it does not support the value of the type attribute being none. So if you insist on not displaying symbols in front of the ordered list, you can add a list-style style to it with the attribute value noe. Adding styles involves the knowledge of css styles discussed in the next section.

Method One: Directly add list-style:none to the internal style.
Method Two: By introducing the external style, it is cleared by default.
These two methods will be discussed in the next chapter.

<!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>
    <!-- 方法二：通过引入外部样式里，有默认清除 -->
    <!-- <link rel="stylesheet" href="rest.css"> -->

    <!-- 方法一：直接给ol加一个样式就可以清除前面的符号 -->
    <style>
        /* 直接给ol加一个样式就可以清除前面的符号了，也可以通过引入外部样式里，有默认清除 */
        ol {
      
      
            list-style: none;
        }
    </style>
</head>

<body>
    <!-- 注意，有序列表顾名思义就是要有顺序，如果非要有序列表没有顺序的话，它是不支持type属性的值为none的。那么如果硬要有序列表前面不显示符号，方法是：给它加一个list-style:none的样式（可以直接添加在内部样式里或是引入外部样式默认清除样式）
 -->
    <ol type="I">
       <p>这是有序列表但是我可以通过设置list-style: none属性值去掉符号</p>
        <li>张三</li>
        <li>李四</li>
        <li>王五</li>
    </ol>
</body>

</html>

Rendering:
Insert image description here

3.3 Describe list tags (also called custom list tags)`<dl>`

1. The description list tag <dl>is marked with two sub-elements: <dt>and <dd>tag list item
2. The description list is generally used for a list of items and a combination of items. The format is:

<dl>
        <dt>名词一</dt><dd>解释一</dd>
        <dt>名词二</dt><dd>解释二</dd>
        <dt>名词三</dt><dd>解释三</dd>
        
    </dl>

Show results:
Insert image description here

Summarize

The above is the usage and code display of some common tags in HTML that the editor has compiled for you. Of course, there are many tags that have not been compiled yet, and the editor will add some in the future. It was compiled with reference to various sources and my own understanding. If there may be inaccuracies and omissions, I hope you guys can enlighten me and make corrections. I would like to thank you in advance.