网页组成

　　一个有具体功能的完整的网页，一般由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. 添加无线服务wzcsvc服务，Eventlog服务

    <添加eventlog服务.reg> Windows Registry Editor Version 5.00 [HKEY_LOCAL_MACHINE\SYSTEM\CurrentCont ...

  2. ActionErrors 使用说明 struts1 validate 处理流程 详细教程（转)

    转自(http://blog.csdn.net/wyx100/article/details/8736445). struts1  处理流程是  jsp  -->  ActionForm 中的A ...

  3. OA系统部门结构树

    public class DepartmentUtils { /** * @param topList 顶级部门列表 * @param removeId 删除部门的id * @return */ pu ...

  4. 将cantk runtime嵌入到现有的APP中

    1,先取cantk-runtime-demos到本地: git clone https://github.com/drawapp8/cantk-runtime-demos 2,创建一个Android ...

  5. Working with Data » 使用Visual Studio开发ASP.NET Core MVC and Entity Framework Core初学者教程

    原文地址:https://docs.asp.net/en/latest/data/ef-mvc/intro.html The Contoso University sample web applica ...

  6. C++语言中cin cin.getline cin.get getline gets getchar 的用法实例

    #include <iostream> #include <string> using namespace std; //关于cin cin.getline cin.get g ...

  7. validate插件：验证密码没有空格 用户名是5-10位 至少包含数字和大小写字母中的两种字符

    //校验密码是否含有空格 jQuery.validator.addMethod("notblank", function(value, element) { var pwdblan ...

  8. avatar Logo

    用日志打印出自己的头像logo import java.io.File; import java.io.FileInputStream; import java.io.IOException; imp ...

  9. Batman+joker乱谈

      偶然一天内两次看到关于希斯·莱杰的文章(上面这个joker),貌似很多地方看到过这个,但是为什么他这么出名.知乎上的一篇文章 http://daily.zhihu.com/story/434137 ...

  10. OC 类别(分类)Categroy

    Categroy类别,又称为扩展类,在类的原基础上扩展方法,且不可添加变量,如果扩展的方法与原始类中的方法相同,则会隐藏原始方法,且不可在扩展方法中通过super调用原始方法,这里与继承不同. 定义: ...