入门代码，前端布局+填内容+定位页面实现！！!

环境：JDK 8

软件：VsCode Setup .x64.58.2.exe

1、计算机基础知识

1.1进制转换

记住：

8位无符号二进制： 0-255

16位无符号二进制：0-65535

32位无符号二进制：0-4,294,967,295

有符号：-2147483648~2147483647

各种进制转十进制：位*权再相加。

十进制转二进制：

不熟练的时候：短除以2，逆序取余

熟练：直接用位权去逼近

十进制转8进制：

短除以8，逆序取余

232 ---》8进制----》350

二进制转8,16进制---》从低位开始，每3（4）位分隔成一个单元，分别转为8（16）进制

8（16）进制转二进制---》每个数值分别转为3（4）位的二进制即可，特别注意如果不足3（4）位高位补0

323---》11，010，011

1.2 四则运算（+  -  *  /  %）

在计算机中，所有的运算都是转换为+法运算

例如：53+29

  110101
+  11101
 1010010
 
   110101
 -  11101
    11000
    
   110101
 *  11101
  
  
   110101
 /  11101

1.3原码反码补码

正数：原码=反码=补码

负数：

原码：符号位+真值

反码：符号位不变，其余位取反

补码：反码+1

计算中的数值都是以补码的形式存在的。

例如：

29   00011101
    
    -29  :  10011101---原码
            11100010---反码
            11100011---补码
        
        -29 + 33 = ?
        11100011
      + 00100001
        
        
        -33+29=?
        10100001-->11011110-->11011111
                           +  00011101
                              11111100--->11111011(反码)-->10000100(原码)
        
   正数的补码=原码
               01111111   127
               ........
               00000010
               00000001
        0的补码:00000000
       -1的补码:11111111
       -2的补码:11111110
       -3的补码:11111101
           ....
     -127的补码:10000001
     -128的补码:10000000
         
         16位的二进制补码的范围是多少？
               10000000....000~0111....111
                    -32768~32767
         32位的二进制：
             100...0000~011...111
                 -2147483648~2147483647

2、简单页面搭建

网站===后台+前端

前端：客户所见

后台：数据库，服务器，给前端提供数据的

java,c#

开发岗 = 前端+后台

前端岗位 == 静态页面==html

easyUI+jquery+vue

前端页面嵌入后台代码 jsp

ajax 前端页面和后台代码分开 （仍然在一个项目中）

vue 前后端分离开发--java 天大的福音

html+css+js

html: 内容 一个人

css:样式 一个化了妆的人

js:动效  画了妆这个人所作出的行为

所需软件：

前端的原理简单的就是你想展示什么内容，用前端的代码写出来，交给浏览器去解释，浏览器渲染你的页面。

前端的开发实际上就是写一个文本文件，只是这个文件按照前端的规范来写，写完了之后浏览器能认识。

txt, 工具的使用是帮助我们提高开发效率。

dreamweaver --- 织梦

webstorm ---- idea

HBuilder --- 利器

vscode --- vue

idea ,eclipse

2.1第一个html页面

   
       
   
   
        这是我的页面内容
   

注意：

html 全称叫超文本标记（标签语言）

HYPER TEXT MARKUP LANGUAGE

超文本：不只是文本，还有图片，声音

标记（标签）：所有的元素都是用标签的形式展示的

html中的标签分为单标签和双标签

  ：单标签

标记不能乱标记，改写什么标签，w3c制定了标签的标准。

.HTML 教程3

3.html的基础标签

3.1 head里面能写的标签

title：页面标题标签

link标签来加入logo图片，注意图片必须是16*16的倍数

3.2 简单标签

h1-h6:文本标题标签

p:段落标签

br：换行标签

hr：水平线

center:居中标签

strong和 b：都是加粗 表现形式完全一样，但是有区别，区别在爬虫看的时候，如果是strong标签，爬虫认为这个单词是关键字，b标签的内容权重是一样的

em和 i: 都是倾斜，em有语义，i没有语义

©  版权符号
    空格
"    引号
>     大于符号
<     小于符号 
.......

其他特殊符号自己了解一下即可。

3.3 图片标签

 
src:路径
alt:展示不出来的时候显示的内容
title:鼠标悬浮的内容
width:宽度--注意百分比的情况
height:高度

3.4 超链接标签

a标签：

做跳转，页面间跳转

三种跳转：

1.页面间链接

由一个页面跳转到另外的页面，可以是本页面，也可以是别人网站的页面。

百度一下
千锋
    href:目标文件路径
    target:目标文件的打开位置
​

2.锚链接 -- anchor

3.先设计一个锚点

再使用#跳转到指定锚点

锚点不一定必须是a标签，如果你用a标签做锚点，name属性就可以跳转

如果是其他标签做锚点，需要用id属性

功能性链接

比如我们点击超链接打开一个QQ

联系客服

6、列表标签

ul-li：无序列表

ol-li：有序列表

dl-dt-dd：定义列表

定义列表主要用在图文混排

作业：
    1、在页面上展示了一张图片，点击图片不同的地方，跳转到不同的页面。
​
    2、完成一个资源管理器
    
    3、请查资料完成在页面上展示一个音乐和视频