HTML入门

223 阅读2分钟

HTML历史

1990年左右由Tim Berners-Lee发明,他自己写了第一个浏览器和服务器,用浏览器访问了服务器。他同时发明了 WWW,HTML,HTTPURL

HTML学习方法

  • 学习语法,怎么编写代码
  • 学习如何调试,找出错误
  • 在正确的地方查询资料
  • 了解标准的制定者,权威标准

HTML 起手式

HTML起手式为Emmet感叹号, <!DOCTYPE html>

章节标签

  • h1~h6 为标题
  • section 为章节
  • article 为文章
  • p 为段落
  • header 为头部
  • footer 为脚部
  • main 为主要内容
  • aside 为旁支内容
  • div 为划分大的部分

全局属性

  • class是一个以空格分隔的元素的类名(classes )列表
  • contenteditable可以使任何一个HTML元素能够被编辑
  • hidden隐藏任何HTML元素
  • id慎用Id,不到万不得已不用Id, Id元素也能在JS被调用
  • style每个HTML元素都有style属性
  • tabindexHTML设置tabindex属性,可以用来控制Tab键的顺序。tabindex=0为最后顺序,-i为忽略
  • title显示完整内容

内容标签

  • ol + li, orderst list为有顺序的列表,list为列表中的某一项
  • ul + li, unorder list为无顺序的列表,list为列表中的某一项
  • dl + dt + dd, description list为描述列表,description tem为描述的对象,description data为描述的内容
  • pre, preformatted为该元素中的文本通常按照原文件中的编排,以等宽字体的形式展现出来,文本中的空白符(比如空格和换行符)都会显示出来
  • hr, Horizontal rule为分割线
  • br, break为换行
  • a, anchor为链接指向
  • em, emphasis标记出需要用户着重阅读的内容
  • strong, 表示文本十分重要,一般用粗体显示
  • code 里面的字都是等宽的
  • quote 为引用
  • blockquote 为块级引用,代表其中的文字是引用内容

重置HTML默认样式

因为HTML有默认的样式,所以需要重置样式

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
*::before,
*::after {
  box-sizing: border-box;
}
a {
  color: inherit;
  text-decoration: none;
}
input,
button {
  font-family: inherit;
}
ol,
ul {
  list-style: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

更多信息

HTML书籍