湘潭市 网站建设,如何做双语网站,中国建筑装饰网唐迪夫,怎么做网站淘宝转换工具页面技术基础-html
环境准备#xff1a;在JDBC中项目上完成代码定义
1. 新建一个 Module:filr-右键 -》Module -》Java-》next-名字(html_day1)-finish
2. 在 Moudle上右键-》第二个选项#xff1a;add framework .. - 选择JavaEE下第一个选项 Web Apllicat…页面技术基础-html
环境准备在JDBC中项目上完成代码定义
1. 新建一个 Module:filr-右键 -》Module -》Java-》next-名字(html_day1)-finish
2. 在 Moudle上右键-》第二个选项add framework .. - 选择JavaEE下第一个选项 Web Apllication
3. 在 web文件夹上右键 -》新建 file后缀以.html一、前言 替换JDBC中三层中的 View(视图) (1) 作用收集用户信息、并给用户展示信息
(2) 技术HTML、CSS、Bootstrap、JavaScript、jQuery、EasyUI(前端做界面的相关技术)html (1) htmlHypertext Markup Language超文本标记语言
(2) html用于制作静态网页数据不发生改变制作动态的技术Servlet、jsp等数据会因时间不同发生改变
(3) html为解释型的语言网页运行在浏览器上浏览器自带解释器无需安装新的软件浏览器建议使用谷歌、火狐等兼容器较好的浏览器二、基本语法 html的源码文件以 .html / .htm 结尾 基础结构 htmlhead网页的头信息对网页进行设置/headbody 属性值 属性值网页内容/body
/html
注意html的语法不严谨大小写不区分head部分 (1) head中定义的内容在网页中不显示用于定义网页的附属信息如标题、字符编码等
(2) head中常见的标签a. title网页标签标题/titleb. 设置网页中的字符编码meta charsetUTF-8 【h5写法重点-设置编码格式】 body部分主体部分 (1) body中常见的属性body bgcolor网页的背景颜色 text字体颜色/body颜色的方式两种a. 颜色对应的英语单词red、green、blue、pink、yellow等body textredb. 使用 RGB(三基色 红绿蓝)取色方式#RRGGBB7EE4C3 (采用十六进制)注意借助取色软件获取颜色对应数据(例如 Faststone Captrue)
(2) 文本相关a. 标题h1一级标题/h1h2二级标题/h2h3三级标题/h3...h6三级标题/h6注意标题为1~6级1最大6最小标题属性aligncenter|right|left(默认) 标题水平位置居中、靠右、靠左b. 段落p段落的内容...../p注意段落与段落之间有明显的间隔c. 换行br/空格 nbsp; 注意分号不能省版权号copy;d. 水平分割线hr width宽度属性width两种设置方式I. 像素300px/ 500px固定宽度II. 比例30% / 50% 相对浏览器宽度发生改变size:宽度 size 7color颜色align:水平对齐方式aligncenter(默认)|left|righte. 字体设置font color颜色 size字体大小 face字体类型/fontsize1~7 1最小7最大face楷体 字体类型
(3) 图片相关【重点】img src图片的路径及图片名 width宽度 height高度 align水平位置src指定图片路径【开发重点】align 设置图片相对文字位置left|right|top(顶部)|middle(中间)|bottom(底部)title:当鼠标移动到当前图片上时对图片的描述文字
(4) 超链接【开发重点】a href目标资源路径 target目标资源打开的位置热点文字/a例如a hreffirst.html热点文字/aa hrefhttp://baidu.com热点文字/atarget_blank 在新的网页中打开目标资源target_self 在当前网页中打开目标资源 【默认】
(5) 表格【重点】table border1 cellspacing0tr --代表行td一行一列/td -- 代表列td一行二列/tdtd一行三列/td/trtrtd二行一列/tdtd二行二列/tdtd二行三列/td/tr/tablea. table中常见属性border边框默认为0cellspacing边框间隙设置为0取消中间间隙bgcolorgreen 表格背景色backgroundimage/001.jpg 背景图片width700px 宽度height400px 高度alignleft(默认)|center(居中)|right 表格水平位置b. tr中常见的属性align设置当前行中文字相对表格位置center表格中间;left表格左边,right(右边)三、表单相关(属于 body内容) 表单作用 (1) 实现人机交互
(2) 收集用户数据并将收集到数据发送给服务端表单基本结构 语法1
formfieldsetlegend表单样式标题/legend!--这里写表单元素--/fiedlset
/form语法2
form!--这里写表单元素--
/form详解1. form标签必须要有用来包含表单元素的。2. fieldset标签用来显示表单包含效果非必须。3. legend标签用来给fieldset标签的包含框指定标题。表单相关元素 (1) 单行文本框input typetext nameusername value输入用户名...常见的属性name为当前文本框命名通过 name获取对应 value数据value用户输入的信息也可以设置默认值placeholder提示文字输入文字后消失readonly只读存在即为truedisabled 不可用存在即为truehidden隐藏存在即为true
(2) 密码框input typepassword namepassword value..... maxlength最大字符个数密码input typepassword name maxlength10/属性maxlength最大字符个数(3) 单选按钮input typeradio name名字 value值注意一组单选按钮的名字必须一致才能互斥属性 checked 为默认选项存在即为true男input typeradio namesex value男 checked女input typeradio namesex value女br/br/
(4) 复选框input typecheckbox name名字 value值注意建议一组复选框中name一致便于后期开发获取对应value默认选中checked(5) 下拉框select nameeduoption选项内容/optionoption value1学前班/optionoption value2小学/optionoption selected初中/optionoption高中/optionoption中专/optionoption大专/optionoption本科/optionoption研究僧/option/select属性selected 默认选项name当前元素的数据的名字。以后发送数据以及服务器获取的标记option标签表示一个选项标签体显示在选项中的文字不代表真实数据仅仅是显示信息value当前选项的默认值真正收集并发送给服务器的数据selected默认选中当前选项
(6) 文本域textarea name cols rows placeholder styleresize: none; 提示文字 /textarea属性详情readonly只读cols :单行中文字符数可用来设置宽度rows :显示多少行可用来设置高度styleresize: none; :禁止拖拽
(7) 日期input typedate name名字
(8) 邮箱input typeemail name名字注意自动检测邮箱输入的格式必须包含
(9) 数字格式input typenumber value默认值 name max最大值 min最小值 step步长/草莓数量input typenumber value1 name max12 min3 step2/
(9) 提交按钮【现在不使用了】input typesubmit name名字 value值input typesubmit namebn1 value提交注意value中内容对用户显示(10) 重置按钮input typereset namebn2 value重置将表单中内容清空(11) 普通按钮input typebutton namebn3 value按钮注意目前普通按钮没有任何效果为后期内容准备例如也可以利用超链接进行按钮操作a hreffirst.htmlinput typebutton namebn3 value按钮/aform表单 【前后端分离-不使用了】 form action目标资源 method提交方式:get|post中间将input包含此处(用户输入信息)
/formaction代表将当前表单中的数据提交到哪(提交目标)
method代表此表单提交数据的方式有 get(默认)和post两种methodget方式直接将提交的数据追加到地址中a. form提交地址url?name1值name2值name3值注意此处name代表 input中的name通过 name获取对应value值内容不加引号url?usernamezspassword123456b. 特点数据不安全、不能传输大量的数据、处理中文时容易乱码(相对不容易解决)methodpost方式表单以数据包的形式打包发送、不会显示在地址栏中a. 特点数据安全、允许传输大量数据、处理中文相对容易四、iframe的应用
应用场景可以在当前网页中嵌套显示另一个网页。通常用来做局部跳转iframe语法 iframe src/pages/Main.html namemainPage frameborder0 scrollingno/iframe属性说明 src被引用页面的路径。name iframe的名字通常可以作为a超链接跳转的target指定在本iframe中跳转。通过frame的名字指定展示跳转的网页(局部跳转)frameborder iframe的边框宽度scrolling 是否显示滚动条no就是不显示。width设置宽度 height设置高度iframe的应用 (1) 超链接a href/web/person.html targetiframe的name
(2) iframe框架iframe nameiframe的name/iframe
注意保证a超链接的target的内容 和 iframe的name一致即可完成超链接指定iframe处切换新页面。案例
