JavaSE基础二十六：HTML下的基本标签、列表、表格、媒体元素

最新推荐文章于 2023-03-06 17:15:50 发布
最新推荐文章于 2023-03-06 17:15:50 发布
阅读量239 收藏
点赞数
分类专栏： JavaSE基础
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39870032/article/details/103588623
版权

一、HTML

1.HTML简介
HTML ： Hyper Text MarkUp Language （超文本标记语言）
文本：文字、有格式的文本
超文本：文字，图片，音频，视频，动画、等

1.2 W3C标准
W3C：万维网联盟
结构化标准 （XHTML、HTML）
表现标准 （CSS）
行为标准 （Dom、ECMAScript标准==> JavaScript）

万维网联盟创建于1994年，是Web技术领域最具权威和影响力的国际中立性技术标准机构
很多浏览器还停留在ES5规范上，但是开发人都使用的是ES6规范

1.3域名后缀：
.com 国际
.cn 中国
.org 开源

二、IDEA写HTML

HTML的基本结构
大多数的HTML 标签 都以 <> 开始 </> 结尾
正常网页的所有内容都需要放在 < body> 标签中

<!DOCTYPE html>
<html lang="en">
<!--头部-->
<head>
    <meta charset="UTF-8">
    <!--正常的标签都是需要成对出现的-->
    <title>我的第一个网页</title>
</head>
<!--主体-->
<body>

</body>
</html>

在这里插入图片描述

网站的基本标签：

2.1

<!DOCTYPE html>
<html lang="en">
<!--头部-->
<head>
    <meta charset="UTF-8">
    <title>我的第一个网页</title>
</head>
<!--主体-->
<body>

<!--可以是音频，视频，新的标签：侧边栏，导航栏-->
<!--h1~h6是标签-->
<h1>hello,world</h1>

</body>
</html>

2.2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>静夜思</title>
</head>
<body>

<!--br是换行-->
<h1>静夜思</h1> <br>
<!--hr是分割线-->
<hr>
<!--em是斜体-->
<em>唐 李白</em>
<!--p是段落-->
<p>
    窗前明月光，<br>
    疑是地上霜。<br>
    举头望明月，<br>
    低头思故乡。<br>
</p>

</body>
</html>

在这里插入图片描述

2.3

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--网站的关键字描述-->
    <meta name="keywords" content="一起学Java">
    <!--网站的描述-->
    <meta name="description" content="学Java">
    <!--
    name是名称的意思，指出我这个标签是什么类型
    content是内容的意思，指出这个类型标签的值
    -->
    <title>你好</title>
</head>
<body>
</body>
</html>

2.4

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>网页的基本标签</title>
</head>
<body>
<!--空格 &nbsp;-->
<p>欢迎来到王者荣耀</p>
<p>欢迎来到 王者荣耀</p>
<p>欢迎来到        王者荣耀</p>
<p>欢迎来到&nbsp;&nbsp;&nbsp;王者荣耀</p>

<!--换行 br-->

<!--大于小于号-->
&gt;
&lt;<br>

<!--版权符号-->
&copy; 版权所有人：八神庵；<br>

<!--万能的公式 & ;-->
&phone;<br>

<!--字体样式 strong加粗 em斜体-->
<strong>马云</strong>
<p>
    <em>阿里巴巴</em>
</p>

<hr>

<!--标签标题 h1~h6-->

<h1>一级标题</h1><br>
<h2>二级标题</h2><br>
<h3>三级标题</h3><br>
<h4>四级标题</h4><br>
<h5>五级标题</h5><br>
<h6>六级标题</h6><br>

<hr>

<!--段落标签 p-->
<p>  
    走走，走走走，我们小手拉大手
</p>

<p>
    走走，走走走，一同去郊游
</p>



</body>
</html>

2.5

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片标签</title>
</head>
<body>
<!--
src：图片的路径
alt：图片加载失败后，表示图片的问题
title：鼠标放在图片上的悬浮提示
width：宽
height：高
-->
<img src="../statics/images/1001677.jpg" alt="图片加载失败" title="房屋" width="800" height="500">

</body>
</html>

2.6

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>超链接</title>
</head>
<body>
<!--超链接表示从一个地方跳转到另一个地方-->
<!--
href：表示要跳转的地址
target：目标打开的窗口是在当前页面打开，还是在新的页面打开
        _self 在当前窗口打开
        _blank 在新窗口打开
-->

<a href="https://www.baidu.com/" target="_blank" >百度</a>

<a href="https://www.baidu.com/" target="_blank">
    <img src="../statics/images/1001677.jpg" width="800" height="600">
</a>

</body>
</html>

2.7

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>锚链接</title>
</head>
<body>
<!--设置标题-->
<a href="#markerA">A</a> <br>
<a href="#markerB">B</a> <br>
<a href="#markerC">C</a> <br>

