换行和横线

：换行

一行文字一行文字一行文字一行文字</div><br>

：横线

一行文字一行文字一行文字一行文字一行文字一行文字一行文字一行文字</div> <hr>

效果：

列表标签：在开发中，列表几乎无处不在，打开任何网页都能见到列表的身影，html中分为有序列表和无序列表2种标签，其中无序列表最为常用

：无序列表：无序列表就是列表结构中的列表项没有先后顺序的列表形式。大部分网页应用中的列表均采用无序列表

无序列表无序列表无序列表</li> </ul>

效果：

- <ol>：有序列表：有序列表就是列表结构中的列表项有先后顺序的列表形式，从上到下可以有各种不同的序列编号

有序列表有序列表有序列表</li> </ol>

效果：

HTML5新增常用标签(以后详细讲解)

HTML5新增了27个标签元素,废弃了16个标签元素,主要包括：结构性标签、级块性标签、行内语义性标签、交互性标签

结构性标签：负责web上下文件结构的定义

块级性标签：完成web页面区域的划分，确保内容有效分隔

行内语义性标签：完成web页面具体内容的引用和表述，丰富展示的内容

交互性标签：功能性内容的表达，有一定的内容和数据管理，是各种事件的基础

综合使用实例

上面的标签和概念都是必须熟悉且经常用到的，这里就将使用上面的东西做个实例来帮助大家理解，但并不会使用到全部的标签，因为有的标签涉及到后面的知识，随着学习深入，慢慢为大家展示它们的使用场景和方式

这边我随便挑选自己的一篇博文作为本章的示例 —— iOS指南针根据博文样式，我将博文分成头部、章节、尾部3部分来处理

头部

- 章节

- 尾部

1.首先我们设置网页标题和编码格式

iOS指南针 - 博客频道 - CSDN</title> </head>

2.接下来就是网页内容了

iOS指南针前言：有朋友发现一个尴尬的问题（图片的东西2个方向是不对的），原谅我的大意，赶时间就直接百度了张图片，大家注意下就好了哈！sorry~ 先来看看效果项目主要部分就是接收到设备朝向后计算出旋转的角度，然后旋转一下我们指南针图片就可以了</p> // 接收到设备朝向<br> - (void)locationManager:(CLLocationManager *)manager didUpdateHeading:(CLHeading *)newHeading<br> {<br> // 判断朝向是否有效<br> if (newHeading.headingAccuracy < 0) {<br> return;<br> }<br><br> // 获取设备朝向<br> CLLocationDirection angle = newHeading.magneticHeading;<br><br> // 将角度转成弧度（角度 / 180.0 * M_PI）<br> CGFloat hudu = angle / 180.0 * M_PI;<br><br> // 因为如果没有动画的话旋转的时候回出现卡顿的现象，为了更流畅，我们给它加个动画<br> [UIView animateWithDuration:0.1 animations:^{<br> // 旋转图片<br> self.comPassImage.transform = CGAffineTransformMakeRotation(-hudu);<br> }];<br><br> }<br> <p>是不是很简单，但是有一点需要注意 —— 调用磁力传感器前我们需要先判断一下设备的磁力计是否可以用，以防止磁力计坏掉而没有运行成功</p> // 判断当前设备磁力计是否正常<br> if (![CLLocationManager headingAvailable]) {<br> return;<br> }<br> <p>考虑到网络速度问题，我将完整的项目放到了国内版的github（码云）上了 —— 网络地址版权声明：本文为博主原创文章，转载请注明出处！

3.完成，是不是很简单，当然，这边的效果和原版会有区别，因为涉及到后面的CSS样式等相关内容，在后面的章节中会慢慢深入

效果：