建网站平台要多少钱,潍坊做网站的企业,做外贸去哪个网站找客户,seo网站架构vscode链接服务器
安装VScode插件
Chinese (Simplified) (简体中⽂) Language Pack for Visual Studio CodeOpen in BrowserRemote SSH
在命令行输入
remote-ssh接着输入
打开配置文件#xff0c;已经配置好主机
点击远程资源管理器可以找到
右键链接
输入密码 …vscode链接服务器
安装VScode插件
Chinese (Simplified) (简体中⽂) Language Pack for Visual Studio CodeOpen in BrowserRemote SSH
在命令行输入
remote-ssh接着输入
打开配置文件已经配置好主机
点击远程资源管理器可以找到
右键链接
输入密码
左下角显示链接 打开文件夹
选择wwwroot输入密码
成功打开文件
也可以通过终端控制
编写html
html: 是⽹⻚的⻣骼 -- 负责⽹⻚结构
css⽹⻚的⽪⾁ -- 负责⽹⻚美观的
jsjavascript⽹⻚的灵魂---负责动态效果和前后端交互教程 https://www.w3school.com.cn/直接在vscode上编写
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleboost 搜索引擎/title
/head
bodyh1hello, 欢迎来到我的搜索引擎/h1
/body
/html!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleboost 搜索引擎/title
/head
bodydiv classcontainerdiv classsearchinput typetext value输入搜索关键字button搜索一下/button/div/div
/body
/html!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleboost 搜索引擎/title
/head
bodydiv classcontainerdiv classsearchinput typetext value输入搜索关键字...button搜索一下/button/divdiv classresultdiv classitema href#这是标题/ap这是摘要是摘要这是摘要这是摘要这是摘要这是摘要这是摘要这是摘要这是摘要这是摘要这是摘要/pihtps://www.boost.org/doc/libs/1_78_0/doc/html/boost_dll/dependencies.html/i/divdiv classitema href#这是标题/ap这是摘要是摘要这是摘要这是摘要这是摘要这是摘要这是摘要这是摘要这是摘要这是摘要这是摘要/pihtps://www.boost.org/doc/libs/1_78_0/doc/html/boost_dll/dependencies.html/i/divdiv classitema href#这是标题/ap这是摘要是摘要这是摘要这是摘要这是摘要这是摘要这是摘要这是摘要这是摘要这是摘要这是摘要/pihtps://www.boost.org/doc/libs/1_78_0/doc/html/boost_dll/dependencies.html/i/divdiv classitema href#这是标题/ap这是摘要是摘要这是摘要这是摘要这是摘要这是摘要这是摘要这是摘要这是摘要这是摘要这是摘要/pihtps://www.boost.org/doc/libs/1_78_0/doc/html/boost_dll/dependencies.html/i/div/div/div
/body
/html编写css
设置样式的本质找到要设置的标签设置它的属性
1. 选择特定的标签类选择器标签选择器复合选择器
2. 设置指定标签的属性⻅代码将内外边距设为0
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleboost 搜索引擎/titlestyle/* 去掉网页中的所有的默认内外边距 */* {/*设置外边距 */margin: 0;/*设置内边距*/padding: 0; }/*将body的内容100%和html的呈现是吻合的*/html,body {height: 100%;}/*类选择器*/.container {/*设置div的宽度*/width: 800px;/* 通过设置外边距达到居中对齐的目的 */margin: 0px auto;/* 设置外边距的上边距保持元素和网页的上部距离 */margin-top: 15px;}/* 复合选择器选中container下的search */.container .search {/* 宽度与父标签保持一致 */width: 100%;/* 高度设置为52像素点 */height: 52px;}/* 先选中input标签直接设置标签的属性先要选中input标签选择器 *//* input在进行高度设置的时候没有考虑边框的问题 */.container .search input {/* 设置left浮动 */float: left;width: 600px;height: 50px;/* 设置边框属性边框的宽度样式颜色 */border: 1px solid black;/* 去掉input输入框的右边框 */border-right: none;/* 设置内边距默认文字不要紧贴左侧边框 */padding-left: 10px;/* 设置input内部的字体的颜色和样式 */color: #ccc;font-size: 20px;}.container .search button {/* 设置left浮动 */float: left;width: 150px;height: 52px;/* 设置button的背景颜色100,148,288 */background-color: #4e6ef2;/* 设置button中的字体颜色 */color: #FFF;/* 设置字体的大小 */font-size: 20px;font-family: Georgia, Times New Roman, Times, serif;}.container .result {width: 100%;}.container .result .item {margin-top: 15px;}.container .result .item a{/* 设置a为块级元素单独占一行 */display: block;/* a标签的下划线去掉 */text-decoration: none;/* 设置a标签中的文字的字体大小 */font-size: 22px;/* 设置a标签中文字的颜色 */color: #4e6ef2;}.container .result .item a:hover {text-decoration: underline;}.container .result .item p {margin-top: 5px;font-size: 18px;font-family: Franklin Gothic Medium, Arial Narrow, Arial, sans-serif;}.container .result .item i {/* 设置a为块级元素单独占一行 */display: block;/* 取消斜体风格 */font-style: normal;color: green;}/style
/head编写JS
如果直接使⽤原⽣的js成本会⽐较⾼xmlhttprequest我们推荐使⽤JQuery.
headscript srchttp://code.jquery.com/jquery-2.1.1.min.js/script
/headscriptfunction Search(){// 是浏览器的一个弹出框// alert(hello js!);// 1. 提取数据, $可以理解成就是JQuery的别称let query $(.container .search input).val();conole.log(query query); //console是浏览器的对话框可以用来进行查看js数据//2. 发起http请求,ajax: 属于一个和后端进行数据交互的函数JQuery中的$.ajax({type: GET,url: /s?word query,success: function(data){console.log(data);BuildHtml(data);}});}function BuildHtml(data){// 获取html中的result标签let result_lable $(.container .result);// 清空历史搜索结果result_lable.empty();for( let elem of data){// console.log(elem.title);// console.log(elem.url);let a_lable $(a, {text: elem.title,href: elem.url,// 跳转到新的页面target: _blank});let p_lable $(p, {text: elem.desc});let i_lable $(i, {text: elem.url});let div_lable $(div, {class: item});a_lable.appendTo(div_lable);p_lable.appendTo(div_lable);i_lable.appendTo(div_lable);div_lable.appendTo(result_lable);}}/script
