Web前端开发

WEB前端开发教程

前言：前端开发是创建WEB页面或APP等前端界面呈现给用户的过程，通过HTML，CSS及JavaScript以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互。
前端开发从网页制作演变而来，名称上有很明显的时代特征。在互联网的演化进程中，网页制作是Web1.0时代的产物，早期网站主要内容都是静态，以图片和文字为主，用户使用网站的行为也以浏览为主。随着互联网技术的发展和HTML5、CSS3的应用，现代网页更加美观，交互效果显著，功能更加强大。
接下来我将划分多个模块，详细介绍web前端的用法，有浅入深。

第一章：web概念基础

一、网页

1. 静态网页

1.用户无论何时何地访问，网页都会显示固定的信息，除非网页源代码被重新修改上传。
2. 静态网页更新不方便，但是访问速度快。

（内容不需要频繁更新的网页可以做成静态）

2. 动态网页

1.显示的内容会随着用户操作和时间的不同而变化。

2.动态网页可以和服务器数据库进行实时的数据交换。

（内容需要频繁更新的网页可以做成动态）

现在的网页基本都动静结合。

二、网页名词解释

①Internet网络：就是通常所说的互联网，是由一些使用公用语言互相通信的计算机连接而成的网络。
②URL：URL（英文Uniform Resource Locator的缩写）中文译为“统一资源定位符” URL其实就是Web地址，俗称“网址”。
③WWW：WWW（英文World Wide Web的缩写）中文译为“万维网”是Intertnet提供的一种网页浏览服务。
④DNS：DNS （英文Domain Name System的缩写）是域名解析系统。
⑤HTTP和HTTPS：HTTP (英文Hypertext transfer protocol的缩写) 中文译为超文本传输控制协议，浏览器和万维网服务器之间互相HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议，要比HTTP协议安全。
（HTTP通信协议是超文本传输协议的简称，它是属于浏览器和Web服务器之间的通信协议，建立在TCP/IP基础之上，用于传输浏览器到服务器之间的HTTP请求和响应。它不仅需要保证传输网络文档的正确性，同时还确定文档显示的先后顺序 。）
⑥Web：Web通常指互联网的使用环境。通常也称之为网页。
⑦W3C组织：W3C（英文World Wide Web Consortium的缩写）是我们口中所说的“万维网联盟”

三、Web页面的组成

1. CSS
   层叠样式表，用于美化页面。

2. html
   超文本标签语言，用于显示内容，搭建网页的结构。

3. JavaScript
   简称为js，脚步语言，用于页面的行为(表单验证、用户的交互)。

四、Web标准

Web标准是一个由W3C和其他标准化组织制定的一系列标准的集合。而不是量化的某一个标准线。

五、浏览器

浏览器是用来检索、展示以及传递Web信息资源的应用程序。Web信息资源由统一资源标识符( Uniform Resource Identifier，URI)所标记，它是一张网页、一张图片、一段视频或者任何在Web上所呈现的内容。使用者可以借助超级链接( Hyperlinks)，通过浏览器浏览互相关联的信息 。

组成：浏览器窗口各部分功能

1、地址栏：用于输入网站的地址，IE（Internet Explorer）浏览器通过识别地址栏中的信息，正确连接用户要访问的内容。如要登录“网址之家”网，只需在地址栏中输入网址之家的网址：http://www.hao123.com，然后按[Enter]键或单击地址栏右侧的按钮即可。在地址栏中还附带了IE中常用命令的快捷按钮，如刷新©、停止(x)等，前进、后退按钮设置在地址栏前方 。
2、菜单栏：由“文件” “编辑” “查看” “收藏夹” “工具”和“帮助”菜单组成。每个菜单中包含了控制IE工作的相关命令选项，这些选项包含了浏览器的所有操作与设置功能 。
3、选项卡：从Internet Explorer7版本开始，IE浏览器可以使用多选项卡浏览方式，以选项卡的方式打开网站的页面 。
4、页面窗口：是IE浏览器的主窗口，访问的网页内容显示在此。页面中有些文字或对象具有超链接属性，当鼠标指针放上去之后会变成手状，单击鼠标左键，浏览器就会自动跳转到该链接指向的网址；单击鼠标右键，则会弹出快捷菜单，可以从中选择要执行的操作命令 。
5、状态栏：实时显示当前的操作和下载Web页面的进度情况。正在打开网页时，还会显示网站打开的进度。另外，通过状态栏还可以缩放网页 。

内核：

