Java学习06–前端基础之HTML

1、什么是HTML

HTML：hyper text markup language(超文本标记语言)

2、HTML基本标签

<!-- DOCTYPE:告诉浏览器要使用什么规范-->
<!DOCTYPE html>
<html lang="en">
<!--head标签代表网页头部-->
<head><!--meta标签，描述性标签，用来描述网站信息 --><meta charset="UTF-8"><title>基本标签学习</title>
</head>
<body><!--标题标签 -->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4><!--段落标签 -->
<p>曾经沧海难为水，除却巫山不是云。</p>
<p>取次花丛懒回顾，半缘修道半缘君。</p><!--水平线标签 -->
<hr/><!--换行标签 -->
曾经沧海难为水，除却巫山不是云。<br/>
取次花丛懒回顾，半缘修道半缘君。<br/>
<br/>
<!--粗体、斜体标签 -->
<strong>曾经沧海难为水，除却巫山不是云。</strong><br/>
<em>取次花丛懒回顾，半缘修道半缘君。</em><br/><!--特殊符号-->&nbsp;  <!--空格 -->
&gt;    <!--大于 -->
&lt;    <!--小于 -->
&copy;  <!--版权 --></body>
</html>

3、图像标签

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>图像标签学习</title>
</head>
<body>
<!--img学习
src:图片地址（必填）相对地址（推荐），绝对地址../  --上一级目录
alt:图片名字（必填）
-->
<img src="../resource/image/1.jpg" alt="永劫无间胡桃"title="悬停文字"height="1600"width="900"></body>
</html>

4、链接标签

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>链接标签学习</title>
</head>
<body>
<!--锚链接标签，使用id作为标记-->
<a id="top">顶部</a>
<!--a标签
herf：必填表示要跳转到哪个页面
target:表示窗口在哪里打开
--><a href="基本标签.html"target="_blank">点我跳转</a>
<a href="https://www.4399.com"target="_blank">点我跳转到4399小游戏</a>
<br/>
<a href="https://www.ali213.net/zt/yjwj/wiki/"target="_blank"><img src="../resource/image/1.jpg" alt="永劫无间胡桃"title="悬停文字"height="400"width="300">
</a><!--锚链接标签，回到id的标记-->
<a href="#top">回到顶部</a></body>
</html>

5、行内元素和块元素

块元素：
- 无论内容多少，该元素独占一行
- （p、h1-h6）
行内元素：
- 不会换行
- （a、strong、em…）

6、列表标签

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>列表学习</title>
</head>
<body>
<!--有序列表-->
<ol><li>java</li><li>python</li><li>html</li>
</ol>
<hr>
<!--无序列表-->
<ul><li>java</li><li>python</li><li>html</li>
</ul>
<hr>
<!--自定义列表
dl:标签
dt:列表名称
dd:列表内容
-->
<dl><dt>subject</dt><dd>java</dd><dd>python</dd><dd>html</dd><dt>location</dt><dd>china</dd><dd>america</dd><dd>british</dd><dd>france</dd>
</dl>
<hr>
</body>
</html>

7、表格

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>表格学习</title>
</head>
<body><!--表格table
行tr
列td
-->
<table border="1px"><tr><td colspan="4">colspan</td></tr><tr><td rowspan="2">rowspan</td><td>2-2</td><td>2-3</td><td>2-4</td></tr><tr><td>3-1</td><td>3-2</td><td>3-3</td></tr></table></body>
</html>

8、媒体元素

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>媒体元素学习</title>
</head>
<body><!--音频和视频-->
<audio src="../resource/audio/1.flac" controls autoplay></audio>
<audio src="../resource/audio/2.mp3" controls></audio></body>
</html>

9、页面结构

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PDDBVZWX-1633589014791)(C:\Users\Lenovo\AppData\Roaming\Typora\typora-user-images\image-20211005160523994.png)]

10、iframe内联框架

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><iframe src="https://www.4399.com" frameborder="0" width="1600px" height="900px"></iframe></body>
</html>

11、表单语法

表单元素格式

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4fXPHVQr-1633589014793)(C:\Users\Lenovo\AppData\Roaming\Typora\typora-user-images\image-20211005192614512.png)]

