HTML基础之HTML标签

前端的3大元素：

• html--->将页面展示出来
• css--->用于修饰html标签，让html更好看
• js--->能够让页面动起来

html代码实际上就是一套能够被浏览器所识别的规则代码，由一个个标签组成。所有需要展示的都写到body中，head中的内容是不被展示的，是规则也是规范

html 有两种标签定义

1、自闭和标签

<meta charset="UTF-8">

只有开头标签，没有结尾标签

2、主动闭合标签（成对出现）

<a></a>

标签介绍 

div标签：是块级标签也叫伪白板标签，无论内容有多大，都会占满一整屏。

span标签：是行内标签又叫内联标签也叫白板标签，自己有多大就占多大。

标签内部是允许写一些属性的，属性是写在<>之间的且在标签名之后，属性和标签之间用空格分隔。

input标签

<!--placeholder属性只是一个提示信息 -->
<input type="text" placeholder="请输入用户名">

<!--value属性是input框中的默认值 -->
<input type="text" value="请输入用户名">

<!-- 文本输入框 --> 
<input type="text" name="username">
 
<!-- 密码输入框(密文) --> 
<input type="password" name="passwd">

<!-- 按钮 点击什么用也没有 需要结合js绑定事件（onclick就是绑定的弹框时） -->
<form method="get"> 
<input type="button" value="button-登陆" onclick="alert(111)"> 
 
<!-- 提交 提交表单需要用submit --> 
<input type="submit" value="注册"> 
</form>

<!-- 多选框 checkbox, 默认值checked=checked--> 
<span>篮球</span><input type="checkbox" checked="checked">
<span>足球</span><input type="checkbox" >

<!-- 单选框 radio, name相同 勾选是互斥-,加checked表示默认选中 -->
<span>男</span><input type="radio" name="sex" checked="checked">
<span>女</span><input type="radio" name="sex" >

<!-- 上传文件 -->
<input type="file">

<!-- reset 还原表单中填写的数据，必须与form表单联用 -->
<form>
<input type="reset" value="重置">
</form>

label标签

<!-- label 标题标签 与input联合运用，增加input输入框的点击范围 可直接点击文字光标就映射到输入框内，通过for和id进行关联的-->
 
<label for="user">用户名</label>
<input type="text" id="user" >

select标签

<!-- 下拉框 ，默认选中selected="selected"，通过value值与后端交互-->
<!-- 1:羽毛球 2:篮球 3:足球 -->
<!--{instering:1} -->

<select name="instering">
    <option value="2">篮球</option>
    <option value="3">足球</option>
    <option selected="selected" value=="1">羽毛球</option>
</select>

a标签

<!-- target="_blank"表示新打开一个浏览器的tab -->

<a href="http://www.baidu.com">跳转到百度</a>
<a href="http://www.baidu.com" target="_blank">跳转到新打开的百度</a>

textarea标签

<!-- 多行文本框 -->
<textarea>多行文本</textarea>