从零开始的java全栈成长之路（一）

最新推荐文章于 2024-11-11 21:19:25 发布

鲨鱼辣椒丨

最新推荐文章于 2024-11-11 21:19:25 发布

阅读量481

点赞数 9

文章标签： java 开发语言前端

本文链接：https://blog.csdn.net/k_low/article/details/126438357

版权

本文作者老鲨分享了自己从客服岗位转行学习编程的心路历程，决定投身Java全栈开发。在前端学习中，重点介绍了HTML的基本结构、标签分类及用法，包括标题、段落、列表、超链接、表格和表单等元素，强调了HTML作为标记语言的角色和重要性。博客旨在记录学习成长，同时也希望能帮助到其他初学者。

摘要由CSDN通过智能技术生成

自我介绍与写在前面的话：

各位观众老爷大家好，本人老鲨，2021届交通运输专业毕业生，毕业一年有余。一年来一直在做一份客服的过度工作，一年来老鲨都十分迷茫，清楚的知道客服这份工作只能给予我暂时的温饱，不是长久之计，自小喜欢打游戏的我，就十分好奇游戏背后的秘密，对编程产生了兴趣，可是附近的亲戚朋友又很少有在做这个的，如果我要踏入这一行业，付出的努力必然要远超常人，一年来一直在纠结要不要靠自己努力奋斗一次，直到今年六月份下定决心要拼尽全力尝试一下，在原来的公司提了离职，参加了现在为期三个月的java全栈开发工程师培训，产生写博客的想法也是因为最近这边要求完成一个前端项目，当用到知识点的时候老鲨才发现自己的知识点整理十分混乱，所以想通过博客的形式记录自己的成长与系统的复习留存自己学过的知识点，可以说我这边对于编程方面基本是完全从零开始，总共一个多月的时间，从前端html到javase基础知识到现在的navicat数据库，整个过程推进的过于快速，很多知识点根本没有消化，由于接触时间过短，如果有错误或者缺失之处欢迎各位前辈留言指正，也是希望自己能在提升自己的同时记录自己的经历，能够帮助到各位小伙伴。

由于此前没有接触过写博客类的事情，老鲨也是大姑娘上花轿，头一次，最近这边培训时间也很紧。生活压力也非常大，培训薪资实在是让老鲨存活都成问题，所以这段时间大部分精力都会放在编程的学习上，日后有时间一定要好好研究一下博客布局增添趣味性，前期可能会比较单调，感谢各位观众老爷包容。

老鲨在此给各位抱拳啦~

html5：

前言：

1.什么是HTML

HTML 是用来描述网页的一种语言。

HTML 指的是超文本标记语言 (Hyper Text Markup Language)
HTML 不是一种编程语言，而是一种标记语言 (markup language)
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页

2.开发工具

记事本，HBuilder，Notepad，editplus，dreamweaver等；

老鲨这边前端采用的是谷歌浏览器，开发工具采用的是VScode。

1.HTML基本结构

1.1入门实例

代码段

<!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>
    <!-- 标签语言，浏览器解析出了标签呈现对应样式，可通过style进行修改 -->
    <h1>我的第一个标题</h1>
    <h2>我是标题</h2>
    <p>我的第一个段落</p>
    <!-- xml自定义标签，不做style样式时按普通文本进行显示 -->
    <student>我是自定义标签</student>
</body>
</html>

网页效果：

1.2结构

<html>

<html>

<html>：根标签，所有的元素都写在该标签内部，一个网页有且只能有一个根标签。

<head>:头部标签，网页的标题，字符编码，搜索关键字，引用资源等都在该标签中。

<body>:主体标签，页面中所呈现的内容都在body中，比如文字，图片，视频等。

Tips：1.以上标签都是成对出现，结束标签以/开头，少部分标签不需要成对。

2.html标签大部分都是已经定义好的，如果想使用自定义标签，需要定义标签说明文档才能使用。

2.标签

2.1 标签分类

块级标签：标签独占一行，可指定宽、高。常用<div>，<h1>~<h6>,<p>,<table>

内联标签：标签在一行内，宽度与高度由内容决定。常用<i>,<a>,<span>

内联块状标签：内联块状元素就是同时具备内联元素、块状元素的特点。常用<image>,<input>

2.2 块级标签

2.1.1标题标签

<h1>~<h6>, <h1> 定义最大的标题。<h6> 定义最小的标题。

代码：

<body>
    <!-- 标题标签 -->
    <h1>This is heading</h1>
    <h2>This is heading</h2>
    <h3>This is heading</h3>
</body>

网页效果：

Tips：不同的浏览器解析效果会有不同，这是因为浏览器内核不同，对不同标签的解析会略有差别。

2.2.2 段落标签

段落是通过 <p> 标签定义的。

代码:

<!-- 段落标签 -->
    <p>这是p标签</p>
    <!-- 段落标签 -->
    <p>这是另外一个段落标签</p>

网页效果:

Tips：

