页面制作之开发调试工具(1)

2015/04/14 · CSS,
HTML5,
JavaScript ·
调试

原文出处:
jingwhale   

有趣的CSS题目(12):你该知道的字体 font-family

2017/01/06 · CSS · 1
评论 ·
字体

本文作者: 伯乐在线 –
chokcoco
。未经作者许可,禁止转载!
欢迎加入伯乐在线 专栏作者。

小小的字体其实有大大的学问,可能与字体相关的很多知识都偏设计,不过俗话说技多不压身,艺高人胆大,多了解了解总归没错。

图片 1

欢迎来到HTML5.2时代!

2016/10/10 · HTML5 · 4
评论 ·
HTML5.2

原文出处: Annarita
Tranfici   译文出处:众成翻译   

图片 2

21世纪,2016年6月,HTML
5.1从工作草案变为了候选标准。正如你了解的那样,这是将提案变为标准的第二步,Web的如此发展也将影响我们的日常生活。作为候选标准,W3C认为HTML
5.1已经通过了review并且能够满足工作组的技术需求了。

几天前,HTML
5.1被提案进入第三阶段:推荐标准(PR)。这意味着这个规范只需要进行微量的修改就可以进入W3C标准的最后一阶段了。

随着HTML
5.1接近最后阶段,工作组开始关注于未来。于是工作组正式开始研究HTML
5.2工作草案,因此,W3C在社区中发布了HTML
5.2规范来让W3C成员、公众以及其他组织进行review。

HTML5凭借语义性、兼容性和不需要第三方依赖的API迅速席卷了整个互联网。这是一场革命性的技术变革。HTML
5.1保留了先前版本全部优良的特性又引入了一些语义元素的重大改进。想想HTML
5.1都带来了什么,可想而知HTML 5.2会更为惊艳。

在本文中,我将做一个关于HTML发展的简短的概述,包括HTML 5,HTML
5.1,和HTML 5.2中引入和废除的特性。

以下是本文的重点:

  • HTML 5引入的语义元素概述;
  • 关于HTML 5和HTML 5.1中新特性和未定案特性的变化;
  • HTML 5.2的介绍以及对于接下来可能发生的事的猜想;

开发工具介绍

开发工具一般分为两种类型:文本编辑器和集成开发环境(IDE)

常用的文本编辑器:Sublime Text、Notepad++、EditPlus等

常用的IDE:WebStorm、Intellij IDEA、Eclipce等

我们这里主要介绍如何使用Sublime
Text编辑器,它基本满足我们对前端开发工具的需求。

字体的分类

就 Web 常用的一些字体而言,经常听说的字体类型,大致可以分为这几种:

  • serif(衬线)
  • sans-serif(无衬线)
  • monospace(等宽)
  • fantasy(梦幻)
  • cuisive(草体)

其实大体上分为衬线字体和无衬线字体,等宽字体中也有衬线等宽和无衬线等宽字体,这
5 个分类是 font-family 的 5 个可用字体系列取值。

图片 3

也就是说,上述 5
个名字,代表的并非某个特定字体,而是一系列字体,这些通用的名称允许用户代理(通常就是浏览器)从相应集合中选择一款字体。

这也很好解释了,font-family 中的 family
,家庭的意思,也就是不单单指一个,而是可以指定多个,上述 5
个英文单词都是 font-family 的可用取值,下文还会详细讲到。

下面详细了解一下每类字体。(本来每一个字体都有贴示意图的,无奈博客园摆出来太影响美观,可以移步我的Github阅读)

HTML 5 新的语义元素

HTML
5.1最伟大的创新之一就是引入了新的语义元素。它们也许(很有可能)会成为你如今日常写码的一部分。就是因为有了标记性的结构和语义,才使我们的站点有了很大改善。

我将主要提到的元素有:

  • <main> 定义主要内容;
  • <nav> 定义主体模块或者导航链接的集合;
  • <article> 包含独立于页面其他部分的内容;
  • <header> 包含介绍部分或者是导航链接的集合;
  • <footer>
    定义了整个页面或其中一部分的页脚(并且通常包含原创作者,版权信息,联系方式和站点地图);
  • <aside>定义了所处内容的侧边栏,<section>定义了文档中特定的部分。

将两个革命性的元素单独拿出来说,它们帮助我们解决了Flash等技术难题:

  • <audio>用来在文档中嵌入音频内容
  • <video>用来在文档中嵌入视频内容

