一、前端开发介绍

  1. 作为B/S开发系统，将服务器部署在远程，用用户的操作应用在浏览器端，浏览器操作就要求用户打开的是浏览器，操作的是浏览器，前端开发的核心就是针对浏览器解析文件。
  2. 浏览器能够识别的文件叫做HTML文件，HTML文件是以.html为后缀的文件，会将文件中的代码进行解释。
  3. 前端的事例代码如下：
  1. <html>
  2.     <head>
  3.         <title>开启前端</title>
  4.         <meta charset = "utf-8">
  5.     </head>
  6.     <body>
  7.         这是我的第一个网页。其实很简单
  8.     </body>
  9. </html>

对上面的代码进行解释：

1）HTML的代码称为超文本标记语言，因为浏览器对编写的代码进行逐行解释，并将解释之后的效果展示在前端，供用户使用

2）标记（标签）：在两个尖括号中间，添加定义好的指定单词或者单词组合，称为标记。标记又分为开始标记和结束标记，带斜杠的称为结束标记。标记又分为单标记和双标记。

3）html标签：表示整个网页的开始标签

4）head标签：网页的头标签，该标签之间用来设置全局属性值、引入其他的依赖文件（比如：css文件，js文件），设置页面的标题

5）title标签：用来设置网页的标题内容，属于双标签

6）body标签：网页内容部分的标签

二、前端开发的三要素

2.1 文本标签

  1. 1、在HTML中，可以处理文本的标签:<font>需要修改的文本</font>
  2.     改变文本的字体大小，需要在font中再添加属性，size的取值范围：1-7整数：<font size = "5"></font>
  3.     改变文本的字体颜色，需要再font中添加属性color：<font color = "red"></font>
  4.     改变字体的样式，需要在font标签中添加属性face,默认微软雅黑：<font face = "楷体"></font>
  5.     也可以将三个属性同时使用:<font color = "red" size = "5" face = "宋体"></font>
  6. 2、在HTML中，处理其他文本属性的标签：
  7.     文本加粗：<b></b>
  8.     文本斜体：<i></i>
  9.     下划线：<u></u>
  10.     段落:<p></p>
  11.     标记文本：<span>标记</span>
  12. 3、标题标签
  13.     <h1>一级标题</h1>
  14.     <h2>二级标题</h2>
  15.     <h3>三级标题</h3>
  16.     <h4>四级标题</h4>
  17.     <h5>五级标题</h5>
  18.     <h6>六级标题</h6>

2.2 图片

  1. 在网页上展示一张图片，图片来源可以是网络来源，可以是本地工程来源，前端代码不能直接访问硬盘中的数据。

  2. 路径问题：
    1）绝对路径：以HTTP或者HTTPS开头的网络资源路径，能够定位到唯一主机的网络资源路径，称为绝对路径。
    2）相对路径：将图片存储在本地工程里面，通过当前html文件的位置为中心，去找到相对的图片位置路径，如果图片和当前的html文件在同一个目录下:文件夹名称/文件名称.后缀即可。如果图片资源和当前的代码不在同一个目录下，需要用路径：../文件夹名称/文件名称 .后缀;

  3. 图片的标签:

  1. 图片标签：<img src = "图片的路径" />
  2. 图片的其他属性：
  3. 1、设置图片的大小：width和height，一般情况下，width和height两个属性设置其中一个即可，另外一个等比例的缩放
  4. 2、设置图片的提示语：title，如果是标签表示设置网页的标题，如果放在img标签里面，作为图片的提示属性
  5. 3、当图片加载不出来的时候，给用户的提示，alt

2.3 超链接

  1. 超链接的作用：从一个网页跳转到另外一个网页的技术

  2. 使用的标签：

  1. 超链接标签:<a href = "新页面地址">文本/图片</a>
  2. 相关属性：
  3.     <a href = "新页面地址" target = "_blank">内容</a>

