Basics of getting started with HTML

Table of contents

Basics of getting started with HTML

what is HTML

HTML stands for HyperText Markup Language (HTML), which is a standard markup language for creating web pages.

HTML file structure

<!DOCTYPE html> 
< html > 
< head > 
    < meta  charset = "UTF-8" > 
    < title > here is the title of the page </ title > 
</ head > 
< body > 
    < h1 > here is the title of the article </ h1 > 
    < p > here is a paragraph </ p > 
</ body > 
</ html >

  • <!DOCTYPE html>Declared as HTML5 document
  • <html>element is the root element of an HTML page
  • headThe element contains the meta data of the document, such as <meta charset="UTF-8">defining the web page encoding format asUTF-8
  • <title>element describes the title of the document
  • <body>Element contains visible page content
  • <h1>element defines a large title
  • <p>element defines a paragraph

HTML common tags

paragraph tags

<p>...</p>, role: define a paragraph

Example:

<!DOCTYPE html> 
< html > 
< head > 
    < meta  charset = "UTF-8" > 
    < title > this is the title of the page </ title > 
</ head > 
< body > 
    < p > HTML refers to hypertext markup Language (HyperText Markup Language, referred to as: HTML), is a standard markup language used to create web pages. </ p > 
    < p > here is a paragraph </ p > 
</ body > 
</ html >

The paragraph will automatically wrap according to the width of the container in which it is located, and the browser will automatically add a blank line after the paragraph. Note the contrast with the newline tag <br>.

Annotation label

<!--......-->, When writing a program, explain the code for future reference and modification.

Example:

<!DOCTYPE html> 
< html > 
< head > 
    < meta  charset = "UTF-8" > 
    < title > html's comment </ title > 
</ head > 
< body > 
    <!--Single line comment, write comment here content --> 
    <!--
        Multi-line comments, write comments here
        Multi-line comments, write comments here
    --> 
    < h1 > Here is an article title </ h1 > 
    < p > Here is a paragraph </ p > 
</ body > 
</ html >

Comments will not be displayed in the browser. They are the explanations given by the programmer to the code. We should write more comments to increase the readability of the code.

title tag

<h?>......</h?>, which defines six header headers with different weights.

Example:

<!DOCTYPE html> 
< html > 
< head > 
    < meta  charset = "UTF-8" > 
    < title > html comments </ title > 
</ head > 
< body > 
    < h1 > I am a first-level title </ h1 > 
    < h2 > I am a second-level heading </ h2 > 
    < h3 > I am a third-level heading </ h3 > 
    < h6 > I am a first-level heading </h6>
</body>
</html>

Get as close to the <body>tags as possible so that search engines can see the topic as quickly as possible.

img tag

<img src="url"/>to display the image in the browser.

Example:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    <img src="logo.jpg" alt="not find"/>
</body>
</html>

The src attribute describes the path of the image, and alt describes the prompt information output when the image cannot be displayed.

link label

<a>......</a>, using a hyperlink to another document on the web

Example:

<!DOCTYPE html> 
< html > 
< head > 
    < meta  charset = "UTF-8" > 
    < title > html comment </ title > 
</ head > 
< body > 
    < a  href = "page.html" > click I will open another page </a> 
    <a href = "wudao.png" > Click I will open a picture </a> < ahref="http://www.baidu.com">
     Click I will open a Baidu page </a> <a 
    href = "aa.html" target = "_blank" > Click me will open another page in a new window </a> < / body > <   / html >

A hyperlink can be a word, a word, or an image that you can click to jump to a new document or a section in the current document.

The target attribute of the link tag

attribute value describe
_blank Open the link in a new, unnamed window
_parent Open link in parent window
_self the current window is open
_top The _top target will clear all contained frames

[Anchor] tag

<a >......</a>, create a link to that anchor (location) in the same document.

<!DOCTYPE html> 
< html > 
< head > 
    < meta  charset = "UTF-8" > 
    < title > html comments </ title > 
</ head > 
< body > 
    < a  href = "#duanluo" > paragraph tags < / a > 
    <a href="page1.html#ziti">  font tag </a> _ _ _ _ _

    < a  name = "duanluo" > 
        < p > This is a paragraph </ p > 
    </ a > 
</ body > 
</ html >

Anchors must be defined before they can be used.

list label

Paragraphs, line breaks, pictures, links, and other lists can be used inside list items.

[unordered list]

<ul> <li>......</li></ul>, this column item is marked with a bold dot.

Example:

<!DOCTYPE html> 
< html > 
< head > 
    < meta  charset = "UTF-8" > 
    < title > html comments </ title > 
</ head > 
< body > 
    < ul > 
        < li > my files </ li > 
        < li > My Pictures </ li > 
        < li > My Music </ li > 
    </ ul >
</body>
</html>

ordered list

<ol><li>......</li></ol>, the list items are marked in order.

Example:

<!DOCTYPE html> 
< html > 
< head > 
    < meta  charset = "UTF-8" > 
    < title > html comments </ title > 
</ head > 
< body > 
    <!--The default sort starts with number 1-- > 
    < ol > 
        < li > My Files </ li > 
        < li > My Pictures </ li > 
        < li > My Music </ li >
    </ol>

    <!--Sort with letter A--> 
    < ol  type = "A" > 
        < li > My Files </ li > 
        < li > My Pictures </ li > 
        < li > My Music </ li > 
    </ ol > 
</ body > 
</ html >

Leave a Comment

Your email address will not be published. Required fields are marked *