本文介绍了HTML的基本标签，如换行、标题样式、居中对齐、预定义文本格式（如pre）、图片处理方法（包括图片目录创建、尺寸调整、alt属性和路径设置），以及如何使用CC0协议获取免费图片和设置favicon。
一.HTML常见标签
1.换行标签（单标签）---- 上一行最后处 <br/>
2.标题加粗（双标签）--- <h1> 标题<h1/>
3.居中对齐（双标签）----align=" "
标题：<h1 align="right/left/center"> 标题 </h1>
<h1></h1>、<p></p>包围的内容默认自动前后换行，有行间距，独自占据一行
正文：<p align="right/left/center"> 正文 <br/> </p>
对应网页效果图:
网页效果：
4.预定义文本格式--pre--可保留原文本的空格和换行符、变为等宽字体
（p标签则不保留空格和换行符）
对比一下pre和上述格式标签运行结果，发现区别为pre其文本到左侧距离为固定值不变
如果想让下面pre这段文本也居中对齐，同理<pre align="center">
同样方式h1居中突出标题
5.加粗符号（bold）-----<b></b> 不同于h1,b标签 加粗后字体间距不变
倾斜符号（itallic）-----<i></i>
下划线符号（underline）---<u></u>
删除符号---<s></s>
6上角标------.sup（superscript）
下角标------sub（subscript）
eg:
7.特殊字符（预留字符）
添加空格------不换行的空格
html中不能使用小于号<和大于号>避免被误认为标签,
如果想正确显示预留字符，必须在html源代码中使用字符实体
字符实体举例：
| HTML源代码 | 显示结果 |
| < | < |
| > | > |
| & | & |
| " | " |
| ® | ®注册商标 |
| © | ©版权 |
| ™ | ™商标 |
|   | 半个空白位 |
|   | 一个空白位 |
| | 不换行的空白位 |
8.水平分割线------A<hr/>B
二.图片处理
1.建立图片目录
下载图片后crtl C
右击左侧文件夹--新建--目录images--右击新建目录--crtl V
2.插入图片
选择图片后ctrl S 运行，成功插入图片，但图片貌似太大啦
3.改变图片大小：使用<img src=" " width=" xx% ">
此时宽度随拖动页面而改变，但始终保持40%的效果
width 后写出固定值eg:400px,即可固定宽度
px------pixel（像素）
4.使鼠标滑过图片时显示图片主旨：title=" "
图片未能正常加载时显示标签：alt=" "
5.引入图片的两种路径：
相对路径：./ 图片在此网页所在的相同文件夹的文件里可查找到
绝对路径：
右击图片---新的标签页打开---查看网址（完整路径）
6.找到好看的图片--CC0（知识共享组织Creative Common ）
除CC0外6种不同的CC协议：
cc0支持网站
https://www.pexels.com/zh-cn
https://www.freeimages.com/cn
https://pixabay.com/zh/
https://www.splitshire.com
https://stocksnap.io/
iconfront下载图标
部分图片来源网站许可协议
https://www.pexels.com/zh-cn/license/
https://pixabay.com/zh/service/license/
https://unsplash.com/license
7.收藏夹图标或网站图标
（1）favicon制作图标（favicon.ico）
（2）制作好的ico图标复制粘贴到根目录上
（3）<head>部分加入<link rel=" icon" type=" " href=" 文件名，即favicon.ico"/>
扫一扫
1023
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
