重新理一遍,整理一些重要却不常见的点

HTML

 

重要概念:

  • 块级元素在页面中以块的形式展现 —— 相对于其前面的内容它会出现在新的一行，其后的内容也会被挤到下一行展现。块级元素通常用于展示页面上结构化的内容，例如段落、列表、导航菜单、页脚等等。一个以block形式展现的块级元素不会被嵌套进内联元素中，但可以嵌套在其它块级元素中。
  • 内联元素通常出现在块级元素中并环绕文档内容的一小部分，而不是一整个段落或者一组内容。内联元素不会导致文本换行：它通常出现在一堆文字之间例如超链接元素<a>或者强调元素<em>和 <strong>。

 

剖析：

  • <!DOCTYPE html>: 声明文档类型. 很久以前，早期的HTML(大约1991年2月)，文档类型声明类似于链接，规定了HTML页面必须遵从的良好规则，能自动检测错误和其他有用的东西。使用如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

然而现在没有人再这样写，需要保证每一个东西都正常工作已成为历史。你只需要知道<!DOCTYPE html>是最短的有效的文档声明。

 

<html lang="en-US">

 

 

    • 许多 <meta> 特性已经不再使用。 例如，keyword <meta> 元素（<meta  name="keywords" content="fill, in, your, keywords, here">）— 提供关键词给搜索引擎，根据不同的搜索词，查找到相关的网站 — 已经被搜索引擎忽略了， 因为作弊者填充了大量关键词到keyword， 错误地引导搜索结果。

Open Graph Data

      （开放内容协议），Open Graph 协议可以使任何网页在社交媒体上变成富媒体，举例来说，Facebook使用了这项协议才变得任何网页在Facebook上都能表现出相似的功能。目前只搞懂了是可以定义分享内容的功能(实测百度分享，唯有新浪微博支持og:image内容，其他一概不识别。)，Facebook可以做到更多交互和应用。
<meta property="og:image" content="https://developer.cdn.mozilla.net/static/img/opengraph-logo.dc4e08e2f6af.png">

  • 常用 Open Graph 属性：

    • og:title 标题
    • og:type 类型 常用值:article book movie
    • og:image 略缩图地址
    • og:url 页面地址
    • og:description 页面的简单描述
    • og:site_name 页面所在网站名
    • og:videosrc 视频或者Flash地址
    • og:audiosrc 音频地址

 

 

 

 

  • 将其保存在与网站的索引页面相同的目录中，以.ico格式保存（大多数浏览器将支持更通用的格式，如.gif或.png，但使用ICO格式将确保它能在如Internet Explorer 6一样久远的浏览器显示）
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<!-- third-generation iPad with high-resolution Retina display: -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="https://developer.cdn.mozilla.net/static/img/favicon144.a6e4162070f4.png">
<!-- iPhone with high-resolution Retina display: -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="https://developer.cdn.mozilla.net/static/img/favicon114.0e9fabd44f85.png">
<!-- first- and second-generation iPad: -->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="https://developer.cdn.mozilla.net/static/img/favicon72.8ff9d87c82a0.png">
<!-- non-Retina iPhone, iPod Touch, and Android 2.1+ devices: -->
<link rel="apple-touch-icon-precomposed" href="https://developer.cdn.mozilla.net/static/img/favicon57.a2490b9a2d76.png">
<!-- basic favicon -->
<link rel="shortcut icon" href="https://developer.cdn.mozilla.net/static/img/favicon32.e02854fdcf73.png">

 

 

常见实体引用：

 

原义字符 等价字符引用
< &lt;
> &gt;
" &quot;
' &apos;
& &amp;

 标签

  • 无序 Unordered, 有序 Ordered, 

 

  • 当您链接到要下载的资源而不是在浏览器中打开时，您可以使用 download 属性来提供一个默认的保存文件名。<a href="a.html" download="b.html">下载b.html</a>
  • <a href="mailto:nowhere@mozilla.org?cc=name2@rapidtables.com&bcc=name3@rapidtables.com&subject=The%20subject%20of%20the%20email&body=The%20body%20of%20the%20email">
  Send mail with cc, bcc, subject and body
</a>

    　　抄送(cc)、主题(subject)、抄送(cc)和主体(body)

  • <abbr>——它常被用来包裹一个缩略语或缩写，并且提供缩写的解释（包含在title属性中）。 
    <p>我们使用 <abbr title="超文本标记语言（Hypertext Markup Language）">HTML</abbr> 来组织网页文档。</p>

我们使用 HTML 来组织网页文档。

  •  figure&figcaption --为图片提供一个语义容器，在标题和图片之间建立清晰的关联。
<figure>
    <img scr="../xx/xxx.jpg" alt="替代文本">
    <figcaption>说明文字 title</figcaption>
</figure>

 

<figure>

多媒体

<video controls>
  <source src="rabbit320.mp4" type="video/mp4">
  <source src="rabbit320.webm" type="video/webm">

  <p>你的浏览器不支持 HTML5 视频。可点击<a href="rabbit320.mp4">此链接</a>观看</p>
</video>

　　常用容器格式为mp4(AAC 以及 MP3 音频和 H.264 视频),webm(Ogg Vorbis 音频和 VP8/VP9 视频),type 属性，这个属性是可选，建议添加，否则浏览器将逐个加载资源，直到找到一个能成功的格式。

audio同上，另外还有一个track标签。

<track kind="subtitles" src="subtitles_en.vtt" srclang="en">

　　可以点击track 来查看相关信息。

iframe

为了提高速度，在主内容完成加载后，使用JavaScript设置iframe的src属性是个好主意。这使您的页面可以更快地被使用，并减少您的官方页面加载时间（重要的SEO指标）。

同源，跨域等安全问题解决方法

X-Frame-Options是个已广泛支持的非官方标准

CSP

 

posted @ 2019-10-22 17:44  为知  阅读(162)  评论(0)  编辑  收藏  举报