网站弹出广告的是怎么做的,百度网盘怎么找片,手机网站建设公司哪家好,免费移动网站建设JavaWEB 上一篇 个人整理非商业用途#xff0c;欢迎探讨与指正#xff01;#xff01; 文章目录 JavaWEB1.HTML1.1HTML中的三大基本标签1.2显示标签1.2.1文本标签1.2.2表单标签1.2.2.1input标签1.2.2.2下拉框1.2.2.3多行文本1.2.2.4表单标签的通用属性1.2.2.5form标签1.2…JavaWEB
« 上一篇 个人整理非商业用途欢迎探讨与指正 文章目录 JavaWEB1.HTML1.1HTML中的三大基本标签1.2显示标签1.2.1文本标签1.2.2表单标签1.2.2.1input标签1.2.2.2下拉框1.2.2.3多行文本1.2.2.4表单标签的通用属性1.2.2.5form标签1.2.2.6h5中form的新特性 1.3布局标签1.3.1标题标签1.3.2段落标签1.3.3列表标签1.3.4表格标签1.3.5div和span1.3.5表单布局标签 1.4功能标签1.5框架标签1.5.1内嵌浮动框架 1.6其他标签1.6.1文本修饰1.6.2输出和引用标签 1.HTML
超文本标记语言,用于网页制作 单纯的标记语言,语法: 双标签: 标签名/标签名 单标签: 标签名/
HTML可以为两个大的方向的语法:HTML4和HTML5 HTML5不是HTML4的升级
准备工作 浏览器:开发时推荐使用谷歌,火狐,edge 开发工具:HBuilderX,HBuilder,记事本
1.1HTML中的三大基本标签
扩展名为:.html 或者 .htm 注释: html的注释是不支持嵌套的
htmlhead!--头标签,负责当前页面的配置--/headbody!--体标签,一个页面的主体--/body
/html!-- 当前页面的声明,可以省略,给浏览器看的,声明如下则是提示浏览器使用HTML5的形式进行解析页面 --
!DOCTYPE html
htmlhead!-- 元标签,声明当前页面的编码格式 --meta charsetutf-8title我是标题,嘿嘿/title/headbodyhelloworld你好世界/body
/html1.2显示标签
1.2.1文本标签
标签的组成:标签名 属性 例如:
body!-- ctrl/ 注释一行 --!-- ctab 生成一个注释 --!--
html4中文本标签
font标签 属性 color:颜色 可以使用基本的英文单词
face:字体 安全字体,默认可以使用计算机中安装的
size:字号 1~7的 依次增大 默认大小为3
--!-- 可以使用标签名tab自动生成一个标签 --!-- font*3 tab --font colorred face微软雅黑 size7helloworld/fontfont colorgreen face宋体 size1helloworld/fontfont coloryellowgreen face黑体 size3helloworld/font!--
html5中文本标签
h5是不推荐使用font了,使用label进行代替
label没有样式属性
for属性可以和其他标签进行绑定,文字绑定
--label for我是h5中字体标签/label
/body1.2.2表单标签
与用户做交互使用 表单中多数标签为input,是根据不同的type显示不同的状态
1.2.2.1input标签
body!-- html中不能使用换行符,页面中换行使用br标签 --文本框:input typetextbr密码框:input typepasswordbr单选按钮:(使用name属性将多个单选按钮进行绑定)input typeradio namegender男input typeradio namegender女br复选按钮:(和单选按钮类似)input typecheckbox namehobby唱input typecheckbox namehobby跳input typecheckbox namehobbyrapinput typecheckbox namehobby篮球br文件域:(可以显示当前系统下的文件)input typefilebr按钮标签:input typebutton value点我啊!!!!-- 普通按钮 --input typereset!-- 重置按钮,可以重置表单上的内容 --input typesubmit!-- 提交按钮,可以将表单提交 --input typeimage srcimg/2.jpg width200 height50!-- 图片按钮,功能和submit一样 --button typebutton普通按钮/buttonbutton typereset重置按钮/buttonbutton typesubmit提交按钮/button
/bodybody!-- h5中新增input标签,移动端支持,谷歌浏览器/edge浏览器可以查看部分 --input typenumberbrinput typecolorbrinput typedatebrinput typedatetimebr!-- 年月日 浏览器不能查看 --input typedatetime-localbr!-- 年月日 时分秒--input typeemailbr!-- 调用英文键盘 --input typetelbr!-- 调用数字键盘 --input typesearch
/bodybody!-- 文字绑定input标签,label中的for绑定input的id属性 --性别:input typeradio namegender idmanlabel forman男/labelinput typeradio namegender idwomanlabel forwoman女/labelbr爱好:input typecheckbox namehobby idclabel forc唱/labelinput typecheckbox namehobby idtlabel fort跳/labelinput typecheckbox namehobby idrlabel forrrap/labelinput typecheckbox namehobby idllabel forl篮球/label
/body1.2.2.2下拉框
body!--
select:下拉框标签
size属性,列表的可见数
multiple属性,单属性(属性名和属性值相同,那么属性值可以省略),需要配合ctil键一起使用
--label for部门名/labelselect nameoption value技术部/optionoption value行政部/optionoption value外派部/optionoption value财务部/option/selectlabel for员工名/labelselect name size8option value王成輝/optionoption value陈则宇/optionoption value于龙祥/optionoption value大佐/option/select
/body1.2.2.3多行文本
body!--
cols:每行可以写的字符个数
rows:可以显示的行数
--textarea name id cols30 rows10/textareabutton发表/button
/body1.2.2.4表单标签的通用属性
id属性:是一个标签的唯一标识,所有标签都有的属性,可以确保当前页面中的标签的唯一性,便于取值/定位使用 name属性:后端取值时的key value属性:后端取值时的value,前端使用时显示的值,内置值 在向后端发送数据时,使用namevalue形成的键值对,发送数据
placeholder属性:h5新增属性,内容提示功能,用户输入内容后,提示消失 readronly属性:只读,只显示,不能修改 disabled属性:禁用,不能使用
bodyform actiontest.htmlinput typetext valuehelloworld nameusername!-- 值1可以发送到后端 和name一起使用 --input typeradio value1 namegenderinput typetext placeholderUSERNAME!-- textarea没有value属性,内容就是value --textarea id cols30 rows10 nameinfo placeholder这家伙很懒什么都没有留下.../textareabrinput typetext value专打茄子的好腿 namename readonlybutton typebutton充钱改名/buttoninput typetext value专打茄子的好腿1 namename1 disabledinput typesubmit/form
/body1.2.2.5form标签
body!--
form是所有表单标签的父标签,可以嵌套给所有的表单元素
1.作用:当提交按钮点击时(1.input typesubmit 2.button typesubmit 3.button的默认形式)
会将表单提交到 action属性指定的位置(.html .jsp Servlet)
2.提交时的数据会以namevalue的形式进行传输
3.method属性:表单的提交方式
get方式:
默认情况,提交的数据会附着在url之后,不安全的,效率高,对中文的支持较差,传递的数据上限为4k左右
例如:http://127.0.0.1:8848/01-HTML/welcome.html?usernameadminpassword123yzm123
post方式:
隐式提交,但对于HBuilderX内部的服务器而言,不支持post请求
将信息存在于请求头内,安全的,效率低,对中文支持良好,数据无上限
4.重置按钮:回到表单的原始状态
5.提交按钮:将表单进行提交
--form actionwelcome.html methodpostusername:input typetext nameusername/brpassword:input typepassword namepassword/brinput typetext placeholder请输入验证码 nameyzm/假装有验证码图片brinput typesubmitbutton提交/buttonbutton typesubmit提交/buttoninput typereset/form
/body1.2.2.6h5中form的新特性
body!--
提交表单可以写在form标签之外,需要通过form属性的id进行页面跳转的绑定
--form idUserForminput typetext placeholder请输入用户名 nameuserbrinput typepassword placeholder请输入密码 namepwdbr/form!-- 提交标签可以写到form之外,使用formaction属性进行不同页面的跳转(指定不同的url) --input typesubmit value用户登录 formUserForm formactionindex.htmlinput typesubmit value管理员登录 formUserForm formactionadmin.htmlinput typesubmit valueVIP用户 formUserForm formactionVIP.html disabled
/body1.3布局标签
可以对网页视图进行排版
1.3.1标题标签
h标签,共有6个,h1~h6的,标题大小依次减小 属性:align 文字的对齐方式;有left center right三个值 默认换行的
body!-- h${内容}*6 $从1开始自增的值 {表示内容}--h1 alignleft标题内容h1/h1h2 aligncenter标题内容h2/h2h3 alignright标题内容h3/h3h4标题内容h4/h4h5标题内容h5/h5h6标题内容h6/h6
/body1.3.2段落标签
p标签,段落文字 hr标签,水平线,单标签 br标签,换行标签,单标签
bodyp段落内容0001br段落内容0001/pp段落内容0002/phrp alignleft段落内容0003/pp aligncenter段落内容0004/pp alignright段落内容0005/pp段落内容0006/p
/body1.3.3列表标签
以列表的形式展示内容
body!-- olli*6 表示子标签--!-- ol属性 type1 a A I i --h2JDBC的连接步骤/h2ol typeili加载驱动/lili创建连接/lili获取语句对象/lili执行SQL语句/lili处理结果/lili关闭连接/li/ol
/bodybodyh2白酒的类别/h2!-- ul属性 typedisc实心圆(默认) circle空心圆 square实心的方块 --ul typesquareli飞天茅台/lili五粮液/lili二锅头/lili老烧郭/lili江小白/lili梦之蓝/li/ul
/bodybody!-- dldtdl*4 表示兄弟标签--dldth2四大名著/h2/dtdl水浒传/dldl西游记/dldl红楼梦/dldl三国演义/dl/dl
/body1.3.4表格标签
以表格的形式显示页面,以前多用于布局,现在多用于展示数据
body!--
table:表格
属性:
border:边框线,1设置边框线,0去除边框线(默认为0),1的值是外部边框线的粗细
cellspacing:内外边线之间的距离
cellpadding:内容和内边线之间的距离
align:针对父标签(body)的对齐方式
tr:行
属性和table类似
align:内容的水平对齐方式 left center right
valign:内容的垂直对齐方式 top middle bottom
td:单元格
和tr类似--!-- tabletr*4td*5 --table border1 cellspacing0 cellpadding10 width500 height400 bgcolorpink bordercolorblue backgroundimg/1.jpg tr aligncentertd用户编号/tdtd用户姓名/tdtd用户性别/tdtd用户生日/tdtd用户年龄/td/trtr alignright valignbottomtd1/tdtdzs/tdtd男/tdtd1990-01-23/tdtd35/td/trtrtd alignright2/tdtd valigntopzs/tdtd男/tdtd1990-01-23/tdtd35/td/trtrtd3/tdtdzs/tdtd男/tdtd1990-01-23/tdtd35/td/tr/table
/bodybody!--
td的属性
colspan:横向合并单元格
rowspan:纵向合并单元格th:表格的表头单元格,默认居中且加粗的 和td一样
thead和tbody:将表格分为头和主体,一般可以省略,添加的话可以严格的区分头和体的内容
--table border1 cellspacing0 cellpadding10 width400theadtrth colspan4xxx系统的数据显示/th/tr/theadtbodytrtd编号/tdtd姓名/tdtd rowspan2性别/tdtd rowspan2爱好/td/trtrtd编号/tdtd姓名/td/tr/tbody/table
/body1.3.5div和span
div和span是常用的布局标签,可以css配合使用 div:一个块级的盒子 span:一个内联的盒子 盒子的分类: 块级:换行,可以通过css设计宽高,例如:hn,p,table,form,div等 内联:不换行,不可以通过css设置宽高,例如:label,a,b,i,u,span等 内联块:不换行,可以通过css设计宽高,例如:input,img等 html
headmeta charsetutf-8title/titlestyle/* css样式表 */div {width: 200px;height: 200px;border: 1px solid pink;}span {width: 200px;height: 200px;border: 1px solid pink;}input {width: 200px;height: 200px;border: 1px solid pink;}/style
/head
body!-- 默认换行的,可以设置宽高 --divdiv的内容/divdivdiv的内容/divdivdiv的内容/div!-- 默认在一行的,不可以设置宽高 --spanspan的内容/spanspanspan的内容/spanspanspan的内容/span!-- 默认在一行的,可以设置宽高 --input typetextinput typetext
/body1.3.5表单布局标签
fieldset:一个表单容器,默认有边框有内边距 legend:fieldset子标签,设置容器的局部内容
bodyfieldset stylewidth: 200px;height: 200px;legendxxxx管理平台登录页面/legendform actionxxx.htmlpusername:input typetext//pppassword:input typepassword//ppinput typesubmit value登录/p/form/fieldset
/body1.4功能标签
在页面中没有特别的效果,但有功能特点 form:表单,可以用于和用户之间进行交互 img:图片,可以显示图片 a:超链接,点击时可以进行指定页面的跳转
body!--
a:href属性可以指定跳转的位置
--a hrefVIP.htmlVIP功能/aa hrefhttps://www.baidu.com百度/aa hrefjavascript:alert(helloworld);js脚本/a!-- img标签 --!-- img:src属性是路径的位置,路径类似于java中file的路径表示 alt属性为百度等搜索引擎时使用 --img srcimg/1.jpg alt width200 height200img srcimg/2.jpg alt width200 height200img srcimg/3.jpg alt width200 height200!-- 图片连接 --a hrefindex.htmlimg srcimg/2.jpg alt该商品售价xxx元/a
/bodybody!-- 使用锚链接可以用于跳转到指定位置
使用#指向标签的id或者name属性
--hrdiv styleposition: fixed;bottom: 0px;left: 0px;spana href#div1位置1/a/spanspana href#div2位置2/a/spanspana href#div3位置3/a/spanspana href#div4位置4/a/span/divhrdiv iddiv1 styleheight: 1500px;background: #0cc;商品展示区1/divdiv iddiv2 styleheight: 1500px;background: orange;商品展示区2/divdiv iddiv3 styleheight: 1500px;background: gray;商品展示区3/divdiv iddiv4 styleheight: 1500px;background: pink;商品展示区4/div
/body1.5框架标签
1.5.1内嵌浮动框架
可以在当前页面引入其他页面
bodytable width100%trtd alignleftspan欢迎使用xxx管理平台/span/tdtd alignright尊敬font colorpink李昊阳/font用户欢迎您【a href退出/a】/td/trtrtd valigntopullia hrefemp.html targetmain员工管理/a/lilia hrefdept.html targetmain部门管理/a/lilia hrefmeeting.html targetmain会议管理/a/li/ul/tdtd!-- src页面连接 name属性为当前的iframe定义名字,可以使用a的target进行配置 --iframe srcemp.html frameborder1 namemain width800 height1000/iframe/td/tr/table
/body1.6其他标签
1.6.1文本修饰
body!-- h4 --b加粗,文字加粗/bi斜体/iu下划线/u!-- h5 --del删除线/delstrong加粗,语气加粗/strongem斜体/emsmall小号文字/smallhrh1震惊!xxx公司,5楼出现xxxxxsmall本台记着:zcx为您报道/small/h1!-- nbsp;空格 --smalldel$998/del/smallnbsp;9.8hrHsub2/subObrxsup3/sup
/body1.6.2输出和引用标签
bodycodeSystem.out.println(helloworld);/codekbdctra/kbd全选var变量/varvarint a 10;/var!-- 预格式化,在html中空格和回车符都是没有效果的 --public static void main(){System.out.println(helloworld);}!-- pre和textarea都有预格式化的效果 --prepublic static void main(){System.out.println(helloworld);}/pretextarea name id cols30 rows10public static void main(){System.out.println(helloworld);}/textareahrJDBC学习abbr titleJava DataBase ConnectivityJDBC/abbr网址为addressxx省xx市xx区xx街道904号/address
/body
