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

相关文章
|
2月前
|
安全 关系型数据库 测试技术
学习Python Web开发的安全测试需要具备哪些知识?
学习Python Web开发的安全测试需要具备哪些知识?
38 4
|
2月前
|
移动开发 搜索推荐 UED
HTML5的新语义化标签
HTML5引入的这些新语义化标签,通过明确标识内容的结构和意义,使得网页结构更加清晰,易于理解和维护。使用这些标签不仅提升了网页的可读性和可访问性,还增强了搜索引擎和辅助技术对网页内容的解析能力。在实际开发中,合理使用这些语义化标签,能够显著提升网页的质量和用户体验。
97 49
|
2月前
|
存储 移动开发 前端开发
高效的 HTML 与 CSS 编写技巧,涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容
本文深入探讨了高效的 HTML 与 CSS 编写技巧,涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容,旨在提升开发效率、网站性能和用户体验。
50 5
|
2月前
|
SQL 安全 前端开发
Web学习_SQL注入_联合查询注入
联合查询注入是一种强大的SQL注入攻击方式,攻击者可以通过 `UNION`语句合并多个查询的结果,从而获取敏感信息。防御SQL注入需要多层次的措施,包括使用预处理语句和参数化查询、输入验证和过滤、最小权限原则、隐藏错误信息以及使用Web应用防火墙。通过这些措施,可以有效地提高Web应用程序的安全性,防止SQL注入攻击。
65 2
|
2月前
|
移动开发 编解码 UED
除了 `<audio>` 和 `<video>` 标签,HTML5 还支持哪些多媒体格式?
【10月更文挑战第19天】HTML5对多种多媒体格式的支持,为网页开发者提供了丰富的选择,能够更好地满足不同类型多媒体内容在网页中的展示和交互需求,提升了网页的用户体验和多媒体应用的多样性。
|
3月前
|
机器学习/深度学习 移动开发 JavaScript
Web实时通信的学习之旅:SSE(Server-Sent Events)的技术详解及简单示例演示
Web实时通信的学习之旅:SSE(Server-Sent Events)的技术详解及简单示例演示
677 0
|
2月前
|
存储 移动开发 前端开发
|
3月前
|
网络协议 API 网络安全
Web实时通信的学习之旅:轮询、WebSocket、SSE的区别以及优缺点
Web实时通信的学习之旅:轮询、WebSocket、SSE的区别以及优缺点
280 0
|
XML 移动开发 数据格式

热门文章

最新文章