Blog - wingsico

前言

历经好多时间= =,终于完成了一个小项目,再次更新了一些我的移动端知识,之前总是对概念有些不清晰,先梳理一下。

像素

概念

CSS像素(CSS Pixel)

CSS代码中的逻辑像素,是一个抽象的东西,实际并不存在。

设备独立像素(Device Independent Pixel)

与设备无关的逻辑像素,可以通过虚拟程序来设置,包含了CSS像素

设备像素(Device Pixel)

物理像素,设备能控制显示的最小单位,类似1920 * 1080像素分辨率这种的。

关系

设备像素与设备独立像素

对于PC页面:在未缩放的情况下,1设备像素 === 1设备独立像素,若缩放为200%时,可以说 2设备像素 === 1设备独立像素对于移动端页面: 根据设备不同有一些差异,其引起差异的原因主要在于一个被称之为ppi(pixel per inc)的东西。

PPI

从名字上就知道是 每英寸设备有多少像素,这里的像素指的是设备像素,即物理像素,其数值越高,每英寸设备里的像素就越高,画面也就越清晰。 计算方式为: PPI计算 像苹果的Retina屏的ppi就比较高,所以清晰度很高。 还有一个很重要的概念就是dpr(device pixel ratio)

DPR

设备像素比,这个设备像素比就是物理像素独立像素,独立像素之前说到,包含着CSS像素,所以dpr即提供了一个我们代码中的像素与设备实际像素之间的一个转换关系。 计算公式:

dpr = 设备像素 / 设备独立像素

像苹果手机的dpr一般为2,即意味着1长度的设备像素里有2长度的设备独立像素,换做面积来算的话就是1设备像素包含着4设备独立像素,即成平方关系,所以清晰明了,dpr越高,屏幕清晰度也越高,与ppi有些相似,用一张图看看: DPR 大概需要了解的就这些,我在实际运用中用到的也就如下几点:

  1. dpr
  2. px
  3. device-width (屏幕宽度)

运用

对于dpr,一般用于两个地方,一个是字体大小,一个是背景图片大小 对于字体,也是用px堆起来的,因此dpr也会影响到字体的显示,当dpr较大时,为了同比例显示字体大小,就会去检测其dpr的值,根据dpr的不同来设置不同比例的字体大小,可以用如下一段sass的混合宏来适配字体显示:

@mixin font-dpr($font-size) {
  font-size: $font-size / 2;
  [data-dpr="2"] & {
    font-size: $font-size;
  }
  [data-dpr="3"] & {
    font-size: $font-size * 3 / 2;
  }
}

这里有个data-dpr,即根据dpr不同来应用不同的字体样式,此外,这里将传入的字体大小除以2,这是因为一般设计给的视觉稿都是iphone6的二倍稿,因此,为了显示正常字体大小,将其标注的字体大小除以二,再根据dpr来适配字体大小。 移动端运用到图片几乎是必然的,一般设计师会给出两种图片,一种为@2x图,一种为@3x图,不过这个主要是用来出来高清屏下图片较为高清的显示,对于普通的安卓机,dpr一直都是1,意义不大,用普通的@2x图即可达到高清的显示,但是对于ios系统,存在dpr为2、dpr为3的情况,为了图片的一个等比例缩放,我们根据dpr的不同来使用不同倍数的图片以达到与标准屏幕一致的感受。同样的,我们也可以使用sass的混合宏来适配背景图片:

@mixin bg-image($url) {
  background-image: url($url + "@2x.png");
  @media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
    background-image: url($url + "@3x.png");
  }
}

除这两点之外,我暂时没有用到dpr其他的使用方法。

布局适配

布局和适配其实我一直难以分辨这两个概念,我就把它罗列在一起吧。 为了达到想要的效果,我的历程如下:

  1. meta 设置 viewport -> width=device-width…
  2. rem布局
  3. flex-box
  4. flexible.js
  5. 视口单位vw,vh
  6. calc计算
  7. calc + 视口单位
  8. calc + 视口单位 + 媒体查询
  9. 百分比布局
  10. 删除 6、7、8, 9 重归flexible
  11. 加上媒体查询,适配特殊机型,如 Nexus 5X

妈耶心好累,布局适配改改改改好头疼,不过还好都解决了。

meta

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

这行代码作用是设置理想视口,什么是视口?什么又是理想视口,要说明这个,对于viewport就要讲很多了。 这里有一个链接,我觉得写的很好,很多内容都非常清晰的表达了出来: 移动端之viewport

rem布局

