文章目录
前言
要开发一个网站,需要学习的技术:
(1)前端——网页相关的
前端三剑客:
html(页面的元素,如按钮、下拉菜单等等)
css(页面的样式)
javascript(用户交互的动态的动作)
更形象的方式形容这三个:html是骨,css是皮,javascript是魂。
(2)后端
Java web程序+web服务器
对于浏览器:
对于前端开发和后端开发比较专业、常用一点的有:chrome(谷歌)、firefox(火狐)、safari(苹果)
写前端代码:vscode(文本编辑器)、idea
前端三剑客:HTML、CSS、JavaScript都是编程语言。
一、HTML结构
1.认识HTML标签
HTML代码是由“标签”构成的
对于标签名:html规范定义了标签名,如果写的不是html标准的标签名,不会报错,但没有任何效果。
1.标签名(body)放到<>中
2.大部分标签成对出现,< body >为开始标签,< /body >为结束标签
3.少数标签只有开始标签,称为“单标签”半闭合标签:只有开始标签。例:< br >
4.开始标签和结束标签之间,写的是标签的内容(hello)
5.开始标签中可能会带有“属性”,id属性相当于给这个标签设置了一个唯一的标识符(身份证号码)
针对于不同的标签,html也定义了有哪些属性。
如果写的属性名不是该标签html标准规范中的,也不会报错,但不会生效6.有部分标签,可以是以下写法< input/ >
2.HTML文件基本结构
<html>
<head>
<title>hello world</title>
</head>
<body>
这是网页的正文,会显示在网页上
</body>
</html>
html标签是整个html文件的根标签(最顶层标签)
head标签中写页面的属性,设置。是头信息
body标签中写的是页面上显示的内容。是网页正文
title标签中写的是页面的标题
直接写网页内容,也可以显示出来,但是这种方式不推荐
(1)要遵守书写规范
(2)页面一般会设置一些属性
3.标签层次结构
1.父子关系
2.兄弟关系
<html>
<head>
<title>第一个页面</title>
</head>
<body>
hello world
</body>
</html>
完整的html结构,对应起来,是一个多子树(一个结点下有多个子结点)(称为dom树,dom:文档对象模型的缩写)
其中:
1.< html >作为最顶级的标签
2.< head >和< body >是同一层/同一级,是具有兄弟关系的标签
3.< html >和< head >是父标签/子标签,属于父子关系
4.< html >和< body >是父标签/子标签,数于父子关系
4.开发者工具
开发者工具就是前端开发调试前端代码的工具
可以使用chrome的开发者工具查看页面的结构
打开的方式:
(1)f12
(2)页面元素右键–>检查
(3)右边…选择[更多工具]–>开发者工具
工具显示:
可以调整为中文
调整完成。
5.快速生成代码框架
在vscode中创建文件xxx.html,直接输入!,按tab键,此时能自动生成代码的主体框架。
<!DOCTYPE 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, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
二、HTML常见标签
1.注释标签
<!-- 注释的内容 -->
ctrl+/快捷键可以快速进行注释/取消注释
注释的原则:
1.要与代码逻辑一致
2.尽量使用中文
3.不要传递负能量
2.标题标签:h1-h6
有六个,从h1-h6,数字越大,则字体越小。
<h1>hello</h1>
<h2>hello</h2>
<h3>hello</h3>
<h4>hello</h4>
<h5>hello</h5>
<h6>hello</h6>
显示结果:
3.段落标签:p
把一段比较长的文本粘贴到html中,会发现并没有分成段落,例如如下文本:
<html>
<head>
<title>段落标签</title>
</head>
<body>
内容
</body>
</html>
采用这段代码显示为:
发现并没有显示成段落。
p标签表示一个段落
<p>这是一个段落</p>
通过p标签改进上述代码,每个段落放到p标签中
<html>
<head>
<title>段落标签</title>
</head>
<body>
<p>1996年1月,Sun公司发布了Java的第一个开发工具包(JDK 1.0),这是Java发展历程中的重要里程碑,标志着Java成为一种独立的开发工具。9月,约8.3万个网页应用了Java技术来制作。10月,Sun公司发布了Java平台的第一个即时(JIT)编译器。</p>
<p>1997年2月,JDK 1.1面世,在随后的3周时间里,达到了22万次的下载量。4月2日,Java One会议召开,参会者逾一万人,创当时全球同类会议规模之纪录。9月,Java Developer Connection社区成员超过10万。</p>
<p>1998年12月8日,第二代Java平台的企业版J2EE发布。1999年6月,Sun公司发布了第二代Java平台(简称为Java2)的3个版本:J2ME(Java2 Micro Edition,Java2平台的微型版),应用于移动、无线及有限资源的环境;J2SE(Java 2 Standard Edition,Java 2平台的标准版),应用于桌面环境;J2EE(Java 2Enterprise Edition,Java 2平台的企业版),应用于基于Java的应用服务器。Java 2平台的发布,是Java发展过程中最重要的一个里程碑,标志着Java的应用开始普及。</p>
<p>1999年4月27日,HotSpot虚拟机发布。HotSpot虚拟机发布时是作为JDK 1.2的附加程序提供的,后来它成为了JDK 1.3及之后所有版本的Sun JDK的默认虚拟机 [11] 。</p>
</body>
</html>
显示结果为:
总结:
< p >占据单独的一行,如果不使用标签,内容换行(使用br标签)及空格(使用空格的转移符),在html是没有用的。
注意:
1.p标签之间存在一个空隙
2.当前的p标签描述的段落,前面还没有缩进(CSS会涉及)
3.自动根据浏览器来决定排版
4.html内容首位处的换行、空格均无效
5.在html中文字之间输入的多个空格只相当于一个空格
6.html中直接输入换行不会真的换行,而是相当于一个空格
4.换行标签:br
br是break的缩写,表示换行
1.br是一个单标签(不需要结束标签)
2.br标签不像p标签那样带有一个很大的空隙
3.< br/ >是规范写法,不建议写成< br >
代码:
<html>
<head>
<title>换行标签</title>
</head>
<body>
<p>
1996年1月,Sun公司发布了Java的第一个开发工具包(JDK 1.0),这是Java发展历程中的重要里程碑。<br/>
1997年2月,JDK 1.1面世,在随后的3周时间里,达到了22万次的下载量。<br/>
1998年12月8日,第二代Java平台的企业版J2EE发布。<br/>
1999年4月27日,HotSpot虚拟机发布。 <br/>
</p>
</body>
</html>
显示结果为:
5.格式化标签
加粗:strong标签和标签
倾斜:em标签和i标签
删除线:del标签和s标签
下划线:ins标签和u标签
<html>
<head>
<title>格式化标签</title>
</head>
<body>
<strong>strong 加粗</strong>
<b>b 加粗</b>
<em>em 倾斜</em>
<i>i 倾斜</i>
<del>del 删除线</del>
<s>s 删除线</s>
<ins>ins 下划线</ins>
<u>u 下划线</u>
</body>
</html>
展示结果:
这部分不重要,了解就行,如果文本有样式,其实使用css来设置样式更为常见
6.图片标签:img
img标签必须带有src属性,表示图片的路径
< img src="cui.jpg" >
此时要把rose.jpg这个图片文件放到和html中的同级目录中。
img标签的其他属性:
1.alt:替换文本,当文本不能正确显示的时候,会显示一个替换的文字
2.title:提示文本,鼠标放在图片上,就会有提示
3.width/height:控制宽度高度,高度和宽度一般改一个就行,另外一个会等比例缩放,否则就会图片失衡
3.border:边框,参数是宽度的像素,但是一般使用CSS来设定
<img src="cui.jpg" alt="崔宇植" title="那年我们" width="500px" height="250px" border="5px">
展示结果:
注意:
1.属性可以有多个, 不能写到标签之前
2.属性之间用空格分割, 可以是多个空格, 也可以是换行.
3.属性之间不分先后顺序
4.属性使用 “键值对” 的格式来表示.
关于目录结构: 对于一个复杂的网站, 页面资源很多, 这种情况可以使用目录把这些文件整理好.
1.相对路径: 以 html 所在位置为基准, 找到图片的位置.
同级路径: 直接写文件名即可 (或者 ./)
下一级路径:image/1.jpg
上一级路径:. ./image/1.jpg2.绝对路径: 一个完整的磁盘路径, 或者网络路径. 例如
磁盘路径: D:\cui.jpg
网络路径: https://images0.cnblogs.com/blog/130623/201407/300958470402077.png
7.链接标签
href: 必须具备, 表示点击后会跳转到哪个页面.
target: 打开方式. 默认是 _self. 如果是 _blank 则用新的标签页打开.
<a href="http://www.baidu.com">百度</a>
链接的几种形式:
1.外部链接: href 引用其他网站的地址
<a href="http://www.baidu.com">百度</a>
2.内部链接: 网站内部页面之间的链接. 写相对路径即可.
在一个目录中, 先创建一个 1.html, 再创建一个 2.html
<!-- 第一个页面 -->
<html>
<head>
<title>第一个页面</title>
</head>
<body>
<a href="第二个页面.html">点我跳转到第二个页面.html</a>
</body>
</html>
<!-- 第二个页面 -->
<html>
<head>
<title>第二个页面</title>
</head>
<body>
<a href="第一个页面.html">点我跳转到第一个页面.html</a>
</body>
</html>
展示结果:
3.空链接: 使用 # 在 href 中占位.
<a href="#">空链接</a>
4.下载链接: href 对应的路径是一个文件. (可以使用 zip 文件)
<a href="AutoCAD 2007 - Simplified Chinese.zip">下载文件</a>
5.网页元素链接: 可以给图片等任何元素添加链接(把元素放到 a 标签中)
<a href="http://www.baidu.com"><img src="cui.jpg" alt=""></a>
点击图片即跳转到a标签定义的跳转路径
6.锚点链接: 可以快速定位到页面中的某个位置.
用于url中,表示网页上一个部分
比如在一个test.html中,里边有一个< p id=“p1” >…< /p >
如果访问test.html#p1,就是跳转到test.html页面中id为p1的元素位置上
网络资源url:[协议名]: //[ip或域名][端口号]/[资源的路径]#[锚点值]?[参数名1=参数值1&参数名2=参数值2…]
这里的参数是url中的参数,也成为queryString
例:http://localhost/test.html#h6?username=abc&password
<html>
<head>
<title>锚点链接</title>
</head>
<body>
<a href="#6">第一页</a>
<a href="#11">第二页</a>
<a href="#16">第三页</a>
<h3 >1</h3>
<h3>2</h3>
<h3>3</h3>
<h3>4</h3>
<h3>5</h3>
<h3 id="6">6</h3>
<h3>7</h3>
<h3>8</h3>
<h3>9</h3>
<h3>10</h3>
<h3 id="11">11</h3>
<h3>12</h3>
<h3>13</h3>
<h3>14</h3>
<h3>15</h3>
<h3 id="16">16</h3>
<h3>17</h3>
<h3>18</h3>
<h3>19</h3>
<h3>20</h3>
</body>
</html>
前边我们选择的数字是几,该数字就会在页面的最上方,除非到了最后进度条拉不下来就会出现最后的元素。
禁止标签跳转:< a href=“javascript:void(0);” >或者< a href=“javascript:;” >