HTML与CSS入门系列[1]-html标签

,

布尔值的标签属性

对于一些布尔值类型的属性，属于声明了就有效果的。
比如

1
<button disabled>按钮</button>

所以，js修改布尔类型的属性时，只能remove掉这个属性才行。而不能仅仅把disable属性设置为false
(注：亲测这里说法错误，实际上可以通过给disabled赋值为true或false改变禁用状态)

语义化

语义化有很多优点

  • 有利于SEO，易于robot确定页面内容；
  • 提高可访问性，如屏幕阅读器。
  • 代码可读性高。
  • 用正确的标签实现页面的文档结构： 评论用form，标题用h，图片用img，无语义的用span。强调用em，而不用strong，介绍用p，推荐列表用ul，排行榜用ol，播放列表用table。
  • 一个文档： 一个文档声明节点 <!DOCTYPE html>, 一个html节点
  • html节点中包含head和body两个元素节点。
  • html5里面，不需要闭合的标签，自己也不需要加斜杠来闭合。

基本模板

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no”> 
<!-- 设置页面最大宽度为设备的理想宽度。理想宽度下，一般一个css像素表示实际物理像素的2倍或2.x倍。-->
<meta name=“keywords” content=“xxx”>
<meta name=“description” contetn=“xxx”>
<link rel=“shortcut icon” href=“xxxx”> 
<!-- 浏览器默认会请求域名根下的favicon.ico, 如果子页面需要特殊的favicon.ico，则需要在页面中特别指定。-->
<link rel=“stylesheet” href=“xxx”>
</head>
<body>
<script src=“xxx"></script>
</body>
</html>

推荐学习了解下网易的NEC规范: 页面重绘repaint和回流reflow

使用IE最新渲染模式

如今H5大行其道的时候，最稳妥的办法就是在head头部加入：

1
<meta http-equiv = "X-UA-Compatible" content = "IE=edge,chrome=1" />

也就是，如果用户没有GCF，就用最新的IE模拟器版本来解析，如果安装了GCF，就用GCF来解析。 又一个问题来了，你在网页头部加上这个meta， w3c认为这不符合H5规范。所以，可以在服务端让nginx或Apache自动设置一个响应头：
1
2
3
< customHeaders >
     < add name = "X-UA-Compatible" value = "chrome=1" />
</ customHeaders >

i，b，strong，em的语义

<i> – 原本只是倾斜，现在用来体现一种“交替的声音”，通俗将就是普通段落文字中文艺的或2B的文字。像是外语（例如我经常写文章时混搭一些英文或日语）、科技术语（如超氧化物歧化酶SOD）或是用做排版的斜体文字。
(W3C:Markup, WHATWG)
<b> – 原本就是加粗，现在表示“文体突出”文字，通俗将就是普通段落文字中突出不安分的文字。像是文档概要中的关键字，评论中的产品名。或者代表强调的排版方式。(W3C:Markup, WHATWG)
<em> – 原本表示强调，现在指有压力的强调。(W3C:Markup, WHATWG)
<strong> – 原本表示更强强调，现指相当重要，基本上都是一样的。(W3C:Markup, WHATWG)

所以在html5中，b和i是可以使用的，如果段落中某单词只是想突出加粗，并不强调他，但他要突出，那就用<b>吧。