网页组成

　　一个有具体功能的完整的网页，一般由3部分组成

  • 　　HTML：网页的具体内容和结构
  • 　　CSS：网页的样式（美化网页最重要的一块）
  • 　　JavaScript:网页的交互效果，比如对用户鼠标事件做出响应

　　HTML\CSS\JavaScript学习资料：http://www.w3school.com.cn/

HTML

  • 什么是html

　　HTML的全称是HyperText Markup Language，超文本标记语言。其实它就是文本，由浏览器负责将它解析成具体的网页内容，比如，浏览器会将 左边的HTML代码 转换为 右边的网页内容

  • HTML的组成

　　跟XML类似，HTML由N个标签（节点、元素、标记）组成。HTML语法非常松散，目前的最新版是5.0，也就是HTML5

  • 常见的html标签
  1. 标题：h1、h2、h3、h4、h5....
  2. 段落：p
  3. 换行：br
  4. 容器：div、span（用来容纳其他标签）
  5. 表格：table、tr、td
  6. 列表：ul、ol、li
  7. 图片：img
  8. 表单：input
  9. 链接：a

css

  • 什么是CSS

　　　　CSS的全称是Cascading Style Sheets，层叠样式表

　　　　它用来控制HTML标签的样式，在美化网页中起到非常重要的作用

  • CSS的编写格式

CSS的编写格式是键值对形式的，比如

color: red;

background-color: blue;

font-size: 20px;

　　冒号:左边的是属性名，冒号:右边的属性值

  • CSS有3种书写形式（优先级从高到低）

　　　　行内样式：（内联样式）直接在标签的style属性中书写

<body style="color: red;">

　　内页样式：在本网页的style标签中书写

<style type="text/css">

    body {

        color: red;

    }

</style>

　　外部样式：在单独的CSS文件中书写，然后在网页中用link标签引用

<link type="text/css" rel="stylesheet" href="index.css">
  • CSS选择器

　　　　选择器的作用：选择对应的标签，为之添加样式

    1. 标签选择器：根据标签名找到标签
    2. 类选择器：
    3. id选择器
    4. 群租选择器
    5. 选择器组合
    6. 后代选择器
    7. 子标签选择器
    8. 相邻兄弟选择器
    9. 属性选择器
    10. 伪类

  • 选择器的优先级

　　　　选择器的针对性越强，它的优先级就越高

　　　　选择器的权值

　　　　通配选择符（*）：0

　　　　标签： 1

　　　　类： 10

　　　　属性： 10

　　　　伪类： 10

　　　　伪元素： 1

　　　　id： 100

　　　　important： 1000

　　　　原则：选择器的权值加到一起，大的优先；如果权值相同，后定义的优先

　　　　优先级排序

　　　　　　important > 内联 > id > 类 > 标签 | 伪类 | 属性选择 > 伪元素 > 通配符 > 继承

  • CSS属性

　　CSS有N多属性，根据继承性，主要可以分为2大类

    • 可继承属性：父标签的属性值会传递给子标签，一般是文字控制属性
    • 不可继承属性：父标签的属性值不能传递给子标签，一般是区块控制属性
  • CSS布局

默认情况下，所有的网页标签都在标准流布局中：从上到下，从左到右。

　　脱离标准流的方法有

    1. float属性
    2. position属性 和 left、right、top、bottom属性

float属性的常用取值有

    1. left：脱离标准流，浮动在父标签的最左边
    2. right：脱离标准流，浮动在父标签的最右边

HTML标签类型

　　HTML有N多标签，根据显示的类型，主要可以分为2大类

    • 块级标签：独占一行的标签
    • 行内标签（内联标签）：多个行内标签能同时显示在一行

　　CSS中有个display属性，能修改标签的显示类型

    • none：隐藏标签
    • block：块级类型，独占一行，能随时设置宽度和高度
    • inline：行内类型（内联类型），多个行内标签可以显示在同一行。宽度和高度取决于内容的尺寸
    • inline-block：行内-块级类型（内联-块级类型），多个行内-块级标签可以显示在同一行，能随时设置宽度和高度

盒子模型

　　网页上的每一个标签都是一个盒子，每个盒子都有四个属性

    • 内容（content）：盒子里装的东西，网页中通常是指文字和图片
    • 填充（padding，内边距）：怕盒子里装的（贵重的）东西损坏，而添加的泡沫或者其它抗震的辅料
    • 边框（border）：盒子本身
    • 边界（margin，外边距）：盒子摆放的时候的不能全部堆在一起，盒子之间要留一定空隙保持通风，同时也为了方便取出

  • 　　内容

  • 　　填充（padding,内边距）

　　　　例子：

  • 　　边框（border）

  • 　　边界（margin，外边距）

　　举例：

