javaWeb学习第一天 ------HTML和table表格
2024-05-18 02:09:17
javaWeb学习第一天
- 学习内容
- 前端介绍：
- html ：超文本标记语言
- html创建:
- html的一些规范:
- html的发展史:
- html开发的工具:
- html文档的格式:
- html的注释:
- html 中常用的标签:
- 总结：
- 表格常用标签和属性
- 视频和音频便签
- 页面的布局 标签
- 页面的框架:
学习内容
1.什么是前端，2.HTML语法 3.table标签
前端介绍：
前端的基础技术组成:
html 前端的架构 (树干) css 样式 用于美化网页javaScript js ==> 逻辑处理jquery 动效 做特效（动画与效果 ==>验证的插件bootstrap 布局 ==》灵活的布局 适用pc与移动端
html ：超文本标记语言
文本 :text, 只能包含文字与符号超文本： 不仅可以放文本，还有表示图片，音视频等，不可更改和自定义标记语言：就是一些预定义的标签(有一个规范) xml ==》 标签是可以任意定义的
html创建:
1.使用记事本来创建,只需要把后缀名修改成.html或者是.htm步骤：1.1使用记事本创建html的步骤:1.新建一个txt 2.写内容，修改后缀名注意点：1.不需要进行编译,直接由浏览器解析 2.常规的浏览器: 谷歌 火狐 ie 9 360
html的一些规范:
1.不需要编译,由浏览器直接解析2.后缀名是 .html 或者是.htm3.标签是不区分大小写,但是一般建议使用小写4.html中的标签一般都是成双成对，但是也存在单个的标签5.html中的空格 与换行</br>都有特殊的表示 6. 标签是可以进行相互的嵌套 ==》嵌套的规则: <p><em></p></em> 错误 正确：<p><em>对对对</em></p>
html的发展史:
html1.0开始 ==>html5.0==》适配，以及新的特性 xhtml+html4.0结合
html开发的工具:
DW WebStore HBuilder
html文档的格式:
<!DOCTYPE html> ==》html文档的申明
<html lang="en"> ==>html 的标签 lang="en" 表示语言
<head> ==>头部<meta charset="UTF-8"> ==>设置编码格式 UTF-8 万国码 表示支持中文 GBK繁体的中文 gb2312 默认的编码格式<title>Title</title> ==>标题
</head><body> ==>身体</body>
</html>
注意点:1.html分为头部 身体 尾部2.一定要主要设置其编码格式3.主要是引用一些css文件以及js文件 ,不建议内容部分放在头部4.body 主要就是写网站的主题，以及内容部分5.html是支持属性:写属性的语法 <标签名称 属性1="属性值" 属性2="s属性2的值">
html的注释:
快捷键是ctrl+shift+/ 特点: 浏览器查看的时候，看不注释 ,只要查看源代码的时候才可以看到注释
html 中常用的标签:
1. 标题标签 h1 --- h6 特点:标签的内容字体是逐渐变小2. 横线标签：使用hr 特点：这个标签是单个标签 设置其宽度 width="90px" px 表示像素 设置其百分比常用的属性:1.width="90px" 2.大小 size color 表示颜色3.字体标签:font 常规的属性:1.width="90px" 2.大小 size color 表示颜色4.字体加粗: <strong> <b>5.斜体标签： <em> <i>6.换行标签 <br/> 7.空格 8.段落标签<p>9. 图片标签:img 图片常规的后缀: jpg gif jpeg png 等 常规的属性 宽高 src=="图片的路径"==>可以使用相对路径 绝对路径 alt="图片出错显示的文字的"title="表示鼠标移入的提示信息"10. <a> 跳转标签 属性 : href=""表示跳转的链接地址 target="_blank" 会新打开一个窗口 target="_self" 表示在本页面进行跳转11. 有序列表 <ol> > <li> 注意点：1. <li> 表示每一个条目 2.type 表示设置其前缀 A a I i 112.无序列表 <ul> > <li> 注意点：1. <li> 表示每一个条目 2. 2.type 表示设置其前缀 type常规的值：square 方块 disc circle 空心圆圈13.定义列表 dl dt dd dl >dt=dd 1.注意点1.dt 表示分类 dd 表示分类下具体子的条目 2.dt dd 是平级,没有嵌套 14.<span> 表示象征性的标签 ==>也被称为叫行元素 ==>是根据具体的内容来进行填充的,不会独自占一行15 <div> 表示块状元素 ==> 不会根据内容来进行填充，都是独占一行
总结：
块状元素: <div> <p> h1 --- h6 <ol> > <li> <ul> <li> dl dt dd 行状元素: <a> <span> <strong> <b> <em> <i> <img>
表格常用标签和属性
16.表格标签 <table> 表格 > tr 行 > td 表示其单元格 常用的属性: border="1" 边框 bgcolor="red" 背景颜色 align="center" 表示居中cellspacing 设置单元格与单元格的之间的间距cellpadding="0px" 设置内容与边框之间的间距colspan 表示跨列 针对的是单元格rowspan="2" 跨行 针对的是单元格表的第一行使用的是 th 默认会居中 特点：默认会居中, 内部的字体会加粗<caption> 表格的标题标签<thead> 表示表格的内容头部分 <tbody> 表格的身体 <tfoot> 表格的尾部
视频和音频便签
视频的标签 <video> <source src=""> 表示引入视频的地址 controls 表示显示 loop 循环播放音频的标签 <audio> <source src=""> 表示引入音频的地址 controls 表示显示 loop 循环播放
页面的布局 标签
<header> 表示头部
<section>表示中间的内容
<footer>表示尾部
<nav> 表示导航栏
<article> 表示文档的内容
页面的框架:
<frameset rows="20%,*" cols ="30%,70%"> 设置左右之间的比例 设置上下的比例 <frame src="left.html"> 表示引入的路径 name="abc" 对应是<a target="abc">frameset 不能与body共同存在 ==>使用场景：1.页面布局同时加载几个页面 2.点击链接切换界面的时候
练习1：实现人物介绍
实现界面：
实现代码：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<!--表示标题标签-->
<h3>人物简介</h3>
<p><strong>李清照</strong> <em>（1084年3月13日~1155年5月12日）</em>，宋代女词人，号易安居士，婉约词派代表， 有“千古第一才女”之称。早期生活优裕，金兵入据中原时，流寓南方，境遇孤苦。所作词，前期多写其悠闲生活，后期多悲叹身世， 情调伤感。形式上善用白描手法，自辟途径，语言清丽。论词强调协律，崇尚典雅，提出词“别是一家”之说，反对对作诗文之法作词， 留有诗集《易安居士文集》、《易安词》等。</p>
© 李四您好</body>
</html>
练习2：练习使用无序列表
实现效果：
实现代码：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<!--标题--><h3>热门 更多</h3><!--无序列表--><ul><li><img src="img/img1.png" title="点击是第一张图片" alt="第一张图片错误"><p> 您好，今天星期三 </p></li><li><img src="img/img2.png" title="点击是第一张图片" alt="第一张图片错误"><p> 您好，今天星期三 </p></li><li><img src="img/img3.png" title="点击是第一张图片" alt="第一张图片错误"><p> 您好，今天星期三 </p></li><li><img src="img/img4.png" title="点击是第一张图片" alt="第一张图片错误"><p> 您好，今天星期三 </p></li></ul></body>
</html>
练习3：有序列表的使用
实现效果：
实现代码：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><h3>音乐排行榜</h3><!--有序--><ol><li><a>年少有为<img src="img/2.png"></a></li><li><a>认真的雪<img src="img/2.png"></a></li><li><a>丑八怪<img src="img/2.png"></a></li></ol></body>
</html>
练习四：实现视频的播放
实现效果
实现代码：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<video controls height="200px" autoplay >//controls 时候显示视频框<source src="v/1.mp4"></source>
</video></body>
</html>
音频便签的使用：
实现效果：
实现代码：
Title //controls 时候显示视频框
练习五：table标签的使用包括合并单元格
实现效果：
实现代码：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><table border="1" width="800px" cellpadding="0px" cellspacing="0px"><caption>流量调查表</caption><tr><!--第一行--><th>总页面流量</th><th>共计来访</th><th>会员</th><th>游客</th></tr><!--第二行--><tr><td align="center">989</td><td align="center">800</td><td align="center">870</td><td align="center">600</td></tr><tr><td align="center">989</td><td align="center">800</td><td align="center">870</td><td align="center">600</td></tr><tr><td align="center">平均每人的浏览</td><td align="center" colspan="3">18888</td></tr></table></body>
</html>
实现效果：
实现代码：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<table border="1" cellspacing="0" cellpadding=""><caption>学生</caption><thead><tr><th colspan="3">学生成绩</th></tr></thead><tbody><tr><td rowspan="2">张三</td><td>语文</td><td>98</td></tr><tr><td>数学</td><td>98</td></tr></tbody><tfoot><tr><td rowspan="2">李四</td><td>语文</td><td>88</td></tr><tr><td>数学</td><td>91</td></tr></tfoot>
</table>
</body>
</html>
练习六：常用标签的使用
代码：
<!DOCTYPE html>
<html lang="en" xmlns:t="http://www.w3.org/1999/html">
<head><meta charset="UTF-8"><title>Title</title><style>ul li{list-style-type: circle;}</style>
</head>
<body><h1>第一个标题</h1><h2>第二个标题</h2>-->
<h3>第三个标题</h3><hr width="80%" size="2px" color="#ffcc00"/><font>今天星期三</font>
加粗<strong>字体加粗</strong> <b>字体加粗1</b>斜体标签<em>斜体1</em> <br/><i>斜体2</i><p>您好</p><p>xxxx/p>图片标签 直接使用相对路径<img src="img/1.jpeg" width="200px" height="200px" alt="图片错误,请重新下载" title="点击有惊喜"><!–跳转标签–><a href="http://www.baidu.com" target="_self">跳转标签</a><!–有序列表–><ol type="I"><li>林书豪得36分</li><li>猪肉降价了</li><li>大数据spark框架得到了实践</li></ol>无序列表<ul type="disc"><li>浙江卫视要火了</li><li>詹姆斯批评格林</li><li>csdn开始巡演了</li></ul>定义列表<dl><dt>水果</dt><dd>苹果</dd><dd>梨子</dd><dt>蔬菜</dt><dd>西红柿</dd><dd>黄瓜</dd></dl>-->< <span>aaaaahjjhhhhhhhh</span><span>rrrrrrrrrrrrrrrrrrr</span><div>admin123</div><div>admin1234</div>表格<table border="1" bgcolor="red" width="800px" align="center" cellspacing="0px" cellpadding="0px"><!–第一行–><tr><!–第一行的第一个单元格–><td align="center">第一行的第一个单元格</td><!–第一行的第二个单元格–><td align="center">第一行的第二个单元格</td></tr><!–第二行–><tr><td align="center">第二行的第一个单元格</td><td align="center">第二行的第二个单元格</td></tr></table><table border="1"><!–跨列–><tr><td colspan="2">学生的成绩</td></tr><tr><td>语文</td><td>90</td></tr><tr><td>数学</td><td>85</td></tr></table><table border="1"><!–第一行–><tr><td rowspan="2">张三</td><td>语文</td><td>98</td></tr><!–第二行–><tr><td>数学</td><td>78</td></tr><tr><td rowspan="2">李四</td><td>语文</td><td>99</td></tr><!–第二行–><tr><td>数学</td><td>100</td></tr></table><table border="1"><tr><td colspan="3">学生成绩</td></tr><tr><td rowspan="2">张三</td><td>语文</td><td>97</td></tr><tr><td>数学</td><td>100</td></tr><tr><td rowspan="2">李四</td><td>语文</td><td>97</td></tr><tr><td>数学</td><td>100</td></tr><!– <tr><td colspan="2">李四</td><td>语文</td><td></td></tr>–></table><table border="1" width="800px"><caption> 书籍的分类</caption><tr><th>1</th><th>西游记</th><th>28</th></tr></table><table border="1"><caption>书籍的分类</caption><!–内容头–><thead><tr><th>1</th><th>朝花夕拾</th><th>58</th></tr></thead><!–身体–><tbody></tbody><t:tfoot></t:tfoot></table>表示视屏的标签<video controls height="200px" loop><source src="video/1.mp4" ></source></video>表示音频的标签
<audio controls height="200px" ><source src="video/2.mp3"></audio>页面的布局<header style="height: 200px;background: red"><!–导航栏–><!–无序列表–><nav><ul ><li style="float: left;width: 100px; height: 30px;list-style-type: none">首页</li><li style="float: left;width: 100px; height: 30px;list-style-type: none">订单</li><li style="float: left;width: 100px; height: 30px;list-style-type: none">购物车</li><li style="float: left;width: 100px; height: 30px;list-style-type: none">商品详情</li></ul></nav></header>表示其内容<section style="height: 300px;background: green"><article>文章的内容</article></section><footer style="height: 200px;background: yellow">尾部</footer></body>
</html>
练习七：frameset的使用
实现界面：
实现代码：
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<!--<body>-->
<frameset rows="20%,*"><!--上面界面占百分之20 下面界面占满--><!--页面的路径 上面部分 --><frame src="top.html" scrolling="no"><!--下面部分--><frameset cols ="30%,70%"><!--左面界面占百分之20 右面界面占满--><frame src="left.html"><frame src="center.html" name="abc" ></frameset></frameset><!--</body>-->//不能使用
</html>
管理界面代码：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><h1>商品管理</h1>
</body>
</html>
订单界面代码：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><h1>订单管理界面</h1>
</body>
</html>
左边页面代码：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head><body>
<!--"margin: 0px 表示外边距 padding: 0px 表示内边距 list-style-type: none 去除点--><!--无序的列表--><ul style="margin: 0px; padding: 0px"><li style="list-style-type: none"><a href="商品管理.html" target="abc" >商品管理</a>//target的值必须和index界面的里的frame便签里的name属性的值相同</li><li style="list-style-type: none"><a href="订单管理.html" target="abc" >订单管理</a></li></ul>
</body>
</html>
实现界面：
头部界面代码：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><img src="img/top_100.jpg" width="100%">
</body>
</html>
实现界面：
练习八：书籍的介绍
实现效果：
实现代码：
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<b>看不见的完美硬币 : 细节的负担</b><br></br>
<b>创新公司皮克斯的启示</b></br></br>
<img src="data:image/cts-191204171038376.jpg"><br>
<p>
<em>细节从来部是个好东西,完美的细节往往给我们得商业上的胜利。<br><br>
但是, 在皮克新, 这一寂满是完美主义投计师的企业里,细节竞然成了负担<br><br>
怎么打造完美的?又怎么得商业上的种益。 克总裁支德卡得姆为我们解</em><br></p>
<p><strong>看不见的完美硬币:细节的负担</strong></p>
<p> 在皮壳斯, 每一部电影都是商业与艺术的双贏。 不管这些电影是艺术作品, 还是商品, 细节都是至关重要的, 是决成败的关键。 人们似乎也听过许多关于细节的胜利的改事, 但是在皮壳斯, 设计师们一个个都是完美主义者, 细节显然成了皮壳斯的负担。
样的太过于重视细节, 往往会伤害到企业该有的效率, 最终仿害企业的根本。 在完美细节和企业应有的效率面前, 艾德·卡特姆做出了明智的决策</p>
<p> 皮克斯有—个现急, 被我们的制片人叫作
见的完美硬市( the perfect coin)
人凯瑟琳·萨拉菲安称为 “床头柜上一枚没人会主意到的硬币” 这样的细节,也会引得我们的
作人员花上几天甚至数周的时间悉心打磨
林是《怪善电力公司》一片的制作人员, 影片中有一幕戏可以形急地向我们闻释到底什
在这莓戏中, 好奇的小布第
克和萨里的公寓,还在
步的小要儿四处探素起
来。 两个怪物想要制止她,而她还是一步步走到了两揉高高堆起的CD旁,别乱动! “麦壳大喊起来, 可是小女孩还是从90多张CD盒摞成的
CD全部倒場散落在了地板上。 麦壳抱怨道 : “哎,那些CD都是按字母顺序排列好的
女孩摇摇摆摆地走开了。 这莓场景前后不到3秒钟,观众们只能够看到几个CD盒而已,但皮克斯的制作人员不仅为每一个CD盒制作了封面, 还使用了可计算物体在运动时渣染效果变化的着色器
</p><p> 你能看到所有CD盒吗?看不到。 ”萨拉菲安接着说, “把所有CD盒全部设计一遍, 这工作有意思吗?其实挺有意思的。 我们还真有几位工作人员觉得观众能在近镜头里把每张CD都看得一清二楚, 所以就任劳任怨地把每张CD都雕琢了一番。也许,这其中
乐趣只有当事人才能体会吧</p>
</body>
</html>
javaWeb学习第一天 ------HTML和table表格相关推荐
- layui一个表格中怎么接两个接口的值_layer学习笔记之table表格引入数据实现分页...
LayUI是一款免费,开源,轻量级的前端cms框架,适用于企业后端,能快速上手开发,集成了常用的组件,还有完善的文档和社区. 最近一直在学习使用layer的layui框架技术,这个主要表现在于弹出层的 ...
- 前端学习第一周-计算机基础，html标签的介绍，其中包括列表，表格以及表单的使用
前端学习第一周-HTML基础 文章目录 前端学习第一周-HTML基础 前言 DAY 1 计算机组成 计算机网络 DAY 2 vscode快捷方式 HTML骨架 DAY 3 HTML属性 HTML标签 ...
- ESP32 开发笔记(四）LVGL控件学习 Table 表格控件
先看效果,创建一个简单的表格 开发板购买链接https://item.taobao.com/item.htm?spm=a2oq0.12575281.0.0.50111deb2Ij1As&ft= ...
- vuetify 学习第一天之v-data-table_表格组件
v-data-table组件学习第一天 目录 文章目录 1.简介 2.常用属性 2.1.常用属性 2.2.详细描述 2.2.1.headers详解 2.2.2.items 2.2.3 .options ...
- 学习Javaweb的第一天：绝对路径和相对路径
学习Javaweb的第一天:绝对路径和相对路径 最近在学习Javaweb时,发现按照书本上的办法插入的图片显示不了. 按照书上的语法,HTML图像通过< img >标记进行插入: < ...
- JavaWeb学习笔记（数据库、SQL语句、数据查询语法、完整性约束、编码、备份和恢复数据、多表查询）
数据库.SQL语句.数据查询语法.完整性约束.编码.备份和恢复数据.多表查询 JavaWeb学习笔记 数据库 数据库概念 基本命令 启动和关闭mysql服务器 客户端登录退出mysql SQL语句 S ...
- JavaWeb学习--复习
JavaWeb学习 JavaWeb--Html 1.提交按钮 <button οnclick="alert('你好')">提交</button>,oncli ...
- （四）javaweb 学习--javascript篇基础
文章目录 javascript (数据类型,方法) javascrip使用 javascrip使用进阶 HTML代码 CSS代码 javascript代码 javascrip使用进阶2 HTML代码 ...
- Javaweb学习路线（自学规划）
一.Java学习路线 第一阶段:Java基础,包括java语法,面向对象特征,常见API,集合框架; (基础) 第二阶段:java界面编程,包括AWT,事件机制,SWING,(不常用)这个部分也可以跳 ...
最新文章
- xp系统debugger用户_xp系统BIOS恢复出厂设置开机需按F1的具体步骤--win10专业版
- 关于Linux线程的线程栈以及TLS
- 应用容器Application container
- 实现jdbc连接mysql_Java JDBC连接MYSQL数据库教程(实现)
- linux 开机自动运行命令_如何在Linux终端同时运行多个Linux命令
- Halcon 抓圆工具spoke
- 计算机函数说课ppt,幂函数说课课件
- Java 访问权限控制：public、private、protected
- 网站改造为百度智能小程序教程，适合所有网站封装
- 期货市场计算机技术指难,期货交易中最重要的是什么？最难的是什么？
- 【Linux】文件及目录
- 车载以太网第二弹 | 测试之实锤-IOP测试实践
- 关于Verilog 写法
- easyExcel设置水印
- [生存志] 第104节 吕览一字千金
- 《弃子长安》第二章 长乐驱蛊
- 为什么Python这么火
- Springboot之Actuator信息泄露漏洞利用
- android webview卸载,安卓WebView清除localStorage
- [激光原理与应用-45]：《焊接质量检测》-2- 常见焊接缺陷与检验方法