web前端学习笔记:帮助中心板块制作

一、HTML标记的语义化使用

        HTML标记是用于描述网页结构，对页面对象样式进行简单设置。HTML标记的语义化就是让标签在程序运营中发挥功能，执行开发人员让其执行的命令，比如<p>标签代表文本段落,<h1>标签代表标题,<a>标签代表链接。

        如果我们使用<p>标签来插入一个标题，就可以通过改变P标签内文字的大小、颜色来达到和<h1>标签同样的效果。

        虽然在实际工作中别人不会在乎开发人员的标签语义化使用是否正确，但是浏览器和搜索引擎却需要正确的标签语义化来准确执行开发人员的指令。

HTML部分标签说明 

HTML文件是标准的ASCII文件，其后缀名是htm或html，标准的HTML文件具有一个基本的文档结构，而文档中的标记符号一般都是成对出现的。

（一）<div></div> 

div元素是块级元素，会默认占据一行，后面的元素会在div之后换行。该标签默认是不显示的，往往是和CSS一起使用，可以通过分割网页对其进行整体布局。

        以前开发人员常用<table>来布局，直到div出现逐渐取代了使用<table>布局。div标签相当于容器，把网页分割成为独立的区块。目前的大部分网站都是采用div+CSS+js的开发标准，这是一种快速开发网页的方式。 

（二）<a></a>

        <a>标签是用于定义文本超链接的，其作用是实现从一个页面链接到另一个页面的跳转，它最重要的属性是href属性，用来指示链接的目标。

（三）<span></span> 

        <span>标签是HTML的行内标签，被用来组合文档中的行内元素而将其独立出来。和div标签一样，默认不显示，只有配合CSS时才可以让其中内容产生视觉上的变化。

（四）<aside> 

        <aside>标签是语义化标签，是HTML5的新标签，表示一个和其余页面内容毫无关系的部分，被识别为独立于该页面的内容并且被单独拆分出来而不影响整体的部分，其通常表现为侧边栏或者标注框，如文章的侧栏。

(五）<dl><dt><dd> 

        <dl><dt><dd>是HTML的一套组合标签，也被称作自定义列表标签，是与table表格类似的组合标签，经常被使用的标题问题+列表型标签。

        经常与 <dt>和 <dd>一起使用，必须有开始标签和结束标签；<dt>标签定义一个描述列表的名字，只能够作为<dl>标签的一个子元素出现，常常在后面添加一个<dd>标签；<dd>标签是对一个描述列表中的名字进行描述，常作为<dl> 标签的一个子元素出现，标签内能放置段落、换行、图片、链接、列表等内容。

（六）<img> 

        <img>标签是用于定义HTML页面中的图像，如果在<a>标签中嵌套<img>标签，并不是在网页中插入图像，而是给图片添加了超链接，将图像链接到网页上。由此可见，<img>标签创建的是被引用图像的占位空间。

（七）<ul> （七）<ul> 

        <ul>标签是用于定义无序列表，以项目符号列表进行呈现，常配合<li>标签一起使用，用来创建无序列表。

（八）<li> 

        <li>标签的作用是定义列表项目，<li>标签可用在有序列表（<ol>）、无序列表（<ul>）和菜单列表（<menu>）中。

帮助中心页面面包屑导

        根据UI设计图以及对帮助中心导航栏的功能分析，可以梳理出开发该导航时，外层要使用div来布局；“首页”和“帮助中心”等因需要跳转所以要使用<a>标签并链接到目标网页；“关于我们”不需要跳转故使用<span>标签来实现。

帮助中心左侧导航栏制作 

根据UI设计图以及对帮助中心导航栏的功能分析，可以梳理出如下开发需求：

（1）使用div作为最外层布局；

（2）使用<aside>标签来表示这是一个侧栏部分；

（3）使用<dl>标签来描述列表进行导航菜单的布局，<dl>标签与<dt>标签、<dd>标签一起使用；

（4）因为导航需要跳转页面，所以使用<a>超链接来链接到目标网页。

 帮助中心板块主体内容 

根据UI设计图以及对帮助中心导航栏的功能分析，可以梳理出如下开发需求：

（1）最外层使用div布局。

（2）由于“关于我们”需要独自占据一行，所以我们要选用块级元素<div>来定义“关于我们”，块级元素默认占一行。

（3）定义一个用来展示图片的容器div，这样嵌套在这个div中的图片元素的宽度就不会超过这个div的宽度。

（4）依次插入描述图片，一般在项目的根目录建立“images”文件夹用来存放图片文件。

帮助中心底部导航

根据UI设计图以及对帮助中心导航栏的功能分析，可以梳理出如下开发需求：

（1）外层使用div来进行外层大布局。

（2）使用<ul>无序列表来进行导航列表的布局，因为需要跳转页面，所以在<li>中嵌套了超链接标签。

（3）将四个<ul>并排布局并调整间距,由于<ul>标签是块级元素，所以要设置ul元素浮动，在css中给ul元素加上“float:left;”即可。

HTML标签的属性

        HTML标签的属性是各个元素提供的附加信息，属性在HTML标签的开始标签中进行规定，并且总是以键值对的形式出现，比如name=“value”。

        属性和属性值对大小写不敏感，万维网联盟在HTML4推荐标准中推荐小写的属性/属性值。属性值应该终被包括在引号内，双引号是最常用的，不过使用单引号也没有问题。

HTML字符实体 

        在HTML中某些字符是预留的，开发人员在HTML中不能使用大于号“>”和小于号“<”，因为浏览器会误认为它们是标签，所以开发人员必须在HTML中使用字符实体。