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

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里面，不需要闭合的标签，自己也不需要加斜杠来闭合，例如这样就ok了。不过如果您需要编写react的JSX语法时，请特别注意react有特殊要求：JSX 要求标签必须正确闭合。像 <img> 这样的自闭合标签必须书写成 <img />，而像 <li>oranges 这样只有开始标签的元素必须带有闭合标签，需要改为 <li>oranges</li>。

基本模板

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规范。

其中 width=device-width 挺重要，这个是让webview视口像素变成最佳虚拟像素大小（基于设备像素比算出来的）。例如iphone8物理宽是750，那么webview里的宽则是375.
具体参考 https://www.cnblogs.com/Helen-code/p/13158453.html

使用IE最新渲染模式

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

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

也就是，如果用户没有GCF，就用最新的IE模拟器版本来解析，如果安装了GCF（Google Chrome Frame，谷歌浏览器内嵌框架），就用GCF来解析。 又一个问题来了，你在网页头部加上这个meta， w3c认为这不符合H5规范。所以，可以在服务端让nginx或Apache自动设置一个响应头：

1
2
3
< customHeaders >
     < add name = "X-UA-Compatible" value = "chrome=1" />
</ customHeaders >

2024年更新：不过上面说法也有点过时了。其实现在html你就直接按最标准写法写就好了，也不需要加上所谓的 http-equiv = "X-UA-Compatible", 毕竟现在也都没什么IE浏览器了。

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>吧。