526互联

HTML学习笔记四：html-body-行内元素

发布时间 2023-12-05 18:04:29作者: yysocket

HTML学习笔记四：body元素行内元素

MDN元素查询地址

所有的html的元素我们都可以通过以下地址进行相关的查询和理解。
https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/meta

body中元素分类

  • 块级元素
  • 行内元素

行内元素

行内元素区别于块级元素，不会独占一行，一个行内元素只占据它对应标签的边框所包含的空间。
一般情况下，行内元素只能包含数据和其他行内元素。 而块级元素可以包含行内元素和其他块级元素。

常见行内元素

b, big, i, small, tt
abbr, acronym, cite, code, dfn, em, kbd, strong, samp, var
a, bdo, br, img, map, object, q, script, span, sub, sup
button, input, label, select, textarea

根据语言进行分类如下：

1. 文本类元素

用于包裹词汇，短语等，通常写在排版标签div，p里面，排版标签更宏观，文本标签更微观
文本标签通常都是行内元素。

  • em：着重阅读的内容，斜体
  • strong：更加着重阅读的内容，加粗
  • i：常用于包裹字体图标
  • span: 用于包裹短语的通用容器，无具体语义

2. 图片元素

img 标签
用于放置图片，图片路径可以是相对路径，绝对路径和网络路径。
<img src="./resource/img/img_logo.png" alt="logo" width="50px">
属性：

  • src : 图片地址（相对地址，网络地址，绝对地址）或者图片的base64编码
  • alt : 图片描述
  • width : 宽度(只修改宽度时，不影响原尺寸的比例)
  • height: 高度

3. 超链接元素

a 标签，行内元素
用于放置一段超链接，超链接分为以下几种，标签属性分别有所不同。

  • 基本超链接
    示例：<a href="http://www.baidu.com" target="_blank">百度一下</a>
    常用属性
    • href=链接地址
    • target=_blank: 新页签打开，_selt: 当前页签打开
    • download="下载的文件名"：可以触发强制下载并默认给文件名
   <div>
   	<p>
   		<a href="http://www.baidu.com" target="_blank">
   			百度一下
   		</a>
   		<a href="./resource/javadoc/index.html" target="_blank">
   			打开javaDoc
   		</a>
   		<a href="./resource/pdf/发票.pdf" download="dl发票">
   			下载发票
   		</a>
   	</p>
   </div>
  • 超链接跳转锚点
    通过href# 和 id或者name的配合，可以实现跳转到当前页面或者其他页面的对应的锚点位置。
    跳转锚点的几种方式：
    • 方式一：a标签跳转
      通过a标签的name属性进行锚点。
      示例代码：
      <a href="#wechat">看公众号</a> <a href="#yaowan">看药丸</a>
<hr>
<hr>
<a name="yaowan"></a>
<p>药丸图标</p>
<a name="wechat"></a>
<p>公众号图标</p>
    • 方式二：其他标签跳转
      其他的标签可以通过添加id的方式进行跳转，通过href=#{id}来跳转。
      或者说任意元素(一般为块级元素)的id属性均可以进行锚点跳转
      示例代码：
      <a href="#lifangti">去立方体</a>
<p id="lifangti">立方体图标</p>
<img src="./resource/img/立方体.png" alt="立方体logo" width="100px">
    • 方式三：其他html文件跳转
      当在工程中其他的html内有id锚点，且需要进行跳转的时候，可以通过以下方式跳转：
      href={对应html}#{id} : 即对应的html文件的#锚点
    • 方式四：回到顶部
      在当前页面内需要回到顶部时，通过以下方式进行跳转：
      href=# : 可以回到页签顶部
      总结一下
      属性：href = "#锚点"
      跳转到对应的锚点，锚点可以是以上的几种方式。
  • 超链接到简单js弹窗
    示例代码如下：
    href="javascript:alert('弹窗');"
  • 超链接唤醒制定应用
    示例代码如下：
    <a href="javascript:alert('弹窗');">点我弹窗</a>
<a href="mailto:123456787@qq.com">发送邮件</a>
<a href="tel:10010">打电话</a>
    href="tel:10010" : tel，调用本机应用进行拨打电话
    href="mailto:123456@qq.com" : mailto，调用本机应用进行发送邮件
    href="sms:10086" : sms，调用本机应用进行短信发送