html标签属性大全 简单网页设计模板html

html标签属性大全

小编为大家说一说html标签属性大全和简单网页设计模板html的IT小经验，接下来IT袋小编就来介绍。

1.标签语义化

提到标签，很多刚入门前端开发的人，肯定都会很纳闷，这么多HTML标签我如何记住呢？我又应该根据什么依据去正确使用它呢？其实这样的问题，我刚开始和大家一样苦闷，但是在我学习Web页面开发的过程中，然后不断的积累，不断的总结，发现要想记住HTML标签以及怎样更好的去使用这些标签，需要做到以下三点：

第一点：不要死记硬背，没意义，只需要记住常用的哪几个足矣。

第二点：根据内容选择使用HTML标签，什么意思呢？见下文分解。

第三点：遵循W3C的规范。

首先，第一点咱们就不用说，不让死记硬背，就是要多写页面，多敲代码，久而久之孰能生巧，巧能生花，慢慢的你就能记住这些标签了，而且在开发页面的过程中，你们会发现，咱们最常用的也就是那么几个而已。

其次，第二点根据内容选择使用HTML标签，这一点非常关键，因为你掌握了这一点，你能很好地去使用HTML标签，并且能让页面变得很优质，这也会提高你网页被搜索引擎收录。

最后，也就是第三点，这一点自然不用怀疑，如果要想让页面更好的在不同的浏览器中呈现出一致的效果，那么必须遵循W3C的规范。

说了这么多，只是一些学习需要注意的问题，下面才是真正解开怎样去使用和记住标签这个谜团的方法。

我们在使用标签的过程中，大家会发现类似的标签，比如标题标签（h1-h6）、p（段落标签）、a（超链接标签）以及图片标签（img）等，通过这些标签的名称，咱们是不是不难理解吧，很直观的就知道这些标签该怎么，用于何处。而这些名称的含义就是我们所说的标签语义化。随着智能手机的出来，移动Web都是通过H5去开发页面，而H5中的HTML标签就比之前版本的HTML标签更加具有语义化。

那么什么是标签语义化呢？所谓的标签语义化，指的就是标签所代表的含义。咱们可以通过标签的含义，正确地去使用它。

标签语义化的作用：

通过使用语义化标签，更能精准地将其把内容呈现出来。通过使用语义化标签，让页面结构更加的清晰，方便代码的阅读和维护。能让浏览器或网络爬虫更好地解析，从而更好地分析和抓取网页中的内容。使用语义化标签还能让搜索引擎得到更好的优化。

如下图所示，通过使用语义化标签和没使用任何标签，就能直观感受到语义化标签的好处。

普通的文本和使用语义化标签后的效果对比图

那么如何去判断一个页面中，语义化是否良好呢？很简单，直接扒掉CSS这层漂亮的衣服，当我们把CSS去掉后，如果页面中的结构依然组织有序，并且有良好的可读性，那么它就是非常良好的。

如何去使用这些标签呢？首先根据内容确定语义化的标签，其次再根据呈现需求，使用CSS样式。因此HTML标签并非通过死记硬背，而是通过在使用的过程中，利用HTML标签的语义化去记忆。如下图所示，通过使用语义化标签，瞬间就能把普通的文本，以更清晰的结构呈现出来。

使用语义化的普通文本，变得更为结构清晰

2.常用标签分类汇总

通常我们常见的标签有标题标签、段落标签、水平线标签、换行标签以及div和span标签，这些标签又被统称为排版标签。

在开发中，排版标签主要是和CSS搭配使用，主要是用于显示网页的整体结构，也是网页布局中常用的标签。下面我一一了解一下。

排版标签：

【1】标题标签（h1-h6）

缩写来源：标题标签的英文单词是head，因此它使用它的缩写h来表示。语义：标题标签主要是用于突显标题内容，它是h1-h6（分为1级标题、2级标题、3级标题……6级标题），级别依次递减。级别越小，标题就会越小。语法格式如下：

标题标签的使用

呈现的效果如下：