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>元素在以后的章节中会详细描述。

相关文章
|
16天前
|
移动开发 编解码 UED
除了 `<audio>` 和 `<video>` 标签,HTML5 还支持哪些多媒体格式?
【10月更文挑战第19天】HTML5对多种多媒体格式的支持,为网页开发者提供了丰富的选择,能够更好地满足不同类型多媒体内容在网页中的展示和交互需求,提升了网页的用户体验和多媒体应用的多样性。
|
16天前
|
存储 移动开发 前端开发
|
1月前
|
前端开发
【HTML】img标签和超链接标签
【HTML】img标签和超链接标签
43 2
|
1月前
|
Web App开发 数据采集 移动开发
HTML5新增的属性和标签
HTML5新增的属性和标签
110 0
|
1月前
|
存储 人工智能 前端开发
前端大模型应用笔记(三):Vue3+Antdv+transformers+本地模型实现浏览器端侧增强搜索
本文介绍了一个纯前端实现的增强列表搜索应用,通过使用Transformer模型,实现了更智能的搜索功能,如使用“番茄”可以搜索到“西红柿”。项目基于Vue3和Ant Design Vue,使用了Xenova的bge-base-zh-v1.5模型。文章详细介绍了从环境搭建、数据准备到具体实现的全过程,并展示了实际效果和待改进点。
130 2
|
1月前
|
JavaScript 前端开发 程序员
前端学习笔记——node.js
前端学习笔记——node.js
38 0
|
1月前
|
人工智能 自然语言处理 运维
前端大模型应用笔记(一):两个指令反过来说大模型就理解不了啦?或许该让第三者插足啦 -通过引入中间LLM预处理用户输入以提高多任务处理能力
本文探讨了在多任务处理场景下,自然语言指令解析的困境及解决方案。通过增加一个LLM解析层,将复杂的指令拆解为多个明确的步骤,明确操作类型与对象识别,处理任务依赖关系,并将自然语言转化为具体的工具命令,从而提高指令解析的准确性和执行效率。
|
1月前
|
存储 弹性计算 算法
前端大模型应用笔记(四):如何在资源受限例如1核和1G内存的端侧或ECS上运行一个合适的向量存储库及如何优化
本文探讨了在资源受限的嵌入式设备(如1核处理器和1GB内存)上实现高效向量存储和检索的方法,旨在支持端侧大模型应用。文章分析了Annoy、HNSWLib、NMSLib、FLANN、VP-Trees和Lshbox等向量存储库的特点与适用场景,推荐Annoy作为多数情况下的首选方案,并提出了数据预处理、索引优化、查询优化等策略以提升性能。通过这些方法,即使在资源受限的环境中也能实现高效的向量检索。
|
1月前
|
机器学习/深度学习 弹性计算 自然语言处理
前端大模型应用笔记(二):最新llama3.2小参数版本1B的古董机测试 - 支持128K上下文,表现优异,和移动端更配
llama3.1支持128K上下文,6万字+输入,适用于多种场景。模型能力超出预期,但处理中文时需加中英翻译。测试显示,其英文支持较好,中文则需改进。llama3.2 1B参数量小,适合移动端和资源受限环境,可在阿里云2vCPU和4G ECS上运行。
|
1月前
|
前端开发 算法 测试技术
前端大模型应用笔记(五):大模型基础能力大比拼-计数篇-通义千文 vs 文心一言 vs 智谱 vs 讯飞vsGPT
本文对比测试了通义千文、文心一言、智谱和讯飞等多个国产大模型在处理基础计数问题上的表现,特别是通过链式推理(COT)提示的效果。结果显示,GPTo1-mini、文心一言3.5和讯飞4.0Ultra在首轮测试中表现优秀,而其他模型在COT提示后也能显著提升正确率,唯有讯飞4.0-Lite表现不佳。测试强调了COT在提升模型逻辑推理能力中的重要性,并指出免费版本中智谱GLM较为可靠。
前端大模型应用笔记(五):大模型基础能力大比拼-计数篇-通义千文 vs 文心一言 vs 智谱 vs 讯飞vsGPT