html5火速入门(一)—— html简介

前言:

1.HTML5之开拓进取好便捷,可以说曾是前端开发人员的标配,在电商类型的APP中越发以广泛,这个系列的章是自个儿自己收拾,尽量以开被未常用到的删除,将经常用的将出来,使需要的意中人会真的快入门,如果来哪些不掌握的地方还是不当,欢迎联系我
2.创新时间不曾规律,一般会以3上左右翻新一首(全系列预计会出12篇)因为需要工作,所以只好当空闲的衍整理,如果发爱的心上人可以关心自我,将见面第一时间获得创新信息
3.万一起亟待Reactive Native +
H5越平台开发的冤家,可以联系自己,在比如系列结束前会因要求的品位决定是否持续
4.咸系列文章最后尽可能地附着综合实例,帮助恋人再次好地了解
5.这系列会提到到HTML、CSS、JavaScript等

Web大概发展史

  • Web1.0
    • 主流技术 —— HTML + CSS
  • Web2.0
    • 主流技术 —— Ajax(JavaScript/DOM/异步数据要)
  • Web3.0
    • 主流技术 —— HTML5 + CSS3
      • HTML5显点:Canvas、Web存储、Geolocation、Workers多线程处理、HTML5音视频
      • CSS3形点:2D变形、设计动画等等新特点 (具体可参考
        http://html5test.com/)

网页组成

  • 网页一般由下3组成部分组成
    • HTML —— 网页具体内容和布局
    • CSS —— 网页的体(网页美化的要害模块)
    • JavaScript —— 网页的互相作用,比如对准用户鼠标事件做出响应

HTML5简介

  • 为此了8年日,HTML5于2014年才正式制定完毕并公布,更偏于于拓展活动市场,当然在别的平台也见不凡
  • HTML5的优势
    • 最为要的还是过平台,利用HTML5辑的使用可以说如果发生浏览器的平台都得以运作并下
    • 付出进度快,API强大,某些功能可以随心所欲就
    • 顺理成章程度相对于原生可以高达平等
  • HTML5的劣势
    • HTML5吗起非可知形成的成效,比如常用之拍照、访问相册等得桥接才能够落实的效益(桥接越多,性能越差)
    • 归根结底不是原生,所以自然在性能于原先生差的问题
  • HTML5支付要发生2种植形式
    • 投机编辑大量代码(慢)
    • 采用线程的HTML5框架(快)
      • sencha-touch
      • phoneGap
      • jQuery mobile
      • Bootstrap (个人于欣赏)
  • 相似在动端主要发生4种样式支付
    • 原生:与网无缝兼容
    • 纯HTML5:成本低,覆盖广,效率高
    • 原生+ HTML5:最佳方案

HTML5支付前准备

  • 开发工具
    • iOS
      • XCode
    • Android
      • eclipse、MyEclipse、android studio
    • HTML5
      • eclipse、MyEclipse(后端的伴儿最爱)
      • Dreamwaver(网页三剑客有,平面设计师和前段最爱)
      • WebStrom(个人太欣赏,默认集成各式各样插件,而且配色各种666,特别长)

HTML简介

  • HTML(Hypertext Markup
    Language)超文本标记语言,本质实际上就是是文本,由浏览器负责将它解析成现实的网页内容。
  • HTML语法松散,目前时版本5.0,也如HTML5
  • HTML和XML相似,也是出于各种标签(元素、标记、节点)组成
  • HTML5剧增了27单标签元素,废弃16只标签元素(涵盖了结构性标签、行内语义性标签、交互性标签、级块性标签)

HTML常见标签

– :标题标签

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

效果:

图片 1

  • :段落标签

    段落1

    段落2

    段落3

    段落4

    段落5

效果:

图片 2

  • :表单标签







效果:

图片 3

  • 图像标签
    • 图像标签需要我们吃那个src属性传入路径
      • 相对路径:资源以时档内 ./ .// 形式
      • 绝对路径:资源不在手上项目内 ftp:// file://
        https://
        http:// 形式
  • 图像标签简单用


    图片 4

效果:

图片 5

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

效果:

图片 6

  • 图像标签的可选属性

    • 而仅被图片设置高或宽,那么图片会冲赛要宽自动调整等比例尺寸
    • 一经应用比例设置宽高,指的是对立于大标签的比重,这边图片的父标签是body

    <!-- 图像标签的宽 -->
    ![](//upload-images.jianshu.io/upload_images/1923109-0b3f122765fcbb9b.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
    <!-- 图像标签的高 -->
    ![](//upload-images.jianshu.io/upload_images/1923109-0b3f122765fcbb9b.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
    <!-- 使用百分比来设置图像标签的宽度,百分比相对于父标签,比如这里的父标签是body,这也是屏幕适配的一种方式 -->
    ![](//upload-images.jianshu.io/upload_images/1923109-0b3f122765fcbb9b.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
    

效果:

图片 7

  • 超链接标签
    • href属性:告诉浏览器我们设跳转的地点
      • 倘若不思量越反得装也’#’表示目前窗口
    • target属性:告诉浏览器因为怎样的款型跳转
      • _blank:在新窗口中打开
      • _parent:在父亲窗口打开
      • _self:在脚下窗口打开(一般倒端最常用之,默认)
      • _top:回到当前窗口顶部
  • 超链接标签

    • 超链接简单利用
\`\`\`html

    <!-- 如果不想跳转可以填'#'表示当前窗口 -->
    <a href="http://www.baidu.com">超链接</a>

    ```
    效果:

    ![超链接基本使用.gif](//upload-images.jianshu.io/upload_images/1923109-1123263d583a1ae4.gif?imageMogr2/auto-orient/strip)

    ```html

    <!-- 如果想在新窗口打开,可以使用target属性
    (_blank:在新窗口中打开 _parent:在父窗口打开 _self:在当前页面打 开 _top:回到当前窗口顶部)
    -->
    <a href="http://blog.csdn.net/yeshaojian" target="_blank">在新窗口中打开</a>
    <a href="http://blog.csdn.net/yeshaojian" target="_parent">在父窗口打开</a>
    <a href="http://blog.csdn.net/yeshaojian" target="_self">在当前页面打开</a>
    <a href="http://blog.csdn.net/yeshaojian" target="_top">回到当前窗口顶部</a>

\`\`\`  
效果:

图片 8

  • 超链接嵌套使用
    <!-- 给图片一个超链接属性,让用户点击能够在新窗口中打开新页面 -->
        <a target="_blank" href="http://www.baidu.com">
        [站外图片上传中……(6)]
        </a>

效果:

图片 9

  • 容器标签:用来盛其它标签,相当给移动支付被极纯洁的UIView,里面写什么,就见面来得什么,不见面出渲染等职能
    —— 所勾画就所得,正因为此特点,开发中经常用它来自定义

    • :属于块元素:是坐其它打一行开始渲染的元素
    `html      <div>div容器div容器div容器div容器</div>      <div>div容器div容器div容器</div>       <div>div容器div容器div容器div容器</div>`  
    效果:
    ![](https://upload-images.jianshu.io/upload_images/1923109-0f5fd4b24629e4b9.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

        - :属于行内元素:不需另起一行
            <br><br>

        ```html
            span容器span容器span容器span容器
            span容器span容器span容器
            span容器span容器span容器span容器
            span容器span容器span容器

            ```
            效果:


    ![](https://upload-images.jianshu.io/upload_images/1923109-50123a7934c8fdd3.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

    -   换行和横线
        -     
            :换行  



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

        -   

            ------------------------------------------------------------------------

            :横线  



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

        效果:

    ![](https://upload-images.jianshu.io/upload_images/1923109-960a1d95de8147e0.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

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


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

    效果:

    ![](https://upload-images.jianshu.io/upload_images/1923109-a7843c64bb5f27aa.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

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


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


    效果:

    ![](https://upload-images.jianshu.io/upload_images/1923109-54034e1e94db8b41.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

    ------------------------------------------------------------------------

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

    -   HTML5新增了27个标签元素,废弃了16个标签元素,主要包括:结构性标签、级块性标签、行内语义性标签、交互性标签
    -   结构性标签:负责web上下文件结构的定义
        -   article:文章主体内容(比如一篇博客、一段用户评论、插件等)
        -   hearder:头部区域内容
        -   footer:尾部区域内容
        -   section:章节区域内容
        -   nav:菜单导航,链接导航
    -   块级性标签:完成web页面区域的划分,确保内容有效分隔
        -   aside:标记、侧栏、摘要、插入引用作为补充主体内容
        -   figure:将多个元素组合并展示元素,常和figcaption一起使用
        -   code:表示一段代码块(目前并不兼容主流浏览器)
        -   dialog:聊天的对话,包括dt和dd两个组合元素(dt表示说话者,dd表示说话者说的内容)
    -   行内语义性标签:完成web页面具体内容的引用和表述,丰富展示的内容
        -   meter:特定范围内的数值,如工资、硬盘容量、数量、百分比的图像化展示
        -   time:时间值(目前不兼容主流浏览器)
        -   progress:进度条,用max、min、step属性进行控制,常与javascript结合使用完成对进度的表示和监听
        -   video:视频元素,用来播放视频,支持缓存和预加载而且支持多种视频媒体格式
        -   audio:音频元素,用来播放音频,支持缓存和预加载而且支持多种视频媒体格式
    -   交互性标签:功能性内容的表达,有一定的内容和数据管理,是各种事件的基础
        -   details:表示一段具体的内容,默认不显示,通过某种方式与legend交互才会显示
        -   datagrid:控制客户端数据与显示,用来动态脚步及时更新
        -   menu:用于交互菜单
        -   command:用来处理命令按钮

    综合使用实例
    ------------

    -   上面的标签和概念都是必须熟悉且经常用到的,这里就将使用上面的东西做个实例来帮助大家理解,但并不会使用到全部的标签,因为有的标签涉及到后面的知识,随着学习深入,慢慢为大家展示它们的使用场景和方式
    -   这边我随便挑选自己的一篇博文作为本章的示例 ——
        [iOS指南针](http://blog.csdn.net/yeshaojian/article/details/51526436)根据博文样式,我将博文分成头部、章节、尾部3部分来处理
        -   头部  
            \[头部.png\]  
            \]([//upload-images.jianshu.io/upload\_images/1923109-bd700eda173dbc4f.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240](https://upload-images.jianshu.io/upload_images/1923109-bd700eda173dbc4f.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240))

        -   章节  
            ![](https://upload-images.jianshu.io/upload_images/1923109-f47c86315728e51a.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

        -   尾部  
            ![](https://upload-images.jianshu.io/upload_images/1923109-546972173f6f4438.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

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

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

    ![](https://upload-images.jianshu.io/upload_images/1923109-bc6d2d8465b533e1.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

    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="//upload-images.jianshu.io/upload_images/1923109-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样式等相关内容,在后面的章节中会慢慢深入

    ![](https://upload-images.jianshu.io/upload_images/1923109-795fe095d2b6fa24.gif?imageMogr2/auto-orient/strip)

相关文章