本文将以哔哩哔哩网站为例梳理HTML基础知识
一.基础认知
- 网页中的固定结构是要通过特定的HTML标签进行描述。比如：开头、正文等。
- HTML标签书写在
<body></body>内。 - 标签标签由<、>、/、英文单词或字母组成。并且把标签中<>包括起来的英文单词或字母称为标签名
- 常见标签由两部分组成，我们称之为：双标签。前部分叫开始标签，后部分叫结束标签，两部分之间包裹内容.比如：段落标签
<p>内容</p>，其中<p>为开始标签，</p>为结束标签。 - 少数标签由一部分组成，我们称之为单标签，自成一体，无法包裹内容。比如：
<br>（换行标签），<hr>（水平线标签） - HTML标签与标签之间的关系有两种：1.父子关系（嵌套关系），比如
<div><ul></ul></div>即为在一个盒子里写个列表。2.兄弟关系（并列关系），比如：<div></div><span></span>,即为两个盒子分开放。 - 了解更多标签可以在MDN、W3C上查看
二.实际案例
- 上图为该网站的具体代码。展开来看
<div class="bili-header__bar">为该网站的头部导航栏是由包裹在div里的表单结构，div标签包裹ul标签，ul标签包裹几个li标签，而li标签里包裹链接标签。再往里是存放图片的svg标签和存放文字的span标签。
- 接着是搜索框。首先是form标签：
<form>表单是可以把浏览者输入的数据传送到服务器端，这样服务器端程序就可以处理表单传过来的数据。接着是包裹着input标签的div标签，默认写进"mignon"。然后是右边的存放svg标签和path标签的div - HTML 的元素大多数默认都是矩形，而SVG 在形状上更加丰富。在不给
<svg>设置宽高时，它的默认宽度是 300px ，默认高度是 150px 。而<path>是SVG中最常见的形状，可以通过它来绘制矩形、圆形、椭圆、折线等形状。
- 再右边是和左边差不多的结构
三.总结
从目前的代码看出还有很多不属于html范畴的知识点，比如如何设定他们的颜色，大小，位置等，而这些是属于CSS范畴。下一篇再来分析关于CSS相关的知识。
