书接上文，接着开始
body标签
由<body>包裹的标签有很多种，可以大致分为内容标签和章节标签两大类。
章节标签
章节标签主要用来表示HTML的层级，很多人工作很多年了，还只会用一个<div>。其实现在的h5已经有很多新的标签了，以下是我整理的常用的标签：
- 标题标签 h1~h6
用来做很多段落的标题，比如本文的标题(body标签)就是一个标题标签 - 章节 section
用来包裹一段没有具体语义的内容 - 文章 article
用来包裹一段有独立语义的内容，跟section区别使用 - 段落 p
表明文本的一个段落，比如某篇文章的一段 - 头部 header
用于展示介绍性内容，通常包含一组介绍性的或是辅助导航的实用元素 - 脚部 footer
最近一个章节内容或者根节点元素的页脚 - 主要内容 main
呈现了文档的<body>或应用的主体部分 - 导航 nav 给当前或其他文档提供一个导航
- 旁支内容 aside
一个和其余页面内容几乎无关的部分，被认为是独立于该内容的一部分并且可以被单独的拆分出来而不会使整体受影响，常见的如侧边栏 - 常用的 div
最常用的标签，只要想不好这一部分叫什么名字，统统都叫div,然后给一个class就好了
以下是模拟的一个html的骨架：
<body>
<header>
<div class="logo"></div>
<nav></nav>
</header>
<main>
<article>
自我介绍用于和别人初次见面，或是对方不认识自己的情况下，向对方说明有关自己的事，例如名字、职业、兴趣等，也会用在面试上，使你被取录。有时我们会透过传递名片来自我介绍，使对方更容易了解你
</article>
<h1>自我介绍</h1>
<p>我叫znz,我喜欢JavaScirpt,Java,Kali</p>
</main>
<footer></footer>
</body>
内容标签
- ol+li 用来表示一个有有序列表（ordered list + list item）
- ul+li 用来表示一个无序列表(unordered list +list item)
- dl+dt+dd (description list+term+data)用来做一个描述列表
- pre 将pre包裹的文本按照原文件的编排格式原封不动的显示出来
- hr 换行并加一个分割线
- br 换行
- em 强调
- strong 加粗字体
- code 表示代码
- q 表示一个行内元素的引用(quote的缩写)
- blockquote 表示一个块级引用
然后我们为之前写的html骨架增加一些内容吧！
<header>
<div class="logo"></div>
<nav>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</nav>
</header>
<main>
<article>
自我介绍用于和别人初次见面，或是对方不认识自己的情况下，向对方说明有关自己的事，例如名字、职业、兴趣等，也会用在面试上，使你被取录。有时我们会透过传递名片来自我介绍，使对方更容易了解你。
</article>
<br>
<h1>自我介绍</h1>
<hr>
<p>我叫<strong>znz</strong>,我喜欢<em>JavaScript</em>,<em>Java</em>,<em>kali</em></p>
<dl>
<dt>名字</dt>
<dd>大毛</dd>
<dt>性别</dt>
<dd>男</dd>
</dl>
<pre>
**** ****
*** ***
** **
*
</pre>
<q>
<code>
console.log("我叫znz")
</code>
</q>
</main>
<footer>
<ol>
<li>1</li>
<li>2</li>
<li>3</li>
</ol>
</footer>
全局属性
之前的各种标签中，都有各自的属性，在众多的属性，有一些是所有html标签共有的。如下：
- class 每个元素都有一个类属性，可以通过绑定它所在的类添加css样式
- contenteditable 决定这一部分文本是否可以被用户编辑
- hidden 可以将元素在html中隐藏起来，从而让用户看不见该元素
- id
唯一标识html元素的属性，但是这个属性不推荐用来添加样式或者和js用。
比如下图的例子
此时用id通过js来指定css样式，但是很第一个成功了，第二个却失败了，原因就在于blur是windows自带的属性，所以不推荐用id来直接使用js
- style
权值最大的css样式，用于直接在windows里面指定css - tabindex 在html中，可以通过按tab键直接依次浏览网页，而这个属性就使得开发者能自己主动设置tab的先后顺序
- title
将该元素相关的一些信息作为提示展现给用户
默认样式
在浏览器中，每个元素都有他们对应的各种默认样式，而且因为浏览器的不同而各自不同，这就导致很多样式并不是我们想要的却不得已得到了一个样式。 所以实际开发中，我们会常常不得已去弄一个reset.css，将默认样式重置，以下是从腾讯得到的默认css样式：
html {
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
font-size: 100px;
}
body {
color: #fff;
line-height: 1.5;
font-size: 14px;
font-family:'PingFangSC-Regular', 'helvetica neue', tahoma, 'PingFang SC', 'microsoft yahei', arial, 'hiragino sans gb', sans-serif;
-webkit-font-smoothing: antialiased;
}
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td {
margin: 0;
padding: 0;
}
button,
input,
optgroup,
select,
textarea {
color: inherit;
font: inherit;
margin: 0;
padding: 0;
border: 0;
background: 0;
}
button:focus,
input:focus,
optgroup:focus,
select:focus,
textarea:focus {
text-decoration: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
outline: none;
}
textarea {
resize: none;
}
img {
border: 0;
vertical-align: bottom;
}
a {
text-decoration: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
outline: none;
}
a,a:hover,a:active,a:visited,a:link,a:focus{
-webkit-tap-highlight-color:rgba(0,0,0,0);
-webkit-tap-highlight-color: transparent;
outline:none;
background: none;
text-decoration: none;
}
ul,
li {
list-style: none;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: 100%;
font-variant: normal;
}
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
overflow: hidden;
}
这就是本次HTML整理了，下期见！
