React NativeHTML5学习Html5

HTML5快速入门（一）—— HTML简介

2016-06-08  本文已影响3178人  珍此良辰

前言：

1.HTML5的发展非常迅速，可以说已经是前端开发人员的标配，在电商类型的APP中更是运用广泛，这个系列的文章是本人自己整理，尽量将开发中不常用到的剔除，将经常使用的拿出来，使需要的朋友能够真正快速入门，如果有哪些不清楚的地方或者错误，欢迎联系我
2.更新时间没有规律，一般会在3天左右更新一篇（全系列预计会有12篇）因为需要工作，所以只能在闲暇之余整理，如果有喜欢的朋友可以关注我，将会第一时间获得更新信息
3.如果有需要Reactive Native + H5跨平台开发的朋友，可以联系我，在本系列结束之前会根据需求的程度决定是否继续
4.全系列文章最后尽可能地附上综合实例，帮助朋友更好地理解
5.此系列会涉及到HTML、CSS、JavaScript等

Web大概发展史

网页组成

HTML5简介

HTML5开发前准备

HTML简介

HTML常见标签


<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>

效果：

标题标签.png 

<p>段落1</p>
<p>段落2</p>
<p>段落3</p>
<p>段落4</p>
<p>段落5</p>

效果：

段落标签.png 

<input>
<input type="color">
<input type="file">
<input type="radio">
<input type="password">
<input placeholder="占位文字">
<input value="默认内容">
<input type="checkbox">

效果：

表单标签.png 

<!-- 基本格式 -->
![](http:https://img.haomeiwen.com/i1923109/0b3f122765fcbb9b.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

效果：

图像标签基本格式.png 

<!-- 当图片显示不出来的时候,我们一般会显示图片名称，这个时候就需要使用alt属性来实现 -->
    ![blog头像](http:https://img.haomeiwen.com/i1923109/0b3f122765fcbb9b.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

效果：

图片未加载成功显示文字.gif 

<!-- 图像标签的可选属性 -->
    <!-- 图像标签的宽 -->
    ![](http:https://img.haomeiwen.com/i1923109/0b3f122765fcbb9b.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
    <!-- 图像标签的高 -->
    ![](http:https://img.haomeiwen.com/i1923109/0b3f122765fcbb9b.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
    <!-- 使用百分比来设置图像标签的宽度，百分比相对于父标签，比如这里的父标签是body，这也是屏幕适配的一种方式 -->
    ![](http:https://img.haomeiwen.com/i1923109/0b3f122765fcbb9b.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

效果：

设置图像标签宽高.gif

效果：

超链接target属性.gif

效果：

超链接嵌套.gif div.png 
- <span>：属于行内元素：不需另起一行
    <br><br>

```html
    <span>span容器span容器span容器span容器</span>
    <span>span容器span容器span容器</span>
    <span>span容器span容器span容器span容器</span>
    <span>span容器span容器span容器</span>

    ```
    效果：
span.png

效果：

横线和换行效果.png 
    
    <!-- 无序列表 -->
    <ul>
        <li>无序列表</li>
        <li>无序列表</li>
        <li>无序列表</li>
        <li>无序列表</li>
        <li>无序列表</li>
    </ul>

效果：

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

    
<!-- 有序列表    type表示序号类型    reversed表示降序-->
<ol type="A" reversed="reversed">   
<li>有序列表</li>    
<li>有序列表</li>  
<li>有序列表</li>  
<li>有序列表</li>  
<li>有序列表</li>
</ol>

效果：

有序列表.png

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

综合使用实例

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


<head>
    <!-- 编码格式 -->
    <meta charset="UTF-8">
    <!-- 网页标题 -->
    <title>iOS指南针 - 博客频道 - CSDN</title>
</head>
标题.png

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


<body>
    <!-- 结构性标签 -->
    <!-- 文章主体内容 -->
    <article>
        <!-- hearder头部内容-->
        <header>
            <!-- 标题 -->
            <h3>iOS指南针</h3>
            <p>分类:iOS开发 随手笔记</p>
            <hr>
        </header>
        <!-- 将内容添加到一个div内,以便统一管理(涉及到后面的CSS样式,这边先知道这样写就好,后面章节会详细讲解) -->
        <div>
            <!-- 章节 -->
            <section>
                <!-- 段落 -->
                <p>前言：</p>
                <p>这个小项目使用到了CoreLocation框架里面的设备朝向功能，对CoreLocation感兴趣的可以翻一下之前的文章</p>
                <p>有朋友发现一个尴尬的问题（图片的东西2个方向是不对的），原谅我的大意，赶时间就直接百度了张图片，大家注意下就好了哈！sorry~
                </p>
                <h2>指南针实现</h2>
                <p>先来看看效果</p>
                <!-- 插入图片 -->
                <img src="http:https://img.haomeiwen.com/i1923109/9cf1d42c0f0808b7.gif?imageMogr2/auto-orient/strip" alt="指南针效果图.gif">
                <p>项目主要部分就是接收到设备朝向后计算出旋转的角度，然后旋转一下我们指南针图片就可以了</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（码云）上了 ——
                    <!-- 超链接 -->
                    <a target="_blank" href="http://git.oschina.net/miaomiaoshen/Compass">网络地址</a>
                </p>
                <p>版权声明：本文为博主原创文章，转载请注明出处！</p>
                <p>顶1 踩0</p>
            </section>
        </div>
        <!-- 尾部内容 -->
        <footer>
            <!-- 这边直接用截图代替尾部的分享模块 -->
            [站外图片上传中……(7)]
        </footer>
    </article>
</body>

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

实例效果.gif
上一篇下一篇

猜你喜欢

热点阅读