iOS-html

作者: DeerRun | 来源:发表于2017-06-13 13:23 被阅读71次

    一 、HTML5基础知识介绍

    1.1 什么是HTML5?

    • 2014年完成HTML5标准的制定,历时8年
    • 移动先行

    1.2 为什么要用HTML5?

    • 跨平台
    • 只要有浏览器,就能运行HTML5

    1.3 如何使用HTML5?

    • 自己编写大量的HTML5代码
    • 成熟的第三方框架
    • sencha-touch
    • phoneGap
    • jQuery Mobile

    1.4 手机APP开发的模式

    • 原生(纯OC、纯swift)
    • 纯HTML5
    • 原生+HTML5

    1.5 为什么要学习HTML5?

    • 未来的趋势
    • 增加面试、开发竞争力
    • Android程序员 Java、服务器、HTML5

    1.6 公司职位划分?

    • 平面设计师:作图、切图、HTML、CSS
    • 前端工程师:HTML5、CSS3、JavaScript、模板技术
    • 后台工程师:服务器(Java、PHP、.net)、数据库开发
    • 移动工程师:手机UI界面(OC、HTML5)、跟服务器交互

    1.7 开发工具?

    • Andriod:eclipse、MyEclipse、Andriod studio
    • iOS:XCode
    • HTML5:eclipse、MyEclipse(后端喜爱),DreamWaver(美工喜爱),WebStorm(大神编辑器、前端喜爱)

    1.8 Web开发新时代

    • Web1.0:主流技术:HTML+CSS
    • Web2.0:主流技术:Ajax(JavaScript/DOM/异步数据请求)
    • Web3.0:主流技术:HTML5+CSS3,HTML5亮点:Canvas、HTML5音视频、Web存储、GeoLocation、Works多线程,CSS3亮点:设计动画、2D变形、N多新特性

    二、常用的HTML标签

    2.1 网页的组成

    • HTML:网页的具体内容和结构
    • CSS:网页的样式
    • JavaScript:网页的交互效果、比如对用户鼠标事件作出相应,
    • 参考网址:http://www.w3cschool.com

    2.2 HTML

    • 什么是HTML?超文本标记语言
    • HTML的组成?N个标签(节点、元素、标记)组成

    2.3 常见的HTML标签

    • 标题标签: h1、h2、h3、h4、h5...规律:h1-h6(依次由大到小, 例如:
                                    <h1>我是H1</h1>
                                    <h2>我是H2</h2>
                                    <h3>我是H3</h3>
                                    <h4>我是H4</h4>
                                    <h5>我是H5</h5>
                                    <h6>我是H6</h6>
    

    <h1>我是H1</h1>
    <h2>我是H2</h2>
    <h3>我是H3</h3>
    <h4>我是H4</h4>
    <h5>我是H5</h5>
    <h6>我是H6</h6>

    • 段落标签:p, 例如:
        <!--段落标签-->
        <p>我是段落标签</p>
    

    <p>我是段落标签</p>

    • 换行标签:br, 例如
    <input placeholder="1111"><br>
    
    • 容器标签:div、span 相同点:相当于OC中的UIView 不同点:div是块级标签,span是行内标签, 例如:
    <div>我是div</div>
    

    我是div

    • 表格标签:table、tr、td 例如:
    • 列表标签:ul、ol、li ol是有序列表,ul是无序列表开发中常用ul,例如:
    <!--列表标签-->
        <ul>
            <li>无序列表1</li>
            <li>无序列表2</li>
            <li>无序列表3</li>
            <li>无序列表4</li>
            <div>ddddd</div>
        </ul>
    
        <ol type="A" reversed>
             <li>有序列表1</li>
             <li>有序列表2</li>
             <li>有序列表3</li>
             <li>有序列表4</li>
         </ol>
    


    <ul>
    <li>无序列表1</li>
    <li>无序列表2</li>
    <li>无序列表3</li>
    <li>无序列表4</li>
    </ul>
    <ol type="A" reversed>
    <li>有序列表1</li>
    <li>有序列表2</li>
    <li>有序列表3</li>
    <li>有序列表4</li>
    </ol>

    • 图片标签:img src(引入的资源) alt(文字描述图片), 例如:
    ![1111](https://img.haomeiwen.com/i2766849/d361e64f7018e9cd.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
    
    1111
    • 表单标签:input type:类型,(color,file,date...) value:input 元素的,链接标签
    <!--表单标签-->
        <input placeholder="1111"><br>
        <input type="color "value="222222">  <br>
        <input type="button"> <br>
        <input type="date"> <br>
        <input type="file"> <br>
    
    input
    • a :target(规定在何处打开链接文档), href(规定链接指向的页面的 URL)
    <a href="http://www.baidu.com" target="_blank">
            ![](https://img.haomeiwen.com/i2766849/d361e64f7018e9cd.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
        </a>
    
    • 横线标签:hr
    • 按钮标签:button,type(按钮的类型button,reset,submit),value(规定按钮的初始值)

    2.4 注意事项

    • href和src的区别
      <p>href是引用,相当于iOS中的import,不是必需的.(比如<link>) </p>
      <p> src是引入,是必需的,没有这个资源,标签就用不起来.(比如<audio>,<video>) </p>

    • 双标签和单标签
      <p>双标签(首尾呼应,内部可以层层嵌套)<HTML中大部分是双标签></p>
      <p>单标签(<meta>,...)</p>

    三、HTML5新增的标签

    • 结构性标签
      <p>article:规定独立的自包含内容</p>
      <p>header:标签定义文档的页眉(介绍信息)</p>
      <p>footer:文档或节的页脚,页脚通常包含文档的作者、版权信息、使用条款链接、联系信息等等</p>
      <p>section:标签定义文档中的节,章节、页眉、页脚或文档中的其他部分</p>
      <p>nav:标签定义导航链接的部分</p>
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>一个papi酱,老总讲了又讲,丽人丽妆咋这么急?</title>
    </head>
    <body>
        <article>
        <header>
            <h2>一个papi酱,老总讲了又讲,丽人丽妆咋这么急?</h2>
            <h4>分类 :互联网</h4>
            ![](/Users/ljh/Desktop/H5/image/屏幕快照 2017-05-05 13.25.49.png)
    
        </header>
    
        ![](http://g.hiphotos.baidu.com/news/crop%3D0%2C1%2C415%2C249%3Bw%3D638/sign=b11ea766412309f7f320f7524f3e20c2/e61190ef76c6a7ef304f1ad4fafaaf51f2de66d3.jpg)
        <section>
            <div>丽人丽妆快炒过头了。从上海西南一家非常安静的公司突变为娱乐小子,后续一定会有负面作用,尤其是财经PR上。</div>
            <div>看它借助PAPI酱炒作用心,除了这类人物具有爆款价值外,可能还有借机传播公司价值、后续融资、IPO的用意。当然,阻击对手的用心似乎也在流露。</div>
        </section>
        <footer>
        <div>
            版权声明
            本文仅代表作者观点,不代表百度立场。
            本文系作者授权百度百家发表,未经许可,不得转载。
        </div>
        </footer>
        </article>
    </body>
    </html>
    
    • 级块性标签
      <p>aside</p>
      <p>figure:标签规定独立的流内容(图像、图表、照片、代码等等)</p>
      <p>code:不建议使用,建议使用样式表</p>
      <p>dialog:行内语义性标签</p>
      <p>meter:标签定义已知范围或分数值内的标量测量,磁盘用量、查询结果的相关性,等等</p>
      <p>time:目前所有主流浏览器都不支持 <time> 标签</p>
      <p>progress:标签标示任务的进度(进程),结合 <progress> 标签与 JavaScript 一同使用,来显示任务的进度。注意:<progress> 标签不适合用来表示度量衡(例如,磁盘空间使用情况或查询结果)。如需表示度量衡,请使用 <meter> 标签代替</p>
      <p>video:src(要播放的视频的 URL),controls(向用户显示控件,比如播放器),oop(当媒介文件完成播放后再次开始播放),preload(视频在页面加载时进行加载,并预备播放,默认值是autoplay),audio,同上</p>
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <meter value="30" max="100" min="20">9999</meter>
    <progress max="100" value="40"></progress>
    <audio src="../image/music.m4a" controls="controls"></audio>
    <video src="../image/BigBuck.m4v" controls="controls"></video>
    </body>
    </html>
    
    • 交互性标签
      <p>detail</p>
      <p>datagrid</p>
      <p>menu:所有主流浏览器均不支持 menu 元素</p>
      <p>command:目前只有 Internet Explorer 支持 <command> 标签</p>

    四、CSS样式简介

    • 行内样式:内联样式)直接在标签的style属性中书写
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body style="background-color: aqua">
        <div style="color: blue; font-size: 18px ; background-color: antiquewhite">iiiiii</div>
        <p style="background-color: beige; font-size: 28px; border: 5px dashed azure">我是段落</p>
    
        <div>rongqi</div>
        <p>pppppp</p>
    </body>
    </html>
    
    • 页内样式:在本网页的style标签中书写
    <!DOCTYPE html>
    <html lang="en">
    <head>
    
        <meta charset="UTF-8">
        <title>业内样式</title>
        <style>
            div{
                color: aquamarine;
                font-size: 30px;
                border: red solid;
            }
            p{
                color: blue;
                font-size: 80px;
                background-color: azure;
            }
        </style>
    </head>
    <body>
        <div>rongqi</div>
        <p>pppppp</p>
    </body>
    </html>
    
    • 外部样式:在单独的CSS文件中书写,然后在网页中用link标签引用

    <p>css</p>

    div {
        color: aquamarine;
        font-size: 30px;
        border: red dashed;
    }
    p{
        color: blue;
        font-size: 80px;
        background-color: azure;
    }
    

    <p>html</p>

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>外部样式</title>
        <link rel="stylesheet" href="./css/01-index.css">
    </head>
    <body>
        <div>rongqi</div>
        <p>pppppp</p>
    </body>
    </html>
    
    css

    五、CSS选择器

    • 标签选择器:根据标签名找到对应的标签
    • 类选择器:根据类名找到对应的标签
    • id选择器:根据id名找到对应的标签
    • 并列选择器:用于多个标签之间有相同的样式
    • 复合选择器:用于精准的定位
    • 后代选择器:用于标签嵌套标签
    • 直接后代选择器:格式: div>a
    • 相邻兄弟选择器:格式:div+p
    • 属性选择器:格式:div[name]
    • 伪类:格式:div:hover
    • 伪元素:格式:div:after
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
    
        并列选择器
        div, span{
            color: red;
         }
         标签选择器
            p{
                color: green;
            }
            类选择器
            .high{
               color: grey;
            }
            id选择器
            #main{
                color: blue;
            }
            复合选择器
            div.test {
                color: orange;
            }
    
            后代选择器
            div p{
                background-color: brown;
            }
            直接后代选择器
            div.test>p{
                background-color: blue;
            }
            属性选择器
            div[name]{
                  color: red;
            }
            div[name="111"]{
                color: black;
            }
            伪类选择器
            input:focus {
                outline: none;
                width: 400px;
                height: 60px;
                font-size: 30px;
            }
    
            input:hover{
                outline: none;
                width: 200px;
                height: 30px;
                font-size: 20px;
            }
    
        </style>
    </head>
    
    <body>
        <div>并列选择器</div>
        <span>并列选择器</span>
        <p>标签选择器</p>
        <p class="high">类选择器</p>
        <div id="main">id选择器</div>
        <div class="test">复合选择器</div>
        <div class="test">
            <p>直接后代选择器</p>
            <div>
                <p>后代选择器</p>
            </div>
        </div>
        <div name="0000">属性选择器</div>
        <div name="111">属性选择器</div>
    
        <input placeholder="请输入密码"><br>
    </body>
    </html>
    
    CSS选择器

    六、CSS选择器的优先级别

    • 选择器的针对性越强,它的优先级就越高
      <p>important > 内联 > id > 类 | 伪类 | 伪元素 | 属性选择 > 标签> 通配符 > 继承</p>
    • 选择器的权值加到一起,大的优先;如果权值相同,后定义的优先
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>优先级别</title>
        <style>
            div{
                font-size: 20px;
                color: black;
            }
            .main{
                font-size: 10px;
                color: grey;
            }
            .test{
                font-size: 5px;
                color: blue;
            }
            *{
                font-size: 30px;
                color: green;
            }
        </style>
    </head>
    <body>
    <div class="main test">77777</div>
    </body>
    </html>
    

    <p>结果:blue</p>

    七、HTML的标签类型

    • 块级元素具有以下特点: ①总是在新行上开始,占据一整行; ②高度,行高以及外边距和内边距都可控制; ③宽带始终是与浏览器宽度一样,与内容无关; ④它可以容纳内联元素和其他块元素。<\div>、<p>、<\h1>、<\h6>、<\ol>、<\ul>、<\dl>、<\table>、<\address>、<\blockquote> 、<\form>

    • 行内元素的特点: ①和其他元素都在一行上; ②高,行高及外边距和内边距部分可改变; ③宽度只与内容有关; ④行内元素只能容纳文本或者其他行内元素,<\a>、<\span>、<\br>、<\i>、<\em>、<\strong>、<\label>、<\q>、<\var>、<\cite>、<\code>

    • 行内-块级标签:多个行内-块级标签可以显示在同一行,能随时设置宽度和高度

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>display</title>
        <style>
            #test1 {
                display: inline;
            }
            #test2 {
                display: inline-block;
                color: orangered;
            }
            #test3 {
                display: block;
            }
        </style>
    </head>
    <body>
    <!--行内-->
        <div id="test1">000000</div>
        <div id="test1">111111</div>
    
    <!--行内-块级-->
        <div id="test2">
            222222
            <div>3333</div>
            <div>4444</div>
        </div>
        <div id="test2">333333</div>
    <!--块-->
        <input type="text" placeholder="44444" id="test3">
        <input type="text" placeholder="55555" id="test3">
    </body>
    </html>
    
    display

    八、CSS属性

    • 可继承属性:父标签的属性值会传递给子标签,一般是文字控制属性
    • 不可继承属性:父标签的属性值不能传递给子标签,一般是区块控制属性

    九、盒子模型

    • 内容(content)
    • 填充(padding) :上左下右 或 (上下)(左右)
    • 边框(border):border-width(边框宽度) border-style(边框样式) border-color(边框颜色)
    • 边界(margin):上左下右 或 (上下)(左右)
    • RGBA透明度
    • 块阴影与文字阴影:box-shadow,text-shadow
      *圆角:border-radius
    • 形变:transform transform-origin transition
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>盒子模型</title>
        <style>
            *{
                margin: 0px;
            }
    
            div{
                width: 300px;
                height: 300px;
    
                padding: 10px 20px 30px 40px;
                border:10px solid;
                margin: 20px 60px 40px 100px;
    
                background-color: rgba(255,0,0,0.5);
                display: inline-block;
                border-radius: 20px;
    
                box-shadow: 10px 20px 10px green;
                text-shadow: 10px 20px 1px green;
            }
        </style>
    </head>
    <body>
        <div>这是一个盒子!></div>
    </body>
    </html>
    
    盒子 盒子

    十、标签的居中

    • 水平居中:
      <p>行内标签 行内-块级标签text-align:center</p>
      <p>块级标签 margin:0 auto</p>
    • 垂直居中 line-height == height
    • 定位
      <p>父position:relative 子position:absolute</p>
      <p>top:50%;left:50%;</p>
      <p>transform:translate(-50%, -50%)</p>

    <p> 居中</p>

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>display</title>
        <style>
    
            #test0 {
                background-color: red;
                width: 600px;
                height: 200px;
                /*块级标签水平居中*/
                margin: 0 auto;
                /*块级标签行内居中*/
                text-align: center;
            }
            /*行内*/
            #test1 {
                display: inline;
                background-color: orange;
                text-align: center;
    
                /*行内标签设置高度和宽度无效,高度和宽度根据内容而定*/
                width: 200px;
                height: 100px;
            }
            /*行内-块级标签*/
            #test2 {
                display: inline-block;
                color: orangered;
                background-color: orange;
    
                /*行内-块级标签设置高度和宽度无效,高度和宽度根据内容而定*/
                width: 200px;
                height: 100px;
            }
    
            /*块级标签*/
            #test3 {
                display: block;
                margin: 0 auto;
                background-color: orange;
            }
    
            /*块级标签*/
            #test4 {
                /*标签水平居中*/
                margin: 0 auto;
                /*内容水平居中*/
                text-align: center;
                width: 200px;
                height: 200px;
                background-color: #2b669a;
                /*垂直居中*/
                line-height: 200px;
            }
        </style>
    </head>
    <body>
        <div id="test0">
            <!--行内-->
            <div id="test1">test1-a</div>
            <div id="test1">test1-b</div>
    
            <!--行内-块级-->
            <div id="test2">
                test2-a
                <div>test2-b</div>
                <div>test2-c</div>
            </div>
            <div id="test2">test2-d</div>
        </div>
    
        <!--块-->
        <input type="text" placeholder="test3-a" id="test3">
        <input type="text" placeholder="test-b" id="test3">
    
        <div id="test4">test4</div>
    </body>
    </html>
    
    居中

    <p>定位</p>

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>position</title>
        <style>
            #test1 {
                width: 300px;
                height: 200px;
    
                background-color: grey;
                /*相对距离*/
                position: relative;
    
                margin: 60px 140px;
            }
            .test2 {
                width: 200px;
                height: 100px;
    
                background-color: red;
                /*绝对距离*/
                position: absolute;
                /*相对父类test1的距离*/
                left: 30px;
                top: 70px;
            }
        </style>
    </head>
    <body>
    
        <div id="test1">
            test1
            <div class="test2">test2</div>
        </div>
    </body>
    </html>
    

    相关文章

      网友评论

          本文标题:iOS-html

          本文链接:https://www.haomeiwen.com/subject/ybedqxtx.html