浏览器的种类很多，但是主流的内核只有四种，各种不同的浏览器，就是在主流内核的基础上，添加不同的功能构成 。
1、Trident内核
代表产品为Internet Explorer，又称其为IE内核。Trident（又称为MSHTML），是微软开发的一种排版引擎。使用Trident渲染引擎的浏览器有：IE、傲游、世界之窗浏览器、Avant、腾讯TT、Netscape 8、NetCaptor、Sleipnir、GOSURF、GreenBrowser和KKman等 。
2、Gecko内核
代表作品为Mozilla Firefox。Gecko是一套开放源代码的、以C++编写的网页排版引擎，是最流行的排版引擎之一，仅次于Trident。使用它的最著名浏览器有Firefox、Netscape6至9 。
3、WebKit内核
代表作品有Safari、Chrome。WebKit是一个开源项目，包含了来自KDE项目和苹果公司的一些组件，主要用于Mac OS系统，它的特点在于源码结构清晰、渲染速度极快。缺点是对网页代码的兼容性不高，导致一些编写不标准的网页无法正常显示 。
4、Presto内核
代表作品Opera。Presto是由Opera Software开发的浏览器排版引擎，供Opera 7.0及以上使用。它取代了旧版Opera 4至6版本使用的Elektra排版引擎，包括加入动态功能，例如网页或其部分可随着DOM及Script语法的事件而重新排版 。

六、视口(viewport)

1.定义：

在 PC 端，视口指的是浏览器的可视区域，其宽度和浏览器窗口的宽度保持一致。 在 CSS 标准文档中，视口也被称为初始包含块，它是所有 CSS 百分比宽度推算的根源，给 CSS 布局限制了一个最大宽度。 而移动端则较为复杂。
它涉及到三个视口：布局视口（Layout Viewport）、视觉视口（Visual Viewport）和理想视口（Ideal Viewport）。
布局视口（Layout Viewport）
页面的宽度，一般有768px、980px或1024px，这取决于设备的不同。iOS, Android 基本都将这个视口分辨率设置为 980px，所以 PC 上的网页基本能在手机上呈现，只不过元素看上去很小，一般默认可以通过手动缩放网页。
视觉视口（visual viewport）
视觉视口是用户当前看到的区域，用户可以通过缩放操作视觉视口，同时不会影响布局视口。
理想视口（ideal viewport）
理想视口的值其实就是屏幕分辨率的值，它对应的像素叫做设备逻辑像素,布局视口的默认宽度并不是一个理想的宽度，于是 Apple 和其他浏览器厂商引入了理想视口的概念，它对设备而言是最理想的布局视口尺寸。

2.视口的设置

我们可以使用视口元标签（viewport meta 标签）来进行布局视口的设置。

<meta name="viewport"
    content="width=device-width,initial-scale=1.0,maximum-scale=1">

下面是一些属性：

这里需要注意的是：
-viewport 标签只对移动端浏览器有效，对 PC 端浏览器是无效的
-单独设置 initial-scale 或 width 都会有兼容性问题，所以设置布局视口为理想视口的最佳方法是同时设置这两个属性
-当缩放比例为 100% 时，dip 宽度 = CSS 像素宽度 = 理想视口的宽度 = 布局视口的宽度

3. 一倍—三倍图概念

MacBook Pro 视网膜屏（Retina）显示器硬件像素是 2880px * 1800px。当设置屏幕分辨率为 1920px * 1200px 的时候，理想视口的宽度值是 1920px， 那么 dip 的宽度值就是 1920px。其与理想视口宽度的比值为1.5（2880/1920），这个比值叫做设备像素比：

==逻辑像素宽度 * 设备像素比 = 物理像素宽度==

设备像素比可以通过 window.devicePixelRatio 来获取，或者使用 CSS 中的 device-pixel-ratio。
对于一张 100px * 100px 的图片，通过 CSS 设置其宽高：

{
    width:100px;
    height:100px;
}

下面是常见的设备像素比：
-普通密度桌面显示屏：devicePixelRatio = 1
-高密度桌面显示屏(Mac Retina)：devicePixelRatio = 2
-主流手机显示屏：devicePixelRatio = 2 or 3

第二章：Css概念及语法

Css（Cascading Style Sheet）——层叠样式表

CSS规则由两个主要部分构成：选择器以及一条或多条声明。
每条声明由一个属性和一个值组成。属性(property)是设置的样式属性，每个属性有一个值，属性和值被冒号分开。

比如 selector{property：value}

