web - 前段三剑客

目录

前言

一. HTML

常用标签演示

图片标签

​编辑

表格标签(重点)

​编辑

表单标签 (重点)

布局标签 

其余标签

二. CSS

2.1 . css的三种引入方式

2.2 . 三大选择器

 2.3 . css样式 - 浮动 

2.4 . css样式 - 定位

 1.static

2.absolute(绝对位置)

3.relavite(相对于元素原本的位置)

4.fix(相对位置,相对与浏览器窗口) 

2.5 . css样式 - 盒子模型

三.JavaScript

1.简介

2.js引入方式

3. js基础语法

 4.js对象

---

前言

大家好,今天也是展开了一个新的篇章,这篇博客主要讲解的是web前端的三大得力干将,分别是HTML,CSS,JavaScirpt,我们将之称为前端三剑客

---

一. HTML

• HTML(HyperText markup Language) 超文本标记语言
  • 超文本: 超越了文本的限制,比普通文本更加强大。除了文字信息，还可以定义音频，视频等
  • 标记语言：由标签构成的语言

在学习HTML之前，我们有必要了解一些专业的名词

1. 标签（tag）：HTML中的标签是用来定义和包裹不同类型内容的元素。标签通常由尖括号包围，如。例如，

   标签用于定义段落，标签用于定义图像。

2. 属性（attribute）：HTML标签可以包含属性，属性提供了关于元素的额外信息。属性通常以键值对的形式存在，写在标签的开始标记中。例如，中的href就是一个属性，它指定了链接的目标地址。

3. 文本（text）：HTML标签中的文本是指标签包含的内容。例如，

   Hello, World!

   中的"Hello, World!"就是文本。

4. 元素（element）：元素是指标签、属性和文本的整体组合。一个完整的HTML元素包括开始标记、结束标记和其中的内容。例如，

   Hello, World!

   就是一个完整的段落元素，其中包含了

   开始标记、文本内容"Hello, World!"和

   结束标记。

