WEB入门浅谈01

最新推荐文章于 2024-12-16 12:26:55 发布

原创最新推荐文章于 2024-12-16 12:26:55 发布 · 547 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#web #html

WEB专栏专栏收录该内容

27 篇文章

订阅专栏

WEB入门浅谈01

WEB入门(了解)

JAVA WEB ：JAVA WEB 就是用 JAVA 进行 WEB 开发，从而开发一个网站
而在 WEB 中，又分为前端与后端两大模块，
前端：界面在前端中，我们主要用到的语言为：HTML 、 CSS 、 JavaScript ，这三门语言被称为三剑客（ JavaScript 与 Java 没有任何关系，只是两门语言的名字有些像）而一个专业的前端工程师需要掌握的语言远不止于这三门语言。
后端：服务器（负责主要的业务逻辑）在后端我们用的语言就是 JAVA 因为 JAVA 语言就是写后端的。
在后端的学习中，我们主要学习的内容由： HTTP 协议、 Tomcat 服务器、 Servlet（Tomcat提供给用户的编程接口）、 Linux （用 Linux 把网站部署到云服务器上，这样一来，外面的用户就可以访问我们的网站了）、网络原理、多线程编程、 JVM 原理
HTML : (骨)描述了页面的整体框架
CSS ：(皮)描述了页面的样式
JavaScript ：(魂)描述了页面的行为

HTML

HTML 全称 Hyper Text Markup Language 意为超文本标记语言
HTML 不是一门编程语言，而是一种用来告知浏览器如何组织页面的标记语言， HTML 文件由一系列的元素组成，一对标签可以将一段文字、图片等包裹起来添加超链接或设置其属性等。
不同的标签在页面上看到的效果也是不同的。如： h1-h9标签
标签之间是可以嵌套的，我们把这种嵌套关系称为父子关系。如下代码中： html 标签是 head 标签和 body 标签的父标签/父元素

基本格式

一个 HTML 文件的基本格式如下：

<html>

	<head>

	</head>

	<body>

		<div>	</div>

	</body>

</html>

<html>

	<head>
		<title>XXX标签页</title>
	</head>

	<body>
		<h3>这是一个小标题</h3>
		<div>文章内容</div>
		<div>文章内容的补充</div>
		<div>文章内容的补充</div>
	</body>

</html>

DOM树

如上的 html 文件，我们就可以为其画一个 DOM 树：
在这里插入图片描述
DOM ( Document Object Model )也叫文档对象模型
一个html文件也叫一个文档
html文件里把每一个标签都认为是一个对象，也就是每个文档里包含很多对象
而这样的树就叫做DOM树

标准格式

当在 idea 中编辑 html 文件时，我们可以先输入 ! 后再借助快捷键 TAB 来快速生成html页面标准结构，如下：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>

</body>
</html>

其中，第一行的 <!doctype html> 表示文件类型，属于html文件
而第二行的 <html lang="en"> 表示html标签的属性，一个标签可以有很多属性，而lang这个属性就表示当前文件的语言
接下来就是<meta charset="UTF-8">表示字符编码集，没有这个就容易乱码，再后面就是页面的一些属性了，如在页面中展示的尺寸设置、缩放等一些属性，一般都是固定写法，不用修改
接下来的<title>Document</title>就是我们这个页面的标题，在浏览器的页面标签栏进行显示，如图，（这时三个页面的标签页，其中红框表示页面的标题）：
在这里插入图片描述

常见元素介绍

标题元素

标题元素：h1~h6 ，其中h1标题字体最大，但不绝对，可以通过其它的手段进行修改
在标题元素中，多个空格会被合并成一个空格，换行符会被直接忽略

    <h1></h1>
    <h2></h2>
    <h3></h3>
    <h4></h4>
    <h5></h5>
    <h6></h6>

注释

注释：在html中，我们的注释也可以理解成注释标签

<!--这是一个注释-->

段落元素

段落标签：在同一个段落标签中，空格与换行与在标题标签的一样，不会显示出来，可以同时有多个段落标签，以此来区分各个段落
在一个标签里，可以通过<br>来实现换行的目的。

