Text label for HTML learning notes

As a student who loves to learn, whenever learning a little new knowledge, we take a little note, so as not to learn the knowledge secretly run away. After all, "good memory is not as good as a bad pen".

p Paragraph label

As the name implies, it is the label that needs to be used to write a passage, which is used as follows:

        <p>这是一段话（此处省略1500字）</p>

br Line break label

Sometimes, writing two sentences requires a line change, and you can use the b label, which is the same as the carriage return in a normal document, and is used as follows:

        <p>这是一段话（此处省略1500字）<br />这句我就换了行</p>

a Hyperlink label

Jumping between pages requires hyperlinks, where href property defines the URL of the hyperlink, as follows:

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

hr horizontal line label

When you need a long split line, consider the hr label as follows:

        <p>
            我说完了，需要一条分割线结束
            <hr />
            第二部分
        </p>

h1-h6 title label

When you need a title with a different font size, you can use the title label, which starts at h1 and gets smaller and smaller from h6 h1 h6

        <h1>这是h1标签，字体很大</h1>
        <h6>这是h6标签，字体很小</h6>

pre-format the label

Because many HTML tags combine spaces, when you want to show a lot of spaces, they often don't work out the way you think, of course, pre tags can meet your requirements, and text surrounded by pre usually retains spaces and line breaks, and fonts are equally wide. Font iso-width: In fact, Chinese characters are generally equally wide, set font width for letters more obvious, you can see the following example:

        <pre>
             这句话前面大概有13个空格
Hello,html (这句话前没有空格，就会顶行显示)
        </pre>
        <p>Hello,html (这句话是用p标签对比上文字母的字体等宽)</p>

As you can see, l and o in pre are the same width, while l in the p label is narrower than o which is the font equivalent of pre label.

Header header label

The header label is what appears at the top of the page and is used as follows:

        <footer>这里是页脚</footer>

Nav navigation bar label

General web pages under the header have a navigation bar containing the home page and so on, nav is to achieve this effect, generally used with a label, the usage is as follows:

            <nav>
                <a href="http://www.tup.tsinghua.edu.cn/index.html">清华大学出版社</a>
                <a href="https://www.w3cschool.com.cn">w3cschool在线教程</a>
            </nav>

Section section label

section label defines sections (sections, sections) in a document, such as chapters, headers, footers, or other parts of a document, that are not much different from div in usage and are used as follows:

        <section>
          <h1>标题</h1>
          <p>正文内容</p>
        </section>

b Bold label

b Label originally meant bold, now means "style prominent" text, colloquially speaking is the ordinary paragraph text highlights the unsettling text, and this part of the text is presented as bold text, used as follows:

        <p>这句话突然有几个字被<b>加粗</b></p>

Strong bold label

strong in HTML4, which strong emphasized text or "more emphasis on text," changes its meaning to important text in HTML5 The effect is roughly the same as b, which is to bold the text and use it as follows:

        <p>是该<strong>强调</strong>几句话了</p>

i Tilt label

i label, which was originally just tilted, is now used to represent a different part of the text than the rest of the text, and to render that part of the text as italic text, as follows:

        <p>有几个字走着走着就<i>倒</i>了</p>

em Tilt label

em in HTML4 and HTML5 both represent emphasized text or "accented text," and also say that in HTML5 em represents a stressful emphasis that is essentially the same. The effect is roughly the same as i which is to tilt the text as follows:

        <p>又有几个字也<em>倒</em>了下来</p>

The title of the cite work

cite is used to define the title of a work (e.g. books, songs, movies, TV shows, paintings, sculptures, etc.) with an effect similar to that of a tilt, as follows:

        <p>庄子的<cite>《逍遥游》</cite>我并没有看过</p>

Small small text label

small renders sidenotes as small text. D isclaimers, precautions, legal restrictions, or copyright notices are typically made of small text, which is sometimes used for news sources, licensing requirements, and so on. F or text that has been emphasized by em element or marked as important by the strong element, small element does not deemphase the text, nor does it diminish the importance of the text. Of course, b and i tags can also be applied in small as follows:

        <small>这里是<em>小型文本</em><strong>标签</strong></small>

The ins-del tag text changes the label

ins tag defines the inserted text in the document and is used with the del tag to describe updates and corrections to the document. del represents deleted text, usually displayed in a browser with a strikethring text, ins as newly added text, and in a browser as follows. The usage and effect are as follows:

        <ins>这句是新添加的文本</ins>
        <del>这句是刚刚删除的文本</del>

