今天我们来简单的学习一下html的标签
一、先说明下html的头部可以定义哪些内容和作用
头部【head】 设置内容 1、<meta charset="UTF-8">，设置html的编码格式为utf-8 2、<title>Title</title>，设置html文档的标题，在浏览器上显示的名字 3、<meta http-equiv="X-UA-Compatible" content="IE=edge">，主要为了兼容ie浏览器，因为ie浏览器 没有完全遵守w3，所有ie对html的渲染支持的不够友好。 4、<meta name="viewport" content="width=device-width,inital-scale=1.0">，这个主要是为了兼容其 他的页面，比如手机，这里的意思html文件的大小和设备大小一致，且不进行缩放 5、 资源引入 1、<link rel="stylesheet" href="css1.css">，引入一个css文件 2、<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">，引入一个小图标，在浏览器的窗口上
二、下面我们正式进入标签的学习，也就是body中定义的内容
1、h标签
1、h标签，标题的标签，h标签从1到6，分别为一级标题。。。。。。六级标题，一级标题字体最大 示例： <h1>1级标题</h1> <h2>2级标题</h2> <h3>3级标题</h3> <h4>4级标题</h4> <h5>5级标题</h5> <h6>6级标题</h6>
2、p标签
2、p标签，段落的标签，其中br标签的效果就是换行的意思 示例： <p>这是一个段落的标签</p> <p>这是一个有换行<br>的段落的标签</p>
3、a标签
3、a标签，超链接的标签 <p> <a href="http://www.baidu.com">百度一下</a> </p> 上面这个例子是在当前页面打开超链接指向的地址 <p> <a href="http:www.baidu.com" target="_blank">百度一下</a> </p> 上面这个例子打开超链接会重新打开一个窗口
4、img标签
4、img标签，他是自闭和的标签，渲染一个图片 <img src="1.ico"> <p> <img src="1.JPG"> </p> <p> <img src="1.JPG" alt="帅哥"> </p> alt这个属性的意思就是如果有些浏览器不允许加载图片，如果出现这种情况，则图片的位置处会显示帅哥这个单词 <p> <img src="1.JPG" alt="帅哥" width="100px" height="200px"> </p> 这样的效果就是显示图片的宽度是100像素，高度是200像素，图片尽量不要放大，因为会失真 <p> <a href="http://www.baidu.com"> <img src="1.ico"> </a> </p> 这样的效果就是用图片做超链接的按钮，点击这个图片会跳转href指向的地址
5、ul标签
5、ul标签，产生一个列表的效果，且没有序号 <ul> <li>香蕉</li> <li>苹果</li> <li>面包</li> <li>牛奶</li> <li>羊奶</li> </ul>
6、ol标签
6、ol标签，产生一个列表的效果，且有序号 <ol> <li>香蕉</li> <li>苹果</li> <li>面包</li> <li>牛奶</li> <li>羊奶</li>
7、table标签
7、table标签，产出一个类似excel的表格 <table> <thead> <tr> <th>表头第一列</th> <th>表头第二列</th> <th>表头第三列</th> </tr> </thead> <tbody> <tr> <td>第一列:H1</td> <td>第二列:H1</td> <td>第三列:H1</td> </tr> <tr> <td>第一列:H2</td> <td>第二列:H2</td> <td>第三列:H2</td> </tr> </tbody> </table> thead的表头，tbody是表的数据，其中table的属性border="1"是给表格加一个框 <table> <thead> <caption>简单的表格</caption> <tr> <th>表头第一列</th> <th>表头第二列</th> <th>表头第三列</th> </tr> </thead> <tbody> <tr> <td>第一列:H1</td> <td>第二列:H1</td> <td>第三列:H1</td> </tr> <tr> <td>第一列:H2</td> <td>第二列:H2</td> <td>第三列:H2</td> </tr> </tbody> </table> <caption>简单的表格</caption>这个的意思就是给这个表格取一个名字，表格的名字就叫做“简单的表格”，这个非必须要写的 colspan="3" 这个是合并单元格，横向合并，一个格占三个格 rowspan=“2” 这个是合并单元格，纵向合并，一个格占2个格 table不建议做布局，table我们经常用创建表格，这个是最好的
8、from标签
8、Form标签，下面这些标签通常在Form标签中使用
a、label标签
<label for="ttt">用户名</label>
<input id="ttt" type="text">
<hr/>
<label for="fff">请选择</label>
<input id="fff" type="checkbox">
<hr/>
<label for="ddd">请选择</label>
<input id="ddd" type="radio">
这个的效果是label这个标签会应用到for指向的id的标签上，比如上面的第一个例子，label的for指向ttt，那么如果我们点击用户名，则鼠标会放到
input的type的输入框中，下面的2个例子也一样，点击请选择，会选中后面的复选框
b、input标签
<label for="ttt">用户名</label>
<input id="ttt" type="text" name="user_name" value="用户名">
这里的实际传递到后台是一个dict，k的值为user_name,value的值为输入的值
<hr/>
<label for="12">密码</label>
<input id="12" type="password" name="user_pwd" value="密码">
这里的实际传递到后台的是一个dict，k的值为password，value的值是在输入框的提示的值
<hr/>
男：<input type="radio" name="sex">
女：<input type="radio" name="sex">
radio实现的效果是单选的效果，如果name相同的标签中，只能选择一个
<hr/>
足球：<input type="checkbox" name="hob">
篮球：<input type="checkbox" name="hob">
checkbox实现的效果是多选框
<hr/>
<input type="text" name="用户名"><input type="button" value="提交">
<hr/>
<input type="password"><input type="submit" value="提交">
c、select标签
<select>
<option>北伐军1</option>
<option>北伐军2</option>
<option>北伐军3</option>
<option>北伐军4</option>
</select>
实现的效果就是实现一个下拉框，且默认只显示一个，且只可以选择一个，且无默认选中值
<select size="2">
<option>北伐军1</option>
<option>北伐军2</option>
<option>北伐军3</option>
<option>北伐军4</option>
</select>
实现的下过就是实现一个下拉框，且默认显示两个，且只可以选择一个，且无默认选中值
<select size="2" multiple="multiple">
<option>北伐军1</option>
<option>北伐军2</option>
<option>北伐军3</option>
<option selected="selected">北伐军4</option>
</select>
实现的效果实现一个下拉框，每次显示2个，且可以多选，且默认选中值为北伐军4
<select>
<optgroup label="第一集团军">
<option>北伐军1</option>
<option>北伐军2</option>
</optgroup>
<optgroup label="第二集团军">
<option>北伐军3</option>
<option>北伐军4</option>
</optgroup>
</select>
实现的效果就是实现一个下拉框，按照选项进行了分类
d、按钮
<form action="http://www.baidu.com" method="post">
<input type="text">
<br>
<button type="button">button提交</button>
<button type="submit">submit提交</button>
<button type="reset">reset重置</button>
</form>
实现的效果就是提交数据到action指定的地址，用post的方式进行提交，button的不会提交给后台，只有submit才会提交给后台，reset是清空
text输入框的内容
9、div和span标签
div span <div>这是一个div元素的内容</div> <!--div是一个块级标签--> <span>这是一个span元素的内容</span> <!--实盘这是一个内联标签-->