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

相关文章
|
4月前
|
前端开发 算法 Java
【CSS】前端三大件之一,如何学好?从基本用法开始吧!(六):全方面分析css的Flex布局,从纵、横两个坐标开始进行居中、两端等元素分布模式;刨析元素间隔、排序模式等
Flex 布局 布局的传统解决方案,基于盒状模型,依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。 2009年,W3C 提出了一种新的方案----Flex 布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能。 一、Flex 布局是什么? Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。
368 0
|
4月前
|
前端开发 算法 Java
【CSS】前端三大件之一,如何学好?从基本用法开始吧!(四):元素盒子模型;详细分析边框属性、盒子外边距
盒模型 盒模型: 所谓盒模型,就是浏览器为页面中的每个HTML元素生成的矩形盒子。 这些盒子们都要按照可见板式模型在页面上排布。 可见的板式模型主要由三个属性控制:position 属性、display 属性和 float属性。 position属性控制页面上元素间的位置关系。 display属性控制元素是堆叠、并排或者不在页面上显示。 float属性提供控制的方法,以便于把元素组成成多栏布局。 盒模型讲解: 在默认的情况下,每个盒子的边框是不可见的,背景也是透明的。 所以我们 不能直接的看到页面中的盒
361 1
|
4月前
|
前端开发 算法 Java
【CSS】前端三大件之一,如何学好?从基本用法开始吧!(二):CSS伪类:UI伪类、结构化伪类;通过伪类获得子元素的第n个元素;创建一个伪元素展示在页面中;获得最后一个元素;处理聚焦元素的样式
伪类:伪类这个叫法源自于它们跟类相似,但实际上并没有类会附加到标记中的标签上。 伪类分为两种(以及新增的伪类选择器): UI伪类:会在HTML元素处于某种状态时(例如:鼠标指针位于连接上),为该元素应用CSS样式。 :hover 结构化伪类:会在标记中存在某种结构上的关系时 例如: 某元素是一组元素中的第一个或最后一个,为该元素应用CSS样式。 :not和:target(CSS3新增的两个特殊的伪类选择器)
347 1
|
4月前
|
前端开发 算法 Java
【CSS】前端三大件之一,如何学好?从基本用法开始吧!(三):元素继承关系、层叠样式规则、字体属性、文本属性;针对字体和文本作样式修改
继承 我们的CSS中很多的属性也是可以继承的,其中相当一部分是跟文字的相关的,比如说颜色、字体、字号。 当然还有一部分是不能继承的。 例如边框、内外边距。 层叠 层叠是CSS的核心机制。 层叠的工作机制: 当元素的同一个样式属性有多种样式值的时候,CSS就是靠层叠机制来决定最终应用哪种样式。 层叠规则: 层叠规则一:找到应用给每个元素和属性的声明。 说明:浏览器在加载每个页面时,都会据此查找到每条CSS规则, 并标识出所有受到影响的HTML元素。
168 0
|
JavaScript 前端开发 程序员
前端原生Js批量修改页面元素属性的2个方法
原生 Js 的 getElementsByClassName 和 querySelectorAll 都能获取批量的页面元素,但是它们之间有些细微的差别,稍不注意,就很容易弄错!
398 1
|
前端开发
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
357 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
|
移动开发 搜索推荐 UED
HTML5的新语义化标签
HTML5引入的这些新语义化标签,通过明确标识内容的结构和意义,使得网页结构更加清晰,易于理解和维护。使用这些标签不仅提升了网页的可读性和可访问性,还增强了搜索引擎和辅助技术对网页内容的解析能力。在实际开发中,合理使用这些语义化标签,能够显著提升网页的质量和用户体验。
562 49
|
前端开发 JavaScript 搜索推荐
HTML与CSS在Web组件化中的核心作用及前端技术趋势
本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制,两者不仅提升了代码复用率和可维护性,还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战,文章提出了相应的解决策略,强调了持续创新的重要性,旨在构建高效、灵活的Web应用。
347 6
|
存储 移动开发 前端开发
高效的 HTML 与 CSS 编写技巧,涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容
本文深入探讨了高效的 HTML 与 CSS 编写技巧,涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容,旨在提升开发效率、网站性能和用户体验。
394 5
|
前端开发 JavaScript UED
在数字化时代,Web 应用性能优化尤为重要。本文探讨了CSS与HTML在提升Web性能中的关键作用及未来趋势
在数字化时代,Web 应用性能优化尤为重要。本文探讨了CSS与HTML在提升Web性能中的关键作用及未来趋势,包括样式表优化、DOM操作减少、图像优化等技术,并分析了电商网站的具体案例,强调了技术演进对Web性能的深远影响。
221 5

热门文章

最新文章