当前位置: 首页 > news >正文

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特殊符号的相关标签设置 

① &nbsp;:代表空格。

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

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

④ &quot;:转义字符。

⑤ &copy;:版权符号@。

具体实例如下:👇👇👇

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

http://www.lryc.cn/news/570517.html

相关文章:

  • 摩托罗拉v8对讲机驱动软件_摩托罗拉驱动下载安装教程
  • Meta-Analysis
  • 开源加密软件 TrueCrypt使用方法(图)
  • Rviz2中,在rviz和launch文件中都需要配置urdf文件,二者作用上的区别?
  • WordPress开启多站点功能以及插件MU Domain Mapping教程
  • CToolBar的使用总结(2)
  • html设置文本框为只读
  • Android系统文件夹结构说明以及Android专有名词介绍
  • 概率期望DP
  • 我的友情链接
  • C++ STL常用二分查找算法
  • 王峰:创业就是长征,能扛才能称王
  • BT读出来MAC地址值跟NV不一样
  • 基础知识-军品软件六性
  • 函数指针的理解
  • MeeGo系统和SailFish系统_我是亲民_新浪博客
  • 介质访问控制——随机访问控制
  • AndroidStudio3.0全新安装和基本配置
  • LoadRunner8.1+汉化+破解
  • 可爱的字符表情
  • Python文件与目录操作管理详解
  • RESTful架构详解
  • 长尾关键词驱动SEO优化突破
  • OpenLayers 图层遮罩与裁剪
  • flex tree中坑爹的尝试
  • 高惯量与低高惯量
  • 软件破解教程2
  • BlazeDS的功能及配置
  • 逆火网站日志分析器_SEO Checker for Mac(网站优化分析软件) v2.0
  • 使用openssl模拟CA和CA证书的签发