天分享的文章和大家讲过了，html就是超文本标记语言，标记其实指的就是html的那些标签，标签才是每一个网页的灵魂，今天就来和大家谈谈html有哪些常用的主要标签及其用途。
我们按字母顺序来写：
1、<!--.......-->,这个是注释标签，中间的‘.......’省略号代表被注释的内容。
2、<!doctype>,这个是定义文档的类型。
3、<a>,这个叫a标签，定义超文本链接，什么叫超文本链接呢，还有什么是注释，何为定义文本类型，这些以后的文章里都会专门给大家谈一谈。
4、<body>,这个是定义文档的主体。
5、<br/>,这个是起换行作用的标签。
6、<button>,这个是定义一个点击按钮。
7、<div>,定义文档中的节。
8、<form>,定义html文档的表单。
9、<h1><h2><h3><h4><h5><h6>,这六个是定义html的标题，其中h1的标题显示出来的字体最大，以其类推，h6最小。
10、<head>,定义关于文档的信息。
11、<html>,定义html文档。
12、<iframe>,定义内联框架。
13、<img>,定义图像。
14、<input>,定义输入控件。
15，<label>,定义input元素的标注。
16、<li>,定义列表的项目。
17、<link>,定义文档与外部资源的关系。
18、<meta>,定义关于文档的元信息。
19、<ol>,定义有序列表。
20、<option>,定义选择列表中的选项。
21、<p>,定义段落。
22、<pre>,定义预格式文本。
23、<script>,定义客户端脚本。
24、<select>,定义选择列表（下拉列表）。
25、<span>,定义文档中的节，注意和<div>标签的区别。
26、<style>,定义文档的样式信息。
27、<table>,定义表格。
29、<td>,定义表格中的单元。
30、<textarea>,定义一个多行的文本输入控件。
31、<title>,定义文档的标题。
32、<tr>,定义表格中的列。
33、<ul>，定义无序列表。
上面这些就是比较常见的html标签和它们的用途了。
今天就整理到这里了，明天再和大家谈一下标签的一些其他相关信息。
三部分 附录（因为暂时不支持插入超链接所以部分内容无法显示）
附录一 DIV命名规范
- 企业DIV使用频率高的命名方法
- 网页内容类
- 标题: title
- 摘要: summary
- 箭头： arrow
- 商标： label
- 网站标志： logo
- 转角/圆角：corner
- 横幅广告： banner
- 子菜单： subMenu
- 搜索： search
- 搜索框： searchBox
- 登录： login
- 登录条：loginbar
- 工具条： toolbar
- 下拉： drop
- 标签页： tab
- 当前的： current
- 列表： list
- 滚动： scroll
- 服务： service
- 提示信息： msg
- 热点：hot
- 新闻： news
- 小技巧： tips
- 下载： download
- 栏目标题： title
- 热点： hot
- 加入：joinus
- 注册： regsiter
- 指南： guide
- 友情链接： friendlink
- 状态： status
- 版权： copyright
- 按钮： btn
- 合作伙伴： partner
- 投票： vote
- 左右中：left right center
- 注释的写法: /* Footer */ 内容区/* End Footer */
- id的命名:
- 页面结构
- 容器: container
- 页头：header
- 内容：content/container
- 页面主体：main
- 页尾：footer
- 导航：nav
- 侧栏：sidebar
- 栏目：column
- 页面外围控制整体布局宽度：wrapper
- 左右中：left right center
- 导航
- 导航：nav
- 主导航：mainbav
- 子导航：subnav
- 顶导航：topnav
- 边导航：sidebar
- 左导航：leftsidebar
- 右导航：rightsidebar
- 菜单：menu
- 子菜单：submenu
- 标题: title
- 摘要: summary
- 功能
- 标志：logo
- 广告：banner
- 登陆：login
- 登录条：loginbar
- 注册：regsiter
- 搜索：search
- 功能区：shop
- 标题：title
- 加入：joinus
- 状态：status
- 按钮：btn
- 滚动：scroll
- 标签页：tab
- 文章列表：list
- 提示信息：msg
- 当前的:current
- 小技巧：tips
- 图标: icon
- 注释：note
- 指南：guild
- 服务：service
- 热点：hot
- 新闻：news
- 下载：download
- 投票：vote
- 合作伙伴：partner
- 友情链接：link
- 版权：copyright
- class的命名:
- 颜色:使用颜色的名称或者16进制代码,如
- .red { color: red; }
- .f60 { color: #f60; }
- .ff8600 { color: #ff8600; }
- 字体大小,直接使用”font+字体大小”作为名称,如
- .font12px { font-size: 12px; }
- .font9px {font-size: 9pt; }
- 对齐样式,使用对齐目标的英文名称,如
- .left { float:left; }
- .bottom { float:bottom; }
- 标题栏样式,使用”类别+功能”的方式命名,如
- .barnews { }
- .barproduct { }
- 注意事项::
- 一律小写;
- 尽量用英文;
- 不加中杠和下划线;
- 尽量不缩写，除非一看就明白的单词.
- 推荐的 CSS 书写顺序：
- 显示属性
- display
- list-style
- position
- float
- clear
- 自身属性
- width
- height
- margin
- padding
- border
- background
- 文本属性
- color
- font
- text-decoration
- text-align
- vertical-align
- white-space
- other text
- content
附录二 CSS精灵
- CSS精灵原理以及应用
- CSS雪碧的基本原理是把你的网站上用到的一些图片整合到一张单独的图片中，从而减少你的网站的HTTP请求数量。
- 该图片使用CSS background和background-position属性渲染，这也就意味着你的标签变得更加复杂了，图片是在CSS中定义，而非<img>标签。
- 一个简单的例子：
- 一张图片作出一个按钮的三个状态
- 一个链接用CSS做成按钮的样式，我们可以使用同一张图片，完成按钮的三个状态，a:link，a:hover，a:active <a class="button" href="#">链接</a>
- 加入右侧的图片为：200px 65px的三个按钮图拼合而成的图片button.png，从上到下一次为按钮的普通、鼠标滑过、鼠标点击的状态。则可以使用CSS进行定义。
a {
display:block;
width:200px;
height:65px;
line-height:65px; /*定义状态*/
text-indent:-2015px; /*隐藏文字*/
background-image:url(button.png); /*定义背景图片*/
background-position:0 0;
/*定义链接的普通状态，此时图像显示的是顶上的部分*/
}
a:hover {
background-position:0 -66px;
/*定义链接的滑过状态，此时显示的为中间部分，向下取负值*/
}
a:active {
background-position:0 -132px;
/*定 义链接的普通状态，此时显示的是底部的部分，向下取负值*/
}
- 更多的CSS雪碧，图片更复杂，背景定位更精确。可能会用到大量的数值
- 如：background:url(nav.png) -180px 24pxno-repeat; 来达到更精确的定位
- 优点：
- 减少加载网页图片时对服务器的请求次数
- 可以合并多数背景图片和小图标，方便在任何位置使用，这样不同位置的请求只需要调用一个图片，从而减少对服务器的请求次数，降低服务器压力，同时提高了页面的加载速度，节约服务器的流量。
- 提高页面的加载速度
- sprite技术的其中一个好处是图片的加载时间(在有许多 sprite 时，单张图片的加载时间)。由所需图片拼成的一张 GIF图片的尺寸会明显小于所有图片拼合前的大小。单张的 GIF只有相关的一个色表，而单独分割的每一张 GIF 都有自己的一个色表，这就增加了总体的大小。因此，单独的一张 JPEG 或者 PNGsprite 在大小上非常可能比把一张图分成多张得来的图片总尺寸小。
- 减少鼠标滑过的一些bug
- IE6不会主动预加载鼠标滑过即a:hover中的背景图片，所以，如果使用多张图片，鼠标滑过会出现闪白的现象。使用CSS雪碧，由于一张图片即可，所以不会出现这种现象。
- 不足：
- CSS雪碧的最大问题是内存使用
- 影响浏览器的缩放功能
- 拼图维护比较麻烦
- 使CSS的编写变得困难
- CSS 雪碧调用的图片不能被打印
- 错误得使用 Sprites 影响可访问性
附录三 一些tips解决方案
页面优化实践
- 从下面的几个方面可以进行页面的优化：
- 减少请求数
- 图片合并
- CSS文件合并
- 减少内联样式
- 避免在 CSS中使用 import
- 减少文件大小
- 选择适合的图片格式
- 图片压缩
- CSS 值缩写（Shorthand Property)
- 文件压缩
- 页面性能
- 调整文件加载顺序
- 减少标签数量
- 调整选择器长度
- 尽量使用CSS 制作显示表现
- 增强代码可读性与可维护性
- 规范化
- 语义化
- 模块化
写DIV+CSS 的一些常识
- 不要使用过小的图片做背景平铺
- 这就是为何很多人都不用 1px 的原因，这才知晓。宽高 1px 的图片平铺出一个宽高 200px 的区域，需要 200200=40, 000 次，占用资源
- 无边框
- 推荐的写法是 border:none;，哈哈，我一直在用这个。 border:0; 只是定义边框宽度为零，但边框样式、颜色还是会被浏览器解析，占用资源
- 慎用 通配符
- 所谓通配符，就是将CSS 中的所有标签均初始化，不管用的不用的，过时的先进的，一视同仁，这样，大大的占用资源。要有选择的初始化标签。
- CSS的十六进制颜色代码缩写
- 习惯了缩写及小写，这才知道，原来不是推荐的写法，为的是减少解析所占用的资源。但同时会增加文件体积。孰优孰劣，有待仔细考证。
- 样式放头上，脚本放脚下。不内嵌，只外链
- 坚决不用 CSS表达式
- 使用 引用样式表，而不是通过@import 导入。
- 一般来说，PNG比 GIF 要小，小得多。再者，GIF 中有多少颜色是被浪费的，很值得优化。
- 千万不要在 HTML中缩放图片，一者不好看，二者占资源。
- 正文字体最好用偶数
- 12px、14px、16px，效果非常好。特例，15px。
- block、ul、ol等上下留出至少一倍行距，左侧至少两倍行距，右侧随意。
- 段落之间，至少要有一倍行距
- 强行指定某些元素的 line-height，正文 1.6倍于文字大小，标题1.3倍。
- 中文标点用全角
- 英文夹杂在中文中，左右空格，半角。
- 中文字体的粗体和斜体，远离较好
常用代码片段
- 雅虎工程师提供的CSS初始化示例代码【仅供参考】
- 可以在html头文件中直接引用，从而避免浏览器的不兼容带来的错误。
body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
code,
form,
fieldset,
legend,
input,
button,
textarea,
p,
blockquote,
th,
td {
margin:0; padding:0;
}
body {
background:#fff;
color:#555;
font-size:14px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
td,
th,
caption {
font-size:14px;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight:normal;
font-size:100%;
}
address,
caption,
cite,
code,
dfn,
em,
strong,
th,
var {
font-style:normal;
font-weight:normal;
}
a {
color:#555;
text-decoration:none;
}
a:hover {
text-decoration:underline;
}
img {
border:none;
}
ol,ul,li {
list-style:none;
}
input,
textarea,
select,
button {
font:14px Verdana,Helvetica,Arial,sans-serif;
}
table {
border-collapse:collapse;
}
html {
overflow-y: scroll;
}
.clearfix:after {
content: ".";
display: block;
height:0;
clear:both;
visibility: hidden;
}
.clearfix {
*zoom:1;
}
<meta name=”viewport” content=”width=320,target-densitydpi=dpi_value,initial-scale=1, user-scalable=no”/>
table-layout: fixed; word-break: break-all;;border-collapse: collapse
<div id=”abc” style=”display:table;text-align:center;width:100%;height:100%;”>
<span style=”background:#f00; display:table-cell; vertical-align:middle;”>
<input type=”button” value=”item1″ />
</span>
</div>
filter:alpha(opacity=50); /*1-100*/
-moz-opacity:0.5; /*0-1.0*/
-khtml-opacity:0.5; /*0-1.0*/
opacity:0.5; /*0-1.0*/
white-space:nowrap;
text-overflow:ellipsis;
overflow:hidden;
- 清除浮动的几种方法
- 方法一：投机取巧法 – 不推荐
- 直接一个放到当作最后一个子标签放到父标签那儿，此方法屡试不爽，兼容性强
- 方法二：overflow + zoom方法 –不推荐
- .fix{overflow:hidden; zoom:1;}
- 此方法优点在于代码简洁，涵盖所有浏览器
- 方法三：after + zoom方法 -推荐–此方法可以说是综合起来最好的方法了
- clearfix只应用在包含浮动子元素的父级元素上
.fix{zoom:1;}
.fix:after{
display:block;
content:'clear';
clear:both;
line-height:0;
visibility:hidden;
}
一些总结
- 自动继承属性：
- color
- font
- text-align
- list-style
- …
- 非继承属性：
- background
- border
- position
- …
- 具有破坏性的元素：
- float
- display:none;
- position:absoblute/fixed/sticky;
- 具有包裹性的元素：
- display:inline-block/table-cell
- position:absolute/fixed/sticky
- overflow:hidden/scroll
- 消除图片底部间隙的方法
- 图片块状化-无基线对齐
- img{display:block;}
- 图片底线对齐
- img{vertical-align:bottom;}
- 行高足够小 - 基线位置上移
- .box{line-height:0;}
一些概念
- BFC
- BFC全称”Block Formatting Context” 中文为“块级格式化上下文”
- 记住这么一句话：BFC元素特性表现原则就是，内部子元素再怎么翻江倒海，翻云覆雨都不会影响外部的元素
- BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此
- 优雅降级(graceful degradation)
- 一开始就构建完整的功能，然后再针对低版本浏览器进行兼容
- 渐进增强 progressive enhancement：
- 是在浏览器开启JavaScript功能后，如果浏览器版本不支持某些 JavaScript 能力，我们解决这种问题的方式
- 平稳退化
- 是在浏览器没有JavaScript功能，或没有开启JavaScript功能情况下，我们解决这种问题的方式；
学习从来不是一个人的事情，要有个相互监督的伙伴，想要学习或交流前端问题的小伙伴可以私信“学习”小明加群获取2019web前端最新入门资料，一起学习，一起成长！
上大学时，c语言似乎很流行，很多专业的人都开这个课，所以从那时候开始接触计算机语言之类的东西。可惜的是在学校时根本没有时间去深究它，一直是自己的一个遗憾。
一直到2011年的时候，才又拿起书来自学，当时一个大学最要好的同学刚好在自学网站开发，我们在一起探讨的时候，向我推荐了前端开发，所以从那时候开始学习html,css,div,javascript,jquery,mysql,php,http...再到后来的bootstrap,vue,angular...从现在开始，我准备从最简单的开始一步步地给大家分享一下，今天就先简单的介绍一下html相关知识。
html英语全称是HyperText Markup Language,中文意思是超文本标记语言。从字面上的意思我们也能理解，这是一种采用标记来进行表达的语言，并且不是普通随便的标记，而是定义了一系列特定的有规范的字母，数字，符号做为标记，所以说把它称为超文本。然后通过html我们可以做出一个个所需要的网页页面来。
今天就简单说到这里，明天再和大家分享一下具体的标记及相关知识。