表单语法

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>表单学习</title>
</head>
<body>
<h1>注册</h1>
<!--表单form
action:表单提交的位置，可以是网站也可以是一个请求处理地址
method:post安全，可以提交大文件/get可以在url中看见用户名和密码参数不安全 提交方式
-->
<form action="媒体元素.html" method="post"><!--文本输入框--><p>姓名: <input type="text" name="username" value="harry" maxlength="10" size="20" readonly></p><!--密码框 placehoder提示信息 required必填--><p>密码: <input type="password" name="pwd" placeholder="请输入密码" required></p><p>密码: <input type="password" name="pwdtest" placeholder="请验证密码"></p><!--单选框name是同一个组的只能选一个--><p>性别:<input type="radio" value="boy" name="sex"/>男<input type="radio" value="boy" name="sex"/>女</p><!--多选框checkbox--><p>爱好:<input type="checkbox" value="sleep" name="hobby"/>睡觉<input type="checkbox" value="game" name="hobby"/>游戏<input type="checkbox" value="sport" name="hobby"/>运动<input type="checkbox" value="chat" name="hobby"/>聊天</p><p>按钮:<input type="button" name="press" value="点击触发" disabled><input type="image" src="../resource/image/1.jpg" width="40" height="30" hidden></p><p>下拉框:<select name="国家" ><option value="选项的值" selected>中国</option><option value="选项的值">美国</option><option value="选项的值">瑞士</option><option value="选项的值">印度</option></select></p><!--文本域--><p>反馈:<textarea name="textarea" cols="50" rows="10">文本内容</textarea></p><!--文件域--><p><input type="file" name="files"><input type="button" value="上传" name="upload"></p><!--邮箱验证 patten正则表达式--><p>邮箱验证:<input type="email" name="email" pattern="/^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/"></p><!--常用patten正则表达式https://blog.csdn.net/qianhaohong/article/details/53435253--><p>滑块:<input type="range" name="voice" min="0" max="100" step="2"></p><p>搜索框:<input type="search" name="搜索框"></p><!--增强鼠标可用性指向一个位置--><p><label for="mark">点一点</label><input type="text" id="mark"></p><!--提交和重置--><p><input type="submit"><input type="reset" value="清空表单"></p></form></body>
</html>

Java学习06–前端基础之HTML相关推荐

Java学习07–前端基础之CSS
Java学习07–CSS基础 1.CSS介绍 1.1.发展史 css1.0 基本 css2.0 div(块)+css html与css结构分离的思想网页变简单 css2.1 浮动,定位 css3.0 ...
java学习之前端基础
前端基础 1.HTML 1.1html基础标签 1.2table标签 1.3form标签 1.4frame标签 2.CSS 2.1CSS语法 2.2CSS盒子模型 2.3CSS布局 2.4水果库存静态 ...
Java学习日记1——基础认知
Java学习日记1--基础认知学习Java阶段,如果发现不正确的描述,还请指正! 首先附上Java相关下载链接和配置教程链接 Java相关软件工具下载地址:官方下载 Java环境配置(win10配置 ...
Java学习---Day16_IO流基础篇
Java学习-Day16_IO流基础篇文件操作操作磁盘上的某一个文件或某一个文件夹,可以对他们进行创建或删除.移动.属性获取.属性设置等操作.但是,不包含读取文件的内容.拷贝文件 ps:java中 ...
Java学习笔记之基础篇
Java学习笔记之基础篇目录 Java如何体现平台的无关性? 面向对象(OO)的理解面向对象和面向过程编程的区别面向对象三大特征静态绑定和动态绑定(后期绑定) 延伸:类之间的关系组合(聚合) ...
Java学习路线-夯实基础
Java学习路线-夯实基础第一部分:网络与操作系统第二部分:数据结构与算法第三部分:Java基础第四部分:Java设计模式第五部分:数据库第六部分:Redis 第七部分:并发与多线程第八 ...
invader的java学习第一天基础篇
invader的java学习第一天基础篇一.java主要历史 ①java是Sun公司的产品,09年被Oracle公司收购. ②java语言之父:詹姆士高斯林二.jdk.jre.jvm三者关系 jd ...
invader的java学习第二天基础篇
invader的java学习第二天基础篇一.深入了解第一个Hello World程序 public class Hello World{ public static void main(String ...
JAVA学习之路--基础篇三
目录关于Java中从键盘输入的语句 nextxxx().next().nextLine()的区别语句 if和if else语句 Switch语句 for语句 while和do..while bre ...
java学习需要英文基础吗,详细说明
零基础大学生怎么学习Java?零基础大学生怎么学习Java?很多大学生在快毕业的时候,非常迷茫自己的未来职业规划和发展,不知道如何选择.希望有人可以可以帮助自己少这就和我们学习的语文和英语一样,汉语 ...

Java学习06–前端基础之HTML

Java学习06–前端基础之HTML

1、什么是HTML

2、HTML基本标签

3、图像标签

4、链接标签

5、行内元素和块元素

6、列表标签

7、表格

8、媒体元素

9、页面结构

10、iframe内联框架

11、表单语法

Java学习06–前端基础之HTML相关推荐

最新文章

热门文章