当前位置：网站首页>Web learning record (medium)

Web learning record (medium)

2022-04-23 02:24:00 【jigsaw_ zyx】

In continuous learning …
Recently, the short poem competition is in full swing , Many people's romantic feelings are bursting out , Here are examples of poems from the short poem contest , If you like, you can also go and have a look ..

Tabs tab

Insert picture description here

Paragraphs and line breaks

As you can see in the previous example , We use p Element definition paragraph .p The element is HTML One of the most commonly used elements in .

Examples are as follows ：

 example  1.

<p> Hypertext markup language (HTML) Is a standardized way to create Web Page and Web Applied standardized markup language . In the cascading style form (CSS) and JavaScript With the help of the ,HTML Has successfully built a set of oriented Web Development and application platform .</p>
 example  2.

<p> Hypertext markup language (HTML) Is a standardized way to create Web Page and Web Applied standardized markup language .
 In the cascading style form (CSS) and JavaScript With the help of the ,HTML Has successfully built a set of oriented Web Development and application platform </p>

example 1 And example 2 The only difference is , example 2 In, we wrap lines in the content of the paragraph . that , When actually displayed , Will line breaks be displayed ？

The display effect is as follows ：

Insert picture description here
You can see , Although we wrap lines in the paragraph , But there is no line break when displaying . So what do we do if we want to wrap a line in a paragraph ？

We can use <br> label .

Examples are as follows ：

<p> Hypertext markup language (HTML) Is a standardized way to create Web Page and Web Applied standardized markup language .<br>
 In the cascading style form (CSS) and JavaScript With the help of the ,HTML Has successfully built a set of oriented Web Development and application platform </p>

The display effect is as shown in the figure ：

Insert picture description here

list

We often use lists in our life , For example, shopping lists 、 To do list . stay HTML in , We can create unordered lists 、 Ordered list and description list , And another list can be nested in one list .

Usually , Lists are made up of parent and child elements , The parent element is used to specify the type of list to be created , The child element is used to specify the type of list item to be created .

The elements of the three list types are as follows ：

| type | Parent element | Subelement |
| ------------ | ------------ |
| Ordered list | ol | li|
| Unordered list | ul | li|
| Description list | dl| dt, dd|

Tips ：

ol: order list;

ul: unorder list.

Ordered list instance

If the order of the list cannot be exchanged at will , We use ordered lists . for example ：

<body>
    <p> Basic exercise steps in the gym </p>
    <ol>
        <li> Warm up </li>
        <li> Anaerobic exercise ( Including push ups 、 sit-ups 、 Equipment exercise, etc )</li>
        <li> Aerobic exercise ( Including jogging 、 A bike 、 swimming 、 Mountaineer, etc )</li>
        <li> The tensile 、 Relax </li>
    </ol>
</body>

The display effect is as shown in the figure ：
Insert picture description here

Unordered list instance

If the order of the list is not important , We use unordered lists . for example ：

<body>
    <p> Shopping list </p>
    <ul>
        <li> yogurt </li>
        <li> Apple </li>
        <li> chicken breast </li>
        <li> Incandescent light bulbs </li>
    </ul>
</body>

The display effect is as shown in the figure ：
Insert picture description here

Describe list instances

When we need to describe the names that appear in groups ( The term ) And its value , We use a description list . for example ：

<body>
    <p>HTML Milepost </p>
        <dl>
            <dt>1995 year 11 month 24 Japan </dt>
            <dd>HTML2.0 Release , Corresponding IETF The document for RFC 1866</dd>
            <dt>1997 year 1 month 14 Japan </dt>
            <dd>HTML 3.2 With W3C Published in the form of recommended standards .  And then HTML The standards are made up of W3C Organization Publishing .
            <dt>1997 year 12 month 18 Japan </dt>
            <dd>HTML 4.0 Release .</dd>
            <dt>2014 year 10 month 28 Japan </dt>
            <dd>HTML5  Release .</dd>
            <dt>2016 year 11 month 1 Japan </dt>
            <dd>HTML 5.1 Release .</dd>
        </dl>
</body>

The display effect is as shown in the figure ：
Insert picture description here

text formatting

A web page usually contains text information , For different text types , We can choose the right HTML Semantic elements are marked . for example ,em Element is used to mark and emphasize part of the content ,small Element is used to annotate 、 Signature and other types of text .

Common elements are as follows ：

 Elements 	 meaning 	 give an example 
strong	 Show the importance of content 	-
em	 Indicates the focus of the content 	-
mark	 Indicates that the content is highlighted 	 Highlight search terms in search results pages or articles 
small	 A marginal note indicating details 	 Usually include disclaimers 、  matters needing attention 、 Legal restrictions 、 Copyright information, etc 
b	 Words that readers are expected to pay attention to 	 Such as the keywords in the document summary 、 Product name in comments 、 Article introduction, etc 
i	 Represents text that is different from other text , Having a different voice or tone 	 Such as the name of the classification 、 Technical terminology 、 Translated prose, etc 
sub	 Define subscripts 	 Common subscripts include chemical symbols, etc 
sup	 Define superscript 	 Common superscripts include trademark symbols 、 Index and footnote number, etc

stay HTML5 in , More emphasis on semantics . therefore , When we choose which element to use for text markup , We should focus on semantics , Not the style .
What does that mean ？ Don't use... To tilt a paragraph i Elements , But this passage has i The semantics of elements . If you just want the text to tilt , We should write CSS To change .

Examples are as follows ：

<body>
    <h1> The first chapter of the Analects of Linguistics </h1>
    <p><small>
    <b> author ：</b><abbr title=" Mingqiu , Zizhongni "> Confucius <sup><a href="#">1</a></sup></abbr>（<time> front 551 year 9 month 28 Japan － front 479 year 4 month 11 Japan </time>）
    </small></p>
    <h2> This quotation </h2>
    <p>《 Learn from 》 yes 《 The analects of Confucius 》 The title of the first article .《 The analects of Confucius 》 The first two or three words of the first chapter are generally used as the title of each article in the .《 Learn from 》 One article includes 16 Chapter , The content involves many aspects . The point is 
     <strong>「 I'll save myself three times a day 」;「 Save and love , Let the people use their time 」;「 The use of propriety , Harmony is precious 」 And benevolence 、 Filial piety 、 Letter, etc </strong> Moral category .</p>
    <h2> original text </h2>
    <p> Confucius said ：「<mark> Learn from time to time , Not to mention ？</mark> Friends come from afar , joy ？ I don't know , Not sullen , Not a gentleman ？」 </p>
  </body>

It is shown as follows ：
Insert picture description here

quote

HTML There are also elements used to mark references in ——q and blockquote Elements :

q Element is used for short references , Such as the quotation in the sentence ;

blockquote Element represents a separate reference , It defaults to a new line .

Examples are as follows ：

<body>
    <h1>W3C</h1>
    <p>
        <dfn>W3C</dfn> (World Wide Web)  The World Wide Web Alliance was founded in 1994 year . It is 
        <q>Web The most authoritative and influential international neutral technical standards institution in the field of Technology </q>.
    </p>
    <p> Its official definition </q> by ：</p>
    <blockquote cite="https://www.w3.org/">
     The World Wide Web Consortium (W3C) is an international community that develops open standards to ensure the long-term growth of the Web.
    </blockquote>
</body>

The display effect is as shown in the figure ：
Insert picture description here
among ,blockquote Elemental cite Property specifies the reference source link