<a href="https://www.baidu.com">D</a> <br>
<a href="3.基本结构.html#haha">E</a><br>

<a href="">F</a><br>

<hr>


<p>1111111111111111111</p>
<p>1111111111111111111</p>
<p>1111111111111111111</p>
<p>1111111111111111111</p>
<p>1111111111111111111</p>
<a name="markerA">你找到了A</a>
<p>1111111111111111111</p>
<p>1111111111111111111</p>
<p>1111111111111111111</p>
<a name="markerB">你找到了B</a>
<p>1111111111111111111</p>
<p>1111111111111111111</p>
<p>1111111111111111111</p>
<p>1111111111111111111</p>
<p>1111111111111111111</p>
<p>1111111111111111111</p>
<a name="markerC"><h1>你找到了C</h1></a>
<p>1111111111111111111</p>
<p>1111111111111111111</p>
<p>1111111111111111111</p>
<p>1111111111111111111</p>


</body>
</html>

在这里插入图片描述

列表、表格、媒体元素

2.8

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表</title>
</head>
<body>

<!--无序列表 ul-li -->
<ul>
    <li>世界</li>
    <li>你好</li>
</ul>

<hr>

<!--有序列表 ol-li -->
<ol>
    <li>张三</li>
    <li>李四</li>
</ol>

<hr>

<!--自定义列表 dl-dt-dd-->
<dl>
    <dt>水果</dt>
    <dd>苹果</dd>
    <dd>香蕉</dd>
    <dd>橘子</dd>
</dl>

</body>
</html>

2.9

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格</title>
</head>
<body>

<!--表格 table
border="1px" 边框属性
-->
<!--
行 tr
列 td
-->

<table border="1px">
    <tr>
        <td>1-1</td>
        <td>1-2</td>
    </tr>
    <tr>
        <td>2-1</td>
        <td>2-2</td>
    </tr>
</table>

<hr>

<!--跨行和跨列-->
<!--跨列-->
<table border="1px">
    <tr >
        <td colspan="2">1-1</td>
    </tr>
    <tr>
        <td>2-1</td>
        <td>2-2</td>
    </tr>
</table>

<hr>

<!--跨行-->
<table border="1px">
    <tr>
        <td rowspan="2">1-1</td>
        <td>1-2</td>
    </tr>
    <tr>
        <td>2-1</td>
    </tr>
</table>


</body>
</html>

在这里插入图片描述
2.10 视频地址需为本地地址

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>视频</title>
</head>
<body>

<!--video标签
想要播放的视频必须是本地的，可以直接播放的

src:视频的路径
controls：提供播放按钮，进度条，下载按钮，全屏按键，音量控制
autoplay：自动播放
loop：循环播放
-->

<video src="https://vdept.bdstatic.com/4851384657325763486b7755476d7752/
776a574278317766/a7610772c1b41104b811240e070aed96b2055fb10eca9de146aece110dca31891eea0d9933c85ca6fc7f5c8d6ae65648
.mp4?auth_key=1576586545-0-0-0206b01b71241f0fd20999cc076af951
" controls autoplay width="800" height="400"></video>


</body>
</html>

2.11 歌曲地址需是本地地址

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>音频</title>
</head>
<body>

<!--音频audio-->
<!--
src:音频的路径
controls：提供播放按钮，进度条，下载按钮，全屏按键，音量控制
autoplay：自动播放
loop：循环播放
-->
<audio src="../statics/musics/下山.m4a" controls autoplay></audio>


</body>
</html>

2.12

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内联框架</title>
</head>
<body>
<!--iframe
src:地址
-->
<iframe src="https://www.baidu.com" width="800" height="400"></iframe>

<!--创建一个内联框架 名字叫mainframe-->
<iframe name="mainframe" ></iframe>
<!--创建一个超链接 连接为百度 在哪里显示呢 在内联框架里显示-->
<a href="https://www.baidu.com" target="mainframe">点击显示</a>


</body>
</html>
表单

2.13

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的第一个表单</title>
</head>
<body>

<!--form 表单
action：提交地址
method：提交的方式
        get:携带参数，参数在url中可见，不安全，大小有限
        post:参数不可见，安全，大小没有限制
-->
<form action="test.html" method="get">
<!--输入框
    input标签
        name：必须写上
        type：
              text：文本框
              password：密码框
              submit：提交按钮
              rest：重置
-->
    <p>账号
        <input type="text" name="username">
    </p>
    <p>密码
        <input type="password" name="password">
    </p>

    <p>
        <input type="submit" name="提交">
        <input type="reset" name="重置">
    </p>

</form>
</body>
</html>

在这里插入图片描述

2.14

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单元素</title>
</head>
<body>

