JavaWeb学习(第一天)-1-HTML部分
<!--
1)
html语言是解释型语言,不是编译型浏览器是容错的2)
html页面中由一对标签组成:<html></html>
<html> 称之为 开始标签
</html>称之为 结束标签
3)
title 表示网页的标题
4)
可以在meta标签中设置编码方式
5)
<br/>表示换行 。br标签是一个单标签。单标签:开始标签和结束标签是同一个,斜杠放在单词后面
6)
p 表示段落标签
7)
img 标签图片标签
src属性表示图片文件的路径
width和height表示图片的大小
alt表示图片的提示
8)
路径的问题:
1. 相对路径
2. 绝对路径
9)
h1~h6 : 标题标签
10)
列表标签:
- ol 有序列表
start 表示从*开始,type 显示的类型:A a I i 1(deafult)
- ul 无序列表
type disc(default) , circle , square
11) u 下划线 b 粗体 i 斜体12) 上标 sup 下标 sub
13) HTML中的实体: 小于号 < 大于等于号 ≥ 版权 ©
14) span 不换行的块标记
15) a 表示超链接
href 链接的地址
target:
_self 在本窗口打开
_blank 在一个新窗口打开
_parent 在父窗口打开
_top 在顶层窗口打开16) div 层
-->
<html><head><title>这是我的第一个网页</title><meta charset="UTF-8"></head><body>HELLO WORLD!<br/>你好,HTML!<p>这里是一个段落</p><p>这里是第二个段落</p><img src="imgs\girl.jpg" width="570" height="730" alt="这里是一张图片"/><h1>标题一</h1><h2>标题一</h2><h3>标题一</h3><h4>标题一</h4><h5>标题一</h5><h6>标题一</h6>武林高手排行榜:<ol type="i" start="3"><li>扫地僧</li><li>萧远山</li><li>慕容博</li><li>虚竹</li><li>阿紫</li></ol>武林大会人员名单:<ul type="circle"><li>乔峰</li><li>阿朱</li><li>马夫人</li><li>白世镜</li></ul>你是<b><i><u>喜欢</u></i></b>是<b>甜</b>月饼还是<i>咸</i><u>月饼</u>?<br/>水分子的化学式: H<sub>2</sub>O <br/>氧气的化学式: O<sup>2</sup><br/>5<1010>55≤1010≥5注册商标 ®版权符号 ©<span>赵又廷</span>,夺妻之仇。<a href="http://www.baidu.com" target="_self">百度一下</a></body>
</html>
效果:
<!-- 17) 表格 table行 tr列 td表头列 thtable中有如下属性(虽然已经淘汰,但是最好了解一下)- border:表格边框的粗细- width:表格的宽度- cellspacing:单元格间距- cellpadding:单元格填充tr中有一个属性: align -> center , left , right rowspan : 行合并colspan : 列合并 -->
<html><head><title>表格标签的学习</title><meta charset="UTF-8"></head><body><table border="1" width="600" cellspacing="0" cellpadding="4"><tr align="center"><th>姓名</th><th>门派</th><th>成名绝技</th><th>内功值</th></tr><tr align="center"><td>乔峰</td><td>丐帮</td><td>少林长拳</td><td>5000</td></tr><tr align="center"><td>虚竹</td><td>灵鹫宫</td><td>北冥神功</td><td>15000</td></tr><tr align="center"><td>扫地僧</td><td>少林寺</td><td>七十二绝技</td><td>未知</td></tr></table><hr/><table border="1" cellspacing="0" cellpadding="4" width="600"><tr><th>名称</th><th>单价</th><th>数量</th><th>小计</th><th>操作</th></tr><tr align="center"><td>苹果</td><td rowspan="2">5</td><td>20</td><td>100</td><td><img src="imgs/del.jpg" width="24" height="24"/></td></tr><tr align="center"><td>菠萝</td><td>15</td><td>45</td><td><img src="imgs/del.jpg" width="24" height="24"/></td></tr><tr align="center"><td>西瓜</td><td>6</td><td>6</td><td>36</td><td><img src="imgs/del.jpg" width="24" height="24"/></td></tr><tr align="center"><td>总计</td><td colspan="4">181</td></tr></table></body>
</html>
效果:
<!-- 18) 表单 form 19) input type="text" 表示文本框 , 其中 name属性必须要指定,否则这个文本框的数据将来是不会发送给服务器的input type="password" 表示密码框input type="radio" 表示单选按钮。需要注意的是,name属性值保持一致,这样才会有互斥的效果;可以通过checked属性设置默认选中的项input type="checkbox" 表示复选框。name属性值建议保持一致,这样将来我们服务器端获取值的时候获取的是一个数组select 表示下拉列表。每一个选项是option,其中value属性是发送给服务器的值 , selected表示默认选中的项textarea 表示多行文本框(或者称之为文本域),它的value值就是开始结束标签之间的内容input type="submit" 表示提交按钮input type="reset" 表示重置按钮input type="button" 表示普通按钮 -->
<html><head><title>表单标签的学习</title><meta charset="UTF-8"></head><body><form action="demo04.html" method="post">昵称:<input type="text" name="name" value="请输入你的昵称"/><br/>密码:<input type="password" name="pwd"/><br/>性别:<input type="radio" name="gender" value="male"/>男<input type="radio" name="gender" value="female" checked/>女<br/>爱好:<input type="checkbox" name="hobby" value="basketball"/>篮球<input type="checkbox" name="hobby" value="football" checked/>足球<input type="checkbox" name="hobby" value="earth" checked/>地球<br/>星座:<select name="star"><option value="1">白羊座</option><option value="2" selected>金牛座</option><option value="3">双子座</option><option value="4">天蝎座</option><option value="5">天秤座</option></select><br/>备注:<textarea name="remark" rows="4" cols="50"></textarea><br/><input type="submit" value=" 注 册 "/><input type="reset" value="重置"/><input type="button" value="这是一个普通按钮"/></form></body>
</html>
效果:
本章小结:
1.HTML是解释型的文本标记语言,不区分大小写 2.html,head,title,meta,body,br,p,hr,div,table,form,u,i,b,sup,sub, ,span,ul,ol,li,tr,td,th,h1-h6,a,input,select,textarea,img 2-1. html , head , title , meta , body , br , ul , ol , h1-h6 , a , img , , p , div , span 2-2. table tr , th , td 2-3. form(action='' , method='post') input type='text,pasword,radio,checkbox,submit,button,reset" <select> , <textarea>
JavaWeb学习(第一天)-1-HTML部分相关推荐
- javaWeb学习第一天 ------HTML和table表格
javaWeb学习第一天 学习内容 前端介绍: html :超文本标记语言 html创建: html的一些规范: html的发展史: html开发的工具: html文档的格式: html的注释: ht ...
- 学习Javaweb的第一天:绝对路径和相对路径
学习Javaweb的第一天:绝对路径和相对路径 最近在学习Javaweb时,发现按照书本上的办法插入的图片显示不了. 按照书上的语法,HTML图像通过< img >标记进行插入: < ...
- javaweb学习总结(三十九)——数据库连接池
javaweb学习总结(三十九)--数据库连接池 一.应用程序直接获取数据库连接的缺点 用户每次请求都需要向数据库获得链接,而数据库创建连接通常需要消耗相对较大的资源,创建时间也较长.假设网站一天10 ...
- JavaWeb学习之路——SSM框架之Mybatis(三)
数据库配置和相关类创建看上篇:JavaWeb学习之路--SSM框架之Mybatis(二) https://blog.csdn.net/kuishao1314aa/article/details/832 ...
- Javaweb学习路线(自学规划)
一.Java学习路线 第一阶段:Java基础,包括java语法,面向对象特征,常见API,集合框架; (基础) 第二阶段:java界面编程,包括AWT,事件机制,SWING,(不常用)这个部分也可以跳 ...
- JavaWeb学习笔记(5)-B站尚硅谷
文章目录 十四.书城项目第三阶段--优化 (1)页面jsp动态化 (2)抽取页面中相同的内容 A.登录成功的菜单 B.base.css.jQuery标签 C.每个页面的页脚 D.manager模块的菜 ...
- javaweb学习笔记2(jquery的使用,以及常用的方法,选择器,过滤器)
javaweb学习笔记2 javascript正则表达式 regfxp对象 方式1: var putt=new RegExp("e");//表示要求字符串中必须包含字符串evar ...
- 【Javaweb学习笔记】在Eclipse中创建Web项目
[Javaweb学习笔记]在Eclipse中创建Web项目 哈喽大家好,这里是Java框架学习笔记专栏第二期 本期内容--在Eclipse中创建Web项目 前期回顾: 第一期--schema约束 笔者 ...
- JavaWeb学习案例——学生管理系统
JavaWeb学习案例--学生管理系统 引入jar包: 1. c3p0-0.9.1.2.jar // 第三方数据库连接池 2.commons-dbutils-1.4.jar // 第三方数据库操作方法 ...
- Javaweb学习笔记(JSP标准标签库)
Javaweb学习笔记(JSP标准标签库) JSTL入门 安装和测试JSTL JSTL中的Core标签库 < c:out>标签 标签 标签 < c:catch>标签 标签 标签 ...
最新文章
- 今天你(L)China了吗?
- 最近看的电影(乱谈)
- Celery简介及Docker测试环境搭建
- 每天一道LeetCode-----有序数组右移n位后查找某个元素
- eclipse中maven项目pom文件第一行报错解决方法
- 传统数据库在分布式领域的探索
- [渝粤教育] 西南科技大学 运输组织学 在线考试复习资料
- 获取Excel数据及Sheet的方法
- 优化算法之——最速下降法
- 基于ATmega128单片机的LCD12864显示密码锁
- c语言 power 头文件,pow - [ C语言中文开发手册 ] - 在线原生手册 - php中文网
- Fractions to Decimals_usaco2.4.5_暴力
- 桌面运维问题快速定位原因的常用基本思路
- 从0开始学代码第五周!!!
- 解决 Windows系统 快捷方式 图标 变成 白色方块
- JAVA 获取某天、某周、某月、某年的开始时间和结束时间
- 从开发者到讲师的心路历程
- 利用range表单元素实现调色板
- java程序设计方法
- 一次回三线城市面试软件开发的经历
热门文章
- pip install 命令报错Temporary failure in name resolution
- Word VBA(批量复制Excel表格和Word表格到Word中)
- win10专业版 1909 netkeeper错误代码137
- c语言生成excel文件简书,通过xlwings生成Excel文件
- WIN10 Outlook 2013 pst/ost邮件数据文件迁移
- 解决硬盘自动休眠问题
- 从FASTA文件中批量提取指定序列【Python脚本】
- Elasticsearch 5.0 rollover api 学习
- [人生故事] -- 美国总统的幽默
- 字节辟谣被裁员工与 HR 互殴;苹果头显多个新功能曝光;谷歌希望 RISC-V 成为 T1 级 Android 架构|极客头条...