第二次网页前端培训笔记(HTML)

1表单标签

1.1form

        form标签用于为用户输入创建HTML表单。
        表单能够包含input元素,比如文本字段、复选框、单选框、提交按钮等等。还可以包含textarea等元素。表单用于向服务器传输数据。form元素是块级元素,其前后会产生折行。                    常用属性

属性描述
actionURL规定当提交表单时向何处发送表单数据
methodget,post规定用于发送form-data的HTTP方法规定表单的名称
nameFrom_name规定表单的名称
target_blank_self_parent_top framename规定在何处打开action URL

        method:表单提交方式:get,post 

        get:默认,主动的获取方式,数据放在urt上,数据的容量有限,安全性差,有缓存

        post:数据放在请求实体中,数据量理论上没有限制,相对安全,没有缓存

1.2input

        input标签用于搜集信息。根据type属性不同,输入有不同形式(单选框,复选框,文本字段,按钮等)

        常用属性

属性

描述
alttext定义图像输入的替代文本
checkedchecked规定此input元素首次加载时应当别选中
disableddisabled当input元素加载时禁用此元素
readonlyreadonly规定输入字段为只读
maxlengthnumber规定输入字段中的最大长度
valuevalue规定input元素中的值
type

botton<br>

checkbox<br>

file<br>

hidden<br>

image<br>

password<br>

radio<br>

reset<br>

submit<br>

text

规定input元素中的类型。按钮,复选框,文件,隐藏域,图像形按钮,密码,单选框,重置按钮,提交按钮,文本。

        若上传文件请求方式为post,且表单添加一个属性:enctype="multipart/form-date"

<body>
		<form action="#" method="get" id="myform" name="myform">
			编号:<input type="hidden" name="userId" value="1"/><br>
			姓名:<input type="text" value="userId" name="userName"/><br>
			密码:<input type="password" name="userPwd" maxlength="6"/><br>
			性别:男<input type="radio" name="userSex" value="man" checked="checked"/>
				女<input type="radio" name="userSex" value="woman"/><br>
			爱好:唱歌<input type="checkbox" name="userHobby" value="sing" checked="checked"/>
				跳舞<input type="checkbox" name="userHobby" value="dance"/>
				说唱<input type="checkbox" name="userHobby" value="rap" disabled="disabled"/><br>
			生日:<input type="date" name="userDate"/><br>
			头像:<input type="file" name="userHead"/><br>
			<input type="button" value="普通按钮"/>
			<input type="reset" value="重置按钮"/>
			<input type="submit" value="提交按钮"/>
			<input type="image" value="https://profile.csdnimg.cn/0/B/D/1_fuzhuyyds"/>
			
			
		</form>
</body>

1.3txetarea

         textarea标签用于定义一个文本域,可用rows(行),cols(列)定义文本域可视范围。列数其实是不限的,只是能显示的范围被限定了.

简介:<textarea name="remark" rows="5" cols="50"></textarea><br>

1.4lable

        label可提供元素聚焦的效果,鼠标点击,光标会移动到后面的input,label的for与光标定位的input的id应该相同。 

<label for="userName">姓名</label>:<input type="text" value="userId" id="userName" name="userName"/><br>

 1.5button

        HTML5提供了button标签,与input中button类似,但是应注意其默认为提交按钮,需设置type等于button才能是普通按钮(按一下没有反应)

        button为双标签,这意味着可以修改按钮中字体的属性如颜色等。type有普通button,提交submit,重置reset。

        

<button type="button"><p style="color: red;"><i>普通按钮</i></p></button>
			<button type="reset">重置按钮</button>
			<button type="submit">提交按钮</button>

1.6select

        select定义下拉表,常与option结合使用,使用select时必须有name,否则提交不上去。显示时默认第一个option

        option一般设置value,设置value为beijing,option间为北京时,如果点北京,实际传的是beijing,因为option中间是让用户看的,value是传到服务器上的。一般都会设置。

城市:<select name="city">
				<option>请选择城市</option>
				<option value="shanghai">上海</option>
				<option value="beijing">北京</option>
				<option value="tianjin">天津</option>
			</select><br>

        如果选择上海并点击提交按钮就如下图所示:

 

        如果设置了value,点提交,地址栏select的name值后等于value的值,如果没有,则默认option的值。

        如果想多选可以在select添加multiple属性,multiple=“multiple”。下拉框或下拉框中选项也可禁用。下拉框可显示选项数量可以用size定义。下拉框中选项也可默认选中selected。

2常用字符实体

        在HTML中,某些字也是预留的。
        在HTML中不能使用小于号(<) 和大于号(>) ,这是因为浏览器会误认为它们是标签。
        如果希望正确地显示预留字符,我们必须在HTML源代码中使用字符实体(character entie) .实体名称对大小写敏感!

        空格实体名称&nbsp

        小于号实体名称&lt

        大于号实体名称&gt

        版权符实体名称&copy

<h2>&lt;hello &nbsp;&nbsp;&nbsp;&nbsp;world!&gt;&copy;</h2>

 

3标签分类

        HTML标签元素分三类:块级元素,行内元素,行内块级元素。        

3.1块级元素

         从新的一行开始,其后的元素也另起一行(自带换行)。元素宽高,行高及顶与底边距可设置。元素宽度如果不设置默认与父容器宽度一致(100%)。

3.2行内元素

        和其他元素都在一行、元素宽高,行高及顶与底边距不能设置。元素宽度与包含它的文字或图片一致,不可改。

3.3行内块级元素

        和其他元素在一行。元素宽高,行高及顶与底边距可设置

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值