目录
一、html中的注释
1.1 注释标签
开发环境中添加注释的快捷键：
- windows系统： ctrl + /
- 苹果系统：cmd + /
1.2 注释的一般格式
<!--这是一段注释。注释不会在浏览器中显示。-->
1.3 条件注释
<!--[if IE 8]>
.... some HTML here ....
<![endif]-->
二、 head内常用标签
2.1 meta标签
2.1.1 meta标签的作用
- <meta>元素可提供有关页面的元信息（meta-information），针对搜索引擎和更新频度的描述和关键词。
- <meta>标签位于文档的头部，不包含任何内容。
- <meta>提供的信息是用户不可见的
2.1.2 meta标签的两个属性
- name属性: 主要用于描述网页。属性值content主要用于搜索引擎查找和分类信息。
<meta name="keywords" content="宠物，pet，宠物猫，宠物狗"> <!-- 指定网页的关键字，用于搜索引擎 -->
<meta name="description" content="这是一个宠物网站"> <!-- 指定网页的描述，用于搜索引擎 -->
- http-equiv属性：为了正确地显示网页内容，给浏览器提供的信息。属性值content包含各个参数 的变量值。
<meta http-equiv = "Refresh" content="2;URL=https://www.itsishu.cn">
<!--(注意2后面的引号：2秒后刷新，跳转到指定页面)-->
<meta http-equiv = "content-Type" charset=UTF8">
<!--设置页面解析字符集 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- 在移动设备浏览网页时，网页不缩放 -->
<meta http-equiv = "X-UA-Compatible" content = "IE=EmulateIE8" >
<!-- 在ie浏览器浏览网页时，使用ie的IE8版本 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <!--设置浏览器渲染方式-->
图标下载网站：https://www.iconfont.cn/
文件制作网站：https://tool.lu/favicon/
2.2 非meta标签
<title>网页标题</title>
<link rel="shortcut icon" href="http://www.itsishu.cn/favicon.ico">
<!--设置网站图标，收藏夹图标-->
<link rel="stylesheet" href="base.css"> <!--引入样式文件-->
<script src="login.js"></script> <!--引入脚本文件-->
三、body内常用标签
3.1 标题标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>
</body>
</html>
3.2 段落和换行标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!--独占一个段落，段落前后会有些空间-->
<p>段落标签</p>
<!--换行-->
<br>
<!--水平线\分割线-->
<hr>
<!-- pre标签 按照文本原有格式输出-->
<pre>
加班、聚会、出差、旅行，家中无人照顾宠物时，一键下单上门遛狗/看猫、上门寄养，
帮您照顾在家中等待已久的宠物，包括出门遛弯、吃饭、铲屎等服务。
</pre>
</body>
</html>
3.3 文本格式化标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<b>加粗</b>
<i>斜体</i>
<u>下划线</u>
<s>删除</s>
</body>
</html>
3.4 图像标签
<img src="dog.jpg" alt="狗的图片" title="宠物狗" width="500px" height="500px">
属性采用键值对格式：key = “value”
3.4.1 图像标签属性
src: 要显示图片的路径.
alt: 图片没有加载成功时的提示.
title: 鼠标悬浮时的提示信息.
width: 图片的宽，也可以设置为浏览器宽度的百分比
height:图片的高 (宽高两个属性只用一个会自动等比缩放.)
3.4.2 图像标签的路径
3.4.2.1 相对路径
- 以引用文件所在位置为参考基础，而建立出的目录路径
- 同一级路径：位于HTML文件同一级
- 下一级路径：
/ - 上一级路径：
../
<!-- 相对路径方式1 -->
<img src="./images/logo.png">
<!-- 相对路径方式2 -->
<img src="images/logo.png">
3.4.2.2绝对路径
- 是指目录下的绝对位置，直接到达目标位置，通常是从盘符开始路径
- 或者网络上的绝对路径地址
<!-- 绝对路径方式1 -->
<img src="D:/itsishu/images/logo.png">
<!-- 绝对路径方式2 -->
<img src="http://www.itsishu.cn/images/logo.png">
无版权图片，可以搜索“无版权图片”、“CC0”素材等关键字
参考：15个无版权素材网站分https://www.sohu.com/a/407399386_719286
15个高质量无版权免费图片网站 https://zhuanlan.zhihu.com/p/67544709
四、常用特殊字符
五、综合应用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>两相思</title>
<!-- 生成收藏夹小图标 -->
<link rel="icon" href="favicon.ico"/>
</head>
<body>
<!-- 一级标题居中对齐 -->
<h1 align="center">
<img src="images/爱心.png">两相思</h1>
<p align="center">【宋】李 禺 <br/></p>
<!-- 将段落居中对齐 -->
<p align="center">
思妻诗<b>【顺读】</b><!-- 加粗 --><br/>
枯眼望遥山隔水，往来曾见几心知？<br/><!-- 换行 -->
壶空怕酌一杯酒，笔下难成和韵诗。<br/>
途路阻人离别久，讯音无雁寄回迟。<br/>
孤灯夜守长寥寂，夫忆妻兮父忆儿。
</p>
<pre align="center">
思夫诗<u><i>【倒读】</i></u><!-- 斜体下划线 -->
儿忆父兮妻忆夫，寂寥长守夜灯孤。
迟回寄雁无音讯，久别离人阻路途。
诗韵和成难下笔，酒杯一酌怕空壶。
知心几见曾来往，水隔山遥望眼枯。
</pre>
<p align="center">
<!-- 插入图片 -->
<img src="images/1.jfif" width="500px" title="两相思" alt="山海">
</p>
<hr/>
<p align="center">
©刘旭&旭刘<br>
<中国 •海口><!-- 特殊字符的使用 -->
</p>
</body>
</html>
六、总结
本文讲述了一些常用的文本标签以及使用案例。
405
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