作用：

-样式定义如何显示HTML元素
-样式为了解决内容与表现分离问题
-外部样式表可以极大提高工作效率，外部样式表通常存储在Css文件中

语法：一.选择器{属性1:值1;属性2:值2;…}

写法：h1 {color:blue;font-size:14px}

 h1{color:red; font-size:14px;}  
h1是选择器，color和font-size是属性，red和14px是值。
color:blue和font-size:14px是声明

二.选择器的分组

 h1,h2,h3,h4,h5,h6 {
      color: green;
    }

继承及其问题：根据 CSS，子元素从父元素继承属性。

body {
         font-family: Verdana, sans-serif;
}

三.创建Css：

CSS 创建样式表分为三种情况：
内部样式表

<head>
  <style type="text/CSS">
      选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}
      div{width:200px; height:200px; border:1px solid red;}
  </style>
</head>

行内式(内联样式)

<div style="width:200px;height:100px;border:1px solid black;"></div>

外部样式表(外链式)

  <head>
    <link rel="stylesheet" type="text/css" href="css/style.css">
  </head>

样式优先级：内联样式>内部样式>外部样式
三种样式表区别：
行内样式表 ：优点 书写方便；缺点 没有实现样式和结构相分离；使用情况 较少；控制范围 控制一个标签(少)。

内部样式表：优点 部分结构和样式相分离； 缺点 没有彻底分；使用情况 较多；控制范围 控制一个页面(中)。

外部样式表：优点 完全实现结构和样式相分离； 缺点 需要引入；使用情况 最多，推荐；控制范围 控制整个站点(多)。

四.id和class选择器

ID选择器：
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式，id 属性和身份证一样具有唯一性。

HTML元素以 id 属性来设置 id 选择器，CSS 中 id 选择器以 “#” 来定义。注意： id 属性不能以数字开头。

语法：
#id名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

class选择器：
class 选择器用于描述一组元素的样式，也叫做类选择器。

class 可以在多个元素中使用，并且一个元素也可以指定多个类名。

在 CSS 中，类选择器以一个点 “.” 号来定义。

同样的类名的第一个字符也不能使用数字。

语法：
.类名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

ID 选择器和类（class）选择器的区别：
相同点：
都可以应用于任何元素

不同点：
ID 选择器只能在文档中使用一次，而类选择器可以使用多次。
可以使用类选择器词列表方法为一个元素同时设置多个样式(也就是一个元素可以制定多个类名)，而ID只能指定一个。

五.CSS元素选择器

最常见的CSS选择器就是元素选择器，也就是标签选择器，也就是在HTML中元素的最基本的选择器。

语法：
标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }  或者
元素名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

标签选择器最大的优点是能快速为页面中同类型的标签统一样式，同时这也是他的缺点，不能设计差异化样式。

六.CSS背景(background)

background 属性用于定义 HTML 元素的背景。
定义元素背景效果的 CSS 属性有五种：

background-color          背景颜色
background-image          背景图像
background-repeat         背景图像设置水平或垂直平铺或不平铺
background-position       背景图像设置定位
background-attachment     背景图像设置固定或滚动
​
背景属性简写：
body{
    background:green url('images/fix.gif') no-repeat fixed 12px 24px;
}
当使用简写属性时，属性值的顺序依次为：
background-color --> background-image --> background-repeat --> 
background-attachment --> background-position

七.CSS外观属性

CSS文本格式主要分为：文本颜色(color)、文本对齐方式、文本修饰、文本阴影、文本缩进、文本间距、字间距、文本空白处理、文本转换。
​
文本对齐方式：text-align属性有四个值：left，center，right，justify(两端对齐)；属性默认值为auto。
文本修饰：text-decoration 属性用来设置或删除文本的修饰。

主要是用来删除超链接的下划线，也可以使用其他值来设置文本的修饰；

text-decoration:overline，设置文本上划线。

text-decoration:line-through; 设置文本中间划线。

text-decoration:underline; 设置文本下划线。
文本阴影：text-shadow: x y shadow color；

其中 x 是水平阴影的偏移值，

y 是垂直阴影的偏移值，

shadow 用于指定阴影的模糊值，即模糊效果的作用距离，不允许负值。

color 指定阴影的颜色。该属性有两个作用，产生阴影和模糊主体。
文本缩进：用来指定文本的首行缩进，允许为负值，如果值是负数，第一行则向左缩进。