iOS网页开发技术总结的更多相关文章

  1. 静态网页开发技术-HTML

    今天我重新复习了一下静态网页开发技术,概括如下. 一 .HTML文档结构与基本语法 :放置了标签的文本文档,可供浏览器解释执行的网页文件 1.注释标记 2.标记 3.属性 二.基本标记与使用 1.网页 ...

  2. AJAX --- 一种创建交互式网页应用的网页开发技术

    目录 AJAX 创建XHR实例 指定readyStatechange事件处理程序 启动请求 发送请求 接收数据 取消XHR请求/响应 AJAX ajax核心技术就是 XMLHttpRequest 对象 ...

  3. Ajax：一种网页开发技术(Asynchronous Javascript + XML)

    创建新的 XMLHttpRequest 对象(Ajax 应用程序的核心): <script language="javascript" type="text/jav ...

  4. Java Web开发技术教程入门-静态网页技术

        昨天了解了构建动态网站的几种技术:Servlet技术.JSP技术,ASP技术和ASP.NET技术以及PHP技术.昨天的精髓在于JSP技术的运行原理:通过用户请求JSP文件,首先检查JSP文件的 ...

  5. Java Web开发技术教程入门-初识动态网页

    这段时间学校搞了一个"阅战阅勇"的阅读活动,奖品还是挺丰富的~于是,奔着这些奖品,我去图书馆借了这本<Java Web开发技术教程>.一是为了那些丰富的奖品,二是为了回 ...

  6. .NET Web开发技术简单整理

    在最初学习一些编程语言.一些编程技术的时候,做的更多的是如何使用该技术,如何更好的使用该技术解决问题,而没有去关注它的相关性.关注它的理论支持,这种学习技术的方式是短平快.其实工作中有时候也是这样,公 ...

  7. Web开发技术发展历史

    Web开发技术发展历史   来自:天码营 原文:http://www.tianmaying.com/tutorial/web-history Web的诞生 提到Web,不得不提一个词就是"互 ...

  8. fir.im Weekly - 2016 移动开发技术大回顾

    2016 年是移动技术发展迅速的一年,认认真真回顾这一年必不可少.@移动开发前线 的 这篇 2016移动开发技术巡礼 ,精心盘点了 2016 年 移动开发技术大事件,分为 iOS/Android平台篇 ...

  9. 转载：.NET Web开发技术简单整理

    在最初学习一些编程语言.一些编程技术的时候,做的更多的是如何使用该技术,如何更好的使用该技术解决问题,而没有去关注它的相关性.关注它的理论支持,这种学习技术的方式是短平快.其实工作中有时候也是这样,公 ...

随机推荐

  1. python操作mongodb之五大量写操作

    import pymongo #库名 db = pymongo.MongoClient('192.168.30.252',27017).bulk_example #test集合插入 db.test.i ...

  2. 颜色缩减（带Trackbar）【从毛星云Opencv3编程入门P75 P111例程改编】

    最近学了点opencv,买了毛星云的书,大力推荐哦. 颜色缩减,自己加了个Trackbar看起来更直观一些. 我一般自己先看一遍程序,脑子里有个大概印象了,再自己写一遍,这样出了错误会印象更深刻. 1 ...

  3. jsp页面 直接从地址栏中 获取 参数的方法

    function GetQueryString(name) {      var reg = new RegExp("(^|&)"+ name +"=([^&am ...

  4. quartz定时任务框架的使用

    quartz定时任务时间设置 这些星号由左到右按顺序代表 :     *    *     *     *    *     *   *                                 ...

  5. GoF--原型设计模式

    用原型实例指定创建对象的种类,并且通过拷贝这些原型创建新的对象.

  6. 阿里Linux Shell脚本面试25个经典问答

    转载: 阿里Linux Shell脚本面试25个经典问答 Q:1 Shell脚本是什么.它是必需的吗? 答:一个Shell脚本是一个文本文件,包含一个或多个命令.作为系统管理员,我们经常需要使用多个命 ...

  7. 使用XIB实现一个简单view

    技术处女贴 欢迎来探讨 转帖请注明出处 http://www.cnblogs.com/andy-zhou/p/4962135.html 微信: @Andy 1. AppDelegate AppDele ...

  8. Android Service与Thread的区别

    Android Service,后台,Android的后台就是指,它的运行是完全不依赖UI的.即使Activity被销毁,或者程序被关闭,只要进程还在,Service就可以继续运行.比如说一些应用程序 ...

  9. IE7浏览器下CSS属性选择器二三事

    一.为何专门说起IE7 以前,或者说数年前,我们从事桌面端网页开发的时候,基本上都还要兼顾IE6浏览器, 即使有些特性,IE7支持,我们也会忽略之.于是,我们会不自然地把IE6和IE7浏览器归为一路货 ...

  10. 从 bcp 客户端收到一个对 colid x 无效的列长度。

    出现场景: 批量插入数据的时候出现这个问题. 原因分析:某个数据的长度应该是大于这个数据对应的列的定义长度. 所以一一检查到底是那个列的长度超出了. 第一种方法: ——————————2017-1-3 ...