HTML之父
HTML是1990年由蒂姆·伯纳斯-李发明,2004年他被英国女皇颁发了大英帝国爵级司令勋章而被称为李爵士,更是在2017年获得了图灵奖。
为了上网冲浪,让每个人输入网址就能看到网页,李爵士编写了世界上第一个浏览器和服务器,发明了WWW,HTML、HTTP和URL。
HTML起手式
在VScode中新建index.html,英文符号下输入!,按tab键可以快速生成
<!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,浏览器不只支持HTML
- html lang="en":HTML标签,en是英语,可以改成zh-CN
- head里面内容是用户看不见的元素
- 第一行meta 绝对不能改,容易乱码。UTF-8代表文件字符编码,是支持全人类所有语言。
- 第二行meta 告诉IE最新内核
- 第三行meta 防止界面缩放,兼容手机
- title是网页标题
常用的表章节标签
表示文章/书的层级
h1~h6
标题,数字越大,字体越缩小section
专题性的内容,通常会带有标题,如果没有标题,那么就不推荐使用section。典型的应用场景有:文档大纲、文档章节、论文中有编号的部分。p
段落header
头部,比如文章置顶加广告footer
脚部,比如在文章底部加声明,代码中输入<footer>©谁版权所有</footer>
,表示©谁版权所有article
是一个特殊的 section 标签。当一段内容脱离了所在的语境之后,还是完整的、独立的,则应该用article典型的应用场景:论坛帖子,新闻或杂志的文章,博客文章,用户提交的评论。main
主要内容aside
旁支内容,常用场景:参考资料,导航div
仅仅用作样式化或者脚本化的标签
全局属性
所有标签都有的属性
class
给标签分类,比如<div class="middle bordered">
,在head
标签中匹配class
<style>
.middle{
background: black;
color:white;
}
.bordered{
border:10px solid red;
}
</style>
contenteditable
可使任何一个元素被编辑,可用来做自己的编辑器。比如<div class="middle bordered"contenteditable>
hidden
隐藏内容,可以用CSS重新显示隐藏内容id
功能类似class,同时JS可以获取id,不要用id,id相同不报错,会误导人,而且在JS中直接用与window有的全局属性名字相同获取元素方法,就不行,不要用idstyle
实现样式编辑器,优先级比CSS高,可以用JS来设置,如果style,CSS,JS都写一样,最终效果以JS为准,内联样式优先tabindex
不用鼠标,用键盘操作,用数字来控制tab键选中的顺序。正表示顺序方向,0表示最后访问,-1表示永远找到不到我title
光标所在处显示完整内容 小技巧: 内容显示一部分,未显示用省略号代替
style{
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
常用内容标签
ol+li
:有序列表ul+li
:无序列表。dl+dt+dd
:描述列表。快捷键dl+tab。dl是列表,dt是被描述对象,dd是描述内容pre
:保留代码中空格、回车和tab。code
:变更字体格式,如果已经在VScode中设置字体,字体是等宽的。 小技巧: 用pre把code包裹起来,就单列出代码块hr
:水平分割线br
:换行a
:超链接,进行页面跳转em
:强调内容,语气上的强调strong
:突出内容重要性,表示内容本身的重要性quote
:内联引用blockquote
:块引用,有换行效果