今天写一个学习总结html入门知识,当作一个回顾和笔记。

大致内容包含以下几点;

  • www的含义

  • HTML 是谁发明的

  • HTML 起手式

  • 常用的表示章节的标签以及对应意思

  • html全局属性

  • 常用的内容标签以及对应意思

那么接下来开始进入正题;

1.首先简单讲解一下跟前端息息相关的www

www就是world wide web,也就是我们经常听到的万维网

从技术结构上来讲,WWW= URL+ HTTP+ HTML

2.html是谁发明的?

html是在1990年左右由一位名为Tim Berners-Lee的英国人发明,而后此人被英国颁发爵级司令勋章,因此我们通常称其为李爵士,2017年李爵士获得了图灵将。

李爵士一开始做的事是这样:


  • 自己写了一个浏览器

  • 然后自己写了一个服务器

  • 然后他用自己的浏览器访问自己的服务器

  • 然后通过这样形式和思想,他发明了www万维网,想让人可以输入网址就可以浏览网页

  • 而当时世界上没有网址,没有网页,然后他便发明了URL,HTML;并且发明了HTTP将两者联系起来。


3.html起手应该写什么?

html入门学习_html

如图所示,在vscode中我新建了一个index.html文件,其展现的内容就是我们编写一个html页面前的基本内容,即起手式,也是必写项。

那么我们从上至下每行解释一下;


  • 的意思是该页面文档类型为html,当浏览器接收到这个页面时,将它按照html标准展示。

  • 中lang为html标签,表示该页面用什么语言显示,一般国内使用简体中文即“zh-CN”。

  • 标签和标签分别为html标签,head标签里面一般装的是用户看不见的内容,body标签一般来说装的是用户看的见的内容。


  • 中charset为html标签,表示该页面用什么编码解析,当浏览器根据该属性编码类型对页面进行编码。通常我们使用utf-8,因为它全世界通用,而gbk只适合解析像中文类的亚洲国家的文字。

  • 用来设置禁止窗体缩放,兼容手机等

  • 用来设置浏览器相关属性,其中content ="ie=edge"表示如果采用的是IE浏览器,则自动将IE的版本升到最新版本。注意:IE浏览器自带所有版本的内核,可以切换。

  • 标题 用来设置页面标题。


**4.**常用的表示章节的标签有哪些,分别是什么意思


表示章节的标签一般用来表示文章和书的层级;


1.标题类:h1,h2,h3,h4,h5,h6,它会自动加黑加粗,越往后字体越小

2.章节:section,用来表示一篇文章的一章节,比如小说里面的第一章,第二章。

3.文章:aticle,用来装一些文字文本内容。

4.段落:p,用来显示一段一段的内容

5.头部:header,用来显示顶部内容,例如顶部广告

6.脚部:footer,用来显示底部内容,例如版权声明

7.主要内容:main,用来装页面的主要内容,

8.旁支内容:aside,用来显示旁支内容,例如主页面的纵向导航

9.划分:div,用来将内容分区分块,将不同的内容分开,相同的包裹。

**5.**html全局属性有哪些

全局属性就是所有标签都有的属性;

1.class:表示给当前标签分类,后续可以通过class名称对其进行css和js操作

2.id:表示给当前标签一个id,通过id也可以对其进行操作,id具有唯一性,但是如果页面两个标签用了同一个id会出问题,但是编辑软件不会报错。

3.style: 表示样式属性,后面接css的格式对标签进行样式修改

4.contenteditable:表示当前区域可以编辑,当页面在浏览器上显示时,用户仍然可以修改编辑该区域。

5.hidden:表示隐藏该标签

6.tabindex:表示tab键的顺序值,0:最后访问;-1:不访问;正数:按大小顺序访问。这个前提是因为网页支持tab键进行操作。

7.title:表示当某行文字进行了省略,无法显示完整内容,那么title里面写上完整内容,然后加上如图以下的属性即可实现鼠标放在内容上时显示完整内容。

html入门学习_html_02

6.html的常用标签及含义

  • ol+li

ol:ordered list表示有序列表,li: list item表示列表项;ol中只能用li,不能用其他

  • ul+li

l:unorder list表示有序列表,li: list item表示列表项;ul中只能用li,不能用其他

  • dl+dt+dd

dl:description list表示描述列表


dt:被描述项


dd:描述内内容


  • pre:表示原样显示空格和换行,因为html默认不显示

  • hr:表示分割线

  • br:表示换行

  • a :链接标签,href属性表示跳转地址,target表示打开形式,国内通常使用_blank,表示在新窗口打开

  • em:表示强调,主要是强调语气

  • strong:表示强调,主要是强调内容

  • code:用来包裹代码

  • quote:表示引用,行内引用

  • blockquote:表示换行的引用


https://juejin.cn/post/6903076836557717511