rempxem均是常用的单位,他们都是相对长度单位,在不同的地方我们需要配合起来使用。

px

px(Pixel) 是相对于屏幕分辨率而言的一个单位,一般我们对于pc均会使用px作为单位,同时,一些固定大小、长度的我们同样使用px作为单位,这个也是我们上面说到的CSS像素,包含在设备独立像素内。

em

em是一个相对与其父元素的字体大小的一个单位,举个例子

<style lang="scss">
    .parent {
        font-size: 18px;
        .child {
            font-size: 2em; // 18 * 2 = 36px
            .grandson {
                font-size: 0.5em; // 36 * 0.5 = 18px
            }
        }
    }
</style>

这个单位对于一整块整体变换有很好的效果,比如我们有一个按钮,当我们想要整体放大一个按钮的时候,不需要去改变每一个字体的大小,设置em之后可以只改变其父级元素的字体大小来达到整体缩放的效果。

rem

为了移动端而生的单位,同样是一个相对单位,与em不同的是,rem是相对于html根元素的字体大小,举个例子:

<style lang="scss">
    html {
        font-size: 10px;
        .parent {
            font-size: 2rem; // 10 * 2 = 20px
            .child {
                font-size: 4rem; // 10 * 4 = 40px
                .grandson {
                    font-size: 1.6rem; // 10 * 1.6 = 16px
                }
            }
        }
    }
</style>

有了这样一个单位,对于我们移动端上的适配来说,绝对是一大助力,我们可以使用rem来适配不同分辨率的屏幕。 现在假设我们有一张750的设计稿,我们把设计稿分成一百份,把每十份当做一个1rem,即设置:

html {
    font-size: 75px; // 750 / 100 * 10 = 75px
}

那么我们在需要一个150*150的div时,我们可以使用

.box {
    width: 2rem;
    height: 2rem;
}

当我们的屏幕不同的时候,我们只需动态的更改根元素的字体大小即可。那么如何动态更改根元素的字体大小呢?在CSS3有一个新增的媒体查询,可以帮我们检测设备相关信息并根据这些信息使用不同的样式。

@media/媒体查询

这里有相关的资料:MDN媒体查询 上面只是介绍了一些概念的东西,那么我们如何去使用媒体查询在我们的移动端适配上呢? 待续. 更新时间2017年12月23日10:35:14

以前一直觉得这个iframe标签特别神秘,因为之前在解决设置title时使用document.title = "xxx"在ios上的微信端失效,就是使用了一段关于iframe的js代码完成的,应该是可以称为一种iframe hack吧~,代码如下:

setTimeout(function(){
    //利用iframe的onload事件刷新页面
    document.title = 'test';
    var iframe = document.createElement('iframe');
    iframe.style.visibility = 'hidden';
    iframe.style.width = '1px';
    iframe.style.height = '1px';
    iframe.src = "./favicon"; // 这里是必须的
    iframe.onload = function () {
        setTimeout(function () {
            document.body.removeChild(iframe);
        }, 0);
    };
    document.body.appendChild(iframe);
},0);

不过据考证资料,该iframe hack对最新内核已经失效,不过并不影响我学习iframe,毕竟我现在还没有在做微信,等以后再踩踩这些坑好了。

iframe——内联框架

引用一段www.thoughtco.com中的一段原文,描述了iframe。

Inline frames, commonly just referred to as “iframes”, are the only type of frame allowed in HTML5. These frames are essentially a section of your page that you “cut out”. In the space that you have cut out of the page, you can then feed in an external webpage. In essence, an iframe is another browser window set right inside your web page. You see iframes commonly used on websites that need to include external content like a Google map or a video from YouTube. Both of those popular websites use iframes in their embed code.

翻译过来用我的话来说就是: iframe是一个HTML5的框架元素,它允许你在一个网页内引入另一个浏览器窗口(仅作展示和使用),相当于在一个浏览器窗口内切出了另一个窗口去展现外部网站的内容,比如,在博客内引用codepen中的在线代码效果演示,就是使用的iframe,还有一些视频、音乐和地图之类的的引入也会使用iframe,总之,iframe在各大网站均有被使用。 iframe在HTML4.01和HTML5中均可使用,其共有四个基本属性:

  1. src = "url": 指定一条url,表示该框架所指向的外部页面的链接,比如说:

    <iframe src="http://www.baidu.com">您的浏览器不支持iframe</iframe>

    这是一个指向百度首页的iframe

  2. width = "" / height = "": 设置iframe的宽高,单位为px,举个例子:

    <iframe src="http://www.baidu.com" width="400" height="400">您的浏览器不支持iframe</iframe>
  3. name = "": 设置iframe的名称。 有三种用法:

    1. 作为javascript的引用元素

      <iframe src="https://www.baidu.com" name="iframe_a">您的浏览器不支持iframe</iframe>
      
      <script>
      var iframe_a = document.getElementsByName('iframe_a')[0]
      // 同等于
      var iframe_a = window.frames['iframe_a']
      var iWindow = iframe_a.contentWindow // 拿到iframe_a的window对象
      var idoc = iWindow.document // 获取iframe的document
      </script>