CSS表示为：text-indent:2em，em 是相对文字大小的单位，1em 就是1个文字大小，2em 就是两个文字大小。
文本间距：行高，也就是文本行的高度。例如：line-height：22px;
字间距：letter-spacing 和 word-spacing 这两个属性都可用来增加或减少文本间的空白，即字间距。

不同的是：
letter-spacing 属性设置字符间距，而 word-spacing 属性设置单词间距。
注意：word-spacing 属性对中文无效，因此在设置中文的字间距时请使用 letter-spacing 属性。
letter-spacing 和 text-align：justify 是两个冲突的属性，不能同时使用；

text-align:justify 是设置内容根据宽度自动调整字间距，使各行的长度恰好相等，实现文本两端对齐效果，

而 letter-spacing 是指定一个固定的字间距。
文本空白处理：white-space 属性指定元素内的空白如何处理，默认值为 normal 空白会被浏览器忽略。
该属性还有4个值：

nowrap 文本不会换行，禁止换行，文本会在同一行上继续，直到遇到
标签为止。
pre 空白会被浏览器保留，这种方式类似 HTML 中的

 标签，用于定义预格式文本。

pre-wrap 指定保留空白符序列，但是正常地进行换行。

pre-line 指定合并空白符序列，但是保留换行符，并允许自动换行。

文本转换：text-transform 属性控制文本中的字母。

是用来指定在一个文本中的大写和小写字母，可用于将所有字句变成大写或小写字母，或每个单词的首字母大写。
text-transform:capitalize， 定义文本中的每个单词以大写字母开头。
text-transform:uppercase，定义文本仅有大写字母。
text-transform:lowercase，定义文本仅有小写字母。

八.​CSS链接

链接的四种状态是：

a:link - 正常，未访问过的链接。
a:visited - 已访问过的链接。
a:hover - 当鼠标滑动到链接上时。
a:active - 链接被点击的那一刻。

九.Css表格

表格边框： border
表格宽度和高度：width 和 height
表格对齐：text-align 和 vertical-align
表格内边距：tr,td的padding设置

<head>
   <style>
    #tab{
         width:50%;
         font-family:"微软雅黑";
        /*设置是否将表格边框合并为单一线条的边框*/
         border-collapse:collapse;
     }
     #tab th,#tab td{
          /*表格边框*/
          border:1px solid #7AC942;
          /*表格内边距*/
          padding:5px 10px;
     }
     #tab th{
           color:white;
           background-color:#9C3;
           font-size:1.125em;
           /*左对齐*/
           text-align:left;
           padding-top:4px;
           padding-bottom:8px;
     }
     #tab .list td{
           /*边颜色*/
           color:#000;
           /*背景颜色*/
           background-color:#FFC;
     }
     caption{
           margin-bottom:10px;
           font-weight:bold;
     }
   </style>
</head>
<body>
<table id="tab">
     <caption>食物类别</caption>
     <thead>
         <tr class="list">
            <th>粗粮</th>
             <th>蔬菜</th>
             <th>水果</th>
         </tr>
     </thead>
     <tbody>
         <tr>
             <td>大豆</td>
             <td>黄瓜</td>
             <td>香蕉</td>
         </tr>
         <tr class="list">
             <td>高粱</td>
             <td>菠菜</td>
             <td>柠檬</td>
         </tr>
         <tr class="list">
             <td>燕麦片</td>
             <td>白菜</td>
             <td>西瓜</td>
         </tr>
     </tbody>
</table>
</body>

十.字体（font）

font 属性可用于设置文本字体，定义样式，如加粗，大小等，属于复合属性，也叫做简写属性。

简写顺序：
font-style(字体样式) --> font-variant(字体变形) --> font-weight(字体加粗) --> font-size(字体大小)/line-height --> font-family(设置文本字体)
注意，font-size 和 font-family 的值是必需的，否则无效。
​
(1)是绝对或相对大小，可以使用px、em、%和em组合来设置。

使用px设置：通过像素设置文本大小是设置的整个页面。
使用em设置：1em等于当前的字体尺寸，比如设置的默认字体是12px，因此1em的默认大小就是12px。像素转换em：px/12 = em
使用%和em组合设置：在所有浏览器的解决方案中，设置 元素的默认字体大小是 100%，可以显示相同的文本大小，并允许所有浏览器缩放文本的大小。

<head>
    <style>
        body{font-size:100%}
        p{font-size:2.5em; }   /* 2.5*16=40px */
    </style>
</head>
<body>
    <p>使用%和em组合设置</p>
</body>

