一、 Vscode 的介绍
1) 简介
Visual Studio Code(简称“VS Code” )是Microsoft在2015年4月30日Build开发者大会上正式宣布一个运行于 Mac OS X、Windows和 Linux 之上的,针对于编写现代Web和云应用的跨平台源代码编辑器,可在桌面上运行,并且可用于Windows,macOS和Linux。它具有对JavaScript,TypeScript和Node.js的内置支持,并具有丰富的其他语言(例如C++,C#,Java,Python,PHP,Go)和运行时(例如.NET和Unity)扩展的生态系统。
2)主要功能
该编辑器也集成了所有一款现代编辑器所应该具备的特性,包括语法高亮(syntax high lighting),可定制的热键绑定(customizable keyboard bindings),括号匹配(bracket matching)以及代码片段收集(snippets)。Somasegar 也告诉笔者这款编辑器也拥有对 Git 的开箱即用的支持。
Visual Studio Code 提供了丰富的快捷键 [7] 。用户可通过快捷键 [Ctrl] + [K] + [S] (按住Ctrl键不放,再按字母K键和S键)调出快捷键面板,查看全部的快捷键定义。也可在面板中双击任一快捷键,为某项功能指定新的快捷键。一些预定义的常用快捷键包括:格式化文档(整理当前视图中的全部代码),[Shift] + [Alt] + [F];格式化选定内容(整理当前视图中被选定部分代码),[Ctrl] + [K] + [F];放大视图,[Ctrl] + [Shift] + [=];缩小视图,[Ctrl] + [Shift] + [-];打开新的外部终端(打开新的命令行提示符):[Ctrl] + [Shift] + [C]。
3)Vscode下载连接
链接: https://code.visualstudio.com/.
二、Web中的HTML学习
1.打开VScode我们第一步先建立一个文件夹
这里我们同时要选上Auto Save,它会帮你自动保存代码,这样就防止你写代码后没有保存的尴尬。
2.我们建立一个后缀名为html的文件
然后再这个文件中输入以下代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<title>页面标题</title>
</head>
<body>
<h1>我的第一个Web页</h1>
<p>当前有点丑:)</p>
</body>
</html>
3.接下来就是我们展示一下这个做的比较简陋的网页是什么样的了
1)首先我们选择open with live server
当然如果你下载了open in browser插件的话,你也可以选择用它打开,当然推荐用谷歌、火狐等浏览器打开。
2)之后我们就会发现我们制作的网页已被打开
发现这个网页异常的丑陋,基本什么都没有就有一个标题和“我有点丑”,连基本的背景颜色都没有。因此我们要丰富我们的页面,在丰富页面之前我们首先要知道HTML含有哪些“元素”
4. HTML的元素
HTML 使用"标记"(markup)来注明文本、图片和其他内容,以便于在浏览器中显示。HTML 标记包含一些规定的"元素"如 head,title,body,header,footer,article,section,p,div,span,img,aside,audio,canvas,datalist,details,embed,nav,output,progress,video 等等。
我们就拿典型的元素p来说吧,p的作用是一个展示段落的元素。
1)开始标签(Opening tag):包含元素的名称(本例为 p),被左、右角括号所包围。表示元素从这里开始或者开始起作用 —— 在本例中即段落由此开始。
2)结束标签(Closing tag):与开始标签相似,只是其在元素名之前包含了一个斜杠。这表示着元素的结尾 —— 在本例中即段落在此结束。初学者常常会犯忘记包含结束标签的错误,这可能会产生一些奇怪的结果。
3)内容(Content):元素的内容,本例中就是所输入的文本本身。
4.元素(Element):开始标签、结束标签与内容相结合,便是一个完整的元素。
展示我们在之前的代码之后加上了一句代码:
<p>我的猫咪脾气爆:)</p>
加完后它显示的网页是这个样子的:
刨析我们最初的代码的含义:
1 :
<!DOCTYPE html>
声明文档类型。出于历史原因需要,现在可有可无。
2:
<html></html>
html元素。这个元素包裹了整个完整的页面,是一个根元素,其它元素都嵌套到其中。
3:
<head></head>
head元素。 这个元素是一个容器,它包含了所有你想包含在HTML页面中但不想在HTML页面中显示的内容。这些内容包括你想在搜索结果中出现的关键字和页面描述,CSS样式,字符集声明等等。
4:
<meta charset="utf-8">
这个元素设置文档使用utf-8字符集编码,utf-8字符集包含了人类大部分的文字。基本上他能识别你放上去的所有文本内容。毫无疑问要使用它,并且它能在以后避免很多其他问题。
5:
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">:
指定页面的图标,出现在浏览器标签上。(试一试:你可随意下载一个.ico图标文件到工作目录中)
6:
<title></title>:
设置页面标题,出现在浏览器标签上,当你标记/收藏页面时它可用来描述页面。
7:
<body></body>
body元素。 包含你能在页面看到的所有内容,包括文本,图片,音频,游戏等等。
我们来做一下这个页面图标的操作
首先下载一个.icon这种后缀的图标,或者你随意下一个图标上网上转换也可以。
<link rel="shortcut icon" href="./ico/bitbug_favicon.ico" type="image/x-icon">
这句话就是插入这个图标,href=…这个代表的是图标的路径。
让我们来看一下效果
代表我们成功了。
5.html的注释
<p>我在注释外,可以显示!</p>(这句话是可以显示到你所做的页面上的)
<!-- <p>我在注释内!浏览器将忽略我</p> -->(这句话是不会显示的,就是一个注释)
6.HTML标题
HTML 提供了从大到小6级标题,分别是h1~h6
这是实操的代码当然你也可以自己写一些标题内容,例如以下的展示:
<h1>This is heading 1</h1>
<p>This is some text.</p>
<hr>
<h2>This is heading 2</h2>
<p>This is some other text.</p>
<hr>
7.接下来便是html中非常重要的–超链接
有了它你可以随意跳转到某个网页(想去哪就去哪^ ^)
它的语法是:
<a href="https://www.baidu.com/" target="_blank">百度一下</a>
href–即将要跳转的地址的URL
target属性位_blank即在新的页面打开。
锚点
锚点,也称为书签,用于标记页面的某个元素或位置。通过锚点,我们可以轻易的在长页面内实现跳转。
先使用id属性生成某元素的锚点,然后再使用超链接指向该锚点即可。
<h1 id="C4">第四章 论零号病人的重要性</h1>
<a href="#C4">跳到第四章</a>
点击一下跳到第四章他就会直接跳到id为C4这个位置也就是我们的一级标题
8.图片
在页面插入一张图片如下:
<img src="https://mdbootstrap.com/img/logo/mdb192x192.jpg" alt="MDB Logo" width="200" height="200">
特别注释:
img src=“picture.jpg”
该图片文件与当前文档在同一目录中
img src="./images/picture.jpg"
该图片文件在当前目录下的images目录中
img src="…/picture.jpg"
该图片文件在上一级目录中
9. 表格
所给代码如下
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
tr:代表的是行,td:代表行中单元,我觉可以理解橙列 th:是表头单元,也就是相当于一列属性的代表
10.列表
无序列表:
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
/注 如果你想改变标签的样式只需要改ul->ul style=“circle”等等即可/
有序列表
<ol type="a">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
11.表单form
input 标签中的几个基本属性:
name属性 :元素的名称;这个不需要多解释了,也就是name的取值代表为当前input元素起个名字;
size属性 :元素的宽度;很多人都知道在HTML中,常见的宽度是用 width 表示的,而在input中 width 属性只使用与 type=“image” 时使用,input元素的宽度需要通过size属性来设定,size的值为数字,数字越大input元素越长,数字越小input元素越短;
value属性:定义input元素的默认值;
当 input type=“text”、“password”、“hidden” 时,定义输入字段的初始值;
当 input type=“button”, “reset”, “submit” 时,定义按钮上的显示的文本;
当 input type=“checkbox”, “radio”, “image” 时,定义与输入相关联的值;
注意:input type=“checkbox” 和 input type=“radio” 中必须设置 value 属性;value属性无法与 input type=“file” 一同使用。
maxlength属性:定义input元素中可输入的最长字符数;如 maxlength=“50” 表示最多可以输入50个字符;
style属性 :为input元素设定CSS样式;
width属性 :当 input type="image"时,通过width属性控制元素的宽度;
height属性:当 input type="image"时,通过width属性控制元素的高度;
表单中type常见属性大全:
1.type="text"创建单行文本框;
2.type="password"密码输入框
3.type="radio"单选按钮
4.type="checkbox"复选框
5.type="button"普通的一个按钮
6.type="reset"重置按
7.type="file"文件类型
<form action="">
<input type="text" size="30" value="请输入文本">
<br>
<input type="password" name="password" size="30" placeholder="请输入密码">
<br>
上海<input type="radio" value="上海" name="place">
天津<input type="radio" value="天津" name="place">
<br>
你喜欢的音乐:
<br>
纯音乐<input type="checkbox" value="纯音乐" name="music"><br>
古典乐<input type="checkbox" value="古典乐" name="music"><br>
说唱<input type="checkbox" value="说唱" name="music"><br>
<input type="button" value="关注主播不迷路,主播带你上高速" name="button"><br>
<input type="reset">
</form>
<form>
<!-- 文本框,注意有 placeholder 提示符 -->
用户名:<br>
<input type="text" name="name" placeholder="请输入用户名"><br>
<!-- 密码框 -->
密码:<br>
<input type="password" name="ps" placeholder="请输入密码"><br>
年龄:<br>
<!-- 数字输入框,注意 min 和 value 属性-->
<input type="number" name="age" min="18" value="18"><br>
<!-- 单选按钮, 注意 checked 属性 -->
性别:<br>
<input type="radio" name="gender" value="male" checked> 男<br>
<input type="radio" name="gender" value="female"> 女<br>
<input type="radio" name="gender" value="other"> 其它<br>
<!-- 下拉列表,注意 selected 属性 -->
党派:<br>
<select name="party">
<option value="D">民主党</option>
<option value="R" selected>共和党</option>
<option value="N">无党派</option>
</select><br>
<!-- 多选框 -->
您有哪些交通工具:<br>
<input type="checkbox" name="vehicle1" value="Bike"> 自行车<br>
<input type="checkbox" name="vehicle2" value="Motocycle" checked> 摩托车<br>
<input type="checkbox" name="vehicle3" value="Car"> 轿车<br>
<input type="checkbox" name="vehicle4" value="Jet"> 飞机<br>
<!-- 日期选择器 -->
您的工作日期:<br>
<input type="date"><br>
<!-- 文件选择器 -->
上传您的照片:<br>
<input type="file" name="photo"><br>
<!-- 文本输入区域,注意 rows 和 cols 属性 -->
您的建议:<br>
<textarea name="message" rows="5" cols="30">
The cat was playing in the garden.
</textarea><br><hr>
<!-- 表单提交/重置按钮,将表单中的数据取消或传输给服务器端进行处理 -->
<input type="submit" value="提 交">
<input type="reset" value="重 置">
</form>
12 pre:预设格式(如果你想在html中保持你的格式不变请用pre)
<pre>
我如果爱你——
绝不象攀援的凌霄花,
借你的高枝炫耀自己;
我如果爱你——
绝不学痴情的鸟儿,
为绿荫重复单调的歌曲;
也不止像泉源,
常年送来清凉的慰藉;
也不止像险峰,
增加你的高度,衬托你的威仪。
甚至日光。
甚至春雨。
不,这些都还不够!
我必须是你近旁的一株木棉,
作为树的形象和你站在一起。
根,紧握在地下,
叶,相触在云里。
每一阵风过,
我们都互相致意,
但没有人,
听懂我们的言语。
你有你的铜枝铁干,
像刀,像剑,
也像戟;
我有我红硕的花朵,
像沉重的叹息,
又像英勇的火炬。
我们分担寒潮、风雷、霹雳;
我们共享雾霭、流岚、虹霓。
仿佛永远分离,
却又终身相依。
这才是伟大的爱情,
坚贞就在这里:
爱——
不仅爱你伟岸的身躯,
也爱你坚持的位置,足下的土地。
</pre>