• 常用标签:
  • ：定义HTML文档的根元素。
  • ：定义HTML文档的头部，包含了一些元数据，如标题、样式表等。
  • 用户名
    密码
    姓名 男 女
    爱好 篮球 足球 羽毛球
    
    籍贯 北京 上海 深圳 -请选择-

    

    二. CSS

    CSS 层叠样式表(英文全称：(Cascading Style Sheets) 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力 ,简单来说,美化页面

    

    2.1 . css的三种引入方式

    CSS样式可以通过以下方式应用到HTML文档中：

    • 内联样式：直接在HTML元素的style属性中指定CSS样式。
    • 内部样式表：在HTML文档的标签中使用

      

      2.2 . 三大选择器

      ---

       2.3 . css样式 - 浮动 

      我们先来引入一个需求,然后在进行问题分析,最后引出浮动

      css 代码,简单定义了几个div

         

         

         

         

         

             

      div1

             

      div1

             

      div1

         

         

       浏览器展示

      

      现在我们的需求是将这三个div放在同一行

      这里我们介绍一个css样式

      display: inline; /* block表示块 inline表示行 */

      但是当我们实施之后就会发现

      

      如果我们将div设置为行内属性,那么它就失去了进行宽高设置的属性,由此我们引出浮动

      CSS 的 Float（浮动）使元素脱离文档流，按照指定的方向（左或右发生移动），直到它的外边缘碰到包含框或另一个浮动框的边框为止。

      

      

      

      

      如果我们让块div1向右浮动 在div的class样式中加上 float: right;

      

      由于div1向右浮动,div1腾出的位置会被div2占据,此时我们将div2同样是设置为向右浮动 float: right;

      

      接下来即使是将div3同样设置为向右浮动,画面大家应该不难猜出,这个结果已经和我们想要的结果非常接近了,我们想要的是靠右对齐!那么我们应该怎么设置浮动?

      既然向右浮动行不通,我们来试试向左进行浮动,死马当活马医吧

      

      把div2给搞没了? 其实并不是,浮动会脱离文档,如果我们把div1设置为浮动,那么div2就会替代div1原来的位置,碰巧的是此时div1也在原来的位置,div1直接把div2进行覆盖,效果就像是在原来的是图上行添加了一个图层一样

      不难想到,如果我们将div2设置为浮动会发生什么,结果是div3被div1覆盖,看结果

      

      这里有人可能就会问了,那个div3文本怎么没有上去? 在这里我们需要知道

      浮动设计的初衷为了解决文字环绕图片问题，浮动后一定不会将文字挡住，这是设计初衷。

      文字一定会被挤出来,不可能会被挡住!

      ok啊,我们将div3设置为想左浮动

      

       完美收工!

      ---

      2.4 . css样式 - 定位

      • 这个属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。

      • 元素可以使用的顶部，底部，左侧和右侧属性定位。然而，这些属性无法工作，除非是先设定position属性。他们也有不同的工作方式，这取决于定位方法。

      

      我们依然按照上面的那个例子,稍微做一些改动

         

         

         

         

             

      div1

             

      div2

             

      div3

         

       1.static

      • 说明

        • 不设置的时候的默认值就是static，静态定位，没有定位，元素出现在该出现的位置，块级元素垂直排列，行内元素水平排列

      块级元素垂直排列

      

      行内元素水平排列 display: inline;

      

      2.absolute(绝对位置)

      • absolute ,通过 top left right bottom 指定元素在页面上的固定位置

      • 定位后元素会让出原来位置,其他元素可以占用

      

      

      3.relavite(相对于元素原本的位置)

      

      

      
      4.fix(相对位置,相对与浏览器窗口) 

      

      

      ---

      2.5 . css样式 - 盒子模型

      • CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距（margin），边框（border），填充（padding），和实际内容（content）

      • 

      • 说明：

        • Margin(外边距) - 清除边框外的区域，外边距是透明的。

        • Border(边框) - 围绕在内边距和内容外的边框。

        • Padding(内边距) - 清除内容周围的区域，内边距是透明的。

        • Content(内容) - 盒子的内容，显示文本和图像。

      

       我们依然拿我们上面的案例来举例

      来我们让div1这个盒子和左右上都留出十个像素的空间

      

      

       这就是外边距

      那么内边距呢?

      

      内边距是指边框到内容的距离,但是内边距不会侵占内容,所以div2变大了一圈

      假如我们想让最外面的容器居中放置

      

       

      ---

      三.JavaScript

      1.简介

      

      Javascript是一种由Netscape(网景)的LiveScript发展而来的原型化继承的面向对象的动态类型的区分大小写的客户端脚本语言，主要目的是为了解决服务器端语言，遗留的速度问题，为客户提供更流畅的浏览效果。当时服务端需要对数据进行验证，由于网络速度相当缓慢,只有28.8kbps，验证步骤浪费的时间太多。于是Netscape的浏览器Navigator加入了Javascript，提供了数据验证的基本功能。ECMA-262 是正式的 JavaScript 标准。这个标准基于 JavaScript (Netscape) 和 JScript (Microsoft)。ECMA-262 的开发始于 1996 年，在 1997 年 7 月，ECMA 会员大会采纳了它的首个版本。这个标准由 ECMA 组织发展和维护。JavaScript 的正式名称是 "ECMAScript"。JavaScript的组成包含ECMAScript、DOM、BOM。JS是一种运行于浏览器端上的小脚本语句,可以实现网页如文本内容动,数据动态变化和动画特效等,JS有 如下特点

      • 脚本语言

        • JavaScript是一种解释型的脚本语言。不同于C、C++、Java等语言先编译后执行, JavaScript不会产生编译出来的字节码文件，而是在程序的运行过程中对源文件逐行进行解释。

      • 基于对象

        • JavaScript是一种基于对象的脚本语言，它不仅可以创建对象，也能使用现有的对象。但是面向对象的三大特性：『封装』、『继承』、『多态』中，JavaScript能够实现封装，可以模拟继承，不支持多态，所以它不是一门面向对象的编程语言。

      • 弱类型

        • JavaScript中也有明确的数据类型，但是声明一个变量后它可以接收任何类型的数据，并且会在程序执行过程中根据上下文自动转换类型。

      • 事件驱动

        • JavaScript是一种采用事件驱动的脚本语言，它不需要经过Web服务器就可以对用户的输入做出响应。

      • 跨平台性

        • JavaScript脚本语言不依赖于操作系统，仅需要浏览器的支持。因此一个JavaScript脚本在编写后可以带到任意机器上使用，前提是机器上的浏览器支持JavaScript脚本语言。目前JavaScript已被大多数的浏览器所支持。

      ---

      2.js引入方式

      方式一: 内嵌式

         

         

         

         

         

           

         

         

          点我啊,笨蛋

      

      方式二:  引入外部脚步文件(利用代码的复用)

      

      通过script标签内部的src属性可以指定要引入的脚本,通过type属性指定引入的脚本的文件类型

       

       总结

      

      3. js基础语法

      书写语法

      

       

      变量 

      

      数据类型&运算符 

      

      

       

       函数

      

       4.js对象

      Array对象

      

       

      字符串对象 

      

      自定义对象 

      

      json对象 

      

      

       

      bom对象 

      

      

       dom对象