码迷,mamicode.com
首页 > Web开发 > 详细

02 html 常用标签

时间:2020-05-08 18:14:47      阅读:69      评论:0      收藏:0      [点我收藏+]

标签:border   tab   文件路径   ali   显示   下划线   空行   水平线   tle   

1. HTML常用标签

1.1 排版标签

排版标签主要和css搭配使用,显示网页结构的标签

名称 标签 定义
标题 <hx> 标题 </hx> 作为标题使用,并且依据重要性递减(h1 - 6字号大小递减)
段落 <p> 内容 </p> 将文字分成一个段落(不同段落间空隔一行)
水平线 <hr /> 一条分割线(单标签)
换行 <br /> 使某段文本强制换行显示(单标签)
大盒子 <div> 元素 </div> 用来布局装网页元素,一行只能放一个
小盒子 <span> 元素 </span> 用来布局装网页元素,一行上可以放多个

1.2 文本格式化标签

名称 标签 推荐写法(语义更强烈)
加粗 <b> 文本 </b> <strong>?文本 </strong>
倾斜 <i> 文本 </i> <em> 文本 </em>
删除线 <s> 文本 </s> <del> 文本 </del>
下划线 <u> 文本 </u> <ins> 文本 </ins>

1.3 标签属性

如果想让HTML标签提供更多的信息,可以使用标签的属性加以设置:

<标签名 属性1="属性值1" 属性2="属性值2" …> 内容 </标签名>
<手机 颜色="红色" 大小="5寸">  </手机>

1.4 图像标签 img

语法<img src="图像URL" />(单标签)

属性 属性值 描述
src URL 图像文件的路径
alt 文本 图片不能正常显示时替换的文本
title 文本 鼠标悬停时显示的内容
width 像素(XHTML不支持百分比) 设置图像的宽度
height 像素(XHTML不支持百分比) 设置图像的高度
border 数字 设置图像边框的高度

注意

  1. 标签可以拥有多个属性,必须写在开始标签中,位于标签名后面。
  2. 属性之间不分先后顺序,标签名与属性、属性与属性之间均以空格分开。
  3. 采取 关键字参数 key="value" 的格式

img的下方有空隙的解决方案:display: block;


1.5 链接标签

不仅可以创建文本超链接,在网页中各种网页元素,如图像、表格、音频、视频等都可以添加超链接

语法<a href="目标地址">文本或图像</a>

  • href:指定链接目标的url地址(超链接)
  • target:指定链接页面的打开方式;新窗口中 _blank,默认当前页

注意:

  • 外部链接:前需要添加 http://
  • 内部链接:直接写名称即可
  • 空链接:href属性值写 #

1.6 注释标签

解释说明,便于理解代码,程序不执行这个代码

语法:<!-- 注释语句 -->

快捷键: ctrl + ?

注意:注释位于要注释代码的上面,单独占一行


2. 文件路径

2.1 相对路径

相对路径就是相对于一个文件的同一目录下,或上一级或下一级的文件位置

分类 符号 说明
同一级路径 只需输入图像文件的名称,如<img src="baidu.gif" />
下一级路径 / 位于同级的文件夹下,如<img src="images/baidu.gif" />
上一级路径 ../ 位于上一级的文件夹下,如<img src="../images/baidu.gif" />

2.2 绝对路径

绝对路径是以根目录为参考基础的目录路径

电脑硬盘:C:\Users\CG\Desktop\文件.bat(注意反斜杠)

网络地址:http://www.itcast.cn/images/logo.gif


3. 其他标签

3.1 锚点定位

通过创建锚点链接,用户能够快速定位到目标内容

  1. 使用相应的id名,标注跳转目标的位置(找目标)

    <h3 id="名称"></h3>

  2. 创建链接文本(被点击的)

    <a href="#id名"></a>


3.2 base 标签

设置整体链接都在新窗口中打开,写在 head 头部

语法:<base target="_blank" />


3.3 pre 标签

标签可定义预格式化的文本,被包围在 <pre> 标签中的文本会保留预先写好的文字格式,保留空格和换行符

<pre>
	此例演示如何使用 pre 标签
	对空行和	空格
		进行控制
</pre>

3.4 特殊字符

特殊符号需转义显示

特殊字符 描述 字符的代码
空格符 &nbsp;
< 小于号 &lt;
> 大于号 &gt;
& 和号 &amp;
人民币 &yen;
? 版权 &copy;
° 摄氏度 &deg;
× 乘号 &times;
÷ 除号 &divide;

02 html 常用标签

标签:border   tab   文件路径   ali   显示   下划线   空行   水平线   tle   

原文地址:https://www.cnblogs.com/wzos/p/12851815.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!