JavaWeb前端开发知识总结(HTML)
来源:互联网 发布:叶罗丽娃娃淘宝 编辑:程序博客网 时间:2024/05/22 10:50
JavaWeb前端开发知识总结(HTML)
- JavaWeb前端开发知识总结HTML
- HTML技术
- 1 HTML概述
- 2 HTML标签
- 21 排版标签
- 22 超链接标签
- 23 图片标签
- 24 表格标签
- 3 表单
- 31 input标签
- 32 select标签
- 33 textarea标签
- 34 form标签
- HTML综合案例
- HTML技术
1. HTML技术
1.1 HTML概述
HTML是用来描述网页的一种语言;
HTML指的是超文本标记语言 (Hyper Text Markup Language) ;
HTML不是一种编程语言,而是一种标记语言 (markup language) ,标记语言是一套标记标签 (markup tag)
HTML使用标记标签来描述网页.
1.2 HTML标签
- HTML标记标签通常被称为HTML标签 (HTML tag).
- HTML 标签是由尖括号包围的关键词,比如 ;
- HTML 标签通常是成对出现的,比如和;
- 标签对中的第一个标签是开始标签,第二个标签是结束标签;
- 开始和结束标签也被称为开放标签和闭合标签.
- HTML规范:
- 格式: <标签 属性1=“属性值1” 属性2=“属性值2”…>内容题
1.2.1 排版标签
段落标签(P标签):
特点:段前和断后自动换行格式:<p align="center">段落内容</p>align属性:对齐方式,取值可以是:center/right/left
换行标签(br标签):
<br/>换行:源码的换行被浏览器忽略成一个空格而不能实现换行,使用br标签代表换行.
特殊字符:
空格: > : >< : <
1.2.2 超链接标签
作用:跳转指定资源,资源可以是:图片/文件/网页.格式:<a href="指定资源路径" target="跳转方式">名称</a>属性: href:指定跳转的资源路径; target属性: _blank:新开一个网页标签页; _self:在本身网页打开,覆盖之前的网页;注意:href属性和标签的内容体同时存在才能有超链接效果;扩展:href=""和href="#"区别: href="":会刷新页面; href="#":只是在地址栏添加了一个#,不会刷新页面;<a>标签绑定事件一定要将href="#",绑定事件,可以通过事件的返回值控制链接是否跳转.
1.2.3 图片标签
作用:在网页中展示图片;格式:<img src="本地路径图片或者互联网图片"/>相对路径: 1.同一级目录 -- <img src="1.png" />或者<img src="./1.png" /> 2.下级目录 -- <img src="img/1.png" />或者<img src="./img/1.png" /> 3.在上一级目录 -- <img src="../1.png" /> 4.在上一级目录的photo文件夹内: -- <img src="../photo/1.png" />
1.2.4 表格标签
表格创建步骤: 1.<table></table> 2.<table><tr></tr></table> 3.<table><tr><td>内容</td></tr></table><table>标签: 作用:定义一个表格 属性: 边框—border:数字; align:对齐方式,可取值为center/right/left;<tr>标签: 作用:定义表格中的行;单元格<td>和<th>: <th>:用于表格的表头(字体会居中加粗),表格的每列的说明; <td>:一般单元格,用于展示具体数据; 跨行属性:rowspan="数字" -- 数字代表跨几行; 跨列属性:colspan="数字" -- 数字代表跨几列; 跨行跨列步骤: 1.确定合并方式,是跨行还是跨列; 2.确定合并几行或者几列; 3.删除被设置合并属性外的其他需要被合并的单元格;
1.3 表单
1.3.1 input标签
type属性: - text:type的默认值; - password:密码框; - radio:单选框,checked属性设置默认选中checked="checked",通过name属性进行分组(name相同就是同一组), 没有被选中不会提交,后台获取不到name属性,不能设置readonly属性; - checkbox:复选框,checked设置默认选中checked="checked",通过name属性进行分组(name相同就是同一组), 不能设置readonly属性; - button:普通按钮,点击事件默认会提交表单; - submit:提交表单按钮; - reset:重置表单按钮(相当于重新加载网页); - file:文本选择框; - hidden:隐藏输入框,一般设置不需要显示的数据;name属性: 表单元素名称,代表提交之后的参数名,对于radio/checkbox,name可以使用来分组;value属性:设置<input>标签的默认值 1.对于radio/checkbox类型一定要设置value属性,value代表的是该标签的提交的值; 2.对于按钮类型,设置按钮显示的名称;readOnly只读属性: readOnly="readOnly",对于radio/disabled/按钮类型没有效果;disabled禁用属性:disabled="disabled";
1.3.2 select标签
作用:下拉选择框,配合<option>标签使用常用属性: name属性:表单名称以及提交后的参数名; multiple:设置下拉选项可以多选--multiple="multiple" readOnly:不能设置只读; disabled禁用:不能设置禁用;子标签:<option>标签<option>与<option/>之间的值是浏览器显示在下拉列表中的内容,而value属性中的值是表单被提交时被发送到服务器的值,如果没有指定value属性,选项的值将设置为<option>标签中的内容. 属性: value:对于选项的值; selected:设置默认选中--selected="selected"
1.3.3 textarea标签
<textarea>标签:文本域,可以输入大量文字,可以自动换行属性: name:标签名称以及提交后的参数名; cols:文本框所占列数; rows:文本框所占行数; readOnly:只读属性 -- readOnly="readOnly"; disabled:禁用 -- disabled="disabled";
1.3.4 form标签
作用:提交表单属性: action:提交的地址; method:提交的方式, get/post; get/post提交表单的区别: 1.get地址栏有参数显示,post不会再地址栏显示参数(参数是放在了请求体中); 2.get提交数据不安全(在地址栏显示数据),post相对安全; 3.get提交的数据有限制大小(地址栏的数据长度有限制),post理论上对提交的数据大小不限制.
2.HTML综合案例
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>用户注册</title> </head> <body> <form action="#" method="post"> <table border="4" width="500" height="20" align="center"> <tr> <td align="right" width="100">用户名:</td> <td> <input type="text" name="name" id="name" placeholder="请输入用户名" /> </td> </tr> <tr> <td align="right">密码:</td> <td> <input type="password" name="rpassword" id="rpassword" placeholder="请输入密码" /> </td> </tr> <tr> <td align="right">确认密码:</td> <td> <input type="password" name="rpassword" id="rpassword" placeholder="请确认密码" /> </td> </tr> <tr> <td align="right">性别:</td> <td> <input type="radio" name="sex" value="男" checked="checked" />男 <input type="radio" name="sex" value="女" />女 </td> </tr> <tr> <td align="right">籍贯:</td> <td> <select name="pronvice"> <option value="请选择">--请选择--</option> <option value="北京">北京</option> <option value="深圳">深圳</option> <option value="上海">上海</option> <option value="广州">广州</option> <option value="成都" selected="selected">成都</option> </select> </td> </tr> <tr> <td>头像:</td> <td> <input type="file" name="file" id="file" value="" /> </td> </tr> <tr> <td align="center" colspan="2"> <input type="submit" name="submit" value="注册" /> <input type="reset" name="reset" value="重置" /> </td> </tr> </table> </form> </body></html>
0 0
- JavaWeb前端开发知识总结(HTML)
- JavaWeb前端知识-HTML
- JavaWeb前端开发知识总结(CSS)
- JavaWeb前端开发知识总结(javaScript)
- JavaWeb前端开发知识总结(jQuery)
- JavaWeb前端开发知识总结(mysql)
- JavaWeb前端开发知识总结(CSS)
- JavaWeb开发知识总结(tomcat)
- JavaWeb开发知识总结(tomcat)
- JavaWeb开发知识总结(Listener)
- JavaWeb开发知识总结(filter)
- JavaWeb开发知识总结(网上商城项目总结)
- JavaWeb前端知识-JQuery
- JavaWeb数据库开发知识总结(jdbc基础)
- JavaWeb数据库开发知识总结(jdbc进阶)
- JavaWeb数据库开发知识总结(xml)
- JavaWeb开发知识总结(HTTP,servlet)
- JavaWeb开发知识总结(HttpServletRequest,HttpServletResponse)
- Android 6权限
- 堆和栈的区别(内存和数据结构)(转)
- Nexus3.x.x上传第三方jar
- Android ScrollView中的ListView不能滑动
- 测试某个tty设备是否可用
- JavaWeb前端开发知识总结(HTML)
- APUE exercises 10.6 pp 381
- 判断网络
- python项目练习六:使用CGI进行远程编辑
- 常用排序算法的Java实现
- HDU2104 hide handkerchief
- 赛码网-基本算法-4.路灯
- runtime.getruntime().addshutdownhook
- thinkphp用msubstr和substr截取字符串