HTML中你不太了解的细节---(一)

本文介绍了HTML中如何使用实体转义特殊字符,元标签如meta的用途,以及如何通过语义化标签提升页面结构的清晰度。重点讲解了超链接的使用和图片标签的优化,包括alt属性和尺寸调整。

1.实体

  1. 在网页中编写的多个空格默认情况会自动被浏览器解析为一个空格。
  2. 在HTML中有些时候,我们不能直接书写一些特殊符号,比如:多个连续的空格,比如字母两侧的大于和小于号。
  3. 如果我们需要在网页中书写这些特殊的符号,则需要使用html中的实体(转义字符)。
实体的语法:
   &实体的名字;    空格   >大于号  <小于号

2.meta标签

  1. meta主要用于设置网页中的一些元数据,元数据不是给用户看的。
  2. charset 指定网页的字符集。
  3. name 指定的数据的名称。
  4. content 指定数据的内容。
<meta name="keywords" content="HTML5,前端,CSS3">
<meta name="description" content="这是一个不错的网站">
<meta http-equiv="refresh" content="3;url=https://www.baidu.com">
  1. keywords 表示网站的关键字,可以同时指定多个关键字,关键字间使用逗号隔开。
  2. description 用于指定网站的描述,网站的描述会显示在搜索引擎的搜索的结果中。
  3. title 标签的内容会作为搜索结果的超链接上的文字显示。
  4. http-equiv 将页面重定向到另一个网站。

3.语义化标签

  1. 在网页中HTML专门用来负责网页的结构,所以在使用HTML标签时,应该关注的是标签的语义,而不是它的样式。
  2. 在页面中独占一行的元素称为块元素(block element)。在网页中一般通过块元素对页面进行布局;一般会在块元素中放行内元素;块元素中基本上什么都能放,但p元素中不能放任何的块元素。
  3. 在页面中不会独占一行的元素称为行内元素(inline element)。主要用来包裹文字。
  4. div没有语义,就用来表示一个区块,目前来讲div还是我们主要的布局元素。
  5. span行内元素,没有任何的语义,一般用于在网页中选中文字。

4.超链接

  1. 超链接可以让我们从一个页面跳转到其他页面,或者是当前页面其他的位置。
  2. 超链接也是一个行内元素,在a标签中可以嵌套除它自身外的任何元素。
  3. href 指定跳转的目标路径;值可以是一个外部网站的地址也可以是一个内部页面的地址。
  4. target属性用来指定超链接打开的位置;可选值_self 默认值 在当前页面中打开超链接;_blank在一个新的窗口中打开超链接。
<a href="https://www.baidu.com" target="_blank">超链接</a>
  1. 可以直接将超链接的href属性设置为#,这样点击超链接以后页面不会发生跳转,而是转到当前页面的顶部的位置。
  2. id属性(唯一不重复),每个标签都可以添加一个id属性;id属性是元素的唯一标识。
  3. 也可以跳转到页面的指定位置,只需将href属性设置 #目标元素的id属性值。
<a href="#bottom">去底部</a>
<a id="bottom" href="#">回到顶部</a>
  1. 可以使用javascript:;来作为href的属性,此时点击这个超链接什么也不会发生,一个占位符。

5.图片标签

  1. alt 图片的描述,这个描述默认情况下不会显示,有些浏览器会在图片无法加载时显示,搜索引擎会根据alt中的内容来识别图片,如果不写alt属性则图片不会被搜索引擎搜索到。
  2. width height 宽度和高度如果只修改了一个,则另一个会按比例缩放。
  3. 一般情况下在pc端,不建议修改图片的大小(大图缩小耗内存,小图放大不清晰)。但是在移动端,经常需要对图片进行缩放(大图缩小)。
  4. 图片的格式:
  5. jpeg(jpg):支持的颜色比较丰富,不支持透明效果,不支持动图。一般用来显示照片。
  6. gif:支持的颜色比较小,支持简单透明,支持动图。颜色单一的图片,动图。
  7. png:支持的颜色丰富,支持复杂透明,不支持动图。颜色丰富,复杂透明图片(专为网页而生)。
  8. webp:这种格式是谷歌推出的专门用来表示网页中的图片的一种格式,它具备其他图片格式的所有优点,而且文件还特别的小。缺点是兼容性不好。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

赶路的苟狗

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值