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

简介: 【学习笔记】JavaWeb入门篇—HTML(二)

有序列表orderlist—ol

例如:


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


image.png


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


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


无序列表 ul

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


运行截图:

image.png



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


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


设置图片 img

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

image.png



src则是表示图片的地址,而width和height分别的代表的是宽度和高度。

超链接 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包裹!



目录
相关文章
|
3月前
|
前端开发 程序员
【前端web入门第二天】01 html语法实现列表与表格_合并单元格
本文介绍了HTML中的列表与表格的使用方法。列表包括无序列表(`&lt;ul&gt;`嵌套`&lt;li&gt;`)、有序列表(`&lt;ol&gt;`嵌套`&lt;li&gt;`)和定义列表(`&lt;dl&gt;`嵌套`&lt;dt&gt;`和`&lt;dd&gt;`)。
70 19
|
3月前
|
前端开发 Windows
【前端web入门第一天】02 HTML图片标签 超链接标签 音频标签 视频标签
本文档详细介绍了HTML中的图片、超链接、音频和视频标签的使用方法。首先讲解了`&lt;img&gt;`标签的基本用法及其属性,包括如何使用相对路径和绝对路径。接着介绍了`&lt;a&gt;`标签,用于创建超链接,并展示了如何设置目标页面打开方式。最后,文档还涵盖了如何在网页中嵌入音频和视频文件,包括简化写法及常用属性。
60 13
|
2月前
|
移动开发 前端开发 JavaScript
HTML入门(详细)
HTML入门(详细)
29 0
|
3月前
|
Web App开发 前端开发 JavaScript
HTML/CSS/JS学习笔记 Day3(HTML--网页标签 下)
HTML/CSS/JS学习笔记 Day3(HTML--网页标签 下)
|
3月前
|
XML JavaScript 前端开发
JavaWeb基础4——HTML,JavaScript&CSS
HTML,JavaScript&CSS、元素、标签、css 选择器、属性、JavaScript基础语法、JavaScript对象、BOM浏览器对象模型、DOM文档对象模型、事件监听、正则对象RegExp/ES6
JavaWeb基础4——HTML,JavaScript&CSS
|
3月前
|
前端开发 程序员 C++
【前端web入门第一天】01 开发环境、HTML基本语法文本标签
本文档详细介绍了HTML文本标签的基础知识。首先指导如何准备开发环境,包括安装VSCode及常用插件;接着全面解析HTML的基本结构与标签语法,涵盖从基本骨架搭建到注释的使用,以及标题、段落、换行和平行线、文本格式化等标签的具体应用,适合初学者循序渐进地掌握HTML。
|
4月前
|
缓存 Java 应用服务中间件
SpringMVC入门到实战------七、SpringMVC创建JSP页面的详细过程+配置模板+实现页面跳转+配置Tomcat。JSP和HTML配置模板的差异对比(二)
这篇文章详细介绍了在SpringMVC中创建JSP页面的全过程,包括项目的创建、配置、Tomcat的设置,以及如何实现页面跳转和配置模板解析器,最后还对比了JSP和HTML模板解析的差异。
SpringMVC入门到实战------七、SpringMVC创建JSP页面的详细过程+配置模板+实现页面跳转+配置Tomcat。JSP和HTML配置模板的差异对比(二)
|
4月前
|
移动开发 开发者 HTML5
构建你的首个个人网站:HTML基础入门
【8月更文挑战第29天】在数字化时代,拥有一个个人网站是展示自我、分享知识和技能的窗口。本文将引导你通过简单的步骤,使用HTML构建你的第一个个人网站。我们将探索HTML的基础标签,页面结构,以及如何将这些元素融合在一起创建一个简单的网页。无论你是编程新手还是希望扩展你的技术工具箱,这篇文章都提供了一条清晰的路径,帮助你开始你的网站开发之旅。
|
6月前
杨老师课堂之网页制作HTML的学习入门-含有案例1
杨老师课堂之网页制作HTML的学习入门-含有案例
46 3
|
6月前
|
存储 移动开发 API
HTML5本地存储:从入门到精通
HTML5本地存储:从入门到精通
82 1
下一篇
DataWorks