HTML超链接与表单详解-优快云博客

对应HTML超链接:

!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>HTML链接练习</title>
	</head>
	<body>
		<a href="BOM.html" name="锚点名称" target="-blank">跳转</a></br>
		<img src="js/QQ图片20180305214256.jpg" width="200px" height="200px" />
	
	</body>
</html>

注:特定属性: href 资源地址:url

特定属性:targe:打开目标资源的一个方式[1.-blank:新建一个窗口打开 2.-self:当前窗口直接打开]

属性:name:特定锚的名称.

HTML图像:属性:src:当前图片的位置(url)

HTML表单:

示例:

!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>HTML链接练习</title>
	</head>
	<body>
		<form action=" " method="get">
			用户名:<input type="text" name="username" id="username"/></br>
			密码:<input type="text" name="passworld" id="passworld"/></br>
			省份:<input type="radio" name="sex" value="女" />女
			<input type="radio" name="sex" value="男" />男
			</br >
			<input type="submit" value="注册提交" /></br>
			<input type="button" name="按钮" value="按钮" onclick="alert('点击按钮')"/></br>
			爱好:<input type="checkbox" name="hobit" value="足球" />足球
			<input type="checkbox" name="hobit" value="篮球" />篮球
			<input type="checkbox" name="hobit" value="乒乓球" />乒乓球
		</br>
		<select name="hobit" value="爱好">爱好
			<option value="----">请选择</option>
			<option value="足球">足球</option>
			<option value="篮球">篮球</option>
			<option value="乒乓球">乒乓球</option>
		</select>
		</form>
			
	</body>
</html>

对应结果为:

由上图可知:

<form>元素: 属性:action 提交的url地址 method:提交方式(get/post)

value:输入字段的初始值. id:对应的唯一的标识 </br>换行标签

<inpu>元素:

1.文本输入:<inpu type = "text"/>用于输入单行字段

2.单选按钮输入:<input type = "radio"/>定义单选按钮

3.提交按钮:<input type = "submit"/>提交表单按钮

4.普通按钮:<input type = "button"/>

5.复选框:<input type = "checkbox"/>可以进行多选

6.下拉菜单:

<select>
    <option  value = "---">名字</opton>

</select>

注:其他

上传照片:<input type = "file" name = "photo"/>

number输入:<input type = "number">用于应该包含数字值的输入字段

color输入:<input type = "color">:用于包含颜色的输入字段

email输入:<input type = "email">:用于包含电子邮件地址的输入字段

HTML标签介绍(下)