html标签小结

今天我们来简单的学习一下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>
				<!--实盘这是一个内联标签-->