<form action="test.html" method="post">
    <!--
    文本框：text
    value：文本框的默认值
    size：文本框的长度
    maxlength：文本框最大的输入长度
    -->
    <p>
        <input type="text" name="username" value="用户名" size="30" maxlength="20">
    </p>

    <!--密码框
    参数与文本框基本相同
    -->
    <p>
        <input type="password" name="password" size="30">
    </p>

    <!--单选框radio
    value：表单提交的值
    name：名字相同，自动分组
    checked：默认选中
    disabled：禁用
    -->
    <p>
        <input type="radio" name="sex" value="男" checked>男
        <input type="radio" name="sex" value="女">女
    </p>

    <!--多选框 checkbox
    value：提交的值
    name：名字，如果是分组，名字必须一致
    checked：默认选中
    disabled：禁用
    -->
    <p>
        <input type="checkbox" name="hobby" value="篮球" checked>篮球
        <input type="checkbox" name="hobby" value="足球">足球
        <input type="checkbox" name="hobby" value="乒乓球">乒乓球
        <input type="checkbox" name="hobby" value="羽毛球">羽毛球
    </p>

    <!--下拉框 select
    select：
            name：组件名字，必填
            size：显示的数量，默认为1
    option：选项
            value：必填
            selected：默认选中
    -->
    <select name="科目" size="3">
        <option value="1">语文</option>
        <option value="2">数学</option>
        <option value="3">英语</option>
        <option value="4">物理</option>
        <option value="5">化学</option>
    </select>

    <!--按钮
    value：按钮上的文字
    -->
    <p>
        <input type="submit" value="提交">
        <input type="reset" value="重置">
        <input type="button" value="点我">
        <input type="image" src="../statics/images/1001677.jpg" width="100" height="50">
    </p>

    <!--文本域
    textarea
    -->
    <textarea name="textarea" cols="30" rows="10"></textarea>

    <!--邮箱
    email
    -->
    <p>邮箱
        <input type="email" name="email">
    </p>

    <!--网址
    url
    -->
    <p>网址
        <input type="url" name="url">
    </p>

    <!--数字：number
    max:最大
    min:最小
    step：步长
    -->
    <p>计数
        <input type="number" max="100" min="0" step="10">
    </p>

    <!--滑块 range
     默认值：0~100
    -->
    <p>
        <input type="range" name="range" min="0" max="100" step="2">
    </p>

    <!--搜索框 search-->
    <p>
        <input type="search" name="search">
    </p>
</form>

</body>
</html>

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

2.15

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文件域</title>
</head>
<body>

<!--
上传文件会用
表单需要支持提交复杂文件 enctype="multipart/form-data"
-->

<form action="test.html" method="get" enctype="multipart/form-data">
    <input type="file" name="video">
</form>

</body>
</html>

在这里插入图片描述

2.16

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单应用</title>
</head>
<body>

<form action="test.html" method="post">
    <!--placeholder 默认提示：告诉客户应该怎么做-->
    <p>用户名
        <input type="url" name="username" placeholder="必须是url格式">
    </p>

    <!--required表示该字段必填-->
    <p>密码
        <input type="password" name="password" required>
    </p>

    <!--pattern 正则表达式-->
    <p>手机号
        <input type="text" name="phonenumber" required pattern="^1[358]\d{9}">
    </p>

    <p>
        <input type="submit" value="提交">
        <input type="reset" value="重置">
    </p>
