HTML你应该了解的基础知识

179 阅读3分钟

关于HTML的理解

行内标签(内联标签) 和 块级标签

  1. 行内标签(内联标签)

    一个行内元素只占据他对应标签的边框所包含的空间,一般情况下,行内元素只能包含数据和其他行内元素 eg: a、span、strong、u(下划线)、em(强调)、i(斜体)、sub(下标),sup(上标)

  2. 块级标签

    占据一整行,高度、行高、内边距和外边距都可以改变,可以容纳块级标签和其他内联标签 eg: div、p、h1-h6、ul、li、dl(定义列表、跟 ul…li 类似)、dt(定义列表中的项目)、dd(定义描述项目的内容、跟 dt 一起搭配)

  3. 行内块标签 (这一类标签比较特殊,即具有行内标签的特性,又可以设置宽高)

    eg: img input (最典型的两个)

h5 新增的一些标签

  1. 布局类
  • header、mian、footer 等相关语义化的标签
  1. 功能类
  • figure:定义带图片的文章 figcaption:作为 figure 标签的标题

  • progress:进度条(兼容性较差,一般使用其他元素模拟)

  • 一些新的标签的兼容性可能比较差,所以用的也比较少,但是 canvas 不一样,canvas 用的还是比较多的,特别是基于 canvas 开发出来的大量的第三方的插件或者框架和引擎,比如:

关于3D的库

如果你是刚入前端这些建议先当做一些效果来看,在之后的文章中,我会慢慢的一个一个的讲解每一个的使用和相关的使用场景

容易忽视的标签(但实际需要去了解一下的)

  1. meta 元素可提供有关页面的元信息
  • content 定义与 heep-equiv 或者 name 属性相关的元信息

不想在这搞太多的理论性的东西,搞点实际用途吧

  1. 设置类型
<meta charset="UTF-8" />
  1. 设置页面刷新时间
<meta http-equiv="refresh" content="3;url=https://www.baidu.com" />
<!-- 没有地址则是刷新,有地址则是跳转 -->
  1. 设置浏览器缓存时间

设置网页在缓存时间过期的时间,一旦过期就需要在服务器上面重新加载

<meta http-equiv="expires" content="Tue" Aug 13 2019 08:59:13 GMT />
  1. 禁止页面缓存
<meta http-equiv="pragma" content="no-cach" />

当接口返回数据可能频繁的发生变化的时候我们肯定是不希望接口走缓存的,所以这个时候会用到他

  1. 设置 cookie
<meta http-equiv=Set-Cookie Content=cookievalue=xxx; expires=Tue Aug 13 2019
08:59:13 GMT; path=/ >

这个就不用多说了,cookie 在我们平常的开发中太多了,只不过很多时候没有使用这种方法而已

  1. window-target

这一条属性主要是为了防止你的页面被别人的框架打开了

content 选项

解释
_blank在新窗口中打开链接
_self默认。在相同的框架中打开被链接的文档
_top在整个窗口中打开被链接的文档
_parent在父框架集中打开被链接文档
framname在指定框架中打开被链接的文档
<meta http-equiv="widow-target" content="_top" />
  1. viewport 什么是 viewport? 手机浏览器会把页面放在一个虚拟的窗口,通常这个虚拟的窗口是会比屏幕宽的,用户通过平移和缩放来看不同的部分
<meta
  name="viewport"
  content="width=device-width, initial-scale=1, maximum-scale=1"
/>

height: 和 width 相对指,指定高度

initial-scale: 初始缩放比例,也就是当页面第一次 load 的时候的缩放比例

maximum-scale: 允许用户缩放的最大比例

minimum-scale: 允许用户缩放的最小比例

user-scalable: 用户是否允许手动缩放

在移动端开发的过程中需要注意这上面的值

前端需要去经常翻阅的技术文档

  1. www.w3.org/TR/
  2. tc39.es/
  3. developer.mozilla.org/zh-CN/
  4. www.runoob.com/