HTML入门笔记1

192 阅读2分钟

前言

大家好,一名前端小白,截至目前,我才对HTML有一丢丢解,我希望把我学习前端的学习经历记录下来,一方面帮助自己回顾所学知识,另一方面分享自己的学习经历,如果三个月之后我蜕变成为一名合格的前端工程师,我希望自己的学习经历能帮助其他要转行的、没有信心的小白。那HTML到底是什么呢?

Html是谁发明的

历史:1990年之前,上网并不是像我们现在这样随便打开一个浏览器、输入关键字或者网址就能看到一个漂亮的网页,相反,1990年之前上网需要用户明确知道要访问地方的IP,且也没有良好的视觉呈现。Tim Berners lee (李爵士),为了让用户输入网址就能看到一个网页,同时把程序员看到的东西和用户看到的东西区分开来,在基于互联网之上,李爵士用“URL+HTTP+HTML”构造出了万维网。李爵士创造的HTML(HyperText Markup Language,超文本标记语言),就是我们现在常看到的网页,加上一个URL和一个HTTP,就做到了输入网址,就看到了网页。

HTML起手应该写什么

在VScode,输入一个感叹号:! 按下Tab键就自动出现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>

注:head标签内大部分内容在网页上是不呈现的,用户看到的内容一般在body标签内。body 标签内又可以分为header顶部内容、footer尾部内容、main中间的主要内容以及aside旁支内容。

常用的章节标签

  1. h1~h6 标题
  2. p 段落
  3. section 章节
  4. article 文章
  5. main 主要内容
  6. aside 旁支内容

全局属性有哪些

  1. class
  2. id
  3. contenteditable
  4. hidden
  5. title鼠标悬停在元素上显示的内容
  6. style
  7. tabindex

常用内容标签及其意思

  1. a 超链接
  2. ol+li 有序列表
  3. ul+li 无序列表
  4. dl+dt+dd 自定义列表
  5. pre 保留空格、回车等
  6. code 表示代码
  7. hr 水平分割线
  8. br 换行
  9. em 强调
  10. strong 强调,加粗