HTML5教程

前端三件套

本文主要是介绍前端三件套,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

 HTML(Hyper Text Markup Language)


概述

什么是超文本:文字,图片,动画,视频,动画

目前是HTML5和CSS3;

W3C联盟制定的标准:

结构化标准:HTML

行为标准:JavaScript

表现标准:CSS


常见IDE

IntelliJ


模板标签 和 网页基本信息

自闭和标签:单个标签

闭合标签:成对出现

  • 如何写注释

<!-- 注释,以下为默认生成模板 -->

<!DOCTYPE html>
<html lang = "EN">
<head>
    <meta charset = "UTF-8">
    <title>标题</title>
<head>
<body>


</body>
</html>

DOCTYPE标签:规定规范;

html标签:总标签

head标签:头部

body标签:网页主体

title:just title

meta标签:描述性的标签,用来描述信息,搜索引擎优化SEO


网页基本标签

<!-- 标题标签 -->
<h1>一级标签</h1>
<h2>二级标签</h2>

<!-- 段落标签 -->
<p>第一段</p>
<p>第二段</p>
<p>第三段</p>

<!-- 换行标签(自闭和标签) -->
There must be something!<br/>Then they're gone!

<!-- 水平线标签 -->
<hr/>

<!-- 粗体标签 -->
<b>粗体标签1</b>
<i>斜体标签1</i>
<strong>粗体标签2</strong>
<em>斜体标签2</em>
<br/>
<!-- 特殊符号: &开头自动填充 -->
空格:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;这么多空格!<br/>
大于号:&gt;<br/>
小于号:&lt;<br/>
版权符号:&copy;<br/>


图像和链接标签

图像标签:

        绝对路径:从盘符开始
        相对路径:../
        Note:src和alt是必填的!

        <img src = "path" alt = "加载失败会返回此段" title ="悬停文字" width = "300" height = "300">

链接标签:

    href为必填!
    target ="_blank" => 新窗口打开
    target ="_self" => 默认,在当前窗口打开

    <a href = "https://www.google.com" target ="_blank">猛击这里(也可嵌套图片标签)</a>

锚链接:

    eg:
    
    <a id = "top">top<a> (在body顶部)
    <p>...内容...</p>
    
    <a href = "#top">回到顶部</a>

功能性链接:

        <a href = "mailto: 邮箱地址">点击发送邮箱</a>


列表和表格

列表标签:

        无序:

    <ul>
        <li>C</li>
        <li>Java</li>
        <li>Python</li>
        <li>PHP</li>
        <li>C++</li>
    </ul>

        

        有序(ordered list -> ol):

    <ol>
        <li>C</li>
        <li>Java</li>
        <li>Python</li>
        <li>PHP</li>
        <li>C++</li>
    </ol>

        自定义:

    <dl>
        <dt>语言</dt>
        <dd>Java</dd>
        <dd>C</dd>
        <dd>C++</dd>
        <dd>Python</dd>
        <dd>PHP</dd>
    </dl>

表格标签:

    <table border = "2px"><!-- border:加边框 --> 
        
        <tr>
            
            <td colspan = "3">1.1</td><!-- colspan: 跨列--> 
            <td>1.2</td>
            <td>1.3</td>
            <td>1.4</td>
            
        </tr>
        
        <tr>
            
            <td>2.1</td>
            <td>2.2</td>
            <td>2.3</td>
            <td>2.4</td>
            
        </tr>
    
    </table>               


视频和音频:

视频
<video src="../resources/video/soemthing.mp4" controls autoplay></video>

音频
<audio src="../something.mp3" controls autoplay></audio>

autoplay:自动播放属性

controls:控制条显示属性

页面的结构:

header:头部

footer:脚部

section:主体块

article:文章

aside:边块

nav:导航


内联框架iframe:

<iframe src = "https://www.baidu.com" name = "id" width = "300px" height = "200px"></iframe>

<a href = "https://www.baidu.com" target = "id">Click to transfer!</a>

Note:可用<a>标签中的target属性标明iframe的name标识,即可在iframe下生成打开<a>里的链接。


表单!!