<body>
	<p></p>
	<p></p>
	<p style = "text-indent: 30px">
	这是一个小段落，从无人的巷口到繁华的街边，都让我想起了拥有你的从前，我已经
	忘记了应该如何思念，只知道它被埋葬在公园的某天，记忆的颜色也逐渐的褪去，故
	事的每一个段落都是那么美丽，时空交错请把我送回那个雨季，让我再用吉他弹奏这
	首为你写的旋律，清晨的阳光也散落在窗台，选择一个人旅行因为害怕伤害，我们都
	经历着爱或者被爱，分开，谁也无法更改最后释怀，就像每一个季节都有花败或花
	开，就像已经流逝的岁月不能再重来，虽然结局我们都已经无法在更改，但是我会记
	得有你的每段精彩。
	</p>
	<p style = "text-indent: 2em">
	这是第二个小段落，从无人的巷口到繁华的街边，都让我想起了拥有你的从前，我已
	经忘记了应该如何思念，只知道它被埋葬在公园的某天，记忆的颜色也逐渐的褪去，
	故事的每一个段落都是那么美丽，时空交错请把我送回那个雨季，让我再用吉他弹奏
	这首为你写的旋律，清晨的阳光也散落在窗台，选择一个人旅行因为害怕伤害，我们
	都经历着爱或者被爱，分开，谁也无法更改最后释怀，就像每一个季节都有花败或花
	开，就像已经流逝的岁月不能再重来，虽然结局我们都已经无法在更改，但是我会记
	得有你的每段精彩。
	</p>
<body>

字体属性元素

如果要调整字体大小（字号）就需要用到CSS来实现，而px是页面显示的基本单位（像素），em也是一种单位，与字体当前大小有关，1em = 1个当前字体的大小
在head标签中，可以写一个style标签来写CSS的相关内容（当p标签有自己的属性时，则会忽略style里的属性。）

<head>
    <style>
        p{
            text-indent: 2em;
        }
    </style>
</head>

列表元素

列表标签：分为有序标签和无序标签，ul为无序标签，ol为有序标签。
列表中的每一项写进li标签里，放在有序无序标签里
有序无序还可以进行嵌套

        <ul>
            <li>AA</li>
            <li>BB</li>
            <li>CC</li>
        </ul>
        
        <ol>
            <li>AA</li>
            <li>BB</li>
            <li>CC</li>
        </ol>

超链接元素

超链接标签：a标签，其中href属性中写的是跳转至指定页面的url或者本文件目录下的位置信息。a标签展示的样式通过CSS也是可以进行修改的

	<a href="www.baidu.com">跳转到指定页面</a>
	<a href="hello.html">跳转到指定页面</a>

图片元素

图片标签：这里的src属性就是图片的路径，而alt属性就是当图片显示失败时，显示alt的内容
其中图片的路径可以是目录路径，如果是网络图片就可以用图片的url来填写路径，当网络图片被删除时，就会图片展示失败而显示alt的内容
img标签也可以用CSS进行详细修改。
在这里插入图片描述

<img src="image/图片1.png" alt="这是一张图片">
<img src="https://gimg2.baidu.com/image_search/src=https%3A%2F%2F2.zoppoz.workers.dev%3A443%2Fhttp%2Ffile.juzimi.com%2Fweibopic%2Fjxzpmo5.jpg&refer=https%3A%2F%2F2.zoppoz.workers.dev%3A443%2Fhttp%2Ffile.juzimi.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1629793687&t=144a4c7ba85890d09f7ff57fad7c0ada" alt="这是一张图片">

万能元素

无语义标签：div span 可以理解为万能标签，可以表示图片，可以超链接，可以表示标题，列表等等
div 是块级元素
span 是行内元素

	<div>万能标签</div>
	
	<span>万能标签</span>

输入元素

输入标签（编辑标签）： input 在type属性不同时会有不同的效果，password(密码)就不会明文显示，属于行内元素

<input type="text">
<input type="password">
<input type="number">

按钮元素

按钮标签:在页面显示一个按钮，网页可以通过点击事件给出回应（后面会提到）

<button>按钮1</button>

其它元素

其它标签详见 w3school

块级元素与行内元素

块级元素：自成一行，如标题标签、列表标签这些都自成一行的元素（标签）就叫做块级元素，如图
行内元素：两个标签会在同一行并列展示，也可以理解为不独占一行的元素，就叫做行内元素，也叫内联元素，如图
图片元素比较特殊，img标签叫做行内块元素
但是这些都可以通过CSS进行修改
在这里插入图片描述

开发者工具

在浏览器中浏览页面时，可以通过 F12 来唤醒开发者工具（一些如果没有设置锁定最上一列的键盘的快捷键需要摁Fn+F12 ，通过Fn+Esc锁定最上列快捷键；最上列的快捷键为：F1~F3调整音量等）
开发者工具中可以检查我们的代码，从而知道是哪个环节出了问题
每个html文件元素都由一个个的矩形组成
可以通过开发者工具看到每个标签的矩形位置，大小等
在开发者工具中：
Elements 表示元素，用来查看页面结构与样式（也可以进行修改）
Network用来查看加载当前页面会向服务器请求哪些资源
Source用来查看当前页面的源代码，可以对代码进行调试（打断点等）
Console控制台，可以输入一些交互式的命令，也可以查看日志，有时也会有彩蛋