Images with hyperlink tags

1) Picture labels

The img tag is used to insert an image into a web page. Img is short for image, SRC is short for source and in quotes is the directory where the image is stored and the full file name and the image must be copied into the project folder, To save an image to the images subfolder in the project folder, the image path must be the correct images/-- for the images folder, and the.jpg suffix must be written! <img SRC ="images/ gugon.jpg "> <img SRC ="images/ gugon.jpg ">Copy the code

The Alt attribute of the img tag:

If the image cannot be loaded for any reason, the browser will display the alternate text in the Alt attribute on the page for visually impaired friends to use the web reader, and will also read the text in AltCopy the code

Img tags width, height attributes:

The width and height attributes set the width and height respectively. The default unit is pixelsCopy the code

Image formats supported on the page:

Jpeg (.jpg)-- lossy compressed images for photographs.png -- portable web images. Used for logo, background graphics and other support transparent and translucent. SVG - vector pictures. Webp - the latest compression algorithm is very good picture formatCopy the code

Path:

  1. Relative path: describes how to find an image from a web page. The code that inserts the image changes as the page and image are positioned differently. To rollback the hierarchy, use the.. /”
  2. Absolute path: describes the exact location of the image. Than the official website is also there, the absolute path does not need to change.

2) Hyperlinks

  1. Hyperlinks are the means by which web pages are linked together. They are what makes the Internet the web.

  2. Use the A tag to create hyperlinks

<a href="2.html"> go to the second page </a>

A is the first letter of anchor. The href attribute supports both relative and absolute paths

The title attribute of a tag:

The title property sets the hover text for the mouseCopy the code

Open a page in a new window:

Set the target attribute of the A tag to blank to open a web page in the new TAB and set hyperlinks for the image: You can also set hyperlinks for the image by wrapping the A tag around the IMG tag.Copy the code
  1. In-page anchor: Hyperlinks to other pages, or to specified anchors
  2. Download links: Links to exe, ZIP, RAR and other file formats will automatically become download links
  3. ** Email link, phone link: **

    Links with the prefix mailto: are Email links. The system automatically opens the Email software

    <a href="mailto:[email protected]">

    Links prefixed with TEL: are phone links, and the dial will open automatically

    <a href="tel: 12306">

Audio and Video

There was a time when you needed Flash to insert audio and video into a web page, and Flash is becoming obsolete. HTML5 can easily insert audio and video into a web page.

1) Audio and video

Audio:

< Audio > to insert audio in your browser, use the
tag compatible with IE9 < Audio Controls SRC =” Audio address “> Sorry, your browser does not support the audio tag, please update
browser: ** Common audio formats: **MP3 and OGG autoplay: Declare the autoplay property, and the audio will automatically play the loop property: < Audio controls SRC =” Controls “autoplay loop>

Video:

To insert a video in your browser, use the
Common video formats: MP4, OGV, webM, etc

Outline and semantic tags

1) Outline label

Div tags separate document blocks. Once upon a time, div tags were the only way to separate documents. To differentiate the functionality of each div, programmers would use the div tag’s class attribute

HTML5 block tags:

— the area of the document with larger semantics than div

— the core article content of the document, which will be mainly captured by search engines

— the non-essential correlation content of the document, Such as advertising, such as < nav > < nav > – navigation < header > < header > — header < main > < / main > – a core part of < footer > < footer > – footer

2) Semantic labels

< SPAN >
tag is the text of the “block” tag, itself does not have any special display effect, can be combined with CSS to enrich the style < B >
, < U >
, < I >
tag is full of thick “style” meaning, in the web page can express the need to emphasize the text B: bold, U: Underline, I: tilt