三.HTML中常见的一些标签方法合集

通过例子来查看标签的方法：

<!DOCTYPE html>
<html>
<head>
	<title>百度一下，你就知道</title>
	<meta charset="utf-8">
</head>
<body>
<a href="https://www.baidu.com" target="_self" id="1" name="zstz">自身跳转进入百度</a>
<!target='_self'是指在原本的网页打开 id和name这里是无具体功能含义的属性>
<a href="https://www.baidu.com" target="_blank" id="2" name="xcktz">新窗口跳转进入百度</a>
<!target='_blank'是指跳转到新的窗口打开页面>
<form><!表单标签的开始>
账号:<br/><!br为换行符>
	<input type="text" name="username"/><br/>
	<!使用input标签来定义输入框，type='text'表示输入账号>
密码:<br/>
	<input type="password" name="psw"/><br/><!type='password'表示输入密码为密文显示>
	<input type="submit" value="登录" class="login"/>
	<!type='submit'表示提交表单>
<select><!select+option组合选项标签>
	<option>-------请选择你的性别--------</option><!下拉列表中的选项使用option标签>
	<option>男</option>
	<option>女</option>
<input type="radio" name="sex" value="female" checked/>女 
<!单选使用类型radio，checked表示默认选项>
<input type="radio" name="sex" value="male" />男
<!单选时注意，name属性必须一样，不然会出现都能选的情况>
<input type="checkbox" name="sex" value="male"/> 男<!多选（复选框）使用类型chekbox>
<input type="checkbox" name="sex" value="female"/> 女
<button onclick="alert('hello')">点击</button><!弹框，里面会出现hello的字样>
</select>
</form>
</body>
</html>

页面结果：

1.在不同浏览器需要兼容中文输出时，比如输出title为百度一下，你就知道。我们在谷歌浏览器打开时是正常的，在IE或是火狐也许就会呈现以下乱码。

处理乱码的方法，在title标签下面加入 <meta charset='utf-8'> 编码格式，可让浏览器兼容显示中文

2. 超链接标签(成对存在)： <a href='超链接路径'>超链接载体</a>

总结：target='_self'表示自身页面打开 target='_blank'表示跳转新窗口打开 target是又具体功能含义的属性名

可点击对应链接查看效果

3. 表单标签<form></form> 一般form表单有登录，输出账号密码这些数据

总结：输入框单标签使用<input />

账号使用type='text' 密码使用type='password' 提交表单使用type='submit'

可输入账号密码点击登录查看效果

4.选项标签

<select></select>

<option></option>

总结：select+option组合成下拉列表选项标签。

5.单选使用<input type="radio">

总结：单选使用type="radio" 默认选项使用checked

6.多选（复选框） <input type="checkbox">

总结：多选使用type="checkbox"

7.按钮标签<button onclick="alert('hello')">内容</button>

点击按钮可查看弹框效果

三.HTML中常见的一些标签方法合集

猜你喜欢