免费注册二级域名的网站,dedecms做国外网站,太原市建设交易中心网站首页,泰兴网站设计该篇适用于从零基础学习前端的小白 初学者不懂代码得含义也要坚持模仿逐行敲代码#xff0c;以身体感悟带动头脑去理解新知识 一、导言 HTML#xff0c;CSS#xff0c;JavaScript 都是单独的语言#xff1b;他们构成前端技术基础#xff1b; #xff08;1#xff09;HTM… 该篇适用于从零基础学习前端的小白 初学者不懂代码得含义也要坚持模仿逐行敲代码以身体感悟带动头脑去理解新知识 一、导言 HTMLCSSJavaScript 都是单独的语言他们构成前端技术基础 1HTML负责网页的架构 2CSS负责网页的样式美化 3JavaScriptJS负责网页的行为 我们将上述概念拿出来作为初学者可能还是不理解还是一头雾水很正常那我们就以实践来帮助自己理解。接下来我们一起写一个简单的案例。 二、用小案例帮我们理解 HTML CSS JavaScript 各自的概念 注意: 初学者不懂代码得含义也要坚持模仿逐行敲代码以身体感悟带动头脑去理解新知识。 我们的目标模仿百度得输入框 和 按钮(百度一下) 1. HTML负责网页的架构结构
我写了 input(文本框)标签 和 button(按钮)标签 在浏览器运行样式如下
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyinput /button百度一下/button
/body
/html
在chrome浏览器运行显示效果我们可以看出目前跟百度首页搜索行结构是一样的 2. CSS负责网页的样式美化 我们观察自己编写的效果存在的问题 第一文本框宽度 和 高度需要修改 第二百度一下这个按钮背景颜色 和 文字颜色需要修改 !DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle/*将全部标签自带的内外边距都设置为0统一由自己单独去写*/*{padding: 0;margin: 0;}.inputName{width: 300px; /* 设置宽度为300px */height: 30px; /* 设置高度为30px */}.buttonName{background-color: #4E6EF2; /* 设置背景颜色 */color: #fff; /* 设置文字颜色 */height: 34px; /*为什么这里是34 而不是30*/border: none; /* 设置按钮的边框不显示 */padding-left: 5px; /* 设置按钮左边内边距为 5px */padding-right: 5px; /* 设置按钮右边内边距为 5px */}/style
/head
bodyinput classinputName /button classbuttonName百度一下/button
/body
/html
运行的效果图我没有写过多的样式主要写了基本的担心初学者一下接受不完 3. JavaScriptJS负责网页的行为 网页的行为主要就是指用户点击 ”百度一下“那个按钮百度网站是发起一个搜索功能 这里我模仿点击百度一下按钮弹出一个警告框之后跳转到百度官网 !DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle*{padding: 0;margin: 0;}.inputName{width: 300px; /* 设置宽度为300px */height: 30px; /* 设置高度为30px */}.buttonName{background-color: #4E6EF2; /* 设置背景颜色 */color: #fff; /* 设置文字颜色 */height: 34px; /*为什么这里是34 而不是30*/border: none; /* 设置按钮的边框不显示 */padding-left: 5px; /* 设置按钮左边内边距为 5px */padding-right: 5px; /* 设置按钮右边内边距为 5px */}/style
/head
bodyinput classinputName /button classbuttonName百度一下/button
/body
script//1. 获取“百度一下”按钮的DOM节点let buttonDOM document.getElementsByClassName(buttonName);//2. 给该按钮添加一个点击事件的监听当用户发起点击就会进入function函数内部执行下面语句buttonDOM[0].addEventListener(click,function(){alert(你点击按钮马上跳转到百度页面);window.open(https://www.baidu.com/);});
/script
/html
目前JavaScript 的代码写在了script标签内涉及的知识点DOM 和 BOM。 三、结束语
经过这样我们大概理解了结构(HTML)、样式(CSS)、行为(JavaScript)都写在哪里具体是什么样子。不过你也会发现他们的知识还是很多。
比如CSS 写样式class是什么 比如JavaScript代码里document、window是什么 编程是一个很长的过程不积跬步无以至千里学习不能太着急。
接下来我们就详细的学习JavaScript的知识等我有时间更新哈哈哈哈 四、题外话网页三剑客
网页三剑客编程老人都晓得
Dreamweaver开发工具作用和VsCode差不多但功能相当老化不是真正编程人该使用的 Flash 由于安全问题已经被chrome给封杀了 Fireworks
》这些技术都已经被淘汰初学者不要纠结当他们不存在就可以了。
