Do you know all about html Basics – building the web( (complete)

Time:2021-6-13

In this article, you will see the common tags in HTML and some points you don’t pay attention to. Very suitable for beginners! One day, Mirs rose in the same wind and soared up to 90000 Li! Study together, progress together!


1. What is HTML?

It’s a markup language that tells browsers how to organize their pages. It consists of a series of elements.

2. HTML elements
  • Start tag eg:<p>
  • End tag eg:</p>
  • What is written in the middle of the content label is the content.
  • The combination of the above three elements is a complete element.
3. Emphasis – bold [strong], italics [em], underscores [ins]

<p>Pursuit of < strong > dream < / strong > < EM > script < / EM > no < ins > stop < / INS > stop</p>

The script of pursuing dreams never stops

4. Block level and inline elements

Block level element: it is usually used to display the structured content on the page, eg: paragraph, list, navigation menu, footers, etc. Generally, one line will be exclusive, and the subsequent content will be displayed on the next line.
Inline element: usually appears in block level elements and surrounds a small part of the document content without causing line breaks.

eg: <em>First < / EM > < EM > second < / EM > < EM > last</em>
firstsecondlylast

5. Empty element

It can also be understood as a single tag
<img height="80">
Do you know all about html Basics - building the web( (complete)
Note: generally, the width / height attribute is changed only once, that is to say, it can be scaled equally.

6. Properties

<p class="edit-p"></p> The attribute and format of the class P element: one space, two signs, three quotation marks, where quotation marks are single quotation marks / double quotation marks. It depends on personal habits.
Of course, there are also some valueless attributes. The disabled attribute below makes the input box gray and forbids user input.

eg:<input type="text" disabled/> <input type=”text” disabled/>
eg:<input type="text" /> <input type=”text” />

7. Hyperlink – powerful a tag

<p>Nobel Prize for mathematics and Physics=“ https://developpaper.com/go.php?go=aHR0cHM6Ly93d3cuYmFpZHUuY29tLw== " target="_ The report card of Einstein's mathematics</p>

<p>The official announcement of Nobel PrizeEinsteinThe report card of Mathematics</p>

8. Uniform resource locator (URL)

Is a text string that defines the location on the network. Use the path to find the file. File.html is the same directory as the current file. Return to the previous level directory, represented by.. /.

be careful:

  • Links should be as short as possible and relative links should be used as much as possible.
  • Link to non HTML resources with clear instructions.
<p><a href=" http://www.example.com/large-report.pdf "> Download sales report (PDF, 10MB)</a></p>

Download sales report (PDF, 10MB)

  • Use the download property when downloading links

`<a href=”https://download.mozilla.org/?product=firefox-latest-ssl&os=win64&lang=zh-CN”
download=”firefox-latest-64bit-installer.exe”>
Download the latest Chinese version of Firefox – Windows (64 bit)
`

Download the latest Chinese version of Firefox – Windows (64 bit)

  • Email link

<a href=" mailto:[email protected] "> email to nowhere</a>
Among them, the email address is optional. If you forget, it doesn’t matter. Users can send email to the address they choose.

Here is an example of CC, BCC, subject and body:

`
Send mail with cc, bcc, subject and body
`

Note: use? Separate the main URL from the parameter values, and use & to separate the parameters in mailto. This is the standard URL query markup method.

9. Absolute URL and relative URL

(projects below is the root directory)

10. HTML document
<!DOCTYPE html>
<html>
      <head>
            <meta charset="UTF-8">
            < title > my first blog < / Title >
      </head>
      <body>
            <p>Our future is not a dream, it will come true! We can do it.</p>
      </body>
</html>

Where is the document declaration.

htmlThe element is the root element, wrapping the entire page.

headThe element is a container and the content is not displayed on the page.

metaThe charset in the element is usually written as’ UTF-8 ‘, which covers most of human characters.

titleElement to set the page title.

bodyThe element contains all the content that appears on the page when you visit it.

11. Whitespace in HTML

(look at the following code. The essence is that there is only one space difference. Those spaces do not work. HTML will treat continuous white space characters as a space character.)

<p>Always on the road, so there are unlimited possibilities</ p>
<p>All the way,       
              So there is infinite possibility</p>

Always on the road, so there are unlimited possibilities.

Always on the road, so there are unlimited possibilities

12. Special characters in HTML
literal character Equivalent character reference
< &lt;
> &gt;
&quot;
&apos;
& &amp;
<p>Summer in zuojialong</p>
<p>Zuojialong & lt; p&gt; My summer</p>

Zuo Jialong

My summer

Summer in zuojialong

13. HTML comments

<!-- < p> Users can't see it, but it's very useful</ p> -->

14. What’s in the head tag?
  • When the page is loaded, the content in the head tag will not be displayed on the page, but its function is to save some metadata of the page.

<meta charset="UTF-8">

  • If you set charset to GBK (Chinese mainland character set), the page will be garbled.

Note: Chrome will automatically correct the wrong code, you may not see it.

  • Apply CSS and JavaScript in HTML, respectively<link>and<script>Elements

<link>It is often at the head of a document and has two attributes,rel="stylesheet"Indicates that this is a style sheet for the document,typeSpecifies the MIME type of the linked document,hrefContains the path to the style sheet file.
<link rel="stylesheet" type="text/css" href="my-css-file.css" />
<script>Put it at the end of the document (before the body) to ensure that the HTML content is parsed before loading the script.
<script></script>

15. HTML word processing

The labels of the six Title elements are as follows. Among them, H1 is best used once, which is the top-level title. There should be no more than three titles per page:

<h1>Keep going in the rain</h1>
<h2>Zhang Shaohan</h2>
<h3>Don't be afraid of pain if you have a dream</h3>
< H4 > keep walking in the rain
The sun should be warm
< H6 > everyone should have a dream

The font color and size of the above titles decrease step by step.

16. List
  • Unordered list
<ul>
   <li>Eggs</li>
   <li>Milk</li>
   <li>Goubuli</li>
</ul>
  • Ordered list, can be nested
<ol>
   <li>Noodles</li>
   <li>Rice</li>
      <ul>
         <li>Hot cabbage</li>
         <li>Braised pork in brown sauce</li>
      </ul>
   <li>Fish meal</li>
</ol>
17. High level text typesetting

Description list

<dl>
   < DT > inner monologue
      < DD > in a drama, the inner activities of a character to himself... < / DD > is the result of the drama
   < DT > language monologue
      < DD > in a play, a character puts his ideas into the play.... < / DD >
   < DT > narration
      < DD > in a play, the act of playing up humor or dramatic effects
</dl>

<dl>
< DT > inner monologue

< DD > in a drama, the inner activities of a character to himself... < / DD > is the result of the drama

< DT > language monologue

< DD > in a play, a character puts his ideas into the play.... < / DD >

< DT > narration

< DD > in a play, the act of playing up humor or dramatic effects

</dl>

The description list uses dl Label, each item withdtClosed, each description with dd close. The browser’s default style indents between the description part of the description list and the description terms. A termdtThere can be multiple descriptions at the same timedd

18. Citation

Block reference<blockquote>The elements are wrapped up inciteUsed in attributeURLTo point to the referenced resource.
In line reference<q>The elements are wrapped up inciteUsed in attributeURLTo point to the referenced resource.

19. Abbreviations < abbr >
<p>We use < abbr > HTML < / abbr > to organize web documents</ p>

<p>We use < abbr > HTML < / abbr > to organize web documents</ p>

When you move the mouse over HTML, try to see what happens…

20. SuperscriptAnd subscript
<p>The chemical equation of caffeine is C < sub > 8 < / sub > H < sub > 10 < / sub > n < sub > 4 < / sub > o < sub > 2 < / sub >. Equation x < sup > 2 < / sup > = 4</p>

<p>The chemical equation for caffeine is C8H10N4O2. equation x2=4</p>

21. Marking time and date

< time datetime = "2020-10-10" > October 10, 2020 < / time >
The results are as follows
< time datetime = “2020-10-10” > October 10, 2020 < / time >

This result is not very clear. Do you know what happened???

22. HTML layout element details
  • <main>Store the unique content of each page, each page can only be used once, and directly located in the <body>It’s best not to nest it into other elements.
  • <article>The content surrounded is an article.
  • <section>And<article>Similar, but<section>It is more suitable for organizing pages according to their functions.
  • <aside>Contains some indirect information (term entry, author profile, related links, etc.).
  • <header>If it is a child element of the body element, it is the global header of the website; If it’s a child element of an article / section, it’s a header specific to those sections.
  • <nav>Main navigation.
  • <fotter>Footers.
23. No semantic element
<p>Youth freedom and youth mania < span class = "editor note" > [editor's note: the stage light should be on at this moment] < / span ></p>

Here, “editorial comments” only provide additional guidance for stage directors; There is no concrete semantics.

<div>Block level no semantic elements, eg: an e-commerce website page has a always displayed shopping cart component, can not be usedaside/section, because it is not much related to the main content, nor is it part of the main content LLL on the pagediv. Note: choose it when there is no better semantic solution, and use it as little as possible, otherwise the maintenance cost is too high.

24. Line feed and horizontal split line

<br>You can wrap lines in a paragraph.
<hr>Generates a horizontal split line in the document.

All of the above are important knowledge points summarized by referring to the most authoritative MDN web docs, and I would like to share with you. What’s wrong, welcome to the comment area!

Recommended Today

The bootstrap form label and input are displayed on one line

The bootstrap version used in this article is 4.4.1 1. Use form inline <form action=””> <div class=”form-group”> <div class=”form-inline”> < label class = “mb-2” > specification value: < / label > < input class = “form control MR-2 mb-2” type = “text” placeholder = “e.g. white” / > < input class = “form control MR-2 […]