前端页面基础

<!DOCTYPE html>   <!--声明文档类型-->
<html lang="en">   <!--html标签对开头-->

<head>   <!--head标签对开头-->
<meta charset="UTF-8">
<title>天马行空</title>
</head> <!--head标签对结尾-->

<body>   <!--body标签对开头-->
<h1>一级标题</h1> <!--h标签对表示标题,共可以设置6级标题-->
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

<p>             <!--p标签对开头,p标签对里用来放段落-->
asdasdasdasda奥术大师大所多阿斯达四大,安师大ad。
阿斯达四大阿萨德
happy
施打奥所所多as啊。
<br> <!--br标签用于换行-->
阿萨德驱蚊器
二天太热问问人
</p> <!--p标签对结尾-->

<hr>     <!--hr标签用于画横线-->

<img src="./2.PNG" alt="" height="300" width="500">       <!--img标签用于放图片-->

<a href="https://www.baidu.com">点击跳转百度</a>        <!--a标签对用于设置跳转连接-->

<ol>                <!--ol标签对用于设置有序列表,ol>li*5再按tab可以快速设置5个列表标签-->
<li>python</li>
<li>java</li>
<li>php</li>
<li>c#</li>
<li>c++</li>
</ol>

<ul>                <!--ul标签对用于设置无序列表-->
    <li>python</li>
<li>java</li>
<li>php</li>
<li>c#</li>
<li>c++</li>
</ul>

<form action="" method="post">     <!--form标签对开头,form表单-->

账号:<input type="text" name="user" placeholder="请输入账号"><br> <!--input标签,type为text,文本输入框-->
密码:<input type="password" name="pwd" placeholder="请输入密码"><br> <!--input标签,type为password,密码输入框,按密码加密显示-->
<input type="text" disabled><br> <!--无效的输入框-->
<input type="text" readonly><br> <!--只读模式的输入框-->

性别:
男<input type="radio" name="rad" value="1"> <!--单选,type为radio,通过设置相同的name(如rad)来表示是一组选项-->
女<input type="radio" name="rad" value="2"> <!--单选,type为radio,通过设置相同的name(如rad)来表示是一组选项-->
    <br>

技能
python<input type="checkbox" name="skill" value="python"> <!--多选,type为checkbox,通过设置相同的name(如skill)来表示是一组选项-->
java<input type="checkbox" name="skill" value="java"> <!--多选,type为checkbox,通过设置相同的name(如skill)来表示是一组选项-->
PHP<input type="checkbox" name="skill" value="php"> <!--多选,type为checkbox,通过设置相同的name(如skill)来表示是一组选项-->
C++<input type="checkbox" name="skill" value="c++"> <!--多选,type为checkbox,通过设置相同的name(如skill)来表示是一组选项-->
<br>
<input type="file"> <!--文件上传,type为file-->

<br>日期选择
<input type="date"> <!--日期选择,type为date-->

<br>
选择收件人地址 <br>
城市:
<select name="city" id=""> <!--select标签对,下拉框选择-->
<option value="beijing">北京</option> <!--下拉框中的选项-->
<option value="shanghai">上海</option>
<option value="shenzhen">深圳</option>
<option value="guangzhou">广州</option>
</select>


<br>
<input type="submit" value="点击登录"><br> <!--提交按钮,type为submit-->

<input type="reset" value="点击重置选择"> <!--重置按钮,type为reset-->

<input type="button" value="普通的按钮"> <!--普通按钮,type为button-->


<iframe src="http://www.taobao.com" frameborder="0" width="1000" height="500"></iframe> <!--iframe标签对,在html主页面嵌套html子页面-->

</form> <!--form标签对结尾-->
</body>   <!--body标签对结尾-->

</html> <!--html标签对结尾-->

 

posted @ 2022-01-04 09:30  2orange  阅读(19)  评论(0编辑  收藏  举报