前端页面基础

<!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="https://www.cnblogs.com/2orange/p/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标签对结尾-->

 

推荐这些文章:

前端知识学习总结

form 表单总结
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-sc...

都啥时代了~我不允许学前端的还不会对齐input~

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
table tr td{
text-align: left;
wi...

HTML 综合案例---简陋的相亲网站界面

1. HTML 代码

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width...

708 html表单:form,input,textarea,select、option,button,label,fieldset,legend,type,radio,checkbox,get和post

表单

常用元素

input的常用属性

布尔属性(boolean attributes)

按钮

按钮 - button元素

input和label

radio的使用注意

checkbox的使用注意

去除input的Tab键选中效果

textarea

select和option

fieldse...

HTML标签元素常用列表

HTML 基本文档

<!DOCTYPE html>
<html>
<head>
<title>文档标题</title>
</head>
<body>
可见文本...
</body>
</html>

基本标签(Basic Tag...

HTML03:列表、表格标签和媒体元素

列表标签

无序列表、有序列表、自定义列表

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">
<title>我的网页</title>

</head>

...

HTML 注册案例 学习 制作

1. 案例目标

2. 示例代码
<!DOCTYPE html>
<html lang="en">
<head>
...

datalist标签配合input实现输入框历史记录提示

<form>
//list与datalist的id关联
<input list="b" />
//注意是datalist不是details
<datalist id="b">
//注意是未闭合单标签
<option valu...

个人自学前端5-HTML标签3

目录表单HTML 表单元素select 元素(下拉列表)textareabuttondatalistkeygenoutputHTML 输入类型textpasswordsubmitradiocheckboxbuttonnumberdatecolorrangemonthweektimedatetimedatetime-localemails...

HTML的骨架标签

 
 

<html>
<head>
<title></title>
</head>
<body>

</body>
</html>

 

...

文章标题:前端页面基础
文章链接:https://www.dianjilingqu.com/4467.html
本文章来源于网络,版权归原作者所有,如果本站文章侵犯了您的权益,请联系我们删除,联系邮箱:saisai#email.cn,感谢支持理解。
THE END
< <上一篇
下一篇>>