三、表格布局

  1. 表格：在浏览器的网页上布局表格，可以通过在表格中放入文本、图片和超链接等内容实现布局。
  2. 表格的相关标签：
  1. 1、表格标签：<table>
  2. 相关属性：
  3.     1）border:表示显示表格的边框宽度
  4.     2）cellspacing:表示单元格与单元格之间的间距
  5.     3）width和height:设置单元格的大小
  6.     4）align:表示移动整个表格的位置，只有三个：left、center和right
  7.     5）bgcolor:设置表格的背景颜色
  8.     6）background：设置表格的背景图片
  9. 2、表示行的相关标签：<tr>
  10. 相关属性：
  11.     height:设置整行的单元格高度
  12.     bgcolor:背景颜色。只能设置这一行的背景颜色
  13.     align:将该行的单元格中的内容水平居中
  14. 3、表示单元格的相关标签：<td>
  15. 相关属性：
  16.     width和height：表示设置单个单元格的宽度和高度，设置高度一行的单元格高度都会一致，因此只需要修改每一行的第一列高度即可，设置宽度只需要设置第一行的单元格即可。
  17.     bgcolor：设置指定单元格的背景颜色
  18.     background：设置单个单元格的背景图片
  19.     align：表示设置单元格中内容的水平剧中
  20. 4、合并单元格
  21.     colspan：合并列的属性
  22.     rowspan：合并行的属性

一、css层叠样式表

1.1 css的概念

  1. 概念：css简单理解，将前端html代码设置标签的样式做一个抽取，抽取成样式表（将所有的可以设置属性的名词及其作用归纳到一个表中），所有的前端标签表现层面的样式全部交给css样式表进行设置，不再需要单独的属性值设置了。

1.2 css常用样式表

  1. 一、整体距离相关
  2.     1、width:宽度，像素单位
  3.     2、height:高度，像素单位
  4.     3、border:1px red solid；表示一起作用在边框上
  5.     4、margin:外边距（四个上、下、左、右）
  6.     5、padding:内边距（四个上、下、左、右）
  7.     6、box-sizing: border-box;和内边距一起使用
  8. 二、文本字体相关
  9.     1、color:设置字体的颜色
  10.     2、font-size:设置字体的大小
  11.     3、font-family:设置字体的样式
  12.     4、font-weight:设置字体的加粗
  13.     5、font-style: italic;设置字体的斜体
  14.     6、line-height:设置文本垂直居中（单行）
  15.     7、text-align:center:设置文本在div中的位置
  16. 三、背景相关：
  17.     1、background-color:设置背景颜色
  18.     2、background-image: url(../img/4.jpg);设置div中的背景图片
  19. 四、和定位相关：
  20.     1、position: fixed;
  21.     2、right: 0px;
  22.     3、top: 300px;
  23.     上面三个一起使用，完成在屏幕的绝对定位
  24.     4、position: absolute;
  25.     top: 150px;
  26.     left: 250px;
  27.     上面三个一起使用，完成相对于父容器的绝对定位
  28.     opacity: 0.1;设置透明度

1.3 css的使用

  1. 内联样式（不推荐）
    1. 要求：将标签中的其他表现属性去掉，再在标签中添加属性style = "css样式名称:值;css样式名称:值";
    2. 比如：
    3. <img src = "图片路径" style = "width:100px;height:100px" />
  1. 内部方式
    选择器：为了将标签继续简单化，在标签中不写css的样式属性，将css的样式属性提取到style标签里面，然后使用选择器将标签和css属性进行关联。
    常用选择器：
    1）id选择器
    1. id选择器的语法：
    2. #id选择器名称{
    3.  css样式属性;
    4. }
    5. id选择器需要在标签中引用：
    6. <标签 id = "选择器名称"></标签>
    7. 要求：在style标签中定义的id选择器，只能在body标签中使用一次。（和js中的dom有关）


2）class选择器

  1. class选择器的语法：
  2. .选择器名称{
  3.     css样式属性;
  4. }
  5. class选择器需要在标签中引用：
  6. <标签 class = "选择器名称"></标签>
  7. 如果是class选择器，那么一个class选择器可以在多个标签中使用


3）标签选择器

  1. 标签选择语法：
  2. 标签名称{
  3.     css样式属性;
  4. }
  5. 要求：标签名称必须是下面body代码中定义过的标签名，那么就可以直接根据标签名称进行关联，不需要在标签中再进行调用。


4）组合选择器

  1. 组合选择器的语法：将上面的三种类型的选择器，组合一起使用，前面的选择器用于筛选范围，最后一个选择器用于选定要作用的css标签
  2. 举例:
  3. #tab1 td{
  4.     css属性；
  5. }
  6. 解释：作用是先将使用过#tab1的标签及其子标签范围全部筛选出来，再将这个范围内的所有的td标签作用css效果


5）伪类选择器

  1. 伪类选择器语法：
  2. 选择器:hover{
  3.     css样式属性;
  4. }
  5. 不需要调用
  1. 外部引用
    外部引用和内部方式写法一模一样，只是将style标签中的内容抽取成一个单独的.css文件，在html文件中引入即可
    1. <link href = "css文件的路径" rel= "stylesheet">

二、DIV盒模型