在上面提到的所有元素中,最有争议的无非是<main>元素。在W3C规范的描述中它是页面中的主要内容,然而万维网超文本应用技术工作组(WHATWG)却定义<main>元素为其他元素主要内容的容器。由于这个区别,WHATWA没有限制一个文档中<main>元素出现的次数。按WHATWA的定义,如果你在一个页面中定义了多个<article>元素,你就可以给每个<article>标记<main>元素。

两种规范在其他方面也有一些不同,例如<hgroup>的存在(W3C标准中删除了此元素,但它仍旧存在于WHATWG中–译者注)。这篇文章中不会详细讲解这部分内容,如果你感兴趣可以阅读Aurelio
De Rosa的这篇文章,W3C vs. WHATWG HTML5 规范 –
文档中的不同,你可以从中了解到很多。

现在我们来看一下HTML 5和HTML 5.1中的不同。

一、Sublime Text的特点:

跨平台、启动快

多行选择

各种实用插件

Snippets

支持VIM兼容模式

Sublime Text获取地址:

serif — 衬线字体

serif,意为有衬线的字体,衬线的意思是在字符笔画末端有叫做衬线的小细节的额外装饰,而且笔画的粗细会有所不同,这些细节在大写字母中特别明显。

OK,那么有哪些常用字体属于衬线字体呢?

HTML 5 和 HTML 5.1的不同之处

这部分将主要介绍HTML
5.1中一些尚未确定的元素、方法和属性。我将就其概念和优点进行介绍,并且提供了一些其他资料,如果感兴趣可以进行扩展阅读。需要注意的是,这里提到的大部分新元素都在HTML5中被提出却因为某些原因没有通过提案,所以对你来说也许并不陌生。例如
<details><summary>就是从HTML 5转移至HTML 5.1规范中的。

就像其他规范一样,HTML
5.1也引入了一些被移除不久的特性。其中之一就是inert属性,它在2014年被提出。正如Github上这个discussion中所提到的,这个属性自从被归入<dialog>元素后就被遗弃了。

开始使用新的元素吧~

二、常用的插件

Package Control:安装其他插件之前,首先先安装Package Control

Emmet:Web开发者的工具包,可以大大提高你的HTML和CSS的工作流程

SublimeCodeIntel:代码提示

DocBlocker:对js代码进行注释

JSFormat:格式化js代码

Terminal:使用vim命令

宋体(SimSun)

Windows
下大部分浏览器的默认中文字体,是为适应印刷术而出现的一种汉字字体。笔画有粗细变化,是一种衬线字体,宋体在小字号下的显示效果还可以接受,但是字号一大体验就很差了,所以使用的时候要注意,不建议做标题字体使用。

HTML 5.1引入的新元素

第一个准备讲的就是<picture>元素。它的用处就是把source元素和srcset属性结合到一起,更方便的是当网页展示在小屏幕(例如移动设备)上时,它可以提供内存和尺寸较小的图片。

<picture>元素的另一个功能就是当页面加载在高分辨率屏幕上的时候就提供高密度的图片。由于这个元素的存在,你可以更好的给用户展示图片并且很好的避免过大的高密度图片与网站不相称。如果你想更多的了解,可以阅读我的另外两篇文章:使用Picture元素提升响应式图片

响应式图片第一步:使用srcset。当然也有一些人主张picture元素的不必要的
(大多数时候)。不管怎样,这都取决于你的选择。

接下来介绍<dialog>元素,当下有Chrome和Opera已经对其进行支持,微软Edge则仍在考虑中。这个元素可以用来作为对话框,确认框或者窗体。可以通过把<form>元素的method属性设置为dialog来把其合并到<dialog>元素中。这样这个form表单提交的时候,这个对话框就会关闭同时把提交按钮返回的值设置为returnValue。这里有一个在线的demo,代码来自MDN,
由JSFiddle展示。

同时<details><summary>也是值得推荐的新增元素。<details>展示给用户
在这个组件上可以获取额外的信息或者控件。<summary>元素作为总结,标题,或是图例放在<details>的内容中,二者互相配合。目前有Chrome,Firefox(版本49+),Opera,Safari支持了<details>元素。我认为这两个元素未来会在折叠/展开组件上起很大作用。

2.1 Package Control

安装其他插件之前,首先先安装Package Control,具体步骤如下:

