HTML、CSS、JavaScript初认识

前端：玩页面，浏览器访问页面直观能看到的所有效果都是前端实现

三大前端基石：HTML+CSS+Javascrip

HTML: 是页面的骨架

CSS：对页面进行修饰的

Javascript：脚本语言（对页面的动态效果实现+交互实现）

1、HTML重要标签   

h1-h6：标题层次

div：代表一个区域，用于把页面划分为很多个小区域单独放置内容

Table->tr(行)->td(列)：重点colspan和rowspan跨行跨列，作用可以用来布局（不建议）

input：表单内容标签，通过type来区别，有输入框、按钮、文件选择器等

A：超链接标签,<a href=””></a>

Img:图片标签,单标签<img src="">

清单：ol(有序清单、自动生成序号)、ul(无序清单、自动生成点)、li(清单里面的项)

2、CSS

2.1样式基本格式

a) 行内格式：直接把样式编写到标签里面

i. 问题：编写麻烦、页面标签复杂、复用性不强

ii. 不推荐写

b) 内联样式：通过html页面的style标签，把样式添加上去

i. 格式：style标签的方式嵌入样式

 

ii. 优势：css和html相分离，调试和优化方便

iii. 嵌入html文件进行编写，会影响html文件的篇幅，导致html文件篇幅过长

c) 外联样式：通过css文件的方式对标签进行样式设置

i. 新建一个文件后缀名为.css的文件

ii. 关联外部css文件，用link标签

2.2选择器

a) 作用：样式和标签关联的操作

b)  用选择器给标签添加样式格式：选择器{样式名：样式值；样式名：样式值；......}

c) 选择器分类：

i. 标签选择器

1. 格式：标签名{样式}

2. 多选择：可以同时选择标签名相同的多个

ii. Class选择器

1. 格式：.类名{样式}

2. 多选择：可以同时选择指定类名的多个标签

iii. Id选择器

1. 格式：#类名{样式}

2. 单选择：id名不能重复

iv. 复合选择器

1. 并集选择：同时选中多个选择器类型的标签

a) 选择器1,选择器2,选择器3{样式}

2. 后代选择：根据父元素直接找到子元素

a) 选择器 选择器1 选择器2{样式}

b) 后代和儿子

3. 超链接选择：默认效果、鼠标移动上去效果、访问过后的效果

a:link{}

a:visited{}

a:hover{}

a:active{}

记忆方式：love hate  顺序不能变,但可以单写其中一个

注意：做选择，如果是样式选择，一般不会用id，id主要是用于js里面用，样式选择一般使用class来做标识

4、样式属性分析

span标签，主要是用于括一段文本

a) 字体样式

i. 对页面中的字体进行设置样式

ii. Font-size  font-family  font-weight(字的宽度)

b) 背景设置

i. 背景颜色设置：background-color

ii. 背景图片设置：background-image   background-size  background-repeat

c) 文本属性

行高：line-height(可调整文本的纵向位置,设置与父盒子高度一样时文本纵向居中)

d) 盒子属性

i. 在前端页面设计中，记住所有的元素都是一个盒子（每一个div就是一个盒子）

ii. 盒子包含属性：宽度、高度、颜色、内边距、外边距

iii. 宽度：width，高度：height

iv. 边框：border、border-top、border-left、border-right、border-bottom

v. 内边距：padding、padding-top、padding-left、padding-right、padding-bottom

                           内边距的改变会影响盒子的大小

vi. 外边距：margin、margin-top、margin-left、margin-right、margin-bottom

e) 定位

   position：绝对absolute、相对relative、固定fixed、默认static      

        固定定位：以浏览器进行定位

        相对定位：相对于当前元素的当前位置进行定位（影子移动：意思是该元素还是占有着原来的位置,但是显示上是移动了，显示所在的位置不占位置，即后来元素可以放置在该显示所在的位置），做位置微调的时候使用

        绝对定位：相对于父元素(不一定是直接父元素,爷爷、太爷爷..)中有定位的元素进行偏移，子绝父绝/子绝父相

   注意：定位（ position属性为absolute、relative、fixed中的一个）之后就可以用Left 和 top 属性来改变元素的位置,Left和top属性：用于 已经定位 了的盒子进行位置的移动

   浮动：float可使元素在一行中按左排列或右排列(left、right)。在父亲盒子里面进行浮动的

注意点：

1、如果设置了盒子的边框或者padding区域，一定要相应的减小盒子的宽高值

宽度高度值取值方式：像素取值法、百分数取值

3、JavaScript

  3.1JavaScript编码规范

   行内格式：直接编写到标签当中

   内部js编码格式：<script type="text/javascript">

             alert(1);

           </script>

            多个script标签区域内容是可以互相引用的

   外部js编码格式:html文件引入外部js文件<script language="JavaScript" src="test.js">

注意：不管是内部js编码格式的javascript代码块或者是外部js编码格式的引入.js文件代码，放在页面HTML文件的任何位置放置都行，但位置最好放置在body标签的最后，因为JavaScript主要的作用是操作页面里面的标签，而页面的HTML文件是被浏览器从前往后一行一行解析的，所以放在body标签后面是为了等HTML文件中的所有标签被解析完

  3.2JavaScript基本语法

   变量基本定义格式：var 变量名 = 值

   注释写法：单行注释以双斜杠开头：//

   多行注释以单斜杠星号开头，以星号单斜杠结尾：/*......*/

   函数定义的基本格式

    方式一：function 函数名(参数列表){函数体}

        无需定义返回类型，如果有返回值直接在函数体中return

    方式二：var 变量名 = function(参数列表){函数体}

    方式三：var 变量名 = new Function(参数1,参数2,函数体);(不推荐使用)

        方法的最后一个参数是函数体，之前是可变参数，可以传递任意多个参数

 

    Js中，方法体是作为一个独立的部分代码内容，可以随意赋值

     例：var test;
       test = function(){
             alert("又是一段文本");
           }

       var test1 = test;
       alert(test1);

     这里”=“号后面的function被当成了一串字符赋给了test,test又赋给了test1 *?

     运行结果:

         

   js中的数据类型：

     5大原始数据类型：undefined、null、boolean、number 和 string

     1大复杂数据类型：object

4、样式属性分析