<!--    
    action:为表单提交的位置
    method:分post和get,get不安全,会暴露信息在url中但是高效,post安全而且可以传输大文件;
    
    hidden:隐藏域属性;用于隐藏传输默认值
    disabled:禁用域属性;
    readonly:只读属性
    placeholder:浅色提示文字”请输入用户名“
    required:非空判断
    pattern:正则表达式
-->

<form method = "post" action = result>表单起始标签

用户名输入:<input type = "text" name = "user" maxlength = "8" value = "默认初始值" readonly>

密码输入:<input type = "password" name = "password">


性别:<input type = "radio" value = "boy" name = "gender" checked disabled>男

<!-- checked默认选中值-->
<input type = "radio" value = "boy" name = "gender">女;<!-- name一样就是一个组-->

<!-- 多选框 -->
爱好:
    <input type = "checkbox" value = "slp" name = "hby">睡觉
    <input type = "checkbox" value = "cd" name = "hby">编程
    <input type = "checkbox" value = "rap" name = "hby">说唱<!-- checked默认选中值-->
    <input type = "checkbox" value = "fk" name = "hby" checked>操逼    
 


普通按钮:<input type = "button" value = "按钮中的文字" name = "btn1">

图片按钮:<input type = "image" src = "../image/1.png">


下拉框:

<select name = "列表名称">
    <option value = "A">西瓜</option>
    <option value = "B">龙眼</option>
    <option value = "C">橙子</option>
    <option value = "D" selected>苹果</option>  <!-- selected默认选中值-->
</select>


文本域:<textarea name = "txtbx" cols = "7" rows = "7">默认内容</textarea>

文件域:<input type = "file" name = "f">

input简单验证:


邮箱:<input type = "email" name = "email">


数字:<input type = "number" name = "num" max = "9999" min = "0" step = "100">            <!-- step为步长-->


网址:<input type = "url" name " url">


滑块:<input type = "range" min = "0" max = "100" name = "voice" step = "10">

搜索框:<input type = "search" name = "search">


 

    <input type = "submit">
    <input type = "reset">
</form> 
 



CSS


What is CSS?(Cascading Style Sheet)

布局、选择器、网页属性美化、盒子模型、浮动,选择器为重点其他可做了解?

发展史:1.0 = 啥也不是只有简单标签 2.0 = div块 标志着结构分离的思想,SEO出现

2.1 = 浮动 定位 布局 等大规模改进 3.0=  圆角、阴影等细节优化,浏览器兼容。


CSS三种导入方式:

1.分离样式:外部文件,在head引用<link rel = "stylesheet" href = "../style.css">导入css文件;

2.表内样式:写在head里的style标签

3.行内样式(那就不是结构分离了):直接在修饰对象属性栏里写

作用优先级3>2?1,其中2和1看谁的代码最后执行覆盖原代码。


三种基本选择器

  1. 标签选择器:选择并应用到页面所有此标签的元素!
  2.  类选择器:先对标签声明class属性名,之后在style里用 .class{}来对相同标签产生不同效果
  3. id选择器:id全局唯一的标注一个标签,在style标签内用 #id{}方式

其中优先级3>2>1


层次选择器:

        !!后括选择器:body空格p{} body标签后的p 全部{。。。}

下面的好像不太好使。。

  1. 子级选择器:body>p{} body标签后非嵌套的
  2. 毗邻选择器:.class + p{} 先定义class再对下一个同级标签生效(note:是所有class的下一个,仅一个!)
  3.  通用选择器: .class ~ p{}下面的所有同级!

结构伪类选择器(任何对象都有伪类)

ul li:first-child{...}

ul li:last-child{...}

p : nth-of-type(2){...}第二个为p类型的元素


属性选择器(id和class的结合,对属性栏的条件应用 )

标签[属性条件]{...}

属性其实就代表着对于所有此类标签符合此类属性条件的;

eg:a[id]{} = 带id的,a[id = first]{} = id选择器,

!!a[class = "style"]{} = 带有style class的,其中 = 是指绝对等于(.equals())

而 *= 是包含;

a[href ^= http]{} 以http为开头的href的a标签,

a[href $= pdf]{} 以pdf为结尾的href的a标签。


网页美化

span标签:约定成俗地用其凸显内容。

eg:<span> 内容</span>,然后加选择器对其进行加工

