前言:现在对于程序员这一行的技术要求越来越高了,前端一手jquery走天下的时代已经过去,后端也不单单是会个SSM的增删改就可以找到工作,前后端分离已经普遍实现,作为后端人员的我们,在一般的公司可能很难接触到大并发集群等,更别说上手经历一次实际的操作了,更多的还是业务型接口的开发,但是我们不能满足现状,必须要想着提高自己各方面能力,在需要的时候可以从兵器库中拿出来。前端的一些知识之前算是一直在接触,但是当时写的是JSP页面,html+css+jquery,现如今更多的DOM操作早已由各种前端框架去操作,数据驱动模型,甚是方便,所以我决定系统的有规划的从前端开始整理一遍,虽然对html、css、js、es6、vue有一些了解但是不是太系统,知识掌握不扎实,希望这次可以边巩固边记录下来,也可以给大家一个参考,尤其是后端想接触前端一些知识的童鞋。
开发工具
我目前使用的是VSCODE,还有Dreamweaver、HBuilder等,大家可以自行选择,使用工具主要是因为比较方便,有提示,还可以自动格式化,如果想用文本也可以开发,开发之后修改后缀名为html,用浏览器打开就可以看到效果。
学习路线
HTML—>CSS—>JS—>ES6—>VUE
基础概念可能不会说太多,更多的是一些运用。
整体结构
<html>
<head>头信息</head>
<body>体信息</body>
</html>
- 头信息:我们可以规定编码格式以及标题,还可以写CSS或JS代码,或者引入外部的CSS文件或JS文件。
- 体信息:就是我们网页要展示的内容,通过填写各类标签,来实现我们想要的效果。
- 标签:一个HTML页面就是由标签组成的,犹如盖房子般,上面的大结构像房子的房梁,各式各样的砖和屋内的陈设就像我们写的各种标签,一般都是成对出现的<></>,个别的是单个出现,例如br(换行)、hr(横线)。
- 属性:标签只是实现了基本我们想要的效果,如果想要实现特定的效果,还需要给标签加上特定的属性。
- 元素:标签加内容加属性就是元素。
基本元素
标题
h标签会自动粗体,大写其中的内容,并自动换行。
总共有六个标题标签<h1></h1><h2></h2><h3></h3><h4></h4><h5></h5><h6></h6>
数字越大,标题越小。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>标题</title>
</head>
<body style="text-align: center;">
<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>
<h4>h4</h4>
<h5>h5</h5>
<h6>h6</h6>
</body>
</html>
效果:
段落
p标签即段落标签,会自动换行,p标签以外的内容都会重起一行,不会跟在p标签内容的后面。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>段落</title>
</head>
<body style="text-align: center;">
<p>这是段落标签</p>段落标签外的内容
</body>
</html>
效果:
粗体
b标签和strong标签都可以实现粗体的效果。
区别:b是bold的缩写,仅仅表示该文本是粗体,并不暗示这段文字的重要性。
strong虽然也是粗体,但是更多的是强调语义上的加重,提醒用户该文本的重要性。在SEO(搜索引擎优化)的时候,也更加容易帮助 用户找到重点内容,推荐使用strong。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>粗体</title>
</head>
<body style="text-align: center;">
<b>这是b标签</b>
<strong>这是strong标签</strong>
</body>
</html>
效果:
斜体
i标签和em标签都可以实现斜体效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>斜体</title>
</head>
<body style="text-align: center;">
<i>这是i标签</i>
<em>这是em标签</em>
</body>
</html>
效果:
预格式
pre标签,当我们在网页上显示代码时,不使用pre标签我们写的代码会输出成一行,使用pre标签则会按照我们写的格式输出。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>预格式</title>
</head>
<body style="text-align: center;">
public static void main(String args[]){
System.out.println("没在pre标签内");
}
<pre>
public static void main(String args[]){
system.out.println("在pre标签内");
}
</pre>
</body>
</html>
效果:
删除效果
del标签即删除标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>删除效果</title>
</head>
<body style="text-align: center;">
<del>删除此行</del>
</body>
</html>
效果:
下划线
ins标签即下划线标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>下划线</title>
</head>
<body style="text-align: center;">
<ins>下划线</ins>
</body>
</html>
效果:
图像
img标签即图像标签,需要设置其属性src指定图像的路径。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图像</title>
</head>
<body style="text-align: center;">
<img src="/Users/liuzhenyu/Downloads/20190414165045567.jpg" />
</body>
</html>
效果:
超链接
a标签即用来显示超链接,href属性设置链接跳转的地址。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>超链接</title>
</head>
<body style="text-align: center;">
<a href="http://www.baidu.com">百度</a>
</body>
</html>
效果:
表格
table标签用于显示一个表格,theadtr标签表示一行,td标签表示一个单元格。
width属性设置table的宽度或者td的宽度
border属性可以设置表格的边宽
colspan属性可以设置td水平合并
rowspan属性可以设置td垂直合并
bgcolor可以设置tr或者td的背景颜色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表格</title>
</head>
<body style="text-align: center;">
<table width="100%" border="1">
<tr bgcolor="red">
<td width="70%" colspan=2>水平合并</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td rowspan=2 bgcolor="blue">垂直合并</td>
<td>7</td>
</tr>
<tr>
<td>8</td>
</tr>
</table>
</body>
</html>
效果:
列表
ul标签代表无序列表,ol标签代表有序列表。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>列表</title>
</head>
<body style="text-align: center;">
<ul>
<li>无</li>
<li>序</li>
<li>列</li>
<li>表</li>
</ul>
<ol>
<li>有</li>
<li>序</li>
<li>列</li>
<li>表</li>
</ol>
</body>
</html>
效果:
块标签
div标签和span标签
这两种标签都是布局用的,这种标签本身没有任何显示效果,通常是用来结合CSS进行页面布局。
div是块元素,会自动换行;span是内联元素,不会换行。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>块标签</title>
</head>
<body>
<div style="height: 100px;width: 200px;background-color: green;">
DIV标签
</div>DIV会换行
<span style="background-color: blue;">SPAN标签</span>SPAN不会换行
</body>
</html>
效果:
字体
font标签表示字体,常用的属性有color和size,分别表示颜色和大小。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>字体</title>
</head>
<body>
<font color="green" size="1">字体可以修改颜色和大小</font>
<font color="red" size="10">字体可以修改颜色和大小</font>
</body>
</html>
效果:
内联框架
iframe标签即内联框架,通过内联框架可以实现在网页中插入其他网站的网页。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>内联框架</title>
</head>
<body>
<iframe src="https://how2j.cn/" width="800px" height="400px"></iframe>
</body>
</html>
效果:
结尾
未完待续,今天先写这么多,有问题的地方大家指出来,共同进步!!!
这是我觉得不错的学习网站之一,里面还是比较全面的,如果大家都能学完,保证可以找到一个不错的工作,点击进去看看吧!