网页开发学习笔记二: HTML常用标签
文本格式化标签
- 文本加粗标签: 工作中尽量使用 strong
<strong></strong>
<br></br>
- 文本倾斜标签: 工作中使用 em
<em></em>
<i></i>
- 删除线标签: 工作中尽量使用 del
<del></del>
<s></s>
- 下划线标签: 工作中尽量使用 ins
<ins></ins>
<u></u>
<!DOCTYPE html> <html> <head> <title> </title> </head> <body> <!-- 文本加粗, 带有强调 --> <strong>瀑布鱼缸</strong> <!-- 文本加粗 --> <b>瀑布鱼缸</b> <br> <!-- 文本倾斜, 带有强调 --> <em>水幕墙</em> <!-- 文本倾斜 --> <i>水幕墙</i> <br> <!-- 删除线标签 --> <del>6688.00</del> <!-- 删除线标签 --> <s>6688.00</s> <!-- 下划线标签 --> <ins>AAAAA</ins> <!-- 下划线标签 --> <u>AAAAA</u> <!-- 上标 --> 2<sup>3</sup> 2<sub>3</sub> </body> </html>
图片标签
- 图片标签: <img src="1.jpg" alt="群" title="提示文字" width="300">
- src : 图片来源(必写属性)
- alt : 替换文本(图片不显示的时候显示的文字)
- title : 图片的提示文本
- width : 图片的宽度
- height : 图片的高度
注意: 图片没有定义宽高的时候, 图片按照百分之百比例显示, 如果只更改图片的宽度或者高度, 图片等比例缩放
- 路径
-
文件和图片(html 文档)在同一级目录(文件夹), 直接写图片(html 文档)名称即可
<img src="1.jpg"> -
图片(html 文档)在文件下一级目录(文件夹), 文件夹名称 + / + 图片(html 文档)名称
<img src="图片资源/10.jpg"> -
图片(html 文档)在文件上一级目录(文件夹), .. + / + 图片(html 文档)名称
<img src="../1.jpg">
-
总结: 找到下一级文件夹的图片(文件)用 /
找到上一级文件夹用 ../
<!DOCTYPE html> <html> <head> <title></title> </head> <body> <!-- src: 图片路径 alt:替换文本 title: 提示文本 --> <img src="1.jpg" alt="群" title="我的女神" width="300"> <br> <img src="图片资源/10.jpg" width="300"> <br> <img src="../1.jpg" width="300"> </body> </html>
超链接标签
- 超链接标签: <a href="文本格式化标签.html" title="格式化标签" target="_blank">跳转到文本格式化标签</a>
- href : 去往的路径(跳转页面) 必写属性
- title : 提示文本(鼠标放到链接上显示的文字)
- target : 控制是否打开新的页面
- "_self" : 默认值 在自身页面打开(关闭自身页面, 打开链接页面)
- "_blank" : 打开新页面 自身页面不关闭
- 锚链接
- 先定义一个锚点 <p id="锚点"></p>
- 超连接到锚点 <a href="#锚点"></a>
<!DOCTYPE html> <html> <head> <title></title> </head> <body> <a href="文本格式化标签.html" title="格式化标签" target="_blank">跳转到文本格式化标签</a> <p id="sd">AAAAAAAAAA控制是否打开新的页面控制是否打开新的页面控制是否打开新的页面AAAAAAAAA</p> <p>控制是否打开新的页面控制是否打开新的页面控制是否打开新的页面</p> <p>控制是否打开新的页面控制是否打开新的页面控制是否打开新的页面</p> <p>控制是否打开新的页面控制是否打开新的页面控制是否打开新的页面</p> <a href="#sd">回到顶部</a> </body> </html>
列表标签
- 无序列表
<ul type="square"> <li></li> <li></li> <li></li> </ul>
type="square" 小方块
type="disc" 实心小圆圈: 默认
type="circle" 空心小圆圈
- 有序列表
<ol type="1" start="1"> <li>AAAAA</li> <li>BBBBB</li> <li>CCCCC</li> </ol>
type 的值可以为 1, a, A, i, I
start="3" 决定了开始的位置
- 自定列表
<dl> <dt></dt> 小标题 <dd></dd> 解释标题 </dl>
meta标签
<!DOCTYPE html> <html> <head> <!-- 编码 --> <meta charset="utf-8"> <!-- 关键字: 给 SEO(搜索引擎)看 --> <meta name="keyword" content="Java, iOS, Android"> <!-- 网页描述: 给 SEO(搜索引擎)看 --> <meta name="description" content="XXXXXXXXXXXXXXX"> <!-- 网页重定向: 3秒之后跳转到百度页面 --> <meta http-equiv="refresh" content="3; http://www.baidu.com"> <br> <!-- 图标 --> <link rel="stylesheet" href="1.jpg"> <br> <title>Document</title> </head> <body> PPPPPP </body> </html>