1.对于相同的网页源码，当浏览器宽度不一致，根据浏览器宽度进行折行。

2.跟中文的首行缩进段落含义不同。

3.可以通过其它标签实现手动折行。

4.前后各插入一个空行。

2.2.3 <hr>标签

<hr /> 标签在 HTML 页面中创建水平线。

代码:

<body>
    <p>段落1</p>
    <hr>
    <p>段落2</p>
    <hr>
    <p>段落3</p>
    <hr>
</body>

网页效果:

2.2.5 列表标签

无序列表 <ul><li>

代码:

    <ul>
        <li>coffe</li>
        <li>milk</li>
        <li>tea</li>
    </ul>

网页效果:

有序列表<ol><li>

    <ol>
        <li>coffe</li>
        <li>milk</li>
        <li>tea</li>
    </ol>

网页效果：

Tips：

列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。
应用范围：页面导航，布局相同的模块，菜单栏等。
列表项的位置和前面的标识可以改变。

自定义列表

自定义列表不仅仅是一列项目，而是项目及其注释的组合。

自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。

代码：

    <dl>
        <dt>coffe</dt>
        <dd>balck hot drink</dd>
        <dt>milk</dt>
        <dd>White code drink</dd>
        <dd>White code drink</dd>
        <dd>White code drink</dd>
    </dl>

网页效果:

Tips：

标签的使用可以嵌套。

2.2.6 <div>标签

HTML <div> 元素是块级元素，它是可用于组合其他 HTML 元素的容器。

<div> 元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。

代码：

    <div style="border: 5px solid red;">
        <dl>
        <dt>coffe</dt>
        <dd>balck hot drink</dd>
        <dt>milk</dt>
        <dd>White code drink</dd>
        <dd>White code drink</dd>
        <dd>White code drink</dd>
        </dl> 
    </div>
    <div style="border: 5px solid green;">
        <ul>
            <li>首页</li>
            <li>家电</li>
            <li>书籍</li>
        </ul>
    </div>

网页效果：

Tips：div标签的应用非常广泛，可以通过样式控制元素的位置和样式。

内联标签(inline)

和其他inline元素同行显示。
设置widht，height，margin-top，margin-bottom，padding-top，padding-bottom无效，可以设置margin-left，margin-righ，padding-left，padding-right。

内部可包含块级或内联元素，内部包含块级元素时，该块级元素继续保持独行显示，下一个内联元素会换行显。

超链接<a>标签

超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。
当您把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。
我们通过使用 <a> 标签在 HTML 中创建链接。

代码:

    <div>
        <a href="https://www.baidu.com/">百度一下</a>
    </div>

网页效果:

属性：target

使用 Target 属性，你可以定义被链接的文档在何处显示。

取值：

_blank:新页面

_self：当前页面

_top：顶级容器

_parent：父容器

<span>标签

span标签是超文本标记语言（HTML）的行内标签，被用来组合文档中的行内元素。span没有固定的格式表现。当对它应用样式时，它会产生视觉上的变化。

代码:

    <div>
        <p>海上生 <span style="font-size: 30px;color: red;">明月</span> ，天涯共此时。</p>
    </div>

网页效果:

内联块标签（inline-block）

和其他inline元素同行显示。
和块级元素一样可设置width，height，margin，padding。
内部可包含块级或内联元素，内部包含块级元素时，该块级元素会在内联元素的内部独行显示，不会影响下一个内联元素的同行显示。

<img>图片标签

属性：

Alt：规定图像的替换文本。

Src：规定图像的路径。

Height(pixels,%)：规定图像的高度

Width(pixels,%)：规定图像的宽度

Usemap：usemap 属性提供了一种“客户端”的图像映射机制

Ismap：服务器端图像映射机制，当用户在 ismap 图像上单击了某处时，浏览器会自动把鼠标的 x、y 位置（相对于图像的左上角）发送到服务器端。

3.表格

表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

代码：

    <table border="1">
        <tr>
            <td>row1,cell1</td>
            <td>row1,cell2</td>
        </tr>
        <tr>
            <td>row2,cell1</td>
            <td>row2,cell2</td>
        </tr>
    </table>

图片：

跨行，跨列表格

跨行属性，rowspan

跨列属性，colspan

Tips：同一个单元格不能重复计入多行

代码：

<!-- 跨行，跨列 -->
<h4>横跨两列的单元格:</h4>
<table border="1">
<tr>
    <th>姓名</th>
    <th colspan="2">电话</th>
</tr>
<tr>
    <td>peach</td>
    <td>123456</td>
    <td>876543</td>
</tr>
</table>
<!-- 横跨两行的单元格 -->
<h4>横跨两行的单元格:</h4>
<table border="1">
    <tr>
        <th>姓名</th>
        <td>peach</td>
    </tr>
    <tr>
        <th rowspan="2">电话</th>
        <td>555 77 845</td>
    </tr>
    <tr>
        <td>555 88 786</td>
    </tr>
</table>