整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

HTML学习心得

avaScript和Java有什么联系

根据目前我自己的理解,不要被名字有相似字节所欺骗,这两个语言其实没有什么联系,如果说有的话,应该就是关键字和对象的一些范畴有点相似或者说是有种模仿的感觉。但是实际上一个作为脚本的轻量语言[^7],一个作为有完整体制的大型语言[^8],两者是没有任何可比性的。

JS的内链外链

内链

​ JS的内链,也就是在html文件内的调用使用与css类似,也有两种方式,即在html文件的<head></head>中书写使用或是在<body></body>中使用。

<head></head>内书写

​ 在<head></head>中对JS的代码进行书写时,我们使用<script></script>对我们的JS代码进行包裹,与html及CSS的法则一样,其作用也是用来标明其JS的代码块属性。

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>test</title>

<script>

function displayDate(){

document.getElementById("demo").innerHTML=Date();

}

</script>

</head>

<body>

<h1>我的第一个 JavaScript 程序</h1>

<p id="demo">这是一个段落</p>

<button type="button" onclick="displayDate()">显示日期</button>

</body>

</html>

###### <body></body>内书写

​ 与在<head></head>中类似的,我们在<body></body>中对JS的书写和使用同样是在<script></script>中实现,其作用也与上述的一致。

<!DOCTYPE html>

<html>

<body>

<script>

document.write("<h1>This is a heading</h1>");

document.write("<p>This is a paragraph.</p>");

</script>

</body>

</html>

外链

与css有些不同的,JS的外链同样使用的是<script></script>标签来实现。JS即可以出现本地的JS文件的链接,也可以调用网上的JS文件进行链接,但调用网络上的文件有可能会受到目标文件服务器和网络的影响,使用的频率没有本地的调用高。

​ 调用本地JS文件:

<!DOCTYPE html>

<html>

<head>

<script type="text/javascript" src="../js/js_for_Seat_selection_nterface.js" ></script>

</head>

<body>

</body>

</html>

调用网络的JS文件:

<!DOCTYPE html>

<html>

<head>

<script src="http://www.lanrenzhijia.com/ajaxjs/jquery.min.js"> </script>

</head>

<body>

</body>

</html>

​ JS的外链与css类似的,也可以在同个文件里调用多个JS文件使用。其中还有很多较css的相似部分就不在这里重复说了,可以参考之前的css部分内容。

JS的语法关键字

JS的语法关键字有很多很多,因为JS是一门以对象为基础的语言,我们在使用会发现很多例如document.getElementById("demo").innerHTML=x;的语句,这里的getElementById(),innerHTML其实都是JS为我们已经封装(可以理解为打包)好了的方法和方法中的参数。所以我们在这里主要介绍一些基本的关键字。

function

function的作用其实很简单,就是声明一个函数,表明我这里的是一个函数,我们用一个看例子来看:

function myFunction(){

var x="";

var time=new Date().getHours();

if (time<20){

x="Good day";

}

document.getElementById("demo").innerHTML=x;

}

上述的例子就是为我们声明了一个叫做myFunction的的函数,其后的花括号中包含的就是函数中的内容。

var

在JS中,var的作用就是声明一个变量,在JS中,对于变量的类型没有严格的规定,所以JS也是一门弱语言,被定义的变量只有在第一次被赋值时才会被系统分配相应数据类型的空间。

var a;

a=10;

但实际上我们会发现,在实际使用时不仅仅是var可以声明一个变量,$也可以成功声明一个变量,甚至不需要任何的申明关键字也可以直接创建一个变量。但实际上是有非常大的差别的,$是JQ中的一个已经过定义的自定义函数名,而在单纯的JS中是没有任何意义的,一般是在你的文件已经引入了一个JQ数据库后才出现$也可以创建变量的情况,而相较于不使用任何关键字而直接创建一个变量,其实质是在整个JS文件的最上层windows中创建了一个对象属性,详细的解释我会在文末提供一个网络来源的博客地址,其中对创建对象属性有一个较为详细的解释。

所以我们在声明创建变量时一定要使用var关键字,不使用任何关键字创建变量,虽然可行,但却存在着语法错误。

new

与其它的面向对象方法一样的,JS中创建对象所使用的个关键字也是new,我们通过它来创建一个对象。

person=new Object();

在上述的例子中,我们创建了一个名为person的对象,object我们在这里可以简单的理解为一个类型为对象的数据结构。这句代码的意思就是创建一个对象,对象名为person