字体样式

body{ font-family: 字体; font-size: 50px; font-weight: bolder; 

文本样式

color:#FFFFFF , RGB各两位十六进制

text-align: 排版(居中center)

text-indent:2em(em等于一个单位字,px等于一个像素点)

line-height:每一行的高度

height:总共标签的高度,like p标签

text-decoration:underline/line-through/overline;

a{ text-decoration: none;} a标签去下划线

vertical-align: middle, 两个标签对象相互垂直居中

a:hover{color:#123456;font-size:50px;}链接悬停背景色,字体变大

a:active{color:#123456;}点击链接背景色

a:visited{color:#123456;}访问后的颜色

text-shadow:颜色,水平偏移(左负右正),垂直偏移(上负下正),阴影半径(粗细);(后三个为px)


列表

ui li  =  后代层次选择器

{

        list-style:none; 去掉圆点或者数字(ol)

                      circle:空心圆

                      decimal:数字

                      square:方形

}

note:一般不会写nav标签,都是div(单位标签)加nav的id                  


背景

!!!{background-image: url("path.jpg")} 在选择标签域内填充背景图片,默认平铺。

通过{background-repeat:repeat-x/repeat-y/no-repeat}对图片进行水平复制,垂直复制,单一

!!!其实可以在background:___ ___ ___...直接把一溜属性全写好

=> 颜色 图片路径 水平增量 垂直增量 repeat属性


渐变

直接在grabient.com上调制diy渐变然后copy代码。。。

background:角度 初始色 最终色


盒子模型

 !body存在一个8px的默认margin 

input{border:_px dashed white};

!margin:上,右,下,左(顺时针)(也可写上下,左右两个变量)

其中auto代表居中,

圆角

div{border-redius:↖↗↘↙};

!!搞清楚width、height与radius的差距,width与height代表着矩形,而radius代表着角到中心点的距离 


浮动

display:block(块元素化):inline(行内元素化):inline-block(使之成为一行),仍然是块元素,行块(一大段元素堆积)排列必备,很少用。

float-right、left。。。浮动,朝指定方向冒顶直到碰到一个外边框或者另一个浮动盒子为止;

对于浮动很多时候会突破父界,这时候就需要clear来限制浮动;

clear:方向:不允许此方向的浮动;

eg:A在左边浮着,B在右边浮着,对夹在中间的C添加{clear:both}属性它就会在下一行找地方浮。

!还可以通过增加父界高度解决出界问题

!或者在父界下方添加clear:both的块元素禁止上方块元素越界漂浮

!还能在父界中增加{overflow:hidden}屏蔽越界元素

!常用父类after伪类选择器在css中增加clear:both的div兜块

overflow属性:对越界元素的控制:scroll保持原尺寸,增加滚动条


定位

相对定位:

{position:relative;}

然后就可以用top bottom left right:+-xx 来对原位置进行位移

!原位置也被保留

绝对定位:

{position:absolute;}

用left right top bottom时候是相对浏览器进行定位,

条件:父元素没有定位,若有则转换成对父元素的定位。 

粘性定位(常用于网站导航栏,广告):

{position:fixed;}

{z-index:层级(0~999)}涉及多个元素相互覆盖,标志此标签的优先级覆盖次级优先级标签。

!只有用了定位才会堆叠

!{opacity:透明度;}


动画

transform:....(不常用,还是多用JS做。。。)



JavaScript(世界上最流行的脚本语言)

!!!!!!

必须给他妈的我精通



概述

JavaScript是属于网络的脚本语言!
JavaScript 被数百万计的网页用来改进设计、验证表单、检测浏览器、创建cookies,以及更多的应用。
JavaScript 是因特网上最流行的脚本语言。

预处理器:CSS 预处理器用一种专门的编程语言,进行 Web 页面样式设计,然后再编译成正常的 CSS 文件,以供项目使用。

几大框架::

  • JQuery:封装了各种方法,但DOM操作太频繁影响前端特性。。。没啥人用了
  • Angular:Java程序员s开发的,特点是模块化开发;
  • React:Facebook的,提出新概念“虚拟DOM”,用于减少DOM操作。
  • Vue:取上两者之精华,去其糟粕。

ECMAScript:为JavaScript的一个标准。。。JavaScript为其一种实现。。。


导入

依然是可以在HTML里面写(<script></script>),

也可以独立导入(<script src="path.js"></script>)


基本语法

var 为变量声明,弱类型语言(听说现在都用let,为局部变量,类似for(int i;;)里面的int)

若直接写 i = 666; 则默认为全局变量

同样严格区分大小写;

可以在网页inspect里的console键入alert输出变量也可以console.log(变量)来输出。

可以在inspect的source(源码)里面设置断点刷新然后调试。。

不同的数据类型

number:(js不区分小数、整数)、5e3(科学计数法),NaN(非数,与所有值(包括NaN)都不相等)

字符串:"xxx"

boolean:false、true

等于号“==”只看值是否一样,即使类型不一样,所以一般都用“===”绝对等于;

数组:var = array[1,"x",null,true];下标越界的话会输出undefined;

对象:var person = {name:"xxx",age:"_",array:[xxx,xxx,xxx]},console里就用person.name,person.age等等调用。

严格检查模式

“use strict” 加在script标签里面就行了,须为第一行,不然在console不会报错。


类型详解

字符串输出:‘’或者“”用反斜杠转义,\u#### 为Unicode(#为16进制),\xx(ASCII码);

多行字符串:反引号` `直接包括换行原样输出;

模板输出:"${var名字} str...";

tips:  var名[index]直接输出index的元素,不可再赋值,.length等属性,.indexOf() .toUpperCase()等方法;JS不区分字符与字符串,字符视为长度为1的字符串;.substring(0开始,1开始);(和java一样;

数组:长度依然是属性 .length;元素可再赋值,也可延长(从新对.length赋值),多余的为empty(即为undefined),缩小(丢失元素);

indexOf(具有多个相同值)只返回第一个元素位置;.slice(依然是[,) 这样的左闭右开);

.pop() 和 .push(vars);类似栈操作(尾部),同时shift()和unshift()表示头部的pop和push;

.reverse()、.sort()、.concat(另一个数组),并没有修改数组;.join(字符串)返回字符串其中美国元素夹一个参数字符串。

多维数组:array[[xxx,xxx,xxx],[yyy,yyy,yyy],...,[...]];


对象类型(若干个键(键都为字符串)值(值才是各类对象)对)

定义时候若干 属性名:属性值间以逗号间隔,最后一个没有逗号;

动态更删属性

delete关键字删除对象属性,.属性名 = 属性值 添加属性;

判断属性是否是自身拥有的(即是否继承来的):.hasOwnProperty(自身键)

数组遍历:for(var x in/of array){in为一个个下标,of为一个个元素值};


ES6新数据类型MAP、SET

map: var map = new Map([ [key,value],[key,value],...,[] ]; 通过set、get调出值键入键值对;

set:(无重复元素)set名.has(属性值) = contains

iterator: ... var itr = Iterator(对象);  const itr = map[Symbol.iterator](); for(let x of itr){console.log(x)}...


函数

定义: function name(x,y,z){return x;} ,若没有执行return,依然会返回undefined;

前端定义方式: var abs = function(x,y,z){return x;}, 可以传任意个参数;

关于传进来的参数内部处理,可以用typeOf 形参进行是否传空值的判断,其次 用arguments关键字,代表实参数组;

ES6新特性:rest关键字,若形参只有一个x,rest会获取除了x之外的多余实参。格式:function(x,y,...rest){},rest代表的也是数组。


变量作用域

const PI = 3.1415925354; 只读变量,不许修改。(ES6引入)

函数嵌套情况下,外部函数不可访问内部函数的变量;反之当然可以,假如当下要调用的变量声明定义都在顺序下方,js会默认提前执行定义声明语句。

以及定义在函数之外的称之为全局变量,js存在默认全局对象window,因会出现同名的问题,因此建议自定义全局对象变量域。


方法(对象内部的函数)

var object = 

{

        方法名:function(){},

}

!也可以在外面写好,对象内部直接 方法名:函数名,

!对于this关键字,在方法内部使用的话,注意若是上述第二种方法的定义,则无法调用外部函数名,因为this代表着是外部全局window的相关变量,而window并没有。

!!apply方法,存在所以方法函数的上一层,用来修改this的指向 .apply(对象,参数列表);


特殊内部对象

Data:var date = new Data();(打印date是当下时间),

一些方法:get年月日星期时分秒(date是日,day是星期),!getTime();1970年1月1日 00:00:00起始至今的毫秒数。。。

JSON:(数据交换格式,类似XML的功能)提升网络传输效率,后端生成然后前端解析;

JSON.stringify(任何对象)把任何对象字符串化,

JSON.parse(字符串)解析字符串编程对象


面向对象编程

原型:对象.__proto__ = 想继承的对象;(任何对象都继承Object的proto)

到了ES6时候,就引入了Java的class写法简化上调怪异的原型;

class Student

{

        constructor(形参列表)//直接把传过来的实参变成对象的属性

        {

                this.xxx = xxx;

        }

        方法()

        {

        }
}

继承

class PupilStudent extends Student

{

        constructor(父类形参列表,子类形参列表)

        {

                super(父类形参列表);

                this.xxx = xxx;

        }

        方法()

        {

        }
}

!本质其实还是原型对象,class其实也是对象;继承存在原型链,链到object时候就和prototype往返互链了。。。


BOM(浏览器对象模型)

几个重要对象

window(全局对象)获取窗口属性

screen:屏幕尺寸

location:当前页面的url

document:当前的页面(文档资源)

history:浏览记录

DOM:以树形网页为基础的若干文档资源操作模型,更新,获取,删除,添加 => Dom节点(标签块)

第一步:得先获取到节点!

通过document.getElementBy(Id,Class,TagName)获取节点内容 == 对应CSS选择器

若存在嵌套标签,在父标签id下的children方法可返回所有子节点(数组)。(或者lastChind、firstChild)

!以上都是原生代码,以后都会用现成的框架(JQuery)

第二步:更新节点。

id.innerText("text");插入文本。。

id.innerHTML('标签块');插入HTML 格式的元素。。

id.style.xxx = xxx;样式的修改。。

在网页上抓取到id存入变量就可以利用上述方法修改DOM对象

第三步:删除节点

(通过获取父节点对象来删除当前节点)

id.parentElement().removeChild(子节点);

(也可以通过子节点数组下标遍历删除)

!注意由于数组对象时刻动态删除,下标指向的对象会改变,建议逆向遍历删除。

父节点ID.removeChild(父节点ID.children[index]);

第四步:插入节点

append():目标节点.appendChild(追加节点);(适用于已存在的节点)

创建新节点:document.creatElement(各种标签),然后对这个新建节点进行编辑:新节点.id = 'xxx'; .innerText = 'xxx';

很复杂,做了解,清楚调用机理,增删添改的大概函数就行。。。还是以后的JQuery占据主流!


验证表单

.getElementById('xxx')获取文本框输入值;

.value 让其输出或对其改变;

对于复选单选框等固定参数input,对每个选项.checked返回是否被选,也可赋值改变选项

高级验证:

首先在script代码内有个验证函数(函数内还需上面的获取输入值)根据想验证的内容是否符合规范返回布尔值,其次在form头标签属性有个onSubmit属性,赋予其“return 函数()”可在验证不通过时阻止表单的提交。

隐藏域接受密码:比形式密码框多了hidden属性,和name属性(没有name属性不会提交??!!);形式密码框只有type属性。。。

然后在验证方法里用方法加密或者验证。。。


jQuery(大量方法库)

获取:在线CDN(网络引入)或者下载jQuery本地导入;;

统一调用方法:$(选择器).方法(). 

eg: $('#id').click(function(){方法体});点击触发方法; $('p') = 标签选择器, $('.class') = 类选择器

$(function(){}); 是对$(document).ready(function(){});的简写,意为加载页面完成后执行的操作(通常为事件最外层的嵌套),加上其他mouse,key的方法(一般会在function内传参数)组成了事件发生监听器。。。

操作DOM:$(...).text()获取标签内容,用$(...).text('修改后的值')修改内容; 。html()同理。

CSS操作:$('...').css({“属性1”,“值1”,"属性2“,“值2”。。。});

这篇关于前端三件套的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!