【前端】HTML 0基础知识点

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>我的第一个网页</title>
		<style><!--设置字体-->
			span{color: blueviolet;}
		</style>
	</head>
     <!--
     	作者:2322296314@qq.com
     	时间:2021-05-19
     	描述:
     -->
	<body>
		<div>
			<h1>hello world</h1><!--一级标题-->
			<p>hahah&nbsp;&nbsp;<!--空格-->
				naha<hr /><!--分割线-->
			ahaha<br /><!--回车-->
			hhahhahahahhahah</p><!--文本-->
		</div><!--分区-->
	<header>我是<span>头部标签</span></header>
	<section>我是区域部分</section>
	<footer>我是底部标签</footer>
	<aside>我是侧边栏</aside>
	   <ul><!--没有前后顺序-->
	        <li>我的第一个列表信息111</li>
	        <li>2222</li>
	        <li>333</li>
	    </ul>
		<ol><!--有序列表-->
			<li>我的第一个列表信息</li>
		    <li>前端开发面试心法 </li>
             <li>零基础学习html</li>
		</ol>
		<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fmmbiz.qpic.cn%2Fmmbiz_jpg%2FD94vEUvV9FyMrztfMSicX9mZXo19icGtNNP5mziabuf5kOyibYv6frDRUL0HOl3oYteHO7icniaSEYkr5MQrBYHn0Oicg%2F%3Fwx_fmt%3Djpeg&refer=http%3A%2F%2Fmmbiz.qpic.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1623991529&t=c5c421921e8dab6cb33e3d287a3339ae"
			alt="犬夜叉" title="犬夜叉" /><!--添加图片-->
		<a href="http://www.m1905.com/mdb/star/3316/" title=点击进入 target="_blank">添加超链接</a>
		<a href="https://www.imooc.com" target="_self">a标签有的target属性,代表打开网页的方式。
                                                                               <!--可选值为”_self和_blank”,默认值为_self,代表在当前页面打开链接,_blank代表在新窗口打开链接。: --></a>
	<hr>
	<h2>表格标签</h2>
	<table border="1">
	<caption>我的第一个表格</caption>
	<tr> <!--表格的一行-->
	<th></th><!--表头-->
     <th></th>
     <th></th>
	</tr>
	<tr> 
	<td>1</td><!--列-->
             <td>2</td>
              <td>3</td>
	</tr>
          
	</table>
	
	<table border="1">
	<caption>我的第二个表格</caption>
	<thead>
	<tr>
	<th>成绩</th>
	<th>科目</th>
	</tr>
	</thead>
	<tbody>
	<tr>
	<td>11</td>
	<td>22</td>
	</tr>
	</tbody>
	<tfoot>
	<tr>
	<td>总分</td>
	<td>002</td>
	</tr>
	</tfoot>
	</table>
	<hr />
	<h2>我的第一个表单</h2>
	<form method="post" action="save.php">
<label for="username">用户名:</label>	
<input type="text" placeholder="请输入" name=="username" id="username" value=""/><!--文本输入框--> 
<label for="pass">密码:</label>
<input type="password" name="pass" id="pass" value=""/><!--密码输入框--> 
	 <input type="submit" value="确定" name="submit" />
        <input type="reset" value="重置" name="reset" />
	</form>
	<hr />
	<input type="number" /><!--数字-->
	<hr />
	<input type="url" /><!--网址输入框-->
     <input type="email" /><!--邮箱输入框-->
     <form method="post" action="save.php">
     	<label>联系我们</label>
     	<textarea cols="50" rows="10">输入内容。。。</textarea>
     </form>
     <hr />
     <form>
     	<label for="email">输入邮箱地址</label>
     <input type="email" id="email" placeholder="Enter email" />
     </form>
     <hr />
     <!--单,复选框-->
     <form action="save.php" method="post" ><!--radio单选 checkbox复选-->
     	<label>性别:</label>
     	<label></label>
     	<input type="radio" value="1" name="gender"/>
     	<label></label>
     	<input type="radio" value="2" name="gender" />
     	<hr />
     	<h2>创建下拉菜单</h2>
     	<form>
     		<select>
     			<option value="读书">读书</option>
     			<option value="运动">运动</option>
     			<option value="音乐">音乐</option>
     			<option value="休息" selected="selected">休息</option><!--默认选择-->
     		</select>
     	</form>
     <hr />
     <h2>提交/重置按钮</h2>
     <form method="post" action="sava.php">
     	<label for="myName">名字:</label>
     	<input type="text" value="" name="myName" />
     	<input type="submit" value="提交" name="submitBtn" />
        <input type="reset" value="重置" name="resetBtn" />
     </form>
     </body>
</html>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值