JS的结构语句

其实说是JS的结构语句,我们不难发现的,这些结构语句其实很多都是我们在其他语言中也能见到的语言语法,我们在这里也是将它们简单的归类再来说明一下。

###### if else

if else语句主要的作用其实也很简单,就是做一个判断,就像它的翻译 一样——如果….就….. 否则…..。

if(...){

...

}

else{

....

}

​ 上述的就是它的基本格式,我们可以看到在if后面的小括号中会有一个判断语句,其中的语句用来判断真假来控制语句的执行部分。花括号中的就是满足条件时执行的语句。

这一条语句是可以嵌套的,我们通过对它的嵌套来进行多层的判断。

if(...){

if(...){

...

}

else{

....

}

}

else{

....

}

while

我们先来看它的格式:

while(...){

...

}

while是一个循环语句,在关键字后面的小括号中,也同样是一条判断语句,用来控制循环的执行。在花括号中是我们的循环内容。

do while

可能我们会发现,这条语句和上一条语句非常的相似,我们还是先来看它的格式:

do{

...

}while(...)

它一样是一条控制循环的语句,不过和上一个语句有所区别的,它是先循环后判断,而while是先判断后循环,有的时候我们在不以言大哥情况下使用会达到不一样的效果。

for

js for( var i=0;1<=10;i++){ ... }

for语句也同样是一个循环语句,我们在上面举出了一个实例,从例子中我们看到,for和它的循环语句是有区别的,我们需要在判断的语句中定义变量,规定执行循环的条件,及控制循环的条件变化。

但实际上,有些时候我们只需要写明控制循环的条件语句就可以了,其他的两条语句可以不在括号中写出。但要注意的,我们需要保留它的分号,不然会出现语法错误。

switch

js switch(...){ case '...': ...;break; case '...': ...;break; .... default:...; }

这是一个条件选择语句,我们通过判断语句来选择到一个具体的分支,执行相应的语句。

有关于break,default 的作用,我们就不细说了,大家可以去网上查看它的详细信息。

JS的效果实现(HTML的事件响应)

我们已经很简单的介绍了一下JS的语法和关键字,那么我们下面来说在网页中如何触发JS的代码,又或者说是如触发相应的事件。

##### 点击事件

点击事件就是通过页面点击触发的事件,我们要注意的,在网页中其实不是只有按钮才可以作为点击事件的载体,基本上所有的网页元素都可以作为点击事件的载体。也就是说其实我们可以在任意一个元素中添加一个点击事件。

​ 下面我们来看常用的格式:

<html>

<body>

<input type="checkbox" name="ticket_seat"id="tucket_18" class="ticket_input"value="18"onclick="ticket_onclick()">

<script>

function ticket_onclick(){

...

}

</script>

</body>

</html>

​ 在上述的例子中我们可以看到,在标签中加入一个onclick属性,在后面写上要触发的函数名。这样我们在点击网页上的元素之后,我们就可以触发相应的JS函数。

对于我们的onclick字段,我们可以像常规的函数调用来看待它,也就是说,我们也是可以通过它向函数传入参数。

后记:对于大部分转行的人来说,找机会把自己的基础知识补齐,边工作边补基础知识,真心很重要。

"我们相信人人都可以成为一个IT大神,现在开始,选择一条阳光大道,助你入门,学习的路上不再迷茫。这里是北京尚学堂,初学者转行到IT行业的聚集地。"

为工作中接触到一些代码的使用,本小白开始学习编程知识,每天记录一些自学编程过程中的一些知识点,一是为了方便跟大家分享,另外就是为了以后复习使用。


一、前端环境搭建


Visual Studio Code

  • 安装Visual Studio Code,Chrome(谷歌浏览器)
  • 安装VS和Chrome插件

Visual Studio Code常用插件:

1.语言、格式化:

  • Chinese Language Pack for Visual Studio Code 中文简体语音包
  • Prettier-Code Formatter 几乎支持所有前端代码的格式化
  • Simple icons小巧实用的文件图标集合
  • One Dark Pro个人非常喜欢的一款主题

2.HTML/CSS插件:

  • Auto Close Tag 标签自动关闭
  • Auto Rename Tag 标签自动更名
  • Auto Complete Tag 标签自动完成
  • HTML CSS Support 自动补全样式表
  • HTML Snippetshtml 代码片段
  • highlight matching tag 自动高亮显示结束括号/标签