(2)font-style 属性主要用于指定斜体文字。
属性有三个值：

-normal正常显示文本
-italic 定义斜体
-oblique 定义倾斜的文字

十一.Css列表

作用：1 设置不同的列表项标记 2 设置列表项标记为图像
修改列表项标记使用 list-style-type，使用图像作为标记可以利用 list-style-image 属性完成。

无序列表：
无序列表经常用来做导航栏菜单，通常都需要隐藏无序列表项的标记，那么就使用 list-style-type:none，表示无标记。
list-style-type 属性的默认值为 disc 实心圆，即小黑点。除了无标记还可以修改标记，例如circle空心圆，square实心方块。
有序列表：
有序列表项标记默认使用数字样式显示，即 list-style-type:decimal。
图像作为列表项标记
要指定列表项标记的图像，可以使用 list-style-image 属性，只需要简单地设置一个 url() 值，就可以将图像作为标记类型。
列表属性简写：list-style：list-style-type，list-style-position，list-style-image;

十二.CSS 选择器

1 分组和嵌套选择器
-分组选择器

例如：h1{color:gray;}
      p{color:gray;}
可以写成：h1, p{color:gray;}

-嵌套选择器

.div1 p{
     color:white;
}
.div1 p a{
     color:yellow;
     font-weight:bold;
}
<div class="div1">
     <p>嵌套选择器
         <a href="#">深层嵌套选择器</a>
     </p>
</div>

通配符选择器

*{
       padding:0;
       margin:0;
}

2 属性选择器
-属性选择器：属性选择器使用[attr] ；例如：把所有带有 title 属性的元素的字体设置为红色

<head>
    <style>
        [title]{
            color:red;
        }
    </style>
</head>
<body>
    <h1>h1 标题不带有 title 属性</h1>
    <h2 title="标题">h2 可以设置样式</h2>
    <a href="#" title="链接">超链接可以设置样式</a>
</body>

-属性和值选择器：属性选择器使用[attr=value]

<head>
    <style>
        [title=Hello]{
            color:blue;
        }
    </style>
</head>
<body>
    <h1 title="Hello world">h1 标题 title="Hello world"</h1>
    <h2 title="Hello">h2 可以设置样式</h2>
    <a href="#" title="Hello">超链接可以设置样式</a>
</body>

-属性和多个值的选择器：使用有两种情况：属性值用空格分隔使用：[attr~=value]；属性值用连字符分隔则使用：[attr|=value]
例如：把包含 title=‘Hello’ 的元素的字体设置为绿色，使用 ~ 分隔属性和值

<head>
    <style>
        [title~=Hello]{
            color:green;
        }
        [lang|=zh]{
            color:gray;
        }
    </style>
</head>
<body>
    <h1 title="world">h1 标题 title="world"</h1>
    <h2 title="Hello">h2 可以设置样式</h2>
    <h3 title="Hello Web">h3 可以设置样式</h2>
    <a href="#" title="Hello world">超链接可以设置样式</a>
    <a href="#" lang="zh-TW">超链接可以设置样式</a>
</body>

-表单样式：属性选择器在为不带有 class 或 id 的表单设置样式时特别有用。

<head>
    <style>
        input[type="text"]{
            width:150px;
            display:block;
            margin-bottom:5px;
            background-color:yellow;
        }
        input[type="button"]{
            width:120px;
            margin-top:5px;
            background-color:green;
        }
    </style>
</head>
<body>
    <form name="input" action="demo.php" method="get">
        用户名：<input type="text" name="user" placeholder="请输入登录名">
        昵　称：<input type="text" name="name" placeholder="请输入角色名">
        <input type="button" value="查询">
    </form>
</body>

3 组合选择器：组合选择符是包括各种简单选择器的组合方式，组合选择符说明了两个选择器直接的关系。

后代选则器:又称为包含选择器，以空格分隔，子元素选择器只能选择作为某元素子元素的元素。
子元素选择器:子元素选择器只能选择作为某元素子元素的元素，以 > 分隔，子元素选择器只能选择作为某元素子元素的元素。
相邻兄弟选择器：可选择紧接在另一元素后的元素，且二者有相同父元素，以 + 分隔。
普通相邻兄弟选择器：选取所有指定元素的相邻兄弟元素，以 ~ 分隔。
选择器组合：多种选择器可以结合起来使用。

这是web前端的部分概念，由于篇幅关系，将在下一篇继续讲解！
#部分内容借鉴知乎内容
goodbye！！！