HTML 起手式
我们可以使用emmet语法里的!来快速生成html模板。
在VSCode中，新建html文件，输入!之后按回车，就可以自动生成一个html模板。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
解释一下上面的东西：
<!DOCTYPE html>表示这是一个html文档（其它还有诸如svg, xml等）。<html lang="en">表示这个html文档的语言是英语。
中文（中国大陆）应当为zh-CN。meta标签是对这个文档的进一步说明。例如上文的几个meta标签：
<meta charset="UTF-8">表示该文档使用的字符集（编码）是utf-8。请注意，这个编码如果和这个文件的实际编码不一样，就会出现乱码。
<meta http-equiv="X-UA-Compatible" content="IE=edge">表示针对IE浏览器，启用最高版本的内核（注：IE浏览器内置了几个不同版本的内核，不同的内核渲染效果可能会不同）。
<meta name="viewport" content="width=device-width, initial-scale=1.0">表示禁止缩放。
表示章节的标签
标签的全局属性
一个标签的属性是对这个标签的描述。
所有的标签都具有的属性称为全局属性。
设置一个有参属性的方法是：属性名="参数"。参数最好用引号括起来（属性只有一个值没问题，多了就会出问题）。
属性值根据不同的属性有不一样的写法，例如：
<div class="mystyle1 mystyle2">
<div style="font-size:50px; border:1px solid blue">
有一些属性有自己的默认参数，例如
<div contenteditable> 等效于 <div contenteditable="true">
不同写法的属性当然可以一起写：
<input type="text" style="font-size:10px; border:1px solid blue" disabled>
常用的全局属性有:
class
标记这个标签里内容的类别。设置了class后，可以通过类选择器选择特定的标签。
一个标签可以有多个class，中间用空格隔开。
一个class可以被多个标签共享。
contenteditable
标记这个标签里的内容是否可被浏览页面的用户直接编辑。默认值为`true`。
style
标记这个标签里内容的样式。语法和CSS一致。优先级（权重）上，JS设定的CSS>style设置的CSS（内联）>style标签里指定的CSS（嵌入）。
hidden
将该标签里的内容设置为不可见。此时该标签仍然存在页面中，可以通过JS获取其中的内容，只是用户不可见。
id
标记该标签的全局唯一名称（给这个标签设置一个唯一的名字）。不过，即使给多个标签设置同一个id，浏览器也不会报错。
tabindex
如果你在一个页面上按下tab键，你可能会发现一些内容会被黑框框起来，这是为了方便没有鼠标的人选择一些页面的区域。`tabindex`设置的是随着tab键不断按下，选择框经过的位置。你可以给它设定3种值：
一个正数（不一定要连续的正数）：选择框会依次经过tabindex值从小到大的标签（多个标签的tabindex值相同，按照代码中的先后顺序）。
-1：选择框永远不会经过这个标签。
0：选择框在经过其它所有设置了tabindex为正数的标签后，才会经过这个标签。（多个标签的tabindex值都为0，按照代码中的先后顺序）
title
当鼠标移到这个标签上时显示这个属性设置的值。可以用来设置一些页面上省略的文字等。
扫一扫
7050
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