2.1 概念

  1.   1. 盒模型：作用是将页面进行分割，相当于页面的容器，div是用来存放页面的内容的，比如：文字、图片和表格等数据，接下来就是通过div进行页面的布局

2.2 盒模型的间距

想要移动div的位置，可以通过设置div的外边距实现，外边距：边框到边框之间的举例

  1.   1. 外边距图示：

前端开发介绍 - 图1

  1. 内边距：div盒模型中的内容到边框的距离称为内边距

前端开发介绍 - 图2

2.3 div中文本处理

div中的文本处理主要包括：字体大小、字体颜色、字体样式、加粗、斜体、垂直居中和水平居中

2.4 绝对定位

  1. 相对于屏幕的绝对定位
  1. /*设置绝对定位：相对于屏幕的绝对定位*/position: fixed;right: 0px;top: 300px;
  1. 相对于父容器的绝对定位,要求：子标签和父标签都必须加上position：absolute，如果不加，则按照body进行定位
  1. /*设置相对于父容器的绝对定位*/position: absolute;top: 150px;left: 250px;

2.5 设置透明度

  1. //使用css属性：opacity: 0.1;取值范围0-1，取值越小，透明度越高。

三、表单

3.1 表单的 标签及属性

  1. <html>    
  2.     <head>    
  3.         <meta charset="utf-8">    
  4.         <title>表单</title>
  5.     </head>    
  6.     <body>    
  7.         <form>    
  8.             电话：<input type = "text" id = "" name = "" maxlength="7" placeholder="请输入电话号码" /><br />    
  9.             密码：<input type = "password" id = "" name = "" /><br />            
  10.             性别：            
  11.             <input type = "radio" id = "" value = "" name = "gender" />男        
  12.             <input type = "radio" id = "" value = "" name = "gender" />女    
  13.             <br />        
  14.             兴趣爱好:    
  15.             <input type = "checkbox" checked="checked" name = "" value = "" id = "" />爬山
  16.             <input type = "checkbox" name = "" value = "" id = "" />游泳        
  17.             <input type = "checkbox" name = "" value = "" id = "" />拍照    
  18.             <br />        
  19.             所在城市：        
  20.             <select>            
  21.                 <option value = "">重庆</option>        
  22.                 <option value = "" selected="selected">上海</option>        
  23.                 <option value = "">广州</option>            
  24.                 <option value = "">深圳</option>        
  25.             </select>        
  26.             <br />        
  27.             个人简介：<br />    
  28.             <textarea rows="10" cols="100">        
  29.             </textarea>    
  30.         </form>    
  31.     </body>
  32. </html>

3.2 列表

  1. <!--无序列-->
  2. <ul>    
  3.     <li>1</li>
  4.     <li>2</li>    
  5.     <li>3</li>    
  6.     <li>4</li>
  7.     <li>5</li>
  8. </ul>
  9. <!--有序列-->
  10. <ol>    
  11.     <li>A</li>    
  12.     <li>B</li>    
  13.     <li>C</li>
  14.     <li>D</li>
  15. </ol>

四、选择器补充

  1. 1、.class选择器.class选择器：选择出同时使用两个选择器的标签
  2. 2、选择器1,选择器2：选择出只要使用了选择器1或者选择器2的标签
  3. 3、*：表示全局选择器，将所有的标签都选择上
  4. 4、选择器1>选择器2：找出一个父标签中符合要求的子标签（符合要求：使用了指定的选择器标签或者是标签名）
  5. 5、选择器1+选择器2：找出指定标签紧邻的下一个标签是否满足要求，如果满足，则被选择
  6. 6、选择器1~选择器2：找出指定标签后面的符合要求的标签
  7. 7、标签[属性名]:找出带有指定属性名称的标签
  8. 8、标签[属性名=属性值]:找出带有指定属性，并且属性名等于指定值的标签
  9. 9、标签[属性名~=词组]：找出具有指定属性名并且属性值包含指定的词组的标签
  10. 10、标签[属性名^=字符串]：找出具有指定属性名并且属性值以指定字符串开头的标签
  11. 11、标签[属性名$=字符串]：找出具有指定属性名并且属性值以指定字符串结尾的标签
  12. 12、标签[属性名*=字符串]：找出具有指定属性名并且属性值包含特定的字符串的标签
  13. 13、:first-child找出作为该父标签下的第一个子节点的标签
  14. 14、:last-child找出作为该父标签下的最后一个子节点的标签
  15. 15、nth-child(2)找出作为该父标签下指定的第几个子节点标签，计数从1开始