Java面试题-day10 HTML

HTML

关于前端,目前市面上基本的项目都讲究前后端分离,一些基本的前端知识还是需要掌握的。

1) 超链接标签

跳转:
< a href = “资源路径” target="_blank">
href : 用于指定链接的资源
target: 设置打开新资源的目标。
_blank 在独立的窗口上打开新资源
_self 在当前窗口打开新资源

2) 框架标签

frameSet 一个frameSet可以把一个页面切割成多份。只能按照行或者列切割。
frame 不能被切割的。 frame是位于frameSet中。
注意: frameSet标签不能用于body标签体内容。

<frameset  rows="20%,70%,*" >
	<frame  src="top.html" />
<frameset cols="20%,*">
	<frame src="left.html" />
<frame name="center" src="center.html"/>
</frameset>
	<frame src="foot.html"/>
</frameset>
	<noframes>
</noframes>

3) 表单

表单标签的作用是用于提交数据给服务器。
表单标签的根标签是标签
常用的属性:
action: 该属性是用于指定提交数据的地址。
method:指定表单的提交方式。

	<form action="dopost.html" method="get">
	<!-- 文本输入框单行-->
	用户名:<input name="userName" type="text"/><br/>
<!-- 密码框 -->
		密码:<input name="password" type="password"/><br/>
<!-- 单选框  -->
			性别:男<input checked="true" value="man"  name="sex" type="radio"/><input name="sex" value="woman" type="radio"/><br/>
<!-- 下拉框 -->
来自的城市:<select name="city">	
<option value="BJ">北京</option>
<option value="SH">上海</option>
<option value="GZ">广州</option>
<option value="SZ">深圳</option>
</select><br/>
<!-- 复选框同一组的复选框name的属性值要一致 -->
兴趣爱好:
	java <input value="java" name="hobit"  checked="checked" type="checkbox" />
	javascript <input type="checkbox" value="javascript" name="hobit" />
	android <input value="android" name="hobit" type="checkbox" /><br/>
<!-- 文件上传框-->
	大头照:<input name="image" type="file" /><br/>
	个人简介:
<!-- 文本域 -->
<textarea  name="intro" rows="10" cols="30"></textarea><br/>
<!-- 提交按钮 -->
<input type="submit" value="注册"/>
	<!--  重置按钮 -->
	<input type="reset" value="重置"/></form>

4) Get与post提交的区别

在这里插入图片描述

get : 默认使用的提交方式。提交的数据会显示在地址栏上。
post :提交的数据不会显示在地址栏上。
注意:表单项的数据如果需要提交到服务器上面,那么表单项必须要有name 属性值。id属性值在做javascript验证时使用的,最好让id和name值相同。

5) 盒子模型

在网页布局中,为了能够使复杂的各个部分合理地进行组织,通过研究,总结 出了一套完整的、有效的原则和规范,这就是“盒子模型”的由来。
在CSS中,一个独立的盒子模型由内容(content)、边框(border)、填充(padding) 和边界(margin)4个部分组成:

    内容(content):对应盒内物品
	边框(border):对应包装盒的纸壳,具有厚度
	填充(padding):位于边框内部,是内容与边框的距离,对应包装盒的填充部分
	边界(margin):位于边框外部,是边框外面周围的间隙,对应纸壳外围间隙

在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/m0_56368068/article/details/120936522