【学习笔记】JavaWeb入门篇—HTML

铁甲小宝2022
219 阅读5分钟

【学习笔记】JavaWeb入门篇—HTML

📒博客首页：铁甲小宝2022 📒

🌞文章目的：HTML—入门篇🌞

🙏博主也在学习阶段，如若发现问题，请告知，非常感谢🙏

💗同时也非常感谢各位小伙伴们的支持💗

🌈每日一语：出发，永远是最有意义的事，去做就是了。 🌈

🍒🍒

前言

HTML作为前端的入门篇，不仅仅是前端程序员的必修，而我们后端程序猿也需要对其进行一定的掌握！方便解决前后端的交互问题。

因为最近学习到Javaweb所以也系统的学了前端的知识，并把我的学习笔记分享给大家，希望能给大家带来一些帮助！同时之后也会给大家来带css，js等一些前端的学习笔记。

## 什么是HTML？

HTML的全称为超文本标记语言(Hyper Text Markup Language)，是一种标记语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。

HTML也是一种解释型语言，和Java这种强类型语言不同，HTML这种解释型语言具有容错性。在Java这种强类型语言中如果出现一些语法，编译等bug的话Java程序就不会跑起来，而HTML则不一样，就算一些地方有错误它在跑的时候也不会停止运行，而是直接展现出来。所以一般HTML找bug是十分痛苦的哈哈哈。

我们经常看到的一些网站、网页都是使用HTML写出来。我们就拿csdn网页版举一个例子，通过f12查看一些网页源码，我们能看到是由很多的HTML的标签构建而成，最终组成这个网页。

image-20220127225938405.png

HTML的基础结构

image-20220128212909932.png 通过上图我们能看到一个HTML的基本结构，<!DOCTYPE html>为声明文档，一个HTML文件中由<html>开始由</html>结束，且由页头(<head></head>)和页身(<boby></boby>)组成。<title>则为网页的标题，meta表示设置网页的编码格式。

HTML的基本标签

head标签

什么是head标签？

🌟根据百度百科：head标签是作用于网页的头部，它的内容不会在正文中显示出来。

head内部标签

✨head元素包含了所有的头部标签元素，在head中你可以插入脚本（scripts）,样式文件（CSS）,及各种meta信息，可以添加到头部区域的元素为。

✨title定义网页的标题(浏览器工具栏标题，搜素引擎结果页面标题，收藏夹标题)。

✨meta 用来定义页面的特殊信息（页面关键字，页面描述） ，描述了一些基本的元数据。

✨link 定义了文档与外部资源之间的关系，通常用来引入外部样式（css文件） 。

✨ style用来定义元素的css样式。

✨script 用来定义页面的JavaScript 代码 也可用来引入文件。

✨base可以用来统一设置当前页面上的超链接的跳转方式 使用了 标签，则必须具备 href 属性或者 target 属性或者两个属性都具备。

boby标签

什么是boby标签？

🌟百度百科：body标签意思是 人为地把页面分了头，身体使html结构更清晰 。

一般后续的讲解都是围绕着boby里面的标签来讲解的。

基本标签详解

网页标题

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>我的第一个标题</title>
    </head>
    <body>
    </body>
</html>

运行示例：

image-20220128220853561.png

换行标签br/

HTML中<br/>可以对其进行换行操作。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>我的第一个标题</title>
        hello
        <br/>
        world
    </head>
    <body>
    </body>
</html>

运行示例：

image-20220128221146639.png

段落标签 p

HTML中<p>表示段落标签。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>我的第一个标题</title>
        <p>段落1</p>
        <p>段落2</p>
        <p>段落3</p>
        <p>段落4</p>
    </head>
    <body>
    </body>
</html>

运行示例：

image-20220128221520182.png

标题标签 h1 - h6

✨HTML中由h1 - h6表示标题。且从大到小。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>我的第一个标题</title>
        <h1>标题一</h1>
        <h2>标题二</h2>
        <h3>标题三</h3>
        <h4>标题四</h4>
        <h5>标题五</h5>
        <h6>标题六</h6>
    </head>
    <body>
    </body>
</html>

运行示例：

image-20220128221841980.png

输入框 input

语法：

image-20220202190846291.png

<input type="" name="" id="" value="" />

type用来设置输入框里面的输入的格式。

✨text:表示显示的就是我们输入的文本。

✨password:当我们输入的文本显示都是*和我们一般输入密码是一样的。

例如：

<input type="text" >

image-20220202190748999.png

<input type="password" >

🌟name：一般用来给服务器传输数据。

🌟id:引用css等。

🌟value：是输入框显示的提示内容。

image-20220202191155565.png

有序列表orderlist—ol

例如：

        <ol type = "A">
            <li>卢本伟</li>
            <li>大司马</li>
            <li>pdd</li>
        </ol>

image-20220202212155382.png

我们能看出来这个有序的列表就是ABC，则在代码中type = "A"则代表的就是。

我们还可以换成a，I，i等。

无序列表 ul

        <ul type = "square">
            <li>铁甲小宝</li>
            <li>鲨鱼辣椒</li>
            <li>蝎子莱莱</li>
        </ul>

运行截图：

image-20220202212520658.png

则无序列表中的type则是代表的什么呢？

其类型为circle(白圆形)，disc(黑圆形),square(方块)。

设置图片 img

<img src="C:\Users\admin\Desktop\tupian\10.jpg" width = "45",height = "28">

image-20220202212836329.png

超链接 a

<a href="https://blog.csdn.net/m0_54355125?type=blog" target="">小宝的博客</a>

a表示超链接 href表示链接地址 target： _self表示在本窗口打开 _blank在一个新窗口打开 _parent 在父窗口打开 _top 在顶层窗口打开

表单 form

一般我们都会通过表单对从一个html到其他文件的跳转作用。

语法：

         <form action="C:\Users\admin\Desktop\HTML\deom2.html" method="post">
             
         账号：<input type="text" name = "Nickname"> <br/>
         密码：<input type="password" name = "pwd"><br/>
         <input type="submit" value = "提交" />
         
         </form>

✨action:表示请求的文件地址。

✨method:表示请求的方法，一般有post，get。

​

​

导入背景片

    <body background="C:\Users\admin\Pictures\56.png"
    style="background-repeat:no-repeat
                   background-attachment:fixed;
                   background-size:100% 100%;"
    >

background:则是背景图片的文件地址。

background-repeat：设置图片平铺方式。有三个属性：no-repeat（图片保留自身大小不平铺）、repeat-x（图片在水平方向上平铺）、repeat-y（图片在垂直方向上平铺）。

background-attachment：用于设置背景图像是否固定或者随着页面的其余部分滚动。

background-size:背景图片的大小.

​

​

div添加图片

#div_2{
    width: 900px;
    margin-left: 20%;
    height: 720px;
    background-image : url("../img/meinv.jpg");
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-size:100% 100%;
​
​
    
}

其实也就是在background后面加了一个img然后需要用url包裹！

==未完待续==

avatar
文章
阅读
粉丝