HTML入门|青训营笔记

much
78 阅读4分钟

这是我参与「第四届青训营 」笔记创作活动的第一天

在准备面试的过程中，回看html，发现了许多细节上的盲点，特地总结。

1.语义化标签

在日常开发中，总是习惯性的使用div创建各种盒子，虽然可以依靠id或者className来对开发者自身进行区分，但对于搜索引擎或是接手合作的开发者来说却缺乏可读性，因此合理使用语义化标签是很有必要的。 常用的标签如下

<header></header>  头部

<nav></nav>  导航栏

<section></section>  区块（有语义化的div）

<main></main>  主要区域

<article></article>  主要内容

<aside></aside>  侧边栏

<footer></footer>  底部

2.超链接

  1. 以a为标签，href为网址
  2. 设置target属性指定链接打开的位置，target=''blank''则为新的页面打开
  3. 如果不想跳转页面而是将其回到网页顶部，则将href里面设置#即可
  4. 如果想去底部或者任意位置，使用id选择器，在href中输入#加上id名
  5. 开发时可以将#作为占位符写在href中，也可写javascript: ;作为占位符，输入js也行

3.图片

  1. img标签 src

    ps. src用于替换当前元素；href用于在当前文档和引用资源之间建立联系,当浏览器解析到src时，会暂停其他资源的下载，而href会并行的下载资源，js脚本使用src，所以一般放置于页面底部，而a,link标签通常使用href。

  2. alt为图片无法加载时显示，作为图片的替代

4.meta标签

meta 标签由 name 和 content 属性定义，用来描述网页文档的属性，比如网页的作者，网页描述，关键词等，除了HTTP标准固定了一些name作为大家使用的共识，开发者还可以自定义name。 常用的meta标签：

（1）charset，用来描述HTML文档的编码类型：

<meta charset="UTF-8" >

（2） keywords，页面关键词：

<meta name="keywords" content="关键词" />

（3）description，页面描述：

<meta name="description" content="页面描述内容" />

（4）refresh，页面重定向和刷新：

<meta http-equiv="refresh" content="0;url=" />

（5）viewport，适配移动端，可以控制视口的大小和比例：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

其中，content 参数有以下几种：

  • width viewport ：宽度(数值/device-width)
  • height viewport ：高度(数值/device-height)
  • initial-scale ：初始缩放比例
  • maximum-scale ：最大缩放比例
  • minimum-scale ：最小缩放比例
  • user-scalable ：是否允许用户缩放(yes/no）

（6）搜索引擎索引方式：

<meta name="robots" content="index,follow" />

其中，content 参数有以下几种：

  • all：文件将被检索，且页面上的链接可以被查询；
  • none：文件将不被检索，且页面上的链接不可以被查询；
  • index：文件将被检索；
  • follow：页面上的链接可以被查询；
  • noindex：文件将不被检索；
  • nofollow：页面上的链接不可以被查询。

5. web存储

在项目中正好需要通过web存储来进行缓存数据等功能，h5提供了两种客户端存储数据的办法 localStorage和sessionStorage。

  • localStorage

localStorage是没有时间限制的存储，即使是窗口关闭或者浏览器关闭仍然一直存在，直到用户手动清除或者调用相应的api，如localStorage.clear()进行清除，同时如果调用localStorage.setItem()设置同名的item，后者将会覆盖前者，同时开发者可以通过localStorage.getItem()查看相应的value值

  • sessionStorage

sessionStorage仅在当前会话有效，是在同源窗口下始终保存的数据，刷新或者处于同源状态下，都不会丢失，但是一但关闭了窗口就会消失，通常可以用来存储用户的身份认证信息，以便快速登陆同源网站。

ps.还有一种存储数据的方式为cookie，cookie是包含用户信息的一种存储数据，可以在头文件中通过 Set-Cookie: <cookie-name>=<cookie-value>从服务端获取，获取之后在每次进行新的请求时都带上这个cookie，可以方便服务端提供身份认证或是定制化内容推送。同时cookie可以通过document.cookie``` "name=cookie; max-age=60"或是document.cookie = "name=cookie; expires=" + currDate.toGMTString()进行设置过期时间。将 max-age 将 expires 设置为比当前时间早的值，cookie 也会被删除。

4.一些其他标签的细节

  1. iframe标签，引入外部网站。

  2. audio标签引入音频，属性加入control使用户可以控制播放，autoplay自动播放（大部分浏览器都不行hhhhhh）loop循环播放

    ps . 如果有ie8这种神奇的浏览器，建议写成这边输入文字（请升级浏览器） 同时这么写也可以写多个source标签防止音频不兼容浏览器。

  3. P标签是个块级标签，Span是个行级标签。

avatar
文章
阅读
粉丝