网站建设公司哈,上海模板网站公司,自动化培训机构排名,wordpress与微信连接数据库目录
前言
一. HTML
常用标签演示
图片标签
编辑
表格标签(重点)
编辑
表单标签 (重点)
布局标签
其余标签
二. CSS
2.1 . css的三种引入方式
2.2 . 三大选择器 2.3 . css样式 - 浮动
2.4 . css样式 - 定位 1.static
2.absolute(绝对位置)
3.relavite(相…目录
前言
一. 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之前我们有必要了解一些专业的名词 标签tagHTML中的标签是用来定义和包裹不同类型内容的元素。标签通常由尖括号包围如tagname。例如p标签用于定义段落img标签用于定义图像。 属性attributeHTML标签可以包含属性属性提供了关于元素的额外信息。属性通常以键值对的形式存在写在标签的开始标记中。例如a hrefhttps://www.example.com中的href就是一个属性它指定了链接的目标地址。 文本textHTML标签中的文本是指标签包含的内容。例如pHello, World!/p中的Hello, World!就是文本。 元素element元素是指标签、属性和文本的整体组合。一个完整的HTML元素包括开始标记、结束标记和其中的内容。例如pHello, World!/p就是一个完整的段落元素其中包含了p开始标记、文本内容Hello, World!和/p结束标记。
常用标签: html定义HTML文档的根元素。head定义HTML文档的头部包含了一些元数据如标题、样式表等。title定义网页的标题显示在浏览器的标题栏上。body定义HTML文档的主体部分包含了网页的内容。h1-h6定义标题h1为最高级别的标题h6为最低级别的标题。p定义段落。br: 换行ul定义无序列表。ol定义有序列表。li定义列表项。a定义超链接可以跳转到其他网页或者页面内的位置。img定义图像可以在网页中插入图片。table定义表格。tr定义表格行。td定义表格单元格。form定义表单用于用户输入和提交数据。input定义表单中的输入字段如文本框、复选框、单选按钮等。textarea定义多行文本输入框。button定义按钮。div定义文档中的一个区块或容器。span定义文档中的一个行内元素。
常用标签演示 图片标签 表格标签(重点) 上面的一个案例中使用了部分css样式,大家不必在意,后面我会一一讲到
值的一提的是thead,tbody,tfoot标签可以省略不写,如果三个标签全部省略不写,那么浏览器在解析html页面时,会将所有的tr标签包裹在tbody标签中,如果不需要指定表格头和表格尾,大家完全可以将这三个标签省略掉
表格的跨行和跨列 表单标签 (重点) form标签,表单标签,其内部用于定义可以让用户输入信息的表单项标签 action, form标签的属性之一,用于定义信息提交的服务器的地址 method, form标签的属性之一,用于定义信息的提交方式 get get方式, 数据会缀到url后,以?作为参数开始的标识,多个参数用隔开 post post方式,数据会通过请求体发送,不会在缀到url后 input标签,主要的表单项标签,可以用于定义表单项 name, input标签的属性之一,用于定义提交的参数名 type, input标签的属性之一,用于定义表单项类型 text 文本框 password 密码框 submit 提交按钮 reset 重置按钮
在HTML中有多种标签可用于创建表单项form element以下是一些常用的表单项标签 input用于创建各种类型的输入字段例如文本输入框、密码输入框、单选按钮、复选框等。type属性用于指定输入字段的类型。 textarea用于创建多行文本输入框。 select用于创建下拉选择框可以与option标签一起使用来定义选项。 label用于创建标签文本通常用于与输入字段关联通过for属性指定关联的字段的id。 button用于创建按钮可以用于提交表单或执行其他操作。 fieldset用于创建一个字段集合可以将相关的表单项组织在一起。 legend用于为fieldset元素定义标题。 input typefile用于创建文件上传字段。 input typecheckbox用于创建复选框。 input typeradio用于创建单选按钮。
这些标签可以根据需要进行组合和嵌套以创建各种类型的表单项。通过合理地使用这些标签可以构建出功能完善、易于使用的表单。
案例 此时的提交方式为get不应改在?后面拼接用户名和密码吗?
注意此时只是指定了值,但是并没有指定值所对应的键
url?keyvaluekeyvalue
需要我们指定对应的键,即表单项必须指定name属性才能提交上去 上面通过get方式提交数据用户名和密码直接暴露在了地址栏中并不安全并且提交的长度也有限制该方式提交并不友好,我们来看看通过post方式来提交数据 请求的数据被放入请求体中发往服务器端,由于我们没有服务器端因此报错
两种请求方式的特点 布局标签 其余标签
单选框标签 上面的图是没有添加value属性的,我们来看看添加了value属性的 !DOCTYPE html
html langen
headmeta charsetUTF-8titleDocument/title
/head
bodyform actionpost.html methodget用户名 input typetext nameusername/ br密码 input typepassword namepassword br姓名 !-- 单行文本框 --input typeradio namegender value1男 input typeradio namegender value0女br爱好 !-- 多行文本框 --input typecheckbox namehobby value1篮球input typecheckbox namehobby value2足球input typecheckbox namehobby value3羽毛球br!-- 文本域 --textarea name文本域 rows10/textareabr籍贯 !-- 下拉选择框 --select name籍贯option value1北京/optionoption value2上海/optionoption value3深圳/optionoption value0 selected-请选择-/option/selectinput typesubmitinput typereset/form/body
/html 二. CSS
CSS 层叠样式表(英文全称(Cascading Style Sheets) 能够对网页中元素位置的排版进行像素级精确控制支持几乎所有的字体字号样式拥有对网页对象和模型样式编辑的能力 ,简单来说,美化页面 2.1 . css的三种引入方式
CSS样式可以通过以下方式应用到HTML文档中
内联样式直接在HTML元素的style属性中指定CSS样式。内部样式表在HTML文档的head标签中使用style标签定义CSS样式。外部样式表将CSS样式定义在一个独立的CSS文件中然后在HTML文档中使用link标签引入外部样式表。
!DOCTYPE html
html langen
headmeta charsetUTF-8titleDocument/title
/head
body!-- 通过css样式美化按钮方式一: 内联样式 缺点 1.代码复用度低,不利于维护2.css和html代码交织在一起,不利于阅读--input typebutton value按钮stylewidth: 60px;height: 40px;color: rgb(231, 236, 236);font-size: 20;font-family: 隶书;border: 2px solid green;background-color: rgb(5, 216, 111);border-radius: 5px;//body
/html !DOCTYPE html
html langen
headmeta charsetUTF-8titleDocument/titlestyle/* 元素选择器,通过标签名确定样式的作用元素 */input{width: 60px;height: 40px;color: rgb(231, 236, 236);font-size: 20;font-family: 隶书;border: 2px solid green;background-color: rgb(5, 216, 111);border-radius: 5px;}/style
/head
body!-- 通过css样式美化按钮方式二: 内部样式表--input typebutton value按钮1/input typebutton value按钮2/input typebutton value按钮3/input typebutton value按钮4//body
/html 2.2 . 三大选择器
!DOCTYPE html
html langen
headmeta charsetUTF-8titleDocument/titlestyle/* 1.元素选择器 根据标签的名字来指定作用的元素语法: 标签名{}缺点: 范围太广泛*/input{width: 60px;height: 40px;background-color: aqua;color: white;background-color: rgb(5, 216, 111);border-radius: 5px;}/* 2.id选择器 根据标签的id来指定作用的元素每一个元素都有一个id值,id不能重复缺点: 因为id具有唯一值,那么改标签只能作用于一个元素,太过单调语法: #id值{}*/#a{width: 60px;height: 40px;background-color: aqua;color: white;background-color: rgb(5, 216, 111);border-radius: 5px;}/* 3.类选择器 根据元素的class属性值来指定样式作用的元素一个class可以被多个元素指定,一个元素可以指定多个class,完美解决上面两个选择器存在的问题语法: .class属性值{}*/.b{width: 60px;height: 40px;background-color: aqua;color: white;background-color: rgb(5, 216, 111);border-radius: 5px;}/style/head
bodyinput typebutton classb value按钮1/input typebutton value按钮2/input typebutton value按钮3/input typebutton value按钮4//body
/html 2.3 . css样式 - 浮动
我们先来引入一个需求,然后在进行问题分析,最后引出浮动
css 代码,简单定义了几个div !DOCTYPE html html langen head meta charsetUTF-8 title浮动/title !-- 定义css样式 -- style .outDiv{ width: 500px; height: 400px; background-color: antiquewhite; border: 1px solid red; } .innerDiv{ width: 100px; height: 100px; border: 1px solid rgb(17, 14, 192); } .d1{ background-color: aqua; } .d2{ background-color: rgb(24, 182, 58); } .d3{ background-color: rgb(164, 223, 24); } /style /head body div classoutDiv div classinnerDiv d1div1/div div classinnerDiv d2div1/div div classinnerDiv d3div1/div /div /body /html 浏览器展示 现在我们的需求是将这三个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属性。他们也有不同的工作方式这取决于定位方法。 我们依然按照上面的那个例子,稍微做一些改动 !DOCTYPE html html langen head meta charsetUTF-8 title浮动/title !-- 定义css样式 -- style .innerDiv{ width: 100px; height: 100px; border: 1px solid rgb(17, 14, 192); } .d1{ background-color: aqua; } .d2{ background-color: rgb(24, 182, 58); } .d3{ background-color: rgb(164, 223, 24); } /style /head body div classinnerDiv d1div1/div div classinnerDiv d2div2/div div classinnerDiv d3div3/div /body /html 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引入方式
方式一: 内嵌式 !DOCTYPE html html langen head meta charsetUTF-8 titleDocument/title !-- 方式一: 内嵌式 通过一对Script标签来定义Script代码 script标签可以随便放,但是推荐放在head中 -- !-- js声明函数: function 函数名{} js绑定函数: onclick 绑定点击函数 js弹窗: alert函数 -- script function on(){ alert(哎呦,你干嘛!); } /script !-- css样式 -- style .btn{ width: 140; height: 30; background-color:yellow ; color: red; border: 1px solid red; border-radius: 5px; } /style /head body button classbtn οnclickon()点我啊,笨蛋/button /body /html 方式二: 引入外部脚步文件(利用代码的复用) 通过script标签内部的src属性可以指定要引入的脚本,通过type属性指定引入的脚本的文件类型
script srcjs/button.js typetext/javascript/script 总结 3. js基础语法
书写语法 变量 数据类型运算符 函数 4.js对象
Array对象 字符串对象 自定义对象 json对象 bom对象 dom对象
