目录
一.前端三剑客
1.前导
(1)HTML,CSS,JS都是单独的语言;
(2)HTML,CSS,JS构成前端技术基础;
2.三剑客的分工
(1)HTML:负责网页的架构;
(2)CSS:负责网页的样式,美化;
(3)JavaScript(JS):负责网页的行为;
二.VsCode的介绍与配置
1.vscode的介绍
全称为
Visual Studio Code
,是⼀款免费开源的现代化轻量级代码编辑器,⽀持⼏乎所有主流的开发语⾔的语法⾼亮、智能代码补全、⾃定义快捷键、括号匹配和颜⾊区分、代码⽚段、代码对⽐ Diff、GIT命令 等特性,⽀持插件扩展,并针对⽹⻚开发和云端应⽤开发做了优化。
2.vscode的下载安装
3.vscode的使用
3.1 图形界面操作
3.3 常用插件
我们通常需要代码提示我们辅助编写,这个时候就涉及到VSCODE提供的一系列的插件插件安装在 Extension 中,点击即可看到一个搜索按钮,可以输入关键字搜索自己想要的插件。如图:
前端开发推荐安装的几个插件:
jshint
:
js
代码规范检查。
Beautify
:⼀键美化代码的插件。
Javascript(ES6) code snippets
:
ES6
语法提示。
Auto Rename Tag
:⾃动重命名标签。标签都是成对出现的,开始标签修改了,结束标签
Auto Close Tag
:⾃动闭合标签。针对⼀些⾮标准的标签,这个插件还是很有⽤的。
vscode-icons
:可选。提供了很多类型的⽂件夹
icon
,不同类型的⽂件夹使⽤不同的
,会让⽂件查找更直观。
open in browser
:可选。右键可以选择在默认浏览器中打开当前⽹⻚。
三.HTML基础标签
HTML基础知识
1.HTML为何物?
HTML是超文本标记语言(Hyper Text Markup Language)是用来描述网页的一种语言。
注意:HTML不是一种编程语言,而是一种标记语言。
简单来说,HTML文件也可以直接称为网页,浏览器的作用就是读取HTML文件,并且以网页的形式去展示它们。
2.标签介绍
HTML标签是由尖括号包围起来的关键词,如。
单标签与双标签
(1)双标签书写规则:内容双标签名称>,例如内容;
(2)单标签书写规则:,例如
;
3.HTML属性
HTML属性指的是标签属性,HTML标签可以拥有属性,给相关的HTML元素提供更多的信息。
注意:
(1)一个HTML标签可有多个属性;
(2)属性写在HTML元素的开始标签;
(3)属性总是以名称/键值对的形式出现,比如: ;
4.HTML标签骨架
- span >html>
- html lang="en">
- head>
- meta charset="UTF-8">
- meta http-equiv="X-UA-Compatible" content="IE=edge">
- meta name="viewport" content="width=device-width, initialscale=1.0">
- title>Documenttitle>
- head>
- body>
- body>
- html>
:向浏览器声明当前的⽂档类型是 html
:是⽹⻚当中最⼤的标签,我们称之为根标签
:为⽹⻚的头部,它⾥⾯的内容主要⽤来定义⽹⻚标签及给浏览器查看的
:
定义⽹⻚的编码为UTF-
8
:为⽹⻚标题标签,它⾥的内容会显示在浏览器的标签⻚上
:为⽹⻚主体标签,它⾥⾯的内容都会显示在浏览器的⽩⾊窗⼝区域
基本的HTML标签
1.HTML标题标签
HTML的文章标题标签,如:
~
分六个级别,效果一次减少,并且每个标题都是独占一行空间。
如:
- h1>⼀号标题h1>
- h2>⼆号标题h2>
- h3>三号标题h3>
- h4>四号标题h4>
- h5>五号标题h5>
- h6>六号标题h6>
注意:没有
2.换行与空格
2.1空格问题
;表示一个空格;
如:
hello world
2.2换行问题
表示换行;
如:
- hello
- br/>
- world
扩展:对于HTML语言,没有严格的语义,即
与
或者
浏览器都可以识别出来。
html1.0~5.0 xhtml(严格) 五大浏览器联合更新自己的版本HTML5(不严格)
3.HTML段落
3.1段落标签介绍
HTML段落是通过
标签进行定义的。
如:
- h2>今⽇学习内容:h2>
- p>学了标题标签p>
作用:(1)虽然p标签的文字显示外观来看,和普通文字没有区别,但是它独占一行;
(2)标签语义化,便于定位;
3.2标签语义化
在合适的地方显示合理的标签,搜索引擎也偏好于标签语义化做的更好的页面。
4.字体加粗与倾斜及删除效果
4.1加粗标签
(1)为加粗标签;
(2)为加粗标签;
如:
- 普通⽂字
- b>我是加粗⽂字1b>
- strong>我是加粗⽂字2strong>
区别:b标签为简单加粗;strong为加粗效果+特别强调效果;
4.2倾斜
(1) 为倾斜标签;
(2)也可实现倾斜;
如:
- 普通⽂字
- i>我是ii>
- em>我是emem>
区别:em标签的语义更强一些。i为倾斜了,em为又倾斜了。
4.3删除
删除效果;
删除效果;
如:
- 原价:s>998s>
- 现值:9.98
- br>
- 原价:del>999del>
- 现价:9.98
注意:这两个标签没有任何语义区别,而w3c则说明s标签要被del标签替代;
5.图片标签
如:
img src="Logo2.png" alt="加载中" width="500" height="500" title="⿏标悬停在图⽚上的提示⽂字">
6.超链接
6.1超链接使用
超链接:点击页面发生跳转;
其中href为:跳转的网址;
如:
a href="https://www.baidu.com">点击我可以打开百度a>
target=”_blank”:在其它窗口打开新连接;
a href="https://www.baidu.com" target="_blank">点击我可以打开百度,并且打开新 的窗⼝a>
6.2空链接
空链接:在href中指定为#号即可;
作用:(1)暂时不知道点击之后跳转到哪里,使用空链接占位;
(2)刷新界面;
a href="#">a>
7.列表
列表标签可分为:无序列表和有序列表。
7.1无序列表
使用标签:
注意:
(1)ul标签可以嵌套若干个li标签;
(2)每一个li标签代表着每一条数据;
(3)每个li标签之间没有顺序;
如:
- ul>
- li>pythonli>
- li>javali>
- li>goli>
- ul>
7.2有序列表
使用标签:
注意:
(1)有序;
(2)且是ol开始的;
如:
- ol>
- li>基础班级li>
- li>测试li>
- li>pythonli>
- ol>
8.布局标签
8.1布局标签的介绍
布局标签没有任何的语义,也没有所谓的应用场景。
作用:划分页面区域,辅助页面布局;
布局标签为:
div标签:
大盒子,独占一行;
span标签:小盒子,一行可以放多个;
- div>我是divdiv>
- div>我是divdiv>
- div>我是divdiv>
- div>我是divdiv>
- span>我是spanspan>
- span>我是spanspan>
- span>我是spanspan>
- span>我是spanspan>
9.表格标签
9.1表格标签介绍
作用:展示数据非常整齐;
基本语法:
- table>
- tr>
- td>td>
- tr>
- table>
(1)table标签:定义表格标签;
(2)tr标签:定义表格中的行;
th标签:表格单元格;
td标签:定义表格中的单元格,必须嵌套其中;
9.2表格标签的其他属性
(1)align:表格对齐方式。如:left,center,right;
(2)border:表格边框。如:1;
(3)cellpadding:单元边沿与其内容之间的空白,默认为1像素;
(4)cellspacing:单元格与单元格之间的空白,默认为2像素;
(5)width:设置表格宽度;
注意:需要写在table标签里;
9.3表格结构标签
表格结构标签:表格头部和表格主体两大部分;
(1)表格头部区域:
标签;(2)表格主体区域:
标签;作用:结构就更加清晰,让表格有更好的语义;
9.4合并单元格
(1)合并单元格方式
跨行合并:rowspan=”合并单元格的个数”;
跨列合并:colspan=”合并单元格的个数”;
(2)目标单元格
跨行:最上册单元格为目标单元格,写合并代码;
跨列:最左侧单元格为目标单元格,写合并代码;
(3)合并单元格步骤
1.先确定是跨行还是跨列合并;
2.找到目标单元格;
3.删除多余单元格;
10.表单标签
10.1表单标签介绍
表单标签我们可以直接称为 form 标签,标签书写如下:
(1)表单标签:
。form表单标签里面就是所有用户填写的表单数据;
(2)属性 action:把表单数据交给指定后台程序去处理;
(3)属性 method:传递数据时方式方法。
1.默认为post请求(隐式提交数据);
2.get明文传送数据;
如:
- form action="***.py" method="POST">
- form>
10.2输入框与单选多选框
输入框标签(input标签):
(1)type:属性指定输入框内容;
(2)type=”text”:则是最普通的文本输入框。为单行;
(3)type=”password”:则为密码输入框。为单行;
placeholder:给用户提示(提升用户体验感的属性),并且在为本域中都可以使用;
(4)type=”radio”:单选框;
(5)type=”checkbox”:为多选框;
如:
span>用户名:span> input type="text" placeholder="请输入用户名"> br> span>密码:span> input type="password" placeholder="请输入密码"> br> span>性别:span> input type="radio" name="gender"> span>男span> input type="radio" name="gender"> span>女span> br> span>兴趣爱好:span> input type="checkbox" id="sleep"> label for="sleep">睡觉label> input type="checkbox" id="playgame"> label for="playgame">打游戏label> input type="checkbox" id="liangnv"> label for="liangnv">女label> input type="checkbox" id="yumaoqiu"> label for="yumaoqiu">羽毛球label> br>
10.3下拉框
使用标签:select为下拉框的标签,嵌套若干个option标签。其中每一个option为下拉框中的一个选项。
selected=”selected”。表示默认选中状态;
- select name="" id="">
- option value="">option>
- select> 123
如:
- select name="" id="">
- option value="">北京option>
- option value="">上海option>
- option value="">⼴州option>
- option value="" selected="selected">深圳option>
- select> br>
10.4文本域
使用标签:
(1)cols:列;
(2)rows:行;
- 建议:
- textarea name="" id="" cols="30" rows="10">textarea>
- br>
10.5按钮标签
(1)普通按钮:
标签:input指定type=”button”;
通过value属性,指定按钮的文字;
如:
- 普通按钮:
- input type="button" value="按钮">
- br>
(2)重置按钮:点击重置按钮就会将数据恢复到默认状态;
标签:input指定type=”reset”;
注意:重置按钮自动会有重置的文字;
如果指定为value属性,则显示什么;
如:
- 重置按钮:
- input type="reset" value="重置按钮">
- br>
(3)提交按钮:点击提交按钮可以让表单提交给指定后台处理;
标签:input指定type=”submit”;
注意:提交按钮自动会有提交的文字;
如:
- 提交按钮:
- input type="submit" value="我是提交">
四.CSS基础选择器
CSS介绍
CSS样式表介绍
设置HTML⻚⾯中⽂本内容
图⽚的外形
版⾯的布局和外观显示样式
CSS基础语法
1
:属性值
1
;属性名
2
:属性值
2
}
- p>我是红⾊的pp>
- p>我是红⾊的pp>
- p>我是红⾊的pp>
- h4>我是h4h4>
- h4>我是h4h4>
- h4>我是h4h4>
- h4>我是h4h4>
实现:
- head>
- style>
- p{
- color: red;
- }
- style>
- head> body>
- p>我是红⾊的pp>
- p>我是红⾊的pp>
- p>我是红⾊的pp>
- h4>我是h4h4>
- h4>我是h4h4>
- h4>我是h4h4>
- h4>我是h4h4>