2.  作为a标签和form标签的target属性的值

        <iframe src="https://www.baidu.com" name="iframe_a">您的浏览器不支持iframe</iframe>

        <a href="https://www.ncuos.com" target="iframe_a">将iframe指向云家园</a>


3.  作为input和button的formtarget的值

        <iframe src="https://www.baidu.com" name="iframe_a" width="400" height="400">您的浏览器不支持iframe</iframe>
        <form action="form_action.asp" method="get">
          <button type="submit" formtarget="iframe_a">提交数据1</button>
          <input type="submit" formtarget="iframe_a">提交数据2</button>
        </form>



    点击这两个按钮不会有任何反应,因为formtarget的作用就是: **Specifies where to display the response that is received after submitting the form (for type="submit" and type="image")** 翻译过来的意思就是formtarget将请求后得到的response在formtarget的值中展现出来,在这里即是在iframe中展示出来。

在新增的HTML5中,iframe又多了3个新属性,分别是sandbox,seamless,srcdoc.

sandbox

首先,先说一下sandbox属性,sandbox <=> 沙箱,相信用过杀毒软件的人应该知道,360就有一个隔离沙箱,所以这个属性就是为了安全性考虑而设计的,用作隔离iframe和当前页面。 这个是来自菜鸟教程的一个介绍:

如果指定了空字符串(sandbox=””),该属性对呈现在iframe框架中的内容启用一些额外的限制条件。 sandbox 属性的值既可以是一个空字符串(将会启用所有的限制),也可以是用空格分隔的一系列指定的字符串。 HTML 5通过sandbox属性提升iFrame的安全性。sandbox属性可以防止不信任的Web页面执行某些操作。

具体用法如下:

<iframe src="https://www.baidu.com" sandbox="value">沙盒隔离</iframe>

