web前端学习(三)——HTML5的字体、特殊符号、插入图片及头部元素的相关标签设置

简介: web前端学习(三)——HTML5的字体、特殊符号、插入图片及头部元素的相关标签设置

1.HTML5中字体的相关标签设置


<em>...</em> 标签:将其中的内容转换为斜体。(类似于 <i>...</i>

<strong>...</strong> 标签:将其中的内容进行加粗。 (类似于<b>...</b>

<sub>...</sub> 标签:定义下标字。

<sup>...</sup> 标签:定义上标字。

<small>...</small> 标签:定义小号字。

<ins>...</ins> 标签:定义插入字。

<del>...</del> 标签:定义删除字。

下面用一个小实例来感受一下这些字体的格式吧。👇👇👇


<!DOCTYPE html>
<html>
  <head lang="zh">
    <meta charset="UTF-8">
    <title>复习唐诗</title>
  </head>
  <body>
    <h1>静夜思</h1>
    <hr/>
    <p>
      <i>床前明月光</i><br/>
      <b>疑是地上霜</b><br/>
      <em>举头望明月</em><br/>
      <strong>低头思故乡</strong><br/>
      <hr/>
      <sub>静夜思</sub><br/>
      <hr/>
      <sup>床前明月光</sup><br/>
      <small>疑是地上霜</small><br/>
      <ins>举头望明月</ins><br/>
      <del>低头思故乡</del><br/>
    </p>
  </body>
</html>

运行结果如下:

 

2.HTML5特殊符号的相关标签设置


 ;:代表空格。

>;:大于号(>)。大于等于为:&ge

<;:小于号(<)。小于等于为:&le

";:转义字符。

©;:版权符号@

具体实例如下:👇👇👇

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>特殊符号的应用</title>
  </head>
  <body>
    &copy;1999-2013&nbsp;Beijing Aptech Beida Jade Bird Information Technkloty Co.Ltd<br/>
    北京阿博泰克北大青鸟信息技术有限公司&nbsp;&nbsp;京ICP11045574号-3<hr/>
    <p>如果时间&gt;晚上6点,就坐车回家!!!</p><br/>
    <p>如果时间&lt;早上7点,就步行上学!!!</p><br/>
    <p>W3C规范中,HTML的属性值必须用成对的&quot;引起来</p><br/>
  </body>
</html>

运行结果如下:

 

3.HTML5中插入图片的相关标签设置


<img src="图片路径(相对路径或者绝对路径)" alt="替换文本" width="x(宽度)" height="y(高度)">

其中 alt="..." 这部分是指如果图片地址正确,则alt中的替换文本不会显示;如果图片地址不正确,则显示alt中的替换文本。

实例一: 

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>图像标签的应用</title>
  </head>
  <body>
    <p> <img src="E:\计算机专业学习资料和文件\HTML\image\hetao.jpg" width="160" height="160"  alt="无漂白薄皮核桃" title="无漂白薄皮核桃"/></p>
    <p>
      楼兰蜜语 新疆野生 <br/>
      无漂白薄皮核桃500gx2包<br/>
      ¥48.8
    </p>
  </body>
</html>

运行结果如下:

实例二:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="Generator" content="EditPlus®">
    <meta name="Author" content="张起灵-小哥">
    <meta name="Keywords" content="C,C++,Java,MySQL,HTML">
    <meta name="Description" content="HTML5简单学习">
    <meta http-equiv="refresh" content="10">
    <title>图像</title>
  </head>
  <body>
    <!--图片地址正确 alt不显示-->
    <img src="E:\计算机专业学习资料和文件\HTML\image\tx.jpg" alt="这是一个头像"/>
    <!--图片地址不正确 alt显示-->
    <img src="E:\计算机专业学习资料和文件\HTML\image" alt="这是一个头像"/>
  </body>
</html>

运行结果如下:

 

4.HTML5头部元素的相关标签设置


4.1 <head>元素 

<head>元素包含了所有的头部标签元素。在 <head>元素中你可以插入脚本(scripts, 样式文件(CSS),及各种meta信息。

可以添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript> <base>


4.2 <title>元素

<title>标签定义了不同文档的标题。

<title> HTML/XHTML 文档中是必须的。

<title>元素:

·       定义了浏览器工具栏的标题

·       当网页添加到收藏夹时,显示在收藏夹中的标题

·       显示在搜索引擎结果页面的标题


4.3 <base>元素 

<base>标签描述了基本的链接地址/链接目标,该标签作为HTML文档中所有的链接标签的默认链接。 


4.4 <link>元素 

<link>标签定义了文档与外部资源之间的关系。

<link>标签通常用于链接到样式表。


4.5 <style>元素 

<style>标签定义了HTML文档的样式文件引用地址。

<style> 元素中你也可以直接添加样式来渲染 HTML 文档。


4.6 <meta>元素 

meta标签描述了一些基本的元数据。

<meta>标签提供了元数据.元数据也不显示在页面上,但会被浏览器解析。

META元素通常用于指定网页的描述,关键词,文件的最后修改时间,作者,和其他元数据。

元数据可以使用于浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他Web服务。

<meta>一般放置于 <head> 区域。


4.6.1 为搜索引擎定义关键词 

<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">


4.6.2 为网页定义描述内容

<meta name="description" content="免费 Web & 编程教程">


4.6.3 定义网页作者

<meta name="author" content="张起灵-小哥">


4.6.4 30秒钟刷新当前页面

<meta http-equiv="refresh" content="30">


4.7 <script>元素


<script>标签用于加载脚本文件,如: JavaScript

<script>元素在以后的章节中会详细描述。

相关文章
HTML5 Web IndexedDB 数据库详解
IndexedDB 是一种高效的浏览器存储方案,允许在本地存储大量结构化数据,支持索引和事务,适用于需要离线和大数据处理的应用。它由数据库、对象仓库等组成,通过键值对存储数据,确保数据一致性和完整性。本介绍展示了如何创建、读取、更新和删除数据,以及事务和错误处理的最佳实践。
🚀前端轻松实现网页内容转换:一键复制、保存图片及生成 Markdown
在现代前端开发中,提升用户的交互体验至关重要。本文将详细介绍如何使用 HTML2Canvas 和 Turndown 两个强大的 JavaScript 库,实现将网页选中文本转化为图片并保存或复制到剪贴板,或将内容转换为 Markdown 格式。文章包含核心代码实现、技术细节和功能拓展方向,为开发者提供了一个轻量级的解决方案,提升用户体验。
671 68
django接收前端vue传输的formData图片数据
django接收前端vue传输的formData图片数据
142 4
java基础:map遍历使用;java使用 Patten 和Matches 进行正则匹配;后端传到前端展示图片三种情况,并保存到手机
这篇文章介绍了Java中Map的遍历方法、使用Pattern和matches进行正则表达式匹配,以及后端向前端传输图片并保存到手机的三种情况。
107 1
不走弯路,纯前端如何把图片导出成视频!
【10月更文挑战第3天】不走弯路,纯前端如何把图片导出成视频!
422 3
HTML5 Web IndexedDB 数据库常用数据存储类型
IndexedDB 支持多种数据存储类型,满足复杂数据结构的存储需求。它包括基本数据类型(如 Number、String、Boolean、Date)、对象(简单和嵌套对象)、数组、Blob(用于二进制数据如图像和视频)、ArrayBuffer 和 Typed Arrays(处理二进制数据)、结构化克隆(支持 Map 和 Set 等复杂对象),以及 JSON 数据。尽管不直接支持非序列化数据(如函数和 DOM 节点),但可以通过转换实现存储。开发者应根据具体需求选择合适的数据类型,以优化性能和使用体验。
吐血整理:纯前端如何实现批量dom转图片,并下载成压缩包
【10月更文挑战第2天】吐血整理:纯前端如何实现批量dom转图片,并下载成压缩包
179 2
HTML5 Web SQL 数据库详解
Web SQL 数据库是 HTML5 中的一种本地存储技术,允许在浏览器中使用 SQL 语言操作本地数据,支持离线访问和事务处理,适用于缓存数据和小型应用。然而,其存储容量有限且仅部分现代浏览器支持,标准已不再积极维护,未来可能被 IndexedDB 和 localStorage 等技术取代。使用时需谨慎考虑兼容性和发展前景。
HTML5 Web Workers详解
HTML5 Web Workers 允许在后台线程中运行 JavaScript,实现复杂计算而不影响用户界面,提升应用性能。其主要特性包括并行处理、异步通信、独立作用域及多数据类型支持。通过创建和使用 Worker 文件,如 `worker.js`,可执行后台任务,并与主线程通过消息传递机制通信。适用于数据处理、图像处理、复杂计算及网络请求并行等场景。需要注意的是,Web Workers 在浏览器兼容性、安全性限制、调试及资源消耗方面需特别关注。合理利用 Web Workers 可显著增强 Web 应用的流畅度和响应速度。
HTML5 Web 存储详解
HTML5 Web 存储包括 `localStorage` 和 `sessionStorage`,前者提供持久存储且无过期时间,后者仅在会话期间有效。两者均支持键值对形式存储数据,容量约为 5-10 MB。`localStorage` 适用于用户偏好设置、登录状态保持及离线应用缓存;`sessionStorage` 则用于临时数据如表单输入。数据以字符串形式存储,可通过 `JSON` 方法处理对象。由于数据存储于本地,不适合存放敏感信息。示例代码展示了如何使用按钮将输入框内容保存至 `localStorage` 并进行清除操作。

热门文章

最新文章

AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等

登录插画

登录以查看您的控制台资源

管理云资源
状态一览
快捷访问