Introduction to html and commonly used tags

What is HTML?

HTML: (Hypertext Markup Language) Hypertext Markup Language is a marked language. It includes a series of tags. Through these tags, the document format on the network can be unified, and the scattered Internet resources can be connected as a logical whole.

Features:

  • Simplicity: Hypertext markup language version upgrade adopts superset method, which is more flexible and convenient;
  • Extensibility: The extensive application of Hypertext Markup Language brings enhanced functions and increases the requirements of identifiers. Hypertext Markup Language adopts the method of sub-category elements to ensure system expansion;
  • Platform independence: Although personal computers are popular, there are many people who use other machines such as MAC. Hypertext Markup Language can be used on a wide range of platforms;
  • Versatility: In addition, HTML is the universal language of the Internet, a simple and universal markup language. It allows web creators to create complex pages that combine text and images, which can be browsed by anyone else on the Internet, no matter what type of computer or browser is used;

The basic structure of HTML:

The HTML document structure basically consists of the following four parts:

(1) Document declaration: declare that this is an HTML document.

(2) html tag pair: the role of the tag is equivalent to the program telling the web browser.

(3) Head tag pair: The head tag is the head of the page.

(4) Body tag pair: The body tag is the body of the page. Generally, most of the tag code of the web page is written here.

Commonly used tags:

Labels and tags:

Sum has no semantics, they are just a box to hold content.
<div> 这是div标签 </div>
<span> 这是span标签 </span>

Features:

  • Labels are used for layout, but now only one line can be placed
  • Labels are used for layout, and there can be more than one on a line

Image label :

In HTML tags, tags are used to define images in HTML pages.

<img src="图像URL" />

img is the abbreviation of the word image, which means image. src is a required attribute of the tag, it is used to specify the path and file name of the image file.

Code example:

    <img src="./img/1.gif" alt="松鼠">

Required attributes for tags:

alt: Specifies the alternate text of the image.
src: Specifies the URL of the displayed image.

URL can use absolute path or relative path:

  • Absolute path: Refers to the absolute location under the directory, directly to the target location, usually the path starting from the drive letter.
  • Relative path: Starting from the file where the code is located, to find the target file, and the upper level, the next level, and the same level we are talking about here are the location of the image relative to the HTML page.
<!-- 相对路径写法 -->
<!-- ./ 表示当前文件所在目录,即G:/images/ -->
<!-- ./可省略不写 -->
<img src = "logo.png"/>
<img src = "./logo.png"/>

<!-- ../ 表示当前文件所在目录的上级目录,即G:/ -->
<img src = "../images/logo.png"/>

<!-- /表示根路径,即G:/ -->
<img src = "/images/logo.png"/>

Common attributes:

  • align: Specifies how to arrange images according to surrounding text.
  • border: Defines the border around the image.
  • height: defines the height of the image.
  • width: Set the width of the image.

Hyperlinks

Hyperlinks allow us to jump from one page to other pages, or other locations on the current page.

Syntax format of hyperlink:

<a href="跳转目标" target="目标窗口的弹出方式"> 文本或图像 </a>

Common attributes:

  • href: URL specifies the URL of the page to which the link points.
  • hreflang: Specifies the language of the linked document.
  • rel: Specifies the relationship between the current document and the linked document.
  • target: Specifies where to open the linked document.
  • type: Specifies the MIME type of the linked document.

Link classification:

external link:

Example:

 < a href="http:// www.baidu.com"> 百度</a >。

Internal links: mutual links between the internal pages of the website. Directly link the name of the internal page,

Example:

 < a href="index.html"> 首页 </a >。

Guess you like

Origin blog.csdn.net/QIANDXX/article/details/110559389