Basic HTML knowledge (common elements, lists, link elements, and image elements ),

Basic HTML knowledge (common elements, lists, link elements, and image elements ),

1. HTML-related concepts

Full name: Hyper Text Markup Language (Hypertext Markup Language) its file extension name is pai.html#or pai.htm"

* Hyper Text-add hyperlinks, images, audios, and videos based on common texts.

* Tag-a tag is a tag (element) in HTML. Features: <a>

* Language-what the current target can recognize

Version: HTML 4.01 <4.01 and 4.0 are not the same version>; HTML 5; XHTML: HTML of the strict version

• Ø basic structure:

 

Appendix: <! Doctype html>: indicates the version. The browser can know the document type in advance to correctly display the webpage content.

<Meta charset = "UTF-8">: Set the encoding format

The meta tag provides metadata (not displayed on the page, but parsed by the browser ).

Meta elements are often used to specify the description, keywords, last modification time, author, and other metadata of a webpage. Metadata can be viewed in a browser (how to display content or reload pages), a search engine (keyword), or other Web Services.

Eg: Define keywords for search engines, content for Web pages, author for Web pages ....

<Meta name = "keywords" content = "HTML, CSS, XML, XHTML, JavaScript">

<Meta name = "description" content = "Free Web tutorials on HTML and CSS">

<Meta name = "author" content = "King">

• Ø Element

Empty element-only start tag and no end tag;

Start Element-With start tag and end tag ----- appear in pairs

Note: The element name (case sensitive)-W3C is predefined. We recommend that you use lower case letters.

• Ø attributes

Purpose: define the information format of the current element: property name = "property value"

(A. Attributes must be defined in the start tag. B. The same element has multiple attributes)

I General attributes-attributes of almost all HTML elements

Id: indicates the identifier (unique) of the current element. name: indicates the name of the current element.

Style: defines CSS styles. class: defines CSS styles.

I private attributes-attributes unique to an element

• Note

Purpose: Explain the function of the current element. It is not displayed on the browser page.

Format: <! -- Comment content --> shortcut: CTRL +?

2. HTMLCommon elements

Ü title<H1> ~ <H6>(Commonly used

<H1>: used by search engines to capture HTML pages

When the search engine captures HTML content, the priority is:

<Title> content in the elementGreater<Meta name = "keywords" content = "">Greater<H1> element

Ü paragraph<P> </p>

Features: automatic line feed with large line spacing

Eg: <p> </p>

Or <p> </p>

<P> </p>

Eg: <p> <br> </p>

 

Ü<Hr>-Horizontal line

Ü<Br>-Line feed [shortcut key-tag name + TAB]

3, List

(1) ordered list (2) unordered list (3) defined list

<Ol> <ul> <dl>-indicates the definition list.

<Li> </li> <dt> </dt>-indicates a list item (the title of the list)

</Ol> </ul> <dd> </dd>-description of a list item (list item)

</Dl>

 

Ordered list type attribute: Specifies the list type 1, A, a, l, And I; start attribute: Specifies the start number.

Shortcut Key: Tag: * quantity + TAB; alt + left mouse button

4, Link Element

Format: <a href = ""> </a>

Attribute: <a href = "Current address to jump to"> </a> <a name = "name of the current element"> </a>

Link a contains an underline. If the underline is removed, a {text-decoration: none ;}

Href: The Path to jump to the page (mandatory attribute)

Title: Text displayed on the link.

Target = '_ self' default value. It is opened on its own page (close its own page and open the link page)

Target = '_ blank' open a new page (the page itself is not closed, open a new link page)

Purpose: Implement page Jump (default); return to the top [anchor (# name)] to point to a fixed position; send mail

Eg: <a name = "top"> This is the top </a>

<A href = "mailto: 82328769@qq.com"> email address </a>

<A href = "# top"> back to the top </a> <a href = "# middle"> back to the middle </a>

2. Relative Path

That is, relative to the file itself, it is the relative path.

File and image (html document) are in the same directory (folder) and directly write the file name.

 

The image (html document) is in the next-level directory of the file. Folder name/Image (html) Name

 

The image (html) is in the upper-level directory of the file,../Image (html) Name

 

The image is in another directory at the upper level of the file./folder name/image name

 

2. absolute path

5, Image elements

How image elements are loaded