这里开始用HBuilder写
1. 背景颜色和 背景图片 12
bgcolor : 设置背景色
background : 设置背景图片
以上的设置都是对背景进行设置。
代码在 007 背景颜色和背景图片
</span><span style="white-space:pre;font-size:10.5pt;font-family:Monaco;font-weight:normal;font-style:normal;text-decoration:;color:#000000;background:;letter-spacing:0pt;mso-font-width:100%;vertical-align:baseline;text-decoration-color:;text-underline-position:" data-font-family='Monaco'>背景颜色和背景图片</span><span style="white-space:pre;font-size:10.5pt;font-family:Monaco;font-weight:normal;font-style:normal;text-decoration:;color:#990055;background:;letter-spacing:0pt;mso-font-width:100%;vertical-align:baseline;text-decoration-color:;text-underline-position:" data-font-family='Monaco'>
bgcolor : 设置背景色
background : 设置背景图片
以上的设置都是对背景进行设置。
-->2. 图片 13
2.1 图片和背景图的区别：
图片是浮在网页上的一个元素，背景图是贴在网页背景上的，二者有本质区别
2.2 设置图片细节 13
1、设置图片宽度和高度的时候，只设置宽度，高度会进行等比例缩放。
2、img标签就是图片标签
3、src属性是图片的路径
4、width设置宽度,height设置高度
5、title设置鼠标悬停时显示的信息。
6、alt设置图片加载失败时显示的提示信息。
代码在 008 图片
<!-- 图片 13 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>图片</title>
</head>
<body>
<!--
1、设置图片宽度和高度的时候，只设置宽度，高度会进行等比例缩放。
2、img标签就是图片标签
3、src属性是图片的路径
4、width设置宽度,height设置高度
5、title设置鼠标悬停时显示的信息。
6、alt设置图片加载失败时显示的提示信息。
-->
<img src="img/1212895970.jpg" width="100px" title="我是太空人" alt="图片找不到哦"/>
<!-- 小提示：我们的图片标签是<img></img>一对但是如果而这中间没有写东西的话可以不写后面的</img>，把前面的写成这个样子<img/> -->
<img src="img/1212895970.jpg" width="100px" title="我是太空人" alt="图片找不到哦"/>
<br><br><br>
<img src="img/1212895970.jpg" width="500px"/>
</body>
</html>
3. 超链接 14
超链接：
3.1 超链接的特点：
有下划线
鼠标停留在超链接上面显示小手形状。
点击超链接之后还能跳转页面。
3.2 超链接语法解释
href：hot references 热引用
href属性后面一定是一个资源的地址。
href后面的路径可以是绝对路径也可以是相对路径，可以是网络中某个资源的路径，也可以是本地资源的路径。
3.3 超链接属性
超链接有一个target属性：
可取值：
_blank : 新窗口
_self ： 当前窗口（默认就是这种方式。）
_top ： 顶级窗口
_parent ： 父窗口
3.4 超链接作用 15
通过超链接可以从浏览器向服务器发送请求。
浏览器向服务器发送数据（请求：request）
服务器向浏览器发送数据（响应：response）
B/S结构的系统：每一个请求都会对应一个响应。
用户点击超链接和用户在浏览器地址栏上直接输入URL，有什么区别？
本质上没有区别，都是向服务器发送请求。
从操作上来讲，超链接使用更方便。
代码在 009 超链接或者热链接 14-15
<!-- 超链接或者热链接 14 -->
<!--
超链接的作用： 15
通过超链接可以从浏览器向服务器发送请求。
浏览器向服务器发送数据（请求：request）
服务器向浏览器发送数据（响应：response）
B/S结构的系统：每一个请求都会对应一个响应。
用户点击超链接和用户在浏览器地址栏上直接输入URL，有什么区别？
本质上没有区别，都是向服务器发送请求。
从操作上来讲，超链接使用更方便。
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>超链接 热链接</title>
</head>
<body>
<!--
超链接的特点：
有下划线
鼠标停留在超链接上面显示小手形状。
点击超链接之后还能跳转页面。
-->
<a href="http://www.baidu.com">百度</a>
<a href="http://news.baidu.com">百度新闻</a>
<a href="http://www.jd.com">京东</a>
<br><br><br>
<!--
href：hot references 热引用
href属性后面一定是一个资源的地址。
href后面的路径可以是绝对路径也可以是相对路径，可以是网络中某个资源的路径，也可以是本地资源的路径。
-->
<a href="007 背景颜色和背景图片.html">007</a>
<!-- 图片超链接 -->
<a href="https://www.hao123.com/">
<img src="img/hao123.png" width="120px"></img>
</a>
<!--
超链接有一个target属性：
可取值：
_blank : 新窗口
_self ： 当前窗口（默认就是这种方式。）
_top ： 顶级窗口
_parent ： 父窗口
-->
<a href="https://www.hao123.com/" target="_blank">
<img src="img/hao123.png" width="120px"></img>
</a>
</body>
</html>
4. 列表 16
有序列表
<ol>
<li></li>
</ol>
无序列表
<ul>
<li></li>
</ul>
代码在 010 列表
<!-- 列表 16 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>列表</title>
</head>
<body>
<!-- 有序列表 -->
<ol type="I"> <!-- type="I"一样的可以指定列表符号样式 -->
<li>水果
<ol type="A">
<li>苹果</li>
<li>西瓜</li>
<li>桃子</li>
</ol>
</li>
<li>蔬菜
<ol>
<li>西红柿</li>
</ol>
</li>
<li>甜点</li>
</ol>
<!-- 无序列表 -->
<ul type="circle"> 解释这里的type="circle"可以指定列表符号样式
<li>中国 <!-- li是列表项 -->
<ul type="square">
<li>北京
<ul type="disc">
<li>东城区</li>
<li>朝阳区</li>
<li>海淀区</li>
</ul>
</li>
<li>天津</li>
<li>南京</li>
</ul>
</li>
<li>美国</li>
<li>日本</li>
</ul>
</body>
</html>
