网页组成

　　一个有具体功能的完整的网页，一般由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. Mysql 组合查询 UNION 与 UNION ALL

  2. 【vijos1266】搜集环盖

    题意 百事任何饮料的瓶盖上都会有一个百事球星的名字. 假设有\(n\)个不同的球星名字,每个名字出现的概率相同,平均需要买几瓶饮料才能凑齐所有的名字呢? 分析 设凑齐\(i\)个球星的期望次数为\(f ...

  3. ASP.NET MVC 5改进了基于过滤器的身份验证

    ASP.NET MVC 5包含在最近发布的Visual Studio 2013开发者预览版中,它使开发人员可以应用身份验证过滤器,它们提供了使用各种第三方供应商或自定义的身份验证提供程序进行用户身份验 ...

  4. meta viewport 详解

    ViewPort <meta>标记用于指定用户是否可以缩放Web页面,如果可以,那么缩放到的最大和最小缩放比例是什么.使用ViewPort <meta>标记还表示文档针对移动设 ...

  5. exit(0)和exit(1)区别

    exit(0):正常退出程序: exit(1):非正常退出程序: return:返回. return是语言级别的,表示调用堆栈的返回: exit是系统调用级别的,表示一个进程的退出.

  6. OID,主键生成策略，PO VO DTO,get和load区别，脏检查，快照，java对象的三种状态

    主键生成策略 sequence 数据库端 native 数据库端 uuid  程序端 自动赋值 生成的是一个32位的16进制数  实体类需把ID改成String 类型 assigned  程序端 需手 ...

  7. Unique Paths II [LeetCode]

    Follow up for "Unique Paths": Now consider if some obstacles are added to the grids. How m ...

  8. memcached 学习 1—— memcached+spring配置

    memcached 学习目录: memcached 学习 1—— memcached+spring配置 这几天自己搭建项目环境,解决问题如下: 有关常见的配置这里没有列出,中间遇到的搭建问题比较顺利g ...

  9. Java 集合系列 12 TreeMap

    java 集合系列目录: Java 集合系列 01 总体框架 Java 集合系列 02 Collection架构 Java 集合系列 03 ArrayList详细介绍(源码解析)和使用示例 Java ...

  10. State模式的经典应用场景：订单处理(c#实现)

    State模式在对象内部状态发生变化的时候,改变自身的行为,这通常是通过切换内部状态对象实现的,对象将自身在各个状态的行为推给了状态对象,从而解开了行为与对象的依赖. 场景描述 在经典的订单处理场景中 ...