网页组成

　　一个有具体功能的完整的网页，一般由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. mac 下获取 os x 的系统版本，使用 oc cocoa

    mac 下获取 os x 的系统版本,使用 oc cocoa 1: #import <CoreServices/CoreServices.h> SInt32 major, minor, b ...

  2. 最火的Android开源项目整理

    一.代码库   1.from  代码家 整理比较好的源码连接   ******************************************************************* ...

  3. 在Access中批量调用SQL语句

    access的SQL视图一次只能执行一条SQL语句,那么在VBA中调用或许可以简便一些 例如: Public Sub 批量()Dim strsql As String   strsql = " ...

  4. javaNIO学习

    Buffer其实就是是一个容器对象,它包含一些要写入或者刚读出的数据.在NIO中加入Buffer对象,体现了新库与原I/O的一个重要区别.在面向流的I/O中,您将数据直接写入或者将数据直接读到Stre ...

  5. C++ 如何重复利用一个内存地址块

    #include<iostream> using namespace std; ; }; int main(int argv ,char * args[]) { double *p1,*p ...

  6. easyUI dialog 弹窗 居中显示

    默认情况下应该是在屏幕居中显示的.但是有的时候没有居中只要重新纠正下就可以了 $('#add_dialog').dialog('open'); //打开添加对话框 $('#add_dialog').w ...

  7. Hadoop运维操作

    1.      处理hadoop的namenode宕机 处理措施: 进入hadoop的bin目录,重启namenode服务 操作命令: cd path/to/hadoop/bin ./hadoop-d ...

  8. eclipse 安装git的插件和上传项目

    这里有个链接,已经很详细的写了过程  博客1以及博客2.其实遇到安装的问题,就是因为我用的eclipse版本比较老,但是eclipse里面又装了好多插件,不想在重新安装eclipse.还有一个很好的博 ...

  9. BZOJ1932 [Shoi2007]Setstack 集合堆栈机

    妈呀...clj大爷太强啦! 原来还有set_union和set_intersection这种东西... 于是只要把栈顶的每个元素hash一下记录到一个vector里去就好了 /*********** ...

  10. 在单元测试中指定log4j的配置文件

    在开发过程中,我们会使用到log4j来输出日志,我们希望在单元测试的时候,只看到部分日志信息,或者定义日志输出的级别.   这个时候手工指定log4j的配置文件:   具体做法如下: 定义类如下: i ...