HTML基础（四）

<a>标签

<a>标签，全称anchor，翻译为锚；它的作用是跳转链接。

<a href="www.shserve.cn" title="山海云端">welcome to shserve.cn</a>

里面的href的作用是要跳转的链接，title是鼠标悬浮时显示的名称。

但是a标签默认是在当前页面跳的，这样会把你刚才的游览的网页刷新掉，所以我们可以再加一个css代码target=”_blank”使它在新标签页跳转

<a href="www.shserve.cn" title="山海云端" target="_blank">welcome to shserve.cn</a>

使用<a>标签发邮件

<a href="mailto:123456@qq.com">邮箱联系</a>

<img>标签

<img>标签，全称image，翻译为图片。用通俗易懂的话就是放图片的标签

<img src="https://www.shserve.cn/wp-content/uploads/2022/05/logo.png" alt="这是一张图片">

• src 表示图片的引用地址，这个地址可以是相对 url，也可以是绝对 url；
• alt 表示图片加载失败时显示的内容；
• title 表示鼠标移动到图片上时显示的文字；
• width 表示图片的宽，默认单位是像素（px）；
• height 表示图片的高，默认单位也是像素（px）。

同上加进去即可

<img src="/Users/arch/Desktop/logo.png" alt="这是一张图片" title="山海云端logo" width="300px" height="300px">

<form>表单

这个标签是向端发送请求的标签

<form action="index.php" method="get"></form>

这段代码是向index.php以get的请求方法请求，我们需要把请求数据写在form表单了，登录、注册等就是用这种方法

<input>标签

他是可以让用户输入或填写的地方，基本用法

请输入用户名：<input type="text">
	请输入密码：&nbsp;<input type="password">

&nbsp;是空格，在html里这个代码会被渲染成空格

可以用br标签换行

那用户填好了怎么提交呢？再加一个input标签，type为submit即可

<form action="index.php" method="get">
	
	请输入用户名：<input type="text"><br>
	请输入密码：&nbsp;<input type="password"><br>
	<input type="submit" value="登录">
</form>

如果想在框里显示提示信息可以加placeholder=”” css代码，想要做单选框可以加个类型等于radio

<form action="index.php" method="get">
	
	<input type="text" placeholder="请输入用户名"><br>
	<input type="password" placeholder="请输入密码"><br>
	性别：<br>男<input type="radio">女<input type="radio"><br>
	<input type="submit" value="登录">
</form>

但是这样你两个都可以勾选，所以再加一个相同的name就行

男<input type="radio" name="man">女<input type="radio" name="man">

如果想要默认选择哪个框就加一个checked=”checked”

男<input type="radio" name="man">女<input type="radio" name="man" checked="checked">

这样它默认就勾选性别是女

如果你要做复选框，则使用<input type=”checkbox” name=”vip”> 使用type=”checkbox”

<form action="index.php" method="get">
	
	<input type="text" placeholder="请输入用户名"><br>
	<input type="password" placeholder="请输入密码"><br>
	性别：<br>男<input type="radio" name="man">女<input type="radio" name="man" checked="checked"><br>
	购买会员<input type="checkbox" name="vip">
	<input type="submit" value="登录">
</form>

小试牛刀

用这期所学的写一个登录界面