Web从小白到大神Day03 2020.10.8

最新推荐文章于 2026-01-05 08:51:39 发布

原创最新推荐文章于 2026-01-05 08:51:39 发布 · 175 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html

Web前端学习专栏收录该内容

15 篇文章

订阅专栏

本文介绍了HTML中的背景色和背景图片设置，详细讲解了超链接的重要性和其作用，包括如何通过超链接发送请求以及与直接输入URL的区别。同时，还涵盖了列表的使用。

1.背景色和背景图片

<!DOCTYPE html>
<html>
 <head>
  <!--告诉浏览器采用哪一种字符编码方式打开当前文件，并不是设置当前页面的字符编码方式，一般来说文件是什么编码，这里就写什么编码-->
  <meta charset="utf-8">
  <title>背景颜色和背景图片</title>
 </head>
 <body bgcolor="red" background="MyImg">
  <!--前者设置背景色，后者设置背景图片-->
 </body>
</html>

2.图片

<!DOCTYPE html>
<html>
 <head>
  <title>背景颜色和背景图片</title>
 </head>
 <body>
  <img src="MyImg" width="100px" title="我是图片" alt="图片找不到"/>
 </body>
</html>

3.超链接（重要）

①超链接的作用：通过超链接可以从浏览器向服务器发送请求
B/S结构的系统，每一个请求都会对应一个响应
②用户点击超链接和用户在浏览器地址栏上直接输入URL有什么区别？
本质上没有区别，都是向服务器发送请求。但是从操作上来讲，超链接使用更方便。

<!DOCTYPE html>
<html>
 <head>
  <title>超链接</title>
  <!--超链接特点：1.有下划线 2.鼠标停留在超链接上面时显示小手形状-->
 </head>
 <body>
  <a href="www.baidu.com" target="_self">百度</a>
  <!--href 是 hot references  热引用，这个属性后面是一个资源的地址，这个可以是互联网的某一个路径，也可以是本地资源的路径。可以是相对路径，也可以是绝对路径-->
  <!--a标签里面也可以放图片，也就是点击图片后进行页面跳转-->
  <!--如果target属性是_self，就在此页面进行跳转，（默认）
   如果是_blank，就开启新的页面
   如果是_top，就是顶级窗口
   如果是parent，就是父窗口
  -->
 </body>
</html>

4.列表

<!DOCTYPE html>
<html>
 <head>
  <title>超链接</title>
 </head>
 <body>
  <!--有序列表-->
  <ol type="1">
   <li>水果
    <ol type="A">
     <li>西瓜
      <ol type="Ⅰ">
       <li>沙瓤</li>
      </ol>
     </li>
     <li>香蕉</li>
     <li>桃子</li>
    </ol>
   </li>
   <li>蔬菜</li>
   <li>甜点</li>
  </ol>
  <!--无序列表-->
  <ul type="circle">
   <li>中国
    <ul type="square">
     <li>北京
      <ul type="disc">
       <li>
        海淀区
       </li>
      </ul>
     </li>
     <li>上海</li>
     <li>广州</li>
    </ul>
   </li>
   <li>美国</li>
   <li>日本</li>
  </ul>
 </body>
</html>