既然称之为沙盒,那他可以做些什么来提高安全性呢?

  • 将内容视为来自独特来源
  • 不能发送ajax请求
  • 阻止脚本执行
  • 禁用API(不能使用本地存储等)
  • 阻止链接定位到其他浏览上下文
  • 防止内容使用插件(通过或其他)
  • 阻止内容导航其顶层浏览上下文
  • 阻止自动触发功能(如自动播放视频或自动对焦表单控件
  • 不能发送表单

具体如何限制iframe的操作呢? 首先,sandbox的值可以多值组合使用,如同class属性一样可以填写许多类名。其次,它的单值共有7个:

  • “” (no-value)
  • allow-same-origin
  • allow-top-navigation
  • allow-pointer-lock
  • allow-popups
  • allow-scripts
  • allow-forms

当为空值的时候,即sandbox=""sandbox 时,所有的限制都将启用; 当为allow-same-origin时,该嵌入的内容将会被当做同源来看待,当使用此属性时,适用于两种情况:

  1. 若同一站点的内容被沙盒禁用脚本,但通过设置该值可以允许Iframe访问沙盒内容的DOM
  2. 当嵌入的是一个第三方的站点,它可以阻止该站点打开弹窗,弹出广告等等,但不阻止该嵌入的页面回到其原始站点,或使用数据库API存储数据等等

当为allow-top-navigation时,允许该嵌入的内容导航到其顶层浏览的上下文处,这是什么意思呢?即是允许iframe主导window.top进行页面跳转,还不明白?何为window.top,就是顶层窗口,即是浏览器窗口,就是说iframe可以控制浏览器跳转至其他页面,也就是父级(顶级)页面被重定向至其他网页。大概就是这个么意思,还不明白我也木有办法了=。= 当含有allow-pointer-lock时,可以在iframe中锁定鼠标 当含有allow-popus时,允许iframe中弹出新窗口,比如 window.open.target="_blank" 当含有allow-scripts时,允许iframe执行脚本 当含有allow-forms时,允许提交表单的操作 当然,直接使用一个sandbox的空值的很少的情况,我们经常使用如下代码来开放一些特定的权限:

<iframe sandbox="allow-scripts allow-same-origin allow-scripts" src="...">您的游览器不支持iframe。</iframe>

srcdoc

srcdoc属性制定要在iframe内显示的页面的HTML内容 举个栗子:

<iframe src="https://www.baidu.com" width="200" height="200" sandbox="allow-scripts allow-forms allow-same-origin" srcdoc="<p>hello,srcdoc!</p>">您的浏览器不支持iframe</iframe>

效果如下: 您的浏览器不支持iframe


seamless

seamless属性属于逻辑属性。当设置了该属性后,它规定了iframe看上去像是包含文档的一部分(无边框或无滚动条) 举个栗子:

<iframe src="https://www.baidu.com" width="200" height="200" sandbox="allow-scripts allow-forms allow-same-origin">您的浏览器不支持iframe</iframe>
<iframe src="https://www.baidu.com" width="200" height="200" sandbox="allow-scripts allow-forms allow-same-origin" seamless>您的浏览器不支持iframe</iframe>

效果如下: 您的浏览器不支持iframe 您的浏览器不支持iframe !看起来没有效果,不对啊,Chrome浏览器不是支持该属性吗!不是很理解这个属性,标记一下!


内容略多,待跟进,由于iframe使用方面略少,以及还有一些安全性的问题的深究,暂且对我目前学习意义不大,待有时间可以学习一下iframe跨域以及轮询(感觉iframe真是一个很牛掰的东西),有时间再补充吧。

参考资料

(function(){ document.scrollTop = 0;})()

最近代码写的较少了,于是回顾了一下自己以前的代码,看了一看自己第一次写的网页——百度首页,许多标签混用,无意义的div标签嵌套,img无alt属性,class命名(拼音首字母)之类的,极其缺失语义化以及结构化。 自己步入前端也有一年了,自己在写代码的时候也总是有意无意的使用div标签,甚至心里有一种这样的想法:

标题干嘛要用h1~h6啊,我并不想要标题加粗,直接用p吧,还省事,不要去设置css。什么header、footer完全没必要啊,又没有加任何特殊的样式。

在之后了解过一些html语义化之后才知道之前的这些想法有多么肤浅和愚蠢,但在之前的认知中中,对于语义化的认识也仅仅是这样:

语义化就是为了让标签做他该做的事情,使结构更加清晰,方便代码的阅读和维护。

但在经过一下午的学习过程中,我发现语义化并没有那么的简单。


HTML语义化历史

我们先来说说HTML吧,HTML一般被我们称之为网页,是与网络相关在一起的,当下时代网络是以 World Wide Web (Web, 万维网)为主导的,我们通过一串 URL 来定位到资源,通过特定的协议来访问以获取我们所需要的资源。这样的资源均是(?)通过HTML来展示的,所以HTML最初的目的就是为了发布web的资源内容以及方便人们进行索引。 目前,HTML主要用来:

  1. 发布文档(文本,表格,列表…)
  2. 通过超链接获取信息
  3. 建立用来访问远程服务的表单
  4. 发布web应用

但慢慢的随着Web规模不断的扩大,信息量之大已经不在人工处理的范围之内了,搜索引擎就应景而生,人们又设计了各种程序来对结构良好,索引好的内容进行处理和挖掘。这时候,为了能让机器更好的读懂web上的各种内容,语义化就显得越来越重要了。 最初的HTML是有一定的语义化的,比如说h1~h6是代指标题,img表示图片,table表示表格,p表示段落等等,但这些更多的只是为了让UA(User Agent)对这些元素进行更好的处理,并没有明确语义化的重要性,由于现在许多内容是为了网页的可视化设计的,机器对于这些是很难与有用的信息区分开来的,于是现在就提出了两种途径来解决这个问题:

  1. 提高技术,让机器越来越能够像人类思考,读懂人能够看懂,读懂的东西。
  2. 推广规范,让在编码之初就以一种能让机器读懂的方式来进行编码,即使用被广泛认可的语义信息来描述内容。(很显然,XML和HTML5就是往这个方向上进发)

这里引用一张图来表示: 第一条途径就是横轴,把AI的水平提升到人类的水平,第二条途径是纵轴,朝着语义化的方向前进,也就是万维网创始人 Tim Berners-Lee 爵士提出的美好愿景:语义网。

语义网:简单来说就是让一切内容和包括对关系的描述都成为 Web 上的资源,都可以由唯一的 URI 定义,语义明确、机器可读。

两条路都很艰难,但实际上我们正在以第二条途径进行努力,这也是HTML5出现的原因之一,删除了一些纯表现的标签,以及为一些标签丰富了语义,还有增加了许多富有语义的新标签。其实不仅是标签,同样的,许多属性,如rel,如role等等都是为了更好的去促成语义化的实现。 同时,HTML5并不是语义化规范的唯一依仗,除了 W3C 和 WHATWG 外,还有其他组织在为web语义化、标准化作出努力。

例如 microformats 社区以及 http://Schema.org 上都有对 HTML 以及 Microdata(http://www.w3.org/TR/html5/microdata.html) 规范的扩展词汇表,Google、Bing、Yahoo! 等搜索引擎以及各个主流浏览器都不同程度地接纳了其中定义的语义扩展,并应用在了生产中。

作者:顾轶灵 链接:https://www.zhihu.com/question/20455165/answer/15176745 来源:知乎


这些都是语义化的一些背景,那么我们可以从哪些方面来更好的语义化呢?

更好的语义化

  1. 尽量避免无意义的div嵌套

    <div> <!-- not good -->
        <div>
            <p>一段描述性的文字</p>
        </div>
    </div>
    
    <p>一段描述性的文字</p> <!-- good -->
  2. 每一个标签做他该做的事情

    <style>
      .head-title {
        font-weight: bold;
      }
    </style>
    <body>
      <div class="head-title"> 一个标题 </div> <!-- not good -->
    </body>
    
    <h2 class="head-title"> 一个标题 </h2> <!-- good -->
  3. 使用更加有语义化的标签

    <p><b>Warning!</b>There is a meeting...</p> <!-- not good -->
    
    <p><strong>Warning!</strong>There is a meeting...</p> <!-- good -->
  4. (3.5)清晰的了解每一个标签所代表的具体语义,不随意使用标签

  5. 更加清晰的class,id命名

    关于这一点,这里有个链接,专门说的是class的类名在语义化上的使用:http://www.oschina.net/translate/about-html-semantics-front-end-architecture 我自己的理解大概就是: 每一个类名都要有目的,有意义,不取无意义的类名,类名与内容解耦,往往大多数可重用的组件它的类名与内容是没有太大关联的,同时,我们应多使用“多类”模式,使它更有收缩性,以及可维护性,而不是把所有的样式堆积在一个类名上。


总结

经过一番学习,我对语义化有了更深层的认识:

语义化在目前来说更多的是为了让机器能读懂网页的内容,使HTML更加结构化、规范化,便于搜索引擎的爬虫的抓取,爬虫依赖标记来获取上下文以及关键字的权重,利于SEO;同时代码更加容易维护,方便他人阅读;在CSS加载失败后扔能保持一定的良好的结构,不会造成页面内容缺失等等。

由于现在已经步入HTML5的时代,了解新增以及改变的元素的语义显得十分重要,我查阅资料后找到一篇,对每一个语义化的元素都讲述的比较清楚,同时还介绍了目前在语义化比较火的微数据(micro data),写的很好,这里我就不一一列举语义元素了。

参考资料

之前写代码的时候,编辑器曾报了一个很诡异的错误,不知道为什么,总是有各种红色的波浪线遍布代码,那时候一头雾水,完全不知道发生了什么。 经过一番查找,发现把加上后就正常了,当时也没有细想,反正bug解决了(=。=)现在回过头来,觉得需要弄懂这个东西。 So问题来了,何为doctype?在我们搞懂这个之前,我们需要先来了解一下DTD

DTD

DTD( Document Type Definition)意思是文档类型声明或者文档类型定义,诶这都是英译过来的,无关紧要。但说到DTD,又得延伸一个概念叫做SGML.

SGML

SGML(Standard Generalized Markup Language,SGML),翻译过来是标准通用标记语言,引用来自维基百科的概述:

标准通用标记语言(Standard Generalized Markup Language,SGML)是现时常用的超文本格式的最高层次标准,是可以定义标记语言的元语言,甚至可以定义不必采用< >的常规方式。由于它的复杂,因而难以普及。

先放一个维基百科的关于SGML的示意图:

互联网媒体类型

application/sgml, text/sgml

统一类型标识

public.xml

开发者

ISO

格式类型

置标语言

延伸自

IBM GML (IBM Generalized Markup Language)

延伸成

HTML, XML

标准

ISO 8879

虽然SGML在翻译上翻译过来是一种语言,但根据我查阅相关资料以及思考觉得,SGML更像是一个规范或者称为标准。 在之后的翻阅中,又看到了之前忽略的在维基百科上的一句话:

同时它(SGML)也是一个ISO标准:”ISO 8879:1986 Information processing – Text and office systems – Standard Generalized Markup Language (SGML)”

至于ISO是什么,这里直接引用一段ISO官网的介绍:

ISO is an independent, non-governmental international organization with a membership of 162 national standards bodies. Through its members, it brings together experts to share knowledge and develop voluntary, consensus-based, market relevant International Standards that support innovation and provide solutions to global challenges.

大概意思就是说明ISO是一个独立的非政府国际组织,拥有162个 国家标准机构。通过其成员汇集专家,分享知识,制定自愿的,基于共识的市场相关的国际标准,支持创新并为全球挑战提供解决方案。说白了就是一个制定标准的一个组织,其制定的标准一般拥有一个编号,像SGML就是 ISO 8879。 ISO不是我们这里介绍的重点,暂且跳过他,继续阐明SGML为何物。 下面看一个SGML的一个具体的例子:

typically something like this

其实从上面引用的那张图片也可以看出来一些端详。它的结构一般由以下四个部分组成:

  1. SGML声明,设定基本情况;
  2. 定义DTD 文档类型,设定标记语言结构的语法;
  3. 描述用于标记的语义规格说明,做出了DTD 表达的语法限制;
  4. 包含数据和标记的文档实例。

像HTML的前身就是SGML,你会发现HTML的结构与SGML十分相似,SGML可以规范如何开始一个元素以及元素如何结束(或者称之为闭合),这是SGML的一种结构化的特点,至于其他的我就不一一举例,太繁琐,我这里直接给出它的特点的总结:

  1. 正式的,能允许验证文档的正确性;
  2. 结构化的,能够处理复杂的文档;
  3. 可扩充的,能够支持大型信息存储的管理。

像它的可扩充的特点,我们延伸出了HTML(超文本标记语言),XML (扩展标记语言)。他们其实都是基于SGML标准的。 关于XML,可以这样说:

一方面,虽然XML 源于SGML,但它并不是SGML的替代物,XML省去了SGML的许多功能,但XML 可以和SGML兼容,使用SGML的人可以直接使用XML在网络上交换数据,而不必转换已有的SGML文档;另一方面,XML 和HTML是互相补充的,HTML关于用户的界面,XML 关于数据链路,动态的HTML描述显示界面和用户交互活动,XML 描述信息,所以两者结合,XML 可以向HTML文档增加信息,而HTML可以显示以XML 格式表达的信息。一般认为,XML 的目标就是:能在INTERNET上直接使用;与SGML兼容;支持大范围的应用;XML 文档易于创建、清晰易读、设计简单明了;易于编写处理XML 文档的软件。XML 立志于在WEB 内建立真实世界的知识影像,针对HTML和INTERNET的标准、可扩展、通用的数据格式,灵活地表示各种各样、自我描述的信息。XML 可以向INTERNET的数据增加结构,这有助于在WEB 上实现任何人、任何地方的任何事物的通信。


现在,我们有了SGML,DTD,XML,HTML四个(语言?)的一个定义与理解,需要把他们联系在一起了。 。。。联系个毛线,我都不懂自己在写啥玩意了。 一句话解释吧: HTML/XML的DOCTYPE声明引用DTD,DTD 规定了标记语言的规则,这样浏览器才能正确地呈现内容,DTD概念缘于SGML,每一份SGML文件,均应有相对应的DTD,SGML是标记语言的元语言。


在前端日常使用DOCTYPE中,目前来说只需要注意标注<!DOCTYPE>即可,这是最新的HTML5的DOCTYPE规范标准的写法,不会有任何问题(?),由于HTML4.01的时代即将过去,关于HTML4.01的一些常用的DOCTYPE声明我也不一一列举,在下面给出资料链接吧,整篇博客到此结束,我或许一辈子都用不上这SGML这玩意,及时打住,好像才是最好的选择。


参考资料

  1. http://www.w3school.com.cn/tags/tag_doctype.asp HTML <!DOCTYPE> 标签 - w3c
  2. https://zh.wikipedia.org/wiki/%E6%96%87%E6%A1%A3%E7%B1%BB%E5%9E%8B%E5%AE%9A%E4%B9%89 维基百科 DTD
  3. https://www.iso.org/about-us.html ISO介绍
  4. http://tech.163.com/04/1103/21/149VOTK30009rt.html 《HTML的兄弟姐妹们》
  5. https://baike.baidu.com/item/%E6%A0%87%E5%87%86%E9%80%9A%E7%94%A8%E7%BD%AE%E6%A0%87%E8%AF%AD%E8%A8%80/10471466?fromtitle=SGML&fromid=2901416 百度百科 - SGML
  6. https://www.w3.org/TR/WD-html40-970708/intro/sgmltut.html 《A brief SGML tutorial》

lang是什么?

lang是元素的一个属性,它相当于language(语言)的意思。

lang有什么用?

lang 属性规定元素内容的语言。比如谷歌浏览器根据你的代码就会知道你的网页是英文的,就会问你是否需要翻译成中文。 总之,lang是给搜素引擎使用的,并不影响页面内容,因此设置了你的页面还是能够显示各种语言,但是我们仍应该遵守标准,毕竟这个属性对浏览器和搜索引擎还是有作用的。

为什么要设计lang属性?

引用于另一篇博客:

设计 lang 属性是为了向用户提供语言特有的显示,尽管它对主要的浏览器具有较小的影响。使用lang属性后,真正受益的是搜索引擎(搜索引擎利用它能够告诉用户采用哪一种语言编写文档)、屏幕阅读器(屏幕阅读器利用它能够以不同的方式发音不同的语言)以及一些应用程序(应用程序能够在它们不支持所提供的语言或者该语言与它们的默认语言不同时向用户发出警报)。当lang属性用于元素中时,它将作用于整个文档;而在用于其他元素中时,它将仅作用于这些元素的内容。

如何使用lang属性?

其中element代指元素名称,language_code代表语言编码,如en表示英语,zh-CN表示简体中文等等。

总结?

lang属性并没有那么神秘?平常的小网站不会特别注重这个属性?

你以为就结束了?

我靠没这么简单,lang属性本身确实没有太多的考究,但是它的language_code确着实需要一番深究,对于这方面,上面说的zh以及zh-CN这一类的其实以及过时了,由于研究这方面的东西对我暂时用处不大,在这里抛几个链接,我也是粗略的看了一看。

参考资料

总结

一个看似不起眼的小属性其实涵盖了国际语言规范的许多东西,在这里mark一下,以便以后需要用到的时候再使用。

何为base?

是一个标签,必须写在内

有什么用?

引用w3school的原话:

<base> 标签为页面上的所有链接规定默认地址或默认目标。 通常情况下,浏览器会从当前文档的 URL 中提取相应的元素来填写相对 URL 中的空白。 使用 <base> 标签可以改变这一点。浏览器随后将不再使用当前文档的 URL,而使用指定的基本 URL 来解析所有的相对 URL。这其中包括 <a>、<img>、<link>、<form> 标签中的 URL。

也就是说,假如我们有一张图片,文件名为 demo.jpg,处于与html的同级目录,我们在html文件内这样引入 <img src="./demo.jpg">,在未设置<base>的时候,浏览器自动帮我们解析成绝对路径,假设域名为: blog.wingsico.org, html文件处于 blog.wingsico.org/index.html, 则我们在html内部引用的图片的路径被自动补充为 blog.wingsico.org/demo.jpg。但是当我们设置<base href="www.w3school.com.cn/i/" /> 则html文件内的图片路径被自动补充为 www.w3school.com.cn/i/demo.jpg

怎么用?

属性?

href(required) 其值为一个URL,用于规定页面中所有相对链接的基准 URL。 target(可选) 其值与锚标签中的一致,有

  • _blank
  • _parent
  • _self
  • _top
  • framename

规定在何处打开页面中所有的链接。

总结

之前没有见过这个标签,所以就专门去查看了一番,不过也是一个不常用的标签,使用不当容易造成一些路径丢失,资源无法找到的一些情况。

参考资料

什么是实体符号?

实体符号被用作实现一些保留字符如(<)(>)或表达键盘一些无法输入的字符,在HTML中他们会被误认为标签。如果希望正确的显示预留字符,我们必须在 HTML 源代码中使用字符实体(character entities)。

实体符号举例

字符实体类似这样:

&entity_name;

或者

&#entity_number; 如 &copy 或 &#169

小提示

  1. 使用实体名而不是数字的好处是,名称易于记忆。不过坏处是,浏览器也许并不支持所有实体名称(对实体数字的支持却很好)。
  2. HTML 中的常用字符实体是不间断空格( )。浏览器总是会截短 HTML 页面中的空格。如果您在文本中写 10 个空格,在显示该页面之前,浏览器会删除它们中的 9 个。如需在页面中增加空格的数量,您需要使用   字符实体。
  3. 实体名称对大小写敏感。

常用实体字符表

带有实体名称的 ASCII 实体


结果

描述

实体名称

实体编号

quotation mark

"

"

apostrophe

'

'

&

ampersand

&

&

<

less-than

<

<

greater-than

>

>


ISO 8859-1 符号实体


结果

描述

实体名称

实体编号

non-breaking space

 

 

¡

inverted exclamation mark

¡

¡

¢

cent

¢

¢

£

pound

£

£

¤

currency

¤

¤

¥

yen

¥

¥

¦

broken vertical bar

¦

¦

§

section

§

§

¨

spacing diaeresis

¨

¨

©

copyright

©

©

ª

feminine ordinal indicator

ª

ª

«

angle quotation mark (left)

«

«

¬

negation

¬

¬

soft hyphen

­

­

®

registered trademark

®

®

¯

spacing macron

¯

¯

°

degree

°

°

±

plus-or-minus

±

±

²

superscript 2

²

²

³

superscript 3

³

³

´

spacing acute

´

´

µ

micro

µ

µ

paragraph

·

middle dot

·

·

¸

spacing cedilla

¸

¸

¹

superscript 1

¹

¹

º

masculine ordinal indicator

º

º

»

angle quotation mark (right)

»

»

¼

fraction 1/4

¼

¼

½

fraction 1/2

½

½

¾

fraction 3/4

¾

¾

¿

inverted question mark

¿

¿

×

multiplication

×

×

÷

division

÷

÷


ISO 8859-1 字符实体


结果

描述

实体名称

实体编号

À

capital a, grave accent

À

À

Á

capital a, acute accent

Á

Á

Â

capital a, circumflex accent

Â

Â

Ã

capital a, tilde

Ã

Ã

Ä

capital a, umlaut mark

Ä

Ä

Å

capital a, ring

Å

Å

Æ

capital ae

Æ

Æ

Ç

capital c, cedilla

Ç

Ç

È

capital e, grave accent

È

È

É

capital e, acute accent

É

É

Ê

capital e, circumflex accent

Ê

Ê

Ë

capital e, umlaut mark

Ë

Ë

Ì

capital i, grave accent

Ì

Ì

Í

capital i, acute accent

Í

Í

Î

capital i, circumflex accent

Î

Î

Ï

capital i, umlaut mark

Ï

Ï

Ð

capital eth, Icelandic

Ð

Ð

Ñ

capital n, tilde

Ñ

Ñ

Ò

capital o, grave accent

Ò

Ò

Ó

capital o, acute accent

Ó

Ó

Ô

capital o, circumflex accent

Ô

Ô

Õ

capital o, tilde

Õ

Õ

Ö

capital o, umlaut mark

Ö

Ö

Ø

capital o, slash

Ø

Ø

Ù

capital u, grave accent

Ù

Ù

Ú

capital u, acute accent

Ú

Ú

Û

capital u, circumflex accent

Û

Û

Ü

capital u, umlaut mark

Ü

Ü

Ý

capital y, acute accent

Ý

Ý

Þ

capital THORN, Icelandic

Þ

Þ

ß

small sharp s, German

ß

ß

à

small a, grave accent

à

à

á

small a, acute accent

á

á

â

small a, circumflex accent

â

â

ã

small a, tilde

ã

ã

ä

small a, umlaut mark

ä

ä

å

small a, ring

å

å

æ

small ae

æ

æ

ç

small c, cedilla

ç

ç

è

small e, grave accent

è

è

é

small e, acute accent

é

é

ê

small e, circumflex accent

ê

ê

ë

small e, umlaut mark

ë

ë

ì

small i, grave accent

ì

ì

í

small i, acute accent

í

í

î

small i, circumflex accent

î

î

ï

small i, umlaut mark

ï

ï

ð

small eth, Icelandic

ð

ð

ñ

small n, tilde

ñ

ñ

ò

small o, grave accent

ò

ò

ó

small o, acute accent

ó

ó

ô

small o, circumflex accent

ô

ô

õ

small o, tilde

õ

õ

ö

small o, umlaut mark

ö

ö

ø

small o, slash

ø

ø

ù

small u, grave accent

ù

ù

ú

small u, acute accent

ú

ú

û

small u, circumflex accent

û

û

ü

small u, umlaut mark

ü

ü

ý

small y, acute accent

ý

ý

þ

small thorn, Icelandic

þ

þ

ÿ

small y, umlaut mark

ÿ

ÿ

总结

之前对实体符号的认识仅限于  虽然实体符号用的地方不多,但是我觉得还是需要了解,留作此片博客,以便需要用到的时候翻阅。 攻克——实体字符,耗时 30 分钟。

参考资料