速查笔记——HTML篇

结构化语义化HTML网页结构

Posted by page on June 21, 2020

HTML

标签

文档声明

<!DOCTYPE html>

HTML5声明位于HTML文档第一行,即使在低版本IE下不会影响其它HTML标签解析

语言声明

<html lang="zh-cmn-Hans">

“简体中文”,英文:lang=”en”, 便于于浏览器翻译识别

元数据

<meta>

常用:
注明字符编码
<meta charset="utf-8"/>
视口设置
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
控制IE使用最新标准或谷歌内嵌框架插件渲染
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
控制双核浏览器以webkit渲染
<meta name="renderer" content="webkit">
关键词
<meta name="keywords" content="word-1,word-2,word-3···"/>
描述
<meta name="description" content="there are decsriptions····"/>

不常用:
控制缓存机制
<meta http-equiv="Cache-Control" content="no-store/no-cache,must-revalidate">
页面协商缓存验证(重加载)
<meta http-equiv="Pragma" content="no-cache">
页面有效期
<meta http-equiv="Expires" content="GMT时间/0">
停止默认谷歌翻译
<meta name="google" content="notranslate"/>
使用内容安全策略,控制加载资源的源
<meta http-equiv="Content-Security-Policy" content="default-src 'self'"/>
控制发送请求头部 访问来源信息
<meta name="referrer" content="no-referrer">

<link>链接

链接样式表
<link rel="stylesheet" href="">
网页标识
<link rel="shortcut icon" href="favicon.ico" type="image/gif等其他格式">
使用DNS缓存加速跨域域名解析
<link rel="dns-prefetch" href="//example.com/">
预加载当前页面资源/预加载下一页面资源/预连接/预渲染下一页面
<link rel="preload/prefetch/preconnect/prerendering" href="" as="image/audio/font/video/embed...">
Safari浏览器主屏幕标识图
<link rel="apple-touch-icon" href="/examp.png"/>

<base>标签

相对路径的基准URL,以及默认打开窗口方式
<base href="http://example.com/目标文件夹/" target="_blank">

<colgroup>合并列标签

<table>
    用于控制列样式
    <colgroup span="4" class="columns"></colgroup>
    <tr>···</tr>
    ·····
</table>

<td>单元格

<td rowspan="2"></td>跨行数
<td colspan="2"></td>跨列数

标签分类

块级元素
  <h1><h4>标题
  <div>容器
  <p></p>段落
  <table>表格
  <ul><li>无序列表
  <dl><dt><dd>定义列表
  <form></form>表单

行内元素
  <span>文档节
  <a href="">链接锚
  <img src="">图片
  <button type="button"></button>按钮
  <input type="text/password/button/submit/file">表单输入系列

格式化标签(废弃)
  <i><s><u><b>可通过css清除格式化含义标签
  <address></address>地址
  <pre></pre>预格式文本
  <time>时间
  <object>内嵌对象