Sub-sup text is labeled up and down

sub tags define subscript text, sup tags define standard text. The usage and effect are as follows:

        <p>
            因式分解得：(x+1)<sup>2</sup>=4
            <br />
            解得：x<sub>1</sub>=-3, x<sub>2</sub>=1
        </p>

Time time label

time tag is a new tag for HTML5 that defines the date time. Date and time information often appears in web pages, but in the past there has been no standard way to label, time tags appear to solve this problem, the purpose is to make it easier for other programs such as search engines to extract date time information, but on the page does not seem to display its contents, the use of the following:

        <p>
            我每天早上<time>6:00</time>起床。
            我姐姐的<time datetime="1995-10-13">生日</time>马上要到了。
        </p>

Var variable label

var tags are often used with code and pre tags to display examples of computer programming code and similar elements, and text marked with var tags is usually italicized.

address contact information label

address label defines the contact information of the author/owner of the document or article, the text in the address element is usually rendered in italics, and address element is usually included in the footer element along with other information, as follows

        <address>
            Written by <a href="mailto:[email protected]">Jon Doe</a>.<br> 
            Visit us at:<br>
            Example.com<br>
            Box 564, Disneyland<br>
            USA
        </address>

Div block container label

div element is a block-level element, it is a container that can be used to combine other HTML elements, div element has no specific meaning, and if used with CSS div element can be used to style properties for large pieces of content. B efore structured elements such as header appeared in HTML5 the most common group container was div element, which represented a common piece of content that was structured in conjunction with CSS Its usage is as follows:

        <div style="color: red;">
            <h3>标题</h3>
            <p>文本内容</p>
        </div>

Span line contenter label

span element is an in-row element, it is a cousin of the div element, it is also a generic element without semantics, in its own right, span element has no effect on the visual effects of the document, with CSS use will change, usage and effects as follows:

        <p>
            在无数蓝色的眼睛和褐色的眼睛之中，我有着一双宝石般的黑色眼睛，<span>我骄傲，我是<strong>中国</strong>人！</span>
        </p>
        <p>
            在无数蓝色的眼睛和褐色的眼睛之中，我有着一双宝石般的黑色眼睛，<span style="color: red;">我骄傲，我是<strong>中国</strong>人！</span>
        </p>

ul no sequence table label

A sequenceless table is similar to a bulleted list in word where list items are arranged in no order and are identified only by bullets as items. The sequenceless table uses ul tag, li which needs to be used for each list item, as follows:

        <ul>
            <li>唱</li>
            <li>跳</li>
            <li>rap</li>
            <li>篮球</li>
        </ul>

ol ordered list label

An ordered list uses the tag ol and its list items still use the tag li which needs to be implemented nested when submenu or more layers are required, with the following code and effects:

        <ol>
            <li>一级菜单第一个</li>
            <ol>
                <li>二级菜单第一个</li>
                <ol>
                    <li>三级菜单第一个</li>
                </ol>
                <li>二级菜单第二个</li>
            </ol>
            <li>一级菜单第二个</li>
            <li>一级菜单第三个</li>
        </ol>

dl describes the list label

dl element represents a list of descriptions consisting of 0 to more than one "term-description" group, each related to one or more "terms" (the contents of a dt element) and one or more "descriptions" (the contents of the dd element), with the following code and effect:

        <dl>
            <dt>赤鷩</dt>
            <dd>鸟，可以御火</dd>
            <dd>赤鷩，山鸡之属，胸腹洞赤，冠金，背黄，头绿，尾中有赤，毛彩鲜明。</dd>
            <dt>鳢鱼</dt>
            <dd>鱼，其状如鳖，其音如羊</dd>
            <dt>肥囗</dt>
            <dd>蛇，六足四翼，见则天下大旱</dd>
        </dl>

Attached: Use character entities to represent special characters

Most alphanumeric characters can be used directly in HTML documents without any problems, however, there are characters that have a special meaning in HTML that the browser is likely to misinterpret, and you need to replace them with a different set of characters, which is the character entity (also known as escape characters), some commonly used symbols as follows:

Here are the notes on HTML text labels. Interested students can use the HTML editor to test the effect of the code.

To learn HTML, go here:

HTML tutorial: https://www.w3cschool.cn/html/

HTML Zero Basics Getting Started: https://www.w3cschool.cn/minicourse/play/html_txy