前端基础--html基础标签
HTML 超文本标记语言 Hyper text mark up language
1、超文本就是指页面可以包含图片，链接，甚至音乐，程序等非文字元素
2、超文本标记语言的结构包含“头”部分，“主体”部分，其中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容
3、html和htm
html=htm，只是前一个是全称的，后一个是简写的，没什么区别的
为什么会出现两种文件格式呢？
htm源于古老的8.3文件格式，DOS操作系统下只能支持长度为3的后缀名，所以是htm，但在windows下无所谓，html是长文件的格式命名的，所以htm是为了兼容过去的DOS命 名格式存在的，但效果上没有区别的，以前htm和html作为不同的服务器上的超文本文件，现已经通用了
8.3文件格式是什么？
这是一种在老的16位win95或win98文件系统的短文件名文件格式，扩展名只限于3位，文件名只限于8位，如果要与一个15位的系统交互，你就不能用长文件名，而必须对它进行转换
4、XML （xtentsible markup language）
可扩展标记语言，是用来定义其他语言的一种元语言，前身是SGML标准通用标记语言，没有标签集，没有语法规则，有句法规则
xml和html的区别：
（1）html不区分大小写，xml严格区分
（2）在xml中严格的树状结构，绝对不能省略掉结束标记
（3）xml中，拥有单个标记的而没有匹配的结束标记用/字符作为结尾，这样分析器就不用查找结束标记了
（4）xml中属性值必须写在引号中，在html中引号可不用
（5）在html中，可以拥有不带值的属性名，在xml中，所有属性都必须带有相应的值。
（6）在xml文档中，空白部分不会被解析自动删除，但是html会过滤掉空格。
常用标签：
1、<a> 标签定义超链接，用于从一个页面链接到另一个页面。
<a> 元素最重要的属性是 href 属性，它指定链接的目标。
在所有浏览器中，链接的默认外观如下：
未被访问的链接带有下划线而且是蓝色的
已被访问的链接带有下划线而且是紫色的
活动链接带有下划线而且是红色的
2、<div> 标签定义 HTML 文档中的一个分隔区块或者一个区域部分。
<div>标签常用于组合块级元素，div独占一行
3、h1,h2,h3,h4,h5,h6，标题标签，字体逐渐变小
4、<p> 标签定义段落。
5、<span> 用于对文档中的行内元素进行组合。
表格：
1、边框
a.如果不定义边框属性，表格将不显示边框
b.使用边框属性来显示一个带有边框的表格,如下：
<table border="1">
</table>
2、表头 使用th标签定义
大多数浏览器会把表头显示为粗体居中的文本
<table border="1">
<tr>
<th>heading</th>
<th>another heading</th>
</tr>
3、行 用tr标签表示
单元格 用td标签表示
4、表格的标题 用<caption>标签表示
代码如下：
<table border="1">
<caption>信息表</caption>
<tr>
<td>姓名</td>
<td>电话</td>
</tr>
<tr>
<td>李雷</td>
<td>13322224567</td>
</tr>
5、跨行、跨列
跨行用rowspan标签表示
跨列用colspan标签表示
横跨两列的单元格：
<table border="1">
<tr>
<th>姓名</th>
<th colspan="2">电话</th>
</tr>
<tr>
<td>李雷</td>
<td>123456123</td>
<td>男</td>
</tr>
浏览器效果：
横跨两行的单元格：
<table border="1">
<tr>
<th rowspan="2">姓名</th>
<td>电话</td>
</tr>
<tr>
<td>李雷</td>
</tr>
浏览器效果：
6、单元格边距 cellpading 标签来创建单元格内容与其他边距之间的空白
<h3>带有cellpadding</h3>
<table border="1" >
<tr>
<td>10</td>
<td>20</td>
</tr>
<tr>
<td>30</td>
<td>40</td>
</tr>
</table>
浏览器效果：
设置cellpadding属性值为10时的效果：
7、单元格间距，cellspacing
<h3>带有cellspacing</h3>
<table border="1" cellspacing="20">
<tr>
<td>10</td>
<td>20</td>
</tr>
<tr>
<td>30</td>
<td>40</td>
</tr>
</table>
浏览器效果：
可以清晰的看见单元格之间的距离变大了
表单
1、输入框：
多数情况下被用到的表单标签是输入标签<input>。
输入类型是由类型属性（type）定义的。
2、文本域 text
<form>
用户名：<input type="text" name="user">
</form>
placeholder 可描述字段预期值的简短的提示信息，该提示会在用户输入值之前显示在输入字段中，例：
<form>
用户名：<input type="text" name="user" placeholder="请输入用户名">
</form>
浏览器效果：
当鼠标点击到输入框中时，请输入用户名的文本就不再显示。
3、密码字段：
密码字段可以通过标签<input type="password">来定义
<form>
用户名：<input type="text" ><br>
密码: <input type="password" >
</form>
4.下拉列表 如下：
浏览器效果：
selected 属性是一个布尔属性。
selected 属性规定在页面加载时预先选定该选项，当前是蓝色为预先选定的选项。
5.复选框 checkbox
浏览器显示：
6.单选框 radio
浏览器效果：
7、按钮组：
| button | 普通按钮 |
| submit | 提交 |
| reset | 重置 |
| image | 图像形式的按钮 |
<input type="submit" value="提交">
<input type="reset" value="重置">
<input type="button" value="按钮">