HTML基本标签01

hello 你好

	<h1>标题标签h1</h1>
	<h2>标题标签h1</h2>
	<h3>标题标签h1</h3>
	<h4>标题标签h1</h4>
	<h5>标题标签h1</h5>
	<h6>标题标签h1</h6>
	

	<!-- 段落标签 -->
	<p>7月12日，江苏省气象服务中心@江苏气象 联合@中国天气 推出了一份“全国蚊子出没预报”。
	预报从红色、橙色、黄色到绿色，依次揭示出12日夜里到13日清晨，需要“驱蚊大战”“蚊香点起”
	“避开花草”和“无所畏惧”的区域。</p>
    <p>7月12日，江苏省气象服务中心@江苏气象 联合@中国天气 推出了一份“全国蚊子出没预报”。
	预报从红色、橙色、黄色到绿色，依次揭示出12日夜里到13日清晨，需要“驱蚊大战”“蚊香点起”
	“避开花草”和“无所畏惧”的区域。</p>		
	
	<!--空格  
	html中  多个空格会被解析成一个空格
	html中  换行也会被解析成一个空格  &nbsp;		
	-->
	hello      my
	baby<br>
	hello&nbsp;&nbsp;&nbsp;my<br>baby
	<!-- 分割线 -->
	<hr>
	
	<b>加粗</b>
	<strong>加粗</strong>
	
	<i>斜体</i>
	<em>斜体</em>
	<hr>
	
	<!-- 输入框 -->
	<input>
	<input type="text">
	<input type="button" value="按钮">
	<button>按钮</button>
	
	<!-- 图片 -->
	<img src="颜色名称.jpg"  width="200" heigh="100"

alt=“图片出错信息” title=“很好看的颜色” >

	<hr>
	<!-- 超链接 -->
	<a href="#">空链接</a>
	<a href="http://www.baidu.com">百度一下</a>
	<a href="01-初始HTML.html">初识HTML</a>
	<a href="http://www.baidu.com" target="_blank" >百度一下_blank</a>
	
	<!-- target="_blank"  在新窗口 -->

	 <ul>
		 <li>111</li>
		 <li>222</li>
		 <li>333</li> 
	 </ul>
	 
	 <!-- type  start -->
	 <ol type="1" start="2">
		 <li>学习</li>
		 <li>学习</li>
		 <li>写代码</li>
	 </ol>
	
	<dl>
		<dt>权利的游戏</dt>
		<dd>第1季</dd>
		<dd>第2季</dd>
		<dd>第3季</dd>			
		<dt>葫芦娃舅爷爷</dt>
		<dd>第1季</dd>
		<dd>第2季</dd>
		<dd>第3季</dd>
	</dl>

	<table border="1" width="300" height="100" bgcolor="yellow" bordercolor="green" cellspacing="0" cellpadding="10" align="center">
		<tr align="right">
			<td align="center">单元格</td>
			<td>单元格</td>
			<td>单元格</td>
		</tr>
		<tr align="center">
			<td>单元格</td>
			<td>单元格</td>
			<td>单元格</td>
		</tr>
	</table>
	
	<hr>
	<table border="1" width="400" height="150">
		<tr>
			<td rowspan="2">合并行</td>
			<td>b</td>
			<td colspan="2">合并列</td>
			<!-- <td>d</td> -->
		</tr>
		<tr>
			<!-- <td>a</td> -->
			<td>b</td>
			<td>c</td>
			<td>d</td>
		</tr>
		<tr height="100">
			<td width="50">a</td>
			<td width="150">b</td>
			<td width="50">c</td>
			<td width="150">d</td>
		</tr>
	</table>
	<hr>
	<table border="1" width="300" height="150" cellspacing="0" >
		<!-- 表内容 -->
		<tbody>
			
			<tr align="center">
				<td><b>马云</b></td>
				<td>50</td>
				<td>男</td>
			</tr>
			<tr>
				<td>马云</td>
				<td>50</td>
				<td>男</td>
			</tr>
		</tbody>
		<!-- 表头 -->
		<thead>
			<tr>
				<th>姓名</th>
				<th>年龄</th>
				<th>性别</th>
			</tr>
		</thead>
		<!-- 表尾 -->
		<tfoot>
			
		</tfoot>
	</table>
</body>

	<form action="" method="get">
		

		<!-- 单行文本输入框 -->
		<input type="text" value="黄晓明" 
		placeholder="请输入姓名"
		name="username"><br><br>
		
		<!-- 密码输入框 -->
		<input type="password"><br><br>
		
		<!-- 多行文本输入框 -->
		<textarea rows="5" cols="30"></textarea><br>
		
		<!-- 按钮 -->
		<input type="button" value="按钮">
		<input type="submit" value="确定-按钮会刷新页面">
		<button>按钮-会刷新页面</button>
		<input type="reset">
		
		<!-- 单选框 -->
		<h3>请选择您的爱好？</h3>
		<input type="radio" name="1" value="code" checked="">A.写代码
		<input type="radio" name="1" value="movie" disabled>B.看电影
		<input type="radio" name="1" value="game">C.玩游戏
		<input type="radio" name="1" value="doudou">D.打豆豆
		
		<!-- 复选框 -->
		<h3>请选择您的爱好？</h3>
		<input type="checkbox" name="1" value="code">A.写代码
		<input type="checkbox" name="1" value="movie" checked="">B.看电影
		<input type="checkbox" name="1" value="game" checked="">C.玩游戏
		<input type="checkbox" name="1" value="doudou" disabled="">D.打豆豆
		
		<!-- 
		checked  默认选中 
		disable  禁用
		-->
		
		<!-- 下拉菜单 -->
		<br><br><br><hr>
		
		<select name="like3">
			<option value ="code">写代码</option>
			<option value ="movie" selected>看电影</option>
			<option value ="game">玩游戏</option>
			<option value ="doudou">打豆豆</option>
		</select>
		
		<!-- 
		 selected  默认选中
		 -->
		 
		 <!-- 
		  网址URL：
		  http://127.0.0.1:8848/H5/Day01/code/05_表单.html?username=黄晓明&1=code&1=movie&1=game&like3=game
		  
		  协议： http://
		  IP/Host :127.0.0.1
		  Port端口：8848
		  路径： /H5/Day01/code/
		  访问文件：05_表单.html
		  ？： 分隔参数和服务器地址
		  参数： username=黄晓明&1=code
		  -->
		  <hr>
		  <input type="file">
		  <input type="number">
		  <input type="color" name="color">
		  <input type="date">
		  <input type="email">
		  
	</form>
	
	<!-- 颜色 -->
	<!-- 
		1.颜色单词，如：yellow red
		2.十六进制，如：#ff3344
		3.rgb，如：rgb（255，33，22）
				255(十进制) == FF（十六进制）
				rgba（200，100，20，0.5）
				a：alpha 透明度，范围0-1，0表示全透明，1表示不透明
	 -->
	 
	 <h3>颜色color</h3>
	 <p style="color:red;">天宫二号退役</p>
	 <p style="color:#993323;">天宫二号退役</p>
	 <p style="color:rgb(255,205,155);">天宫二号退役</p>
	 <p style="color:rgba(255,205,155,0.5);">天宫二号退役</p>