HTML formatting tags and image tags

Format the tags:

<br/>
<p>...</p>Line break
<hr />Horizontal dividing line List
: Unordered
<ul>...</ul>list
<ol>...</ol>Ordered list where the type value: A a I i 1 The start attribute indicates the starting value
<li>...</li>List item
<dl>...</dl>custom list
<dt>...</dt>Custom list header
<dd>...</dd>Custom list content is
<div>...</div>often used for combining blocks level elements so that they can be formatted with CSS
<span>...</span>Often used for contained text, which you can style with CSS or manipulated with JavaScript.

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>HTML标签实例--格式化标签</title>
</head>
<body>
 <h3>HTML介绍</h3>
 <p>超⽂本标记语⾔(Hyper Text Markup Language),标准通⽤标记语⾔下的⼀个应⽤。HTML 不
是⼀种编程语⾔,⽽是⼀种标记语⾔ (markup language),是⽹⻚制作所必备的。</p>
 <p>“超⽂本”就是指⻚⾯内可以包含图⽚、链接,甚⾄⾳乐、程序等⾮⽂字元素。<br/>
 超⽂本标记语⾔的结构包括“头”部分(英语:Head)、和“主体”部分(英语:Body),其中“头”部提
供关于⽹⻚的信息,“主体”部分提供⽹⻚的具体内容。</p>
 <hr/>
 <!-- 列表标签 -->
 你的爱好:
 <ul>
 <li>看书</li>
 <li>上⽹</li>
运⾏效果如下:
 <li>爬⼭</li>
 <li>唱歌</li>
 </ul>
 <ol type="a">
 <li>看书</li>
 <li>上⽹</li>
 <li>爬⼭</li>
 <li>唱歌</li>
 </ol>
 <dl>
 <dt>问:HTML?</dt>
 <dd>答:超⽂本标记语⾔</dd>
 <dt>问:HTML?</dt>
 <dd>答:超⽂本标记语⾔</dd>
 <dt>问:HTML?</dt>
 <dd>答:超⽂本标记语⾔</dd>
 </dl>
 <div>aaa</div>
 <div>bbb</div>
 <span>aaaa</span><span>bbbb</span>
</body>
</html>

The operation effect is as follows:
insert image description here

HTML image tag

Insert an image into an HTML web page and use the img tag, which is a single tag:
the commonly used attributes in the img tag are as follows:
src: Image name and url address
alt: The prompt message when the image fails to load
title: File Word prompt properties
width: Image width
height: Image height
border: Border line thickness

Absolute and relative paths

Absolute path:
The absolute path is the real path of the file or directory on your home page on the hard disk, (URL and physical path)
for example:

C:\xyz\test.txt 代表了test.txt⽂件的绝对路径。
http://www.sun.com/index.htm也代表了⼀个URL绝对路径。

Relative path:
A path relative to a base directory. Contains the relative path of the web (relative directory in HTML),
for example:
in web development, "/" represents the root directory of the web application.
The relative representation of the physical path,
for example: "./" represents the current directory,
"…/" represents the parent directory. This similar representation is also a relative path

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
</head>
<body>
 <h3>HTML标签实例--图⽚标签</h3>
 <img src="./images/1.jpg" title="图⽚" width="300" />
 <img src="./images/2.jpg" alt="图⽚" width="300" />
 <img src="./images/3.jpg" width="280" border="2" />
</body>
</html>

The effect diagram is as follows:
insert image description here

Guess you like

Origin http://10.200.1.11:23101/article/api/json?id=324079812&siteId=291194637