HTML常用标签(上)

191 阅读2分钟

标签语义

学习标签的技巧在于记住标签的语义,在合适的地方放最为合理的标签,可以让页面结构更清晰。


标题标签 <h1>~<h5>

段落标签 <p>

行标签<br />

文本格式化标签:(推荐前者,语义更强烈)

加粗```<strong></strong>``````<b></b>```<br>
倾斜```<em><em>``````<i></i>```<br>
删除线```<del></del>``````<s></s>```<br>
下划线```<ins></ins>``````<u></u>```<br>

没有语义的盒子标签

```<div>```分割分区,超大盒子独占一行<br>
```<span>```跨度跨距,小盒子一行可以多个

图像标签 <img src="图像URL" />

  • src是img标签的必须属性,用于指定图像文件的路径和文件名。所谓属性就是属于这个图像标签的特性。
  • 图像的其他属性:
属性属性值描述
src图片路径绝对属性
alt文本替换文本,图像上不能显示的文字
title文本提示文本 鼠标放上去,显示的文字
width像素设置图像宽度,只改宽度高度会等比例缩放
heigt像素设置图像高度
border像素设置图像的边框粗细
  • 图像标签可以有多个属性但必须写在标签后面,属性之间不分前后顺序,以空格分开,属性采取键值对的格式(key="value")

路径

目录文件夹:普通文件夹,存放页面所需要的相关素材
根目录:打开目录文件夹的第一层就是根目录
相对路径:以引用文件所在位置为参考基础,简单来说是相对HTML页面的位置。

同级路径:<img src="大白菜.jpg" />
下一级路径:<img src="images/大白菜.jpg" />
上一级路径:<img src="../大白菜.jpg" />
绝对路径:目录下的绝对路径,通常从盘开始,可以用网络上的图片。

超链接标签 <a>

  • 语法格式<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
  • href是必须属性,指定链接目标的url地址
  • target用于指定页面的打开方式,_self为默认值,_blank为在新窗口打开方式。
  • 分类
    外部链接<a href="http://www.baidu.com">百度</a>
    内部连接<a href="index.html">首页</a>
    空链接<a href="#">首页</a>
    下载链接:如果href里面的地址是一个文件.exe或者压缩包zip,会下载这个文件。<a href="img.zip>下载</a>
    网页元素链接:在网页中的各种元素,如文本、图像、表格、音频、视频等。
    锚点链接:点我们的链接可以快速定位到某个位置
    (1)在链接文本的href属性中,设置属性值为 #名字 的形式,如<a href="#two">第二集</a>
    (2)找到目标位置标签,里面添加一个id属性=刚才的名字,如<h3 id="two">第2集介绍</h3>

注释标签

<!--开头,--> 结尾 快捷键ctrl+/

特殊字符

    空格   &nbsp;
    小于号  &lt;
    大于号  &gt;
    &和号  &amp;
    人名币  &yen;
    版权  &copy;
    注册商标  &greg;
    摄氏度  &deg;
    正负号  &plusmn;
    乘号  &times;
    除号  &divide;
    平方2  &sup2;
    立方3  &sup3;