整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
个人学习总结输出，持续更新。Day day study！Day day up！
这里的元素大多数是普通元素。此处的普通指的是：几乎没有自己特殊的属性，只指定通用属性和各种事件属性。
基本元素
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <h1>标题1</h1> <h2>标题2</h2> <h3>标题3</h3> <h4>标题4</h4> <h5>标题5</h5> <h6>标题6</h6> <p> <span> 其后无br </span> <span> 其后有br </span> <br> <span> 其后有hr </span> <hr> <span> 其后有div </span> <div id=""> 一般p内不包含div，div内可包含一切，所以以往大量使用，造成了语义化不明确。 </div> </p> </body> </html>
文本格式相关元素
<p> <b>b加粗</b><strong>strong加粗</strong>正常 <small>缩小</small>2<sup>2</sup>a<sub>2</sub> <hr > <bdo dir="ltr">左向右</bdo> <hr > <bdo dir="rtl">左向右</bdo> </p>
旧的语义相关元素
<p>
<abbr title="中华人民共和国">中国</abbr>
<address>西安市雁塔区幸福小区3单元403室</address>
<cite>作品标题</cite>
<blockquote cite="www.baidu.com">表示长文本引用。通常带有`cite`属性指定出处（可以使url）</blockquote>
<q>表示短文本引用。</q>
<code>
let tempDom=document.querrySelect('#id');
dom.hidden=true;
</code>
<dfn>牛顿第三定理：</dfn>
<br>
<del>待删除线文本。通常带有`cite`属性指定原因、通常带有`datetime`属性标注修改时间</del>
<br>
<ins>表示插入的文本。常带有`cite`属性指定原因、通常带有`datetime`属性标注修改时间</ins>
<pre>/\'''"""</pre>
<samp>示范文本。</samp>
<kbd>ctrl</kbd>
<var>i</var>
</p>
H5新增语义元素
这是一个<mark>重点</mark> <time pubdate="true" datetime="2019-10-14 22:05">2019-10-14 22:05</time> <details> <summary>摘要</summary> 这是详情、、、、 </details> <ruby> <rb>饕</rb> <rp>(</rp> <rt>tao</rt> <rp>)</rp> <rb>餮</rb> <rp>(</rp> <rt>tie</rt> <rp>)</rp> </ruby>
H5新增结构元素
没啥好说的，见名知其意，解决以前全用div语义化缺失的问题。
看到这里了，关注吧，由浅入深，持续更新一起学习进步。如果有什么建议和补充，请积极评论。
元素就是标签，布局中常用的有三种标签，块元素、内联元素、内联块元素，了解这三种元素的特性，才能熟练的进行页面布局。
块元素
块元素，也可以称为行元素，布局中常用的标签如：div、p、ul、li、h1~h6、dl、dt、dd等等都是块元素，它在布局中的行为：
支持全部的样式
如果没有设置宽度，默认的宽度为父级宽度100%
盒子占据一行、即使设置了宽度
内联元素
内联元素，也可以称为行内元素，布局中常用的标签如：a、span、em、b、strong、i等等都是内联元素，它们在布局中的行为：
支持部分样式（不支持宽、高、margin上下、padding上下）
宽高由内容决定
盒子并在一行
代码换行，盒子之间会产生间距
子元素是内联元素，父元素可以用text-align属性设置子元素水平对齐方式
解决内联元素间隙的方法
1、去掉内联元素之间的换行
2、将内联元素的父级设置font-size为0，内联元素自身再设置font-size
内联块元素
内联块元素，也叫行内块元素，是新增的元素类型，现有元素没有归于此类别的，img和input元素的行为类似这种元素，但是也归类于内联元素，我们可以用display属性将块元素或者内联元素转化成这种元素。它们在布局中表现的行为：
支持全部样式
如果没有设置宽高，宽高由内容决定
盒子并在一行
代码换行，盒子会产生间距
子元素是内联块元素，父元素可以用text-align属性设置子元素水平对齐方式。
这三种元素，可以通过display属性来相互转化，不过实际开发中，块元素用得比较多，所以我们经常把内联元素转化为块元素，少量转化为内联块，而要使用内联元素时，直接使用内联元素，而不用块元素转化了。
display属性
display属性是用来设置元素的类型及隐藏的，常用的属性有：
1、none 元素隐藏且不占位置
2、block 元素以块元素显示
3、inline 元素以内联元素显示
4、inline-block 元素以内联块元素显示
课堂练习
请制作图中所示的菜单：
例
文档中的一个区域将显示为蓝色：
<divstyle="color:#0000FF"><h3>这是一个在 div 元素中的标题。</h3><p>这是一个在 div 元素中的文本。</p></div>
浏览器支持
所有主流浏览器都支持 <div> 标签。
标签定义及使用说明
<div> 标签定义 HTML 文档中的一个分隔区块或者一个区域部分。
<div>标签常用于组合块级元素，以便通过 CSS 来对这些元素进行格式化。
提示和注释
提示：<div> 元素经常与 CSS 一起使用，用来布局网页。
注释：默认情况下，浏览器通常会在 <div> 元素前后放置一个换行符。然而，您可以通过使用 CSS 改变这种情况。
HTML 4.01 与 HTML5之间的差异
HTML5 中不支持 align 属性。
在 HTML 4.01 中，align 属性 已废弃。
属性
| 属性 | 值 | 描述 |
|---|---|---|
| align | leftrightcenterjustify | HTML5 不支持。HTML 4.01 已废弃。 规定 <div> 元素中的内容的对齐方式。 |
全局属性
<div> 标签支持 HTML 的全局属性。
事件属性
<div> 标签支持 HTML 的事件属性。
如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039，我们一起飞！
*请认真填写需求信息，我们会在24小时内与您取得联系。
