网页组成

　　一个有具体功能的完整的网页，一般由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. ie、火狐、谷歌浏览器，光标定位问题

    IE:不管该行有没有文字,光标高度与font-size一致. FF:该行有文字时,光标高度与font-size一致.该行无文字时,光标高度与input的height一致. Chrome:该行无文字时, ...

  2. 吐槽下近期的4G手机:

    吐槽下近期的4G手机: 1.iphone6和6p,分别是4.7和5.5吋屏,1810和2915毫安时不可拆卸电池,双核64位苹果A8处理器.电池容量太小,不经用,中度使用一天一充,而且不支持VOOC闪 ...

  3. python 暴力破解密码脚本

    python 暴力破解密码脚本 以下,仅为个人测试代码,环境也是测试环境,暴力破解原理都是一样的, 假设要暴力破解登陆网站www.a.com 用户 testUser的密码, 首先,该网站登陆的验证要支 ...

  4. as与c++的反射机制对比

    所谓反射机制(Reflection),简单来说,就是可以根据class的名称获取这个class以及其对应的实例.具体来说, 指的是我们可以于运行时加载.探知.使用编译期间完全未知的classes.换句 ...

  5. ios开发中的toll-free bridged

    所谓的Toll-free bridging是说您可以在某个框架的方法或函数 同时使用Core Foundatio和Foundation 框架中的某些类型. 很多数据类型支持这一特性,其中包括群体和字符 ...

  6. WLAN频段介绍-04

    ISM频段 ISM频段,此频段主要是开放给工业.科学.医学三个主要机构使用,该频段是依据美国联邦通讯委员会(FCC)所定义出来,并没有所谓使用授权的限制. 工业频段:美国频段为902-928MHz,欧 ...

  7. hdu------（3549）Flow Problem（最大流（水体））

    Flow Problem Time Limit: 5000/5000 MS (Java/Others)    Memory Limit: 65535/32768 K (Java/Others)Tota ...

  8. 初学java之事件响应（结合接口来设置在同一个界面上！）

    package wahaha; public class test_1 { public static void main( String args[] ) { WindowActionEvent w ...

  9. Longest Consecutive Sequence [LeetCode]

    Given an unsorted array of integers, find the length of the longest consecutive elements sequence. F ...

  10. 一个.net mvc的例子

    控制器 ( Controller) Product 下面功能主要根据多条件搜索产品的列表的功能 public ActionResult ProductList(string cityID, strin ...