</form>
</body>
</html>
遗憾无人似你
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaSE html+CSS基础笔记归纳.zip
08-08
学习HTML需要理解标签、属性、元素嵌套以及如何组织页面结构，如头部（head）、主体（body）和段落（p）等元素。 【CSS】 Cascading Style Sheets（CSS）用于控制网页的样式和布局。通过选择器（如id、class或元素...
HTML--表格
qq_45823118的博客
03-17 1347
1.表格的标题 任务描述 本关任务：添加一个表格标题，内容为科目成绩。 实现的效果如下： 相关知识 表格一般都有标题来说明这个表格具体是做什么的。 你可以用<caption>标签来创建表格标题，需要注意的是它的位置：紧随<table>标签之后。 例子如下： <table border="2" cellspacing="0" cellpadding="10"> <caption>班级成绩</caption> <tr>
头歌：HTML——表格：第2关：表格的属性——宽、高
m0_61690708的博客
11-03 1959
头歌：HTML——表格：第2关：表格的属性——宽、高
表格的综合案例
weixin_45784564的博客
05-21 3905
任务描述 本关任务：按照以下要求，完成一个复杂的表格创建任务。 创建表格的要求如下： 边框为2px； 宽为100%； cellspacing为0； cellpadding为6； 标题内容为本周财政计划； 在 其它内容和效果图展示的一样。 注意：表格属性的顺序按照创建表格的要求的顺序来写。 实现的效果如下： 编程要求 请仔细阅读右侧代码，结合相关知识，在 Begin-End 区域内进行代码补充，完成一个表格的创建任务。 测试说明 平台会对你的代码进行运行测试，如果实际输出结果与预期结果相同，则通关；反之
HTML上部分--头歌（educoder）实训作业题目及答案
热门推荐
qq_35353972的博客
10-09 1万+
HTML--头歌（educoder）实训作业题目及答案
头歌-HTML基础
最新发布
somewon的博客
03-06 9946
四川师范大学 头歌 web应用开发
javaSE基础语法，详细注释和标签，排版整齐
09-14
本文将详细讲解JavaSE中的基础语法，并结合相关标签进行阐述。 1. **Java虚拟机与运行环境** Java程序需要在Java虚拟机（JVM）上运行，它负责解释和执行字节码。Java运行环境（Java Runtime Environment, JRE）...
JavaSE基础面试题.docx
06-11
16.使用LinkedList删除元素的步骤 17.HashMap、Hashtable、ConcurrentHashMap底层实现原理及区别 18.HashMap底层数据结构 19.说说HashMap如何处理碰撞的，或者说说它的扩容？ 20.jdk7/8中对HashMap做了哪些改变？ 21...
JavaSE基础.md
06-29
javaSE基础，查漏补缺必备
JavaSE基础课件
12-03
总的来说，"JavaSE基础课件"涵盖了从基本语法到高级特性的广泛内容，对于想要系统学习Java编程的开发者来说，是一份非常实用的资料。通过深入学习和实践，可以逐步掌握Java编程，为进一步学习JavaEE（企业级应用）和...
HTML——表格
weixin_54327001的博客
11-16 1926
第1关：表格的基本构成 <table>标签用来创建表格，<tr>标签用来创建行，<td>标签用来创建列。这里先创建一个两行两列的表格。 上面border属性表示给表格添加边框，它的值2表示边框的宽度为2px。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> <body> <!-- *********
HTML列表（list），这个比较重要的一个知识！
谭明骏编程
03-27 3535
最常见的HTML列表是有序列表和无序列表: An ordered list: The first list item The second list item The third list item An unordered list: List item List item List item HTML无序列表 一个无序列表开始标记。每个列表项始于标记。 列表项都有子弹(通常是黑色小
html中几种基本的列表
chanball的专栏
01-05 1518
常用的列表有三类型：无序列表 ul(unordered List) ，有序列表 ol(ordered list) 和定义列表 dl(definition list)3 种格式。 无序列表 无序列表是一个项目的序列。各项目前加有标记（通常是黑色的实心小圆圈，但是实现多个无序列表一起使用就会出现空心圆），无序列表中可以加入段落、换行、图像，链接，其他的列表等等。 无序列表以标签开始。每...
常见的列表html,html常见列表元素介绍与应用
weixin_30849865的博客
06-17 334
有序列表(ol > li)ordered list 标签定义有序列表。CoffeeTeaMilk有序列表属性：[type]：规定在列表中使用的标记类型(五种类型：1、A、a、I、i)。默认顺序1：123顺序A：123顺序a：123顺序I：123顺序i：123属性type[start]：规定有序列表的起始值。默认顺序1：123顺序A：123顺序a：123顺序I：123顺序i：123属性star...
HTML列表(Lists)
简单.专注..
11-12 369
HTML有三种列表形式：排序列表(Ordered List)；不排序列表(Unordered List)；定义列表(Definition List)。 排序列表(Ordered List) 排序列表中，每个列表项前标有数字，表示顺序。 排序列表由&lt;ol&gt;开始，每个列表项由&lt;li&gt;开始。 排序列表示例 不排序列表(Unordered List) 不排序列表不用...
HTML基础——列表
NCU_tanghulu的博客
08-02 221
HTML基础——列表 表格是用来显示数据的,那么列表就是用来布局的。列表最大的特点就是整齐、整洁、有序,它作为布局会更加自由和方便。根据使用情景不同,列表可以分为三大类:无序列表、有序列表和自定义列表。 一、无序列表 <ul>标签表示HTML面中项目的无序列表, 一般会以项目符号呈现列表项,而列表项使用<li> 标签定义。 无序列表的基本语法格式如下: <ul> <li>列表项1</1i> <li>列表项2</1i> &lt
selenium页面元素定位方法（5）——表格的定位
vikeyyyy的博客
04-28 1万+
被测试html代码：&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;body&gt; &lt;table width="400" border="1" id="table"&gt;&lt;/table&gt; &lt;tr&gt; &lt;td align="left"&gt;消费
javase java2ee 笔记
07-04
JavaSE是Java的标准版，是初学者学习Java的基础知识。而JavaEE是Java的企业版，涉及的知识更加广泛，是Java中的高级内容。为了更好地学习和使用Java，需要掌握相关的快捷键、命令行操作以及JDK的安装。 首先，掌握...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值