JavaEE进阶-HTML基础认识

一、HTML 是什么

学习 Web 开发时，HTML 是最先接触的一部分。

但 HTML 并不是一门真正意义上的"编程语言"，它没有 Java 那种变量、循环、对象等程序逻辑。HTML 更主要的任务是：

描述一个网页中有哪些内容，以及这些内容之间是什么结构。

HTML 全称是 Hyper Text Markup Language，超文本标记语言。其中"超文本"意味着网页中不仅能够存在普通文字，还可以包含图片、链接、音频等内容；"标记语言"则表示 HTML 主要通过提前定义好的各种标签来描述内容。

HTML在网页前端就相当于是一个基础的框架，里面框架的样式就是又CSS来实现，然后页面行为，也就是说怎么和后端的一个交互就是通过JavaScript

二、HTML 基本结构

简单理解一个标准的HTML文件主要是由head和body构成，在我们vscode里面的快捷键一键生成基本框架的是：!加上enter或者!加上tab，注意这个感叹号得是英文的

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
</body>
</html>

在写完之后记得保存，然后右键打开文件所在位置，在那个地方双击选择运行

并且HTML 中大量标签最终会形成一个树状结构（类似于下面这样）：

html

/ \

head body

| |

title div

/ \

p a

三、HTML 标签与属性

HTML 页面本质上就是由大量标签组成的，就好比刚刚上面写的<h1>就代表一级标题，标签可以设计成对的也可以是单个的，标签就相当于是我们要写对应内容的起手式吧，就比如几级标题相关的，就是<h1><h2>这样的，图片就是<img>，当然写完标签之后就需要添加一些属性，后面主要通过id，name这些属性，为了找到某个对应的html元素，在后续代码中会进行解释

四、HTML 常用标签

1，标题标签

标题标签就是h1-h6，h1最大，这个标签不仅仅是控制大小，就跟我们写文章一样，是有层级关系的感觉

2，段落和换行

html 复制代码

<p>这是第一段</p>
<p>这是第二段</p>
第一行<br/>
第二行

换段落使用<p>，换行使用<br/>，（不过你写<br>也可以运行，不过加/的写法更加规范）

3，图片标签

html 复制代码

    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <img src="D:\前端学习\图片\cat.jpg" alt="">

图片通过<img>这个标签来使用，src后面是图片的地址，我们也可以通过width以及height来调整图片的大小，这里的地址可以填写绝对路径，也可以填写相对路径，相对路径的话是以当前HTML文件所在位置作为参考，如果要访问上一级目录的话使用../（注意是两个点）

4，超链接标签

html 复制代码

<!-- <a href="http://www.baidu.com" target="_blank">百度</a> -->
    <a href="http://www.baidu.com" target="_self">百度</a>

通过两个<a>来使用，href后面的是你要跳转的网址，target后面选择是就在当前页面跳转还是新开辟一个网页来显示，blank是新网页，self是当前网页

5，空连接

空连接就是在超链接的href里面填写#，作为一个占位符，就还不知道这个点击需要跳转到哪里

html 复制代码

<a href="#">还不知道要跳转到哪里</a>

6，表格

table → 整个表格

tr → table row，一行

td → table data，一个单元格

html 复制代码

<table border="1"
            align="center"
            border="1"
            cellpadding="20"
            cellspacing="0"
            width="500"
            height="300">
        <tr>
            <th>姓名</th>
            <th>年龄</th>
        </tr>
        <tr>
            <td>张三</td>
            <td>25</td>
        </tr>
    </table>

align 表示图片的位置，border 表示表格边框宽度，cellpadding 表示单元格的内容距离边框的距离，cellspacing 表示单元格与单元格之间的距离，width 表示表格宽度，height表示表格高度

表格还有合并，colsapan 是横向合并，rowspan是纵向合并

html 复制代码

<table border="1"
            align="center"
            border="1"
            cellpadding="20"
            cellspacing="0"
            width="500"
            height="300">
        <tr>
            <th colspan="2">姓名</th>
            <th>年龄</th>
        </tr>
        <tr>
            <td>张三</td>
            <td>25</td>
        </tr>
    </table>

7，表单

表单就是将用户输入的信息提交出去，我们平时登录的输入框，搜索的输入框，都是一个个表单

html 复制代码

<form action="demo1.html">

    表单内容

</form>

这是表单的格式以一对form来使用

html 复制代码

<form action="demo2.html" method="get">
                    <input type="text" name="username" placeholder="请输入用户名">
                    <input type="password" name="password" placeholder="请输入密码"><br>
                    性别：

                <input
                    type="radio"
                    name="gender"
                    id="man"
                    value="0"> <label for="man">男</label>

                <input
                    type="radio"
                    name="gender"
                    id="woman"
                    value="1"> <label for="woman">女</label><br>
                兴趣爱好：
                <input type="checkbox" name="hobby" id="hobby1" value="0" checked><label for="hobby1">篮球</label>
                <input type="checkbox" name="hobby" id="hobby2" value="1"><label for="hobby2">足球</label>
                <input type="checkbox" name="hobby" id="hobby3" value="2"><label for="hobby3">羽毛球</label>
                <input type="checkbox" name="hobby" id="hobby4" value="3"><label for="hobby4">乒乓球</label><br>
                学历是：
                <select name="education">

            <option value="1">小学</option>

            <option value="2">初中</option>

            <option value="3">高中</option>

            <option value="4">高中及以上</option>

        </select><br>
                <!-- 普通按钮 -->
                <input type="button" value="普通按钮"><br>
                <!-- 提交按钮 -->
                <input type="submit" value="提交"><br>
                <textarea name="content" placeholder="请输入个人信息"></textarea>


                </form>

我们结合代码以及案例演示来解读一下，form里面的内容都是表单的内容，都是要向后端提交的内容，form后面的action是你要跳转的网页，method就是前面http协议中所讲的内容，get一般是获取，post是提交，但是实际他们的功能双方都要，里面具体的类型是通过type来决定的，里面text是文本框，password 是密码输入，它会自动将密码变成点，radio 是单选，单选里面的label 是将男女这两个字分别和按钮进行绑定，这个绑定不是说只有这样后端才知道我们按的前面那个是男，后端具体如何知道我们给的信息是哪一个，靠的是value，以及这个信息是啥，靠的是name，所以我们点击男的话，就会给后端name=man value=0，这样的组合信息，也就知道我们选的是什么了，checkbox 是对选，我们看到篮球那一行有一个checked，这个是默认勾选，就你选不选他都选上了，option 是下拉选项，这里的按钮有两个，一个是button 是普通按钮，这个按钮以我现在的代码点击是没有反应的，因为它要配合JavaScript，下一个是submit ，这个直接就是提交了，最后就是textarea，这个是你可以拉大范围的一个填写空间，里面的placeholder是有个浅色显示，提示我们要写什么内容

我们因为是通过get写的，所以我们的内容是包含在url里面的，从我的截图就可以看出相关选择的内容，不过正常开发是会对这些内容进行加密的

8，div和span

d你这份课件把 div 和 span 叫做 无语义标签（主要就是要把这部分内容包起来，没有实际具体的作用），可以先把它们理解成两个用来装内容的"盒子"

日常开发中这个更加常用，就好比百度的网页，就是一个个小盒子组成

那他们两个有什么区别呢

div

→ 默认独占一行

→ 更像"大盒子"

span

→ 默认不独占一行

→ 更像"小盒子"

五，和前面的知识串起来

假设我们进入一个登录界面，先发出请求，再是服务器返回相关内容，浏览器对html文件进行解析，解析出我们日常登录会看到的界面，然后用户进行填写，最终返回给后端