使用Ctrl+`快捷键或者通过View->Show Console菜单打开命令行,

Sublime text3粘贴如下代码:

JavaScript

import urllib.request,os; pf =
'PackageControl.sublime-package'; ipp =
sublime.installed_packages_path();urllib.request.install_opener(
urllib.request.build_opener(urllib.request.ProxyHandler()) );
open(os.path.join(ipp,
pf),'wb').write(urllib.request.urlopen(
'; +
pf.replace('','%20')).read())

1
import urllib.request,os; pf = &#039;PackageControl.sublime-package&#039;; ipp = sublime.installed_packages_path();urllib.request.install_opener( urllib.request.build_opener(urllib.request.ProxyHandler()) ); open(os.path.join(ipp, pf),&#039;wb&#039;).write(urllib.request.urlopen( &#039;http://sublime.wbond.net/&#039; + pf.replace(&#039;&#039;,&#039;%20&#039;)).read())

Sublime text2粘贴如下代码:

JavaScript

import urllib2,os; pf='PackageControl.sublime-package'; ipp
= sublime.installed_packages_path(); os.makedirs(ipp ) if not
os.path.exists(ipp) else None;
urllib2.install_opener(urllib2.build_opener( urllib2.ProxyHandler(
))); open( os.path.join( ipp, pf),'wb' ).write(
urllib2.urlopen( '; +pf.replace(
'','%20' )).read()); print( 'Please
restart Sublime Text to finishinstallation')

1
import urllib2,os; pf=&#039;PackageControl.sublime-package&#039;; ipp = sublime.installed_packages_path(); os.makedirs(ipp ) if not os.path.exists(ipp) else None; urllib2.install_opener(urllib2.build_opener( urllib2.ProxyHandler( ))); open( os.path.join( ipp, pf),&#039;wb&#039; ).write( urllib2.urlopen( &#039;http://sublime.wbond.net/&#039; +pf.replace( &#039;&#039;,&#039;%20&#039; )).read()); print( &#039;Please restart Sublime Text to finishinstallation&#039;)

如果顺利的话,此时就可以在Preferences菜单下看到Package Settings和Package
Control两个菜单了。

可能由于各种原因,无法使用代码安装,那可以通过以下步骤手动安装Package
Control:

a.Package
Control下载地址:
b.点击Preferences>BrowsePackages菜单
c.进入打开的目录的上层目录,然后再进入Installed Packages/目录
d.下载Package Control.sublime-package并复制到Installed
Packages/目录
e.重启SublimeText。

Times New Roman

Mac 平台 Safari
下默认的英文字体,是最常见且广为人知的西文衬线字体之一,众多网页浏览器和文字处理软件都是用它作为默认字体。

HTML 5.1其他新增

除了这些元素,HTML 5.1还添加了如下新增:

  • <input>元素的type属性新增了monthweek两个值。正如它们名字所表示的那样,它们定义控件将元素的值设置为代表一个月或者一周的字符串。
  • forceSpellcheck()方法加入到HTMLElement接口中,并且允许开发者通过在元素上调用此函数强制用户执行拼写和语法检查,即使用户没有聚焦这个单词。其中一个用途就是inputElement.forceSpellcheck()。不幸的是还没有浏览器支持这个特性。
  • allowfullscreeniframe元素的一个布尔类型属性,它指定了当调用requestFullScreen()方法时,iframe是否接受全屏。当该属性未被指定时,默认元素不接受全屏模式。
  • reportValidity()方法被调用时,强制用户进行<form>元素的约束校验。比如当一个必填元素没有被填写或者一个字段涉及到它的pattern属性时。如果约束的校验返回正确的结果时,这个函数会返回true,反之则返回false。目前有Chrome和Opera支持了这个方法。
2.2 Emmet

Emmet是一个Web开发者的工具包,可以大大提高你的HTML和CSS的工作流程。

基本上,大多数的文本编辑器都会允许你存储和重用一些代码块,我们称之为“片段”。虽然片段能很好地推动你得生产力,但大多数的实现都有这样一个缺点:你必须先定义你得代码片段,并且不能再运行时进行拓展。Emmet把片段这个概念提高到了一个新的层次:你可以设置CSS形式的能够动态被解析的表达式,然后根据你所输入的缩写来得到相应的内容。Emmet是很成熟的并且非常适用于编写HTML/XML
和 CSS 代码的前端开发人员,但也可以用于编程语言。

图片 4

sans-serif — 无衬线字体

sans 的意思是无,sans-serif
也就是无衬线的意思。专指西文中没有衬线的字体,与汉字字体中的黑体相对应。与衬线字体相反,该类字体通常是机械的和统一线条的,它们往往拥有相同的曲率,笔直的线条,锐利的转角。

中文下,无衬线字体就是黑体,黑体字也就是又称方体或等线体,没有衬线装饰,字形端庄,笔画横平竖直,笔迹全部一样粗细。

看看又有哪些常见的无衬线字体。

未定案的特性

HTML 5.1规范中也描述了一些当前被认为“at risk”的特性。

我要提的第一个未定案的特性就是<menu>元素。它代表了菜单指令的集合,它原本是被设计用来创建工具栏和弹出菜单的。当下Chrome和Opeara只有在实验性网络平台(Experimental
Web Platform features)
打开后才能支持,并且只支持context
menu,不支持button
menu。Firefox的近期版本也是同样,目前的其他浏览器没有可以支持的。

接下来要介绍的特性是<menuitem>元素,定义了用户可以从弹出菜单中调用的命令。在变种包含了context
menu,同时menu可能关联了一个menu
button。当下Chrome和Opeara只有在实验性网络平台(Experimental Web
Platform
features)
打开后才能支持,并且只支持type=”command”。在Firefox中也只有当关闭tag后才能支持带有contextmenu属性的<menu>。IE和Edge都没有支持该元素。

另一个未定案的特性则是<keygen>。这个元素会在控件的表单提交的时候生成一对密钥,私有密钥会存储在本地的keystore中,公有密钥则会被打包发送到服务器。
In addition to these elements, the following features are also
considered at risk: 除了上面提到的这些元素,下面这些特性也同样没有确定:

  • <input>元素的typedatatimedatatime-local两个值。前者用来定义一个特定地区的日期和时间,候着则是代表本地日期和时间,没有时区偏移量信息。
  • context属性为<div>指定了一个context
    menu,并且当用户右键点击div时会显示菜单。所有的浏览器中,只有Firefox支持了这个属性。
  • inputmode属性。它指定了当用户在表格控件中输入内容时,输入机制会提供更多的帮助。

好了,现在你已经知道了HTML
5.1做了哪些改变,可以进一步了解工作组现在在研究的规范内容了。

2.2.1 安装Emmet

a、通过快捷键组合ctrl+shift+P唤出命令面板
b、在面板中输入“install package”后回车
c、接着输入“Emmet”,等待安装完成。

微软雅黑(Microsoft Yahei)

大名鼎鼎的微软雅黑相信都不陌生,从 windows Vista
开始,微软提供了这款新的字体,一款无衬线的黑体类字体,显著提高了字体的显示效果。现在这款字体已经成为
windows 浏览器最值得使用的中文字体。

HTML 5.2会带来什么

HTML
5.2规范的制定工作才刚刚开始,所以此时此刻还没办法猜测出很多东西。

最重要的特性之一就是<script type="module">和对于模块如何分解、获取和评估,这也是制定HTML
5.2将要讨论的一部分。这个特性加入了对于加载JavaScript模块的支持,以及分解、获取、解析、评估模块所必须的依赖。关于这个话题想了解更多的话,可以阅读WHATWG的为Web平台添加JavaScript模块这篇文章。

另一个开发中的特性就是关于 <meta name="theme-color">
的定义。它的值可以是包括HEX和RGB在内的任何你在CSS中使用的颜色。一旦页面中如此使用了,只要浏览器和操作系统定制了用户界面,这个新的meta标签就会建议它们使用这个颜色。你可以看到Android端的Chrome浏览器已经像下图这样做出这样的行为。

图片 5

对于autocapitalize属性的标准化也在讨论中。当前Safari在IOS上对它的支持由于版本的不同有两种不同的实现。老版本(IOS
5之前)是作为布尔型属性,而新版本则支持不同的值。已经有提案
发布建议以一种独特的方式让所有浏览器支持这个属性。

最后我想提一下这个关于大纲算法概念的discussion。大纲算法是一种基于节段元素的结构而不是标题的level来提供Web页面大纲的机制。理论上,你可以在一个页面中所有的标题都使用h1,只要把标题放置于正确的节段元素中,就可以创建出结构化文档。然而实际上还没有任何代理实现它,因此在网站中依赖这个算法还是有风险的。

除了开发新的特性之外,工作组同样致力于使浏览器实现已存在的特性。其中之一就是<input>元素与一个<datalist>元素关联时的行为。

如果你想了解关于工作组工作重点的其他细节,可以关注这个GitHub
issue。

2.2.2 使用Emmet

华文黑体(STHeiti)、华文细黑(STXihei)

属于同一字体家族系列,MAC OS X 10.6
之前的简体中文系统界面的默认中文字体,正常粗细就是华文细黑,粗体下则是华文黑体。

总结

我希望我把HTML近些年的重大改变完整的呈现给你了。以上内容也说明了开发者想要紧随Web的发展是多么的不容易。

1 赞 3 收藏 4
评论

图片 6

1) html初始化

输入“!”或“html:5”,然后按Tab键:

图片 7

html:5 或!:用于HTML5文档类型
html:xt:用于XHTML过渡文档类型
html:4s:用于HTML4严格文档类型

黑体-简(Heiti SC)

从 MAC OS X 10.6
开始,黑体-简代替华文黑体用作简体中文系统界面默认字体,苹果生态最常用的字体之一,包括
iPhone、iPad 等设备用的也是这款字体。

2) head标签内操作

引入外部样式表:link:css+tab

CSS

<link rel=”stylesheet” href=”style.css”>

1
<link rel="stylesheet" href="style.css">

引入内部样式表:style+tab

CSS

<style></style>

1
<style></style>

引入外部js文件:script:src+tab

JavaScript

<script src=””></script>

1
<script src=""></script>

引入内部js文件:script+tab

JavaScript

<script></script>

1
<script></script>

添加网站图标:link:favicon+tab

CSS

<link rel=”shortcut icon” type=”image/x-icon” href=”favicon.ico”>

1
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">

设置字符编码:meta:utf+tab

XHTML

<meta http-equiv=”Content-Type” content=”text/html;charset=UTF-8″>

1
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

设置兼容模式meta:compat+tab

XHTML

<meta http-equiv=”X-UA-Compatible” content=”IE=7″>

1
<meta http-equiv="X-UA-Compatible" content="IE=7">

演示如下:

图片 8

冬青黑体(Hiragino Sans GB)

又叫苹果丽黑,Hiragino
是字游工房设计的系列字体名称。是一款清新的专业印刷字体,小字号时足够清晰,Mac
OS X 10.6 开始自带有 W3 和 W6 。

3)  body体内容编辑

●标签:标签名(+tab)

●id:标签名#+类名称(+tab),可以跟多个类

类:标签名.+id名称(+tab),仅可以跟一个id

图片 9

只输入.item,则Emmet会根据父标签进行判定,一般为div。比如在<ul>中输入.item,就会生成<li></li>。

图片 10

下面是所有的隐式标签名称:

li:用于ul和ol中
tr:用于table、tbody、thead和tfoot中
td:用于tr中
option:用于select和optgroup中

●标签的内容:标签名{内容}

标签内的属性:标签名[属性名=属性值],如:a[href=www.baidu.com]

图片 11

补充:

表单method属性

form:post(get)

input属性添加缩写(部分)

input->inp input:hidden->input:h input:text->input:t
input:password->input:p
input:checkbox->input:c
input:radio->input:r
input:submit->input:s input:button->input:b

●嵌套

>:子元素符号,表示嵌套的元素
+:同级标签符号
^:可以使该符号前的标签提升一行

图片 12

●分组()
可以通过嵌套和括号来快速生成一些代码块,比如输入(.foo>h1)+(.bar>h2),会自动生成如下代码:

图片 13

●定义多个元素***
要定义多个元素,可以使用
**符号。比如,ul>li\3可以生成如下代码

图片 14

●计数器 $
在我们做”轮播“时,给元素的命名(id或者class),都会有一个计数位,这个时候,我们就可以使用
$ 它来实现了,如下:

图片 15

可以合理组合各种操作来写出复杂样式的代码块。

Helvetica、Helvetica Neue

被广泛用于全世界使用拉丁字母和西里尔字母的国家。Helvetica
是苹果电脑的默认字体,微软常用的Arial 字体也来自于它。

2.2.3 CSS缩写

Arial

Windows 平台上默认的无衬线西文字体,有多种变体,比例及字重(weight)和
Helvetica 极为相近。

1).  值

比如要定义元素的宽度,只需输入w100,即可生成

CSS

width: 100px;

1
width: 100px;

图片 16
除了px,也可以生成其他单位,比如输入h10p+m5e,结果如下

CSS

height: 10%; margin: 5em;

1
2
height: 10%;  
margin: 5em;

单位别名列表: p 表示%、e 表示 em、表示 ex

Verdana

无衬线字体,优点在于它在小字上仍结构清晰端整、阅读辨识容易。

2).  附加属性

@f+

图片 17

Tahoma

十分常见的无衬线字体,字体结构和 Verdana 很相似,其字元间距较小,而且对
Unicode 字集的支持范围较大。许多不喜欢 Arial 字体的人常常会改用 Tahoma
来代替,除了是因为 Tahoma 很容易取得之外,也是因为 Tahoma 没有一些 Arial
为人诟病的缺点,例如大写“i”与小写“L”难以分辨等。(这里故意反过来写)。

发表评论

电子邮件地址不会被公开。 必填项已用*标注