HTML5网页的文本及图像
2.1添加文本
普通文本
在body中直接写就好了💤
特殊文字符号
半角大的空格 &ensp；
全角大的空格 &emsp；
不断行的空格  ；
大于 <；
小于 >；
&符号 &；
双引号 &puot；
版权 ©；
已注册的商标 ®；
商标（美国） ™；
乘号 ×；
除号 ÷；
*注意：尽量不要使用多个 来表示多个空格，因为多数浏览器对空格的实现是不一样的*
特殊文本样式
<!DOCTYPE html> <html> <head> <title>特殊文本样式</title> </head> <body> <P> <b>我是粗体</b> </P> <P> <em>我是强调</em> </P> <p> <strong>我是加强调</strong> </p> </body> </html>
效果
倾斜文本
*注意：HTML中的操作基本CSS都可实现，但CSS所能实现的控制远比HTML要细致，精确的多*
上标和下标文本
<!DOCTYBE html> <html> <head> <title>上下标</title> </head> <body> <P> c=a<sup>2</sup>+b<sup>2</sup> </P> <P> H<sub>2</sub>+O——>H<sub>2</sub>O </P> </body> </html>
2.2文字排版
换行标记与段落标记
标题标记
一共有6级标题
手撕代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <h1>这是一级标题</h1> <h2>这是二级标题</h2> <h3>这是三级标题</h3> <h4>这是四级标题</h4> <h5>这是五级标题</h5> <h6>这是六级标题</h6> </body> </html>
作为标题，h1的重要性是最高的，依次降低
2.3文字列表
建立无序列表
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <h1>网站搭建</h1> <ul> <li>准备</li> <ul> <li>购买云服务器</li> <li>购买域名</li> <li>域名备案</li> <li>购买服务器</li> </ul> <li>准备</li> <ul> <li>购买云服务器</li> <li>购买域名</li> <li>域名备案</li> <li>购买服务器</li> </ul> </ul> </body> </html> <!--无序列表使用一对标记<ul></ul>这表示一个无序列表的开始和结束，<li>则表示一个列表项的开始-->
效果
无序列表常用来做导航菜单
建立有序列表
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <h1>网站搭建</h1> <ol> <li>购买云服务器</li> <li>购买域名</li> <li>域名备案</li> <li>购买服务器</li> </ol> </body> </html>
只需更改ul标签为ol即可
效果
2.4网页中的图像
有图有真相😁
网页支持的图像格式
现在网页上可用的格式有GIF，JPEG， BMP， TIFF， PNG。。。。。。
其中使用广泛的主要是GIF和JPEG两种
具体优缺点有待了解😄
使用路径（⭐⭐⭐）
1，绝对路径
在计算机盘符下
就好比D:\web\images\1.jpg
使用绝对路径在本地电脑上一切Noproblem，如若是在网站服务器上就会出问题
2，绝对路径
相对位置
以当前位置为参考点，例如index.html文件下有一个images放图片的文件夹📂，images下有图片1.jpg
就可用images/1.jpg
定位到它，使用相对路径，不论将文件放在哪，只要1.jpg和index.html的相对关系没有变，就不会出问题
相对路径中".."表示上一级目录，"../.."表示上一级的上一级
!!!你发现没
路径分隔符有“ / ”和 ” \ ”两种
其中” \ ”表示本地分隔符，“ / ”表示网络分隔符（后者在网站上）
具体操作
img标记
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <!-- <img src="图片路径" alt="没找到" title="鼠标放上面时显示的文字" width="宽度" height="高度"/> --> <img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=42068993,515858449&fm=26&gp=0.jpg" alt="没找到" title="妹子" width="35%" height="100%"/> </body> </html>
图片无法显示时
1.图片格式浏览器得支持
2.图片的路径不能有问题，拓展名不能省略
3.HTML文件发生改变时，图片一定要跟着改变，别跟丢了哦😂
