起源
1990年一个叫Tim Berners-Lee的人利用业余时间做了三件事情:1、做了一个浏览器。2、搭了一个服务器。3、用自己做的浏览器去访问自己搭的服务器。这三件事情让他成为了世界上第一个在网上冲浪的人。同时,这三件事也让我们现在打开一个网址的时候要先敲三下W。这三个W的全称是World Wide Web,即万维网。Lee理所当然的成为了万维网之父,享受着万维网带来的红利。
万维网由三个部分组成:URL+HTML+HTTP。因此,我们的主角HTML就是伴随着万维网的诞生一起出生的,也是Lee的孩子之一,如今的前端工程师都可以说是站在巨人的肩膀上,全靠祖师爷赏饭(下面附上祖师爷帅照以示尊敬)。
起手式
万事开头难,我们如何开始写HTML呢?以我本人写代码的程序IDEA为例,首先新建一个空的项目,然后在项目中新建一个文件,名字叫index.html,然后在index.html中打一个感叹号 “!”,注意必须是英文的感叹号,然后按一下Tab键,就会有如下的代码。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
</body>
</html>
其中第一行代表的是文档类型;第二行lang后面的en表示的是使用的语言为英文,可以改成“zh-CN”代表中文;第四行charset后面的UTF-8是文件的字符编码;第五行和第六行的内容表示禁用缩放兼容手机;第七行是告诉IE使用最新内核;第八行title是页面的标题。
章节标签
HTML在刚刚诞生的时候一共有18个标签,发展到现在标签已经增长到110多个,在我们平时写HTML的时候不可能把这110多个标签全部用到,这里我先介绍一下常用的章节标签。
- 标题 h1~h6
- 章节 section
- 文章 article
- 段落 p
- 头部 header
- 脚部 footer
- 主要内容 main
- 旁支内容 aside
- 划分 div
这九个标签很好理解,只需要在需要的地方使用相应的标签即可。
全局属性
全局属性是所有标签都会带有的属性,一共有如下这些:
class
class表示给标签分类,但很多时候都是做一个标记,然后根据该标记修改标签的样式。
示例:
<div class="demo">demo</div>
想要将demo的字体颜色变成红色,在style中写
[class=demo]{
color: red;
}
可以简写成
.demo{
color: red;
}
.demo表示只要class中带有demo都能匹配到。
contenteditable
在标签中加该属性能使该标签可以被编辑。
示例:
有一个标题
<h1>一个标题</h1>
这个标题在页面中展示的时候只能做展示的作用,无法修改。但如果在该标题的h1标签中加contenteditable的话,用户可以在页面中修改标题的内容。
<h1 contenteditable>一个标题</h1>
hidden
hidden属性很好理解,就和他所表达的意思一样,只要在标签中加上这个属性,该标签就会被隐藏,需要注意的是hidden是可以用css将其挽回的。
id
id和class在用的时候功能差不多,比如上面class的例子中,使用id的话可以表示为:
<div id="demo">demo</div>
在style中简写成
#demo{
color: red;
}
JS可以直接调用id,比如:
demo.style.color='red';
那么什么时候用id什么时候用class呢?
建议是不到万不得已不要用id,因为理论上如果这个元素是全页面唯一的就使用id,不然使用class,但是id如果在一个页面上重复了,他不会报错,这会导致产生一些很难找到的bug,其次如果id的名字和window已经有的全局属性同名的话会失效。
style
每个元素中可以加一个style属性,style后面的内容和在style标签中写的css内容效果是完全一样的,但是style属性的优先级比css的要高,可以覆盖css中的。该style属性也可以使用js来设置,js设置的样式优先级比style属性的样式更高。
tabindex
该属性可以设置在页面上使用Tab按键切换可交互组件的切换顺序。比如:
<div tabindex=1>一号组件</div>
<div tabindex=2>二号组件</div>
<div tabindex=3>三号组件</div>
当用户在页面中按Tab时,会先选中一号组件,再按一下选中二号组件,再按一下选中三号组件。需要注意的是当tabindex等于0和负数的情况。如下:
<div tabindex=0>零号组件</div>
<div tabindex=1>一号组件</div>
<div tabindex=2>二号组件</div>
<div tabindex=3>三号组件</div>
<div tabindex=-1>负一号组件</div>
当用户按下Tab键的时候第一个选中的组件并不是零号组件,而是一号组件,其次是二号三号组件,最后才是零号组件,零号组件后再按Tab也不是切换到负一号组件,而是重新切回一号组件,也就是说当tabindex=0时,他的优先度是最低的,最后才会切换到他,当tabindex为负数时永远都切换不到。
title
当一个组件中有两行内容时,可以使用下面的css将其变成一行,多余的内容用省略号显示
white-space: nowrap; //不换行
over-flow: hidden; //隐藏多余部分
text-overflow: ellipsis; //隐藏的部分用省略号显示
可以把省略号省略的内容写在title属性中,使鼠标附上去显示省略的内容。
内容标签
ol+li
<ol>
<li></li>
<li></li>
......
</ol>
顺序列表:
1、
2、
.......
ul+li
<ul>
<li></li>
<li></li>
......
</ul>
无序列表:
●
●
......
dl+dt+dd
<dl>
<dt></dt>
<dd></dd>
</dl>
描述列表:
dt: 描述对象
dd:描述内容
pre
保留空格、回车、tab;
code
里面的字是等宽的
hr
分割线
br
换行
a
超链接 target 在新窗口打开 target:"_blank"
em
强调
strong
加粗
quote
引用 内联
blockquote
换行 块
补充
HTML5权威资料:搜MDN HTML5 语言切成简体中文
标签里面的Boolean属性,写了一般就是true,不写一般就是false
tag大小写无所谓,一般小写
一般不写自闭合的斜杠
HTML这些标签自带的默认样式一般都很丑,要学会写css reset来覆盖默认样式