3.JS/Vue插件:

  • JavaScript(ES6) Code snippets JS/ES6代码片段
  • Vue Vue语法提示
  • Vue2 Snippets Vue代码片段
  • Vue-beautify Vue代码格式化

4.PHP/MySQL相关插件:

  • PHP Intelephense 代码提示与函数跳转
  • PHP IntelliSense 代码智能感知(可选)
  • PHP DocBlocker代码块注释(可选)
  • Format HTML in PHP格式化 PHP 中的 html 代码
  • MySQL MySQL 语法高亮

5.MarkDown语法插件:

  • Markdownlint Markdown 语法检查器
  • Markdown Rreview Enhancedmardown 文件预览

6.提高工作效率的插件:

  • Path Intellisense 智能路径提示
  • Bracket Pair Colorizer 不同颜色表示不同层级括号
  • Code Runner 支持常见的编程语言运行调试
  • Live Server 内置 web 服务器

7.如何在VSCode中配置PHP代码检查器:在VSCode配置文件(setting.json)

// 版本与路径替换成系统中的php可执行文件路径与版本号
"php.validate.executablePath": "E:/phpstudy_pro/Extensions/php/php7.3.4nts/php.exe",
"intelephense.environment.phpVersion": "7.3.4",

二、初识HTML

1.标题和段落

  • 页面的内容均由元素组成;
  • 元素是由标签来描述的,标签根据元素的类型分为单标签、双标签,每个元素的特征由属性来描述,需要将属性写到起始标签中。
<h1>开会通知:本周五进行大扫除</h1>
<p>开会通知:本周五进行大扫除</p>
  • 元素是由标签和属性共同描述的;
<male sex="famale" sw="80, 90, 100" height="170" weight="200">男朋友</male>
  • html中的所有内容,如果想要添加到html文档中,就必须要使用一个标签。
// JS代码必须写到一个script标签中
<script>
    const SITE = "Hello World!";
</script>
<?php
// php代码必须放在一对php标签中
echo "Hello World!";
?>
<!-- 标题标签:除了设置文档标题之外,还可以用来划分页面结构的 -->
<h1>Hello World</h1>
<h2>Hello World</h2>
<h3>Hello World</h3>

<!-- 内容标签 <p></p> -->
<p>程序猿界有一句话:每一个程序猿都应该拥有一台MacBook Pro</p>

2.链接与锚点

  • 链接标签 a标签-当今互联网的灵魂,实现了全球资源之间的共享

1.target属性:

  • 规定在何处打开链接文档。
  1. _blank跳转到新的页面,在新窗口打开
  2. _self(默认值) 在相同的框架中打开链接文档;
  3. _parent在父框架集中打开被链接文档;
  4. _top在整个窗口中打开被链接文档;
  5. iframename在指定窗口打开。

链接地址

代码案例:

<!-- _self 当前窗口打开 -->
<a href="跳转目标" target="_self">Hello World</a>

<!-- _blank 跳转到新的页面,在新窗口打开 -->
<a href="跳转目标" target="_blank">Hello World</a>

<!-- 在指定窗口打开 target="iframe内联框架的name值" 此时a标签的target值需要跟iframe里的name值保持一致 -->
<a href="https://www.baidu.com/" target="baidu">打开百度</a>
<iframe srcdoc="点击上面的按钮打开百度" name="baidu" frameborder="0" width="600" height="500"></iframe>
  • 注意:
    使用target="iframename"时,需要注意a标签的target值需要跟iframe的name值相等。

2.锚点

  • 使用锚点可以实现在当前页面中的任意位置进行跳转。
<a href="#footer">跳转到底部</a>

<!-- 创建锚点 -->
<div id="footer" style="margin-top: 1000px;">This is footer</div>
  • div:通用元素标签,内部可以放任意元素类型。
  • 如何返回当前页面顶部?
    直接将a标签的href值设置为#即可,如:<a href="#">回到顶部</a>。
  • 备注:
    vue.js、react等单页面应用,路由就是使用锚点实现的。

三、图片元素

如果我们想要在页面添加一张图片,可以使用img标签

  • 必须属性:
  1. src 图片的URL地址;
  2. alt 图片的描述信息。
  • 案例:
<img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="百度一下" width="200">
  • 备注:
    设置图片大小时,可以只设置宽度或者高度,另一个属性就会进行等比缩放,不需要同时设置。在实际开发中,一般在CSS中设置图片的样式,图片很少单独使用,基本都是用在链接中。

个人总结:有些代码看起来简单,但是自己上手起来真的是难,属于那种一看就会,一写就错,看来只能通过多写,多练才可以熟能生巧,这是个细活,急不得,要戒骄戒躁,平稳心态来面对这么多难题,加油!

先,当然是要先感谢下公司(北风)的栽培与机会,给了我很好的学习平台。

说真的,虽然说大学的专业是计算机信息管理,java、asp.net、网页设计、sql server、erp、ps、php...说出去,哇~ 你会的真多!我只是笑而不语,大学嘛,对于我这种渣渣其实就是混混日子的,没给他天天逃课算好学生了,唯一能拿得出手的也就一张网页设计高级证了,但是呢网页设计是啥,他利用的其实是DW里的设计功能,拖入各种控件,表格去搞的,考试的时候真的只要一涉及代码部分直接放弃掉⁄(⁄ ⁄•⁄ω⁄•⁄ ⁄)⁄。

其实,当我知道我考出这张证的时候我觉得我牛逼坏了,所以当经理主管说要给我个培养机会让我自己选择专业去学习的时候,再参考他们的意见,我选择H5,毕竟我也是有高级证的不是。结果刚学我就懵了,啥高级证啊,毛毛都么用,low爆了。所以其实到现在我都没去学校把证拿回来,噗噗,废话有点多哦,那下面说下从我学习前端到现在的一个心得:

学H5都得先学HTML+CSS,纯代码,根本用不到DW的设计功能,其实就是一零基础小白从html第一个标签开始学起,跟着学习视频里的老师一个一个的手敲,然后再一个一个的做笔记( 光一个html+css就满满写了一本),老师讲的感觉我不是很明白的,就去找度娘搜(真的是认真坏了哈哈哈),但是呢,光学完标签 属性,我发现,单独的你让我看,我晓得这啥意思的呀,但是你让我写,真心无从下手,我该用哪个标签,我该用哪个属性,OMG 杀了我得了。然后就这么一直耗着,一直到公司有个h5的讲师培训班,领导给我开了个后门让我进去一起听,然后不得了了,先做了一个简单的静态,这是我自己第一次纯代码去写一个较为完整的页面,我以为我会被直接刷下来,垫个底,结果我一边度娘,一边写,虽然标签上还是用的比较乱,但好歹是做出来了,而且分数在中等,我的天,顿时自信心满满。

然后呢,结束的时候对于html+css有个测验,也是做一个静态,但更完整和 复杂,还有时间规定(这时候关系户的好处就体现出来了,我没时间 哈哈哈)人家半天做出来的,我硬生生憋了三天,虽然时间长了点,但是呢标签,属性,写法,规范,组合老师也说我也得很棒呢,成就感真的是不可言喻。

废话好像有点多,其实写html网页有几个点(纯属自己总结):

  1. 学会找度娘

  2. 知道网页其实都是一个个的盒子组合,学会分大区域(头、身、尾),然后在大区域里放各种小盒子

  1. 要知道千万不要给整体的大盒子定宽度,比如头部+一个logo,整体我给个高度就好,宽度让其自动,中间再放logo部分给宽度,这么做是为了不让网页在分辨率不同的屏幕上出现横向滚动,因为you know 全世界不是只有你一台电脑

  1. 接第三点要知道大部分的网页其实真正要写的内容只有中间这一块,所以margin:0 auto要随手用起来

  2. 最最重要的一点就是一定要学会在浏览器上调试,快捷F12,特别是当你出现横向滚动的时候,我会选择在上边先把所有标签的宽度先禁用,然后在一个个的看,还有当你发现你的样式没按照自己的想法来实现的时候,一定要点到所在标签看样式是不是应用上了,还有还有,定位啊,内外边距啊,宽高都是调调调调。繁琐是繁琐了点,但比在编辑器上一边改再保存再改简单。

  1. 还有就是浮动,有的时候属性没错呀,也写到标签里去了呀,但他怎么就不出来呢,原因可能就在于你没清浮动

  1. 当然啦,光说不练假把式,多做才是真

以上则是我的一个小心得,厉害了,我竟然写了辣么多,以后还会补充的,若有兴趣欢迎大家加群 142991222一起学习,或者私扣1565888144