1、head标签
- meta
- title
- link
- style
- script
2、body标签
- 图标
- p标签
- br标签
- hr标签
- input系列
(1) 文本域
input type="text"
(2) 密码
input type="password"
(3) 提交
input type="submit"
(4) 按钮
input type="button"
(5) 单选框
input type="radio"
默认值设置： checked="checked"
(6) 复选框
input type="checkbox"
默认值设置：checked="checked"
(7) 文件
input type="file"
注意：上传文件依赖form表单的属性：enctype="multipart/form-data"
(8) 重置
input type="reset"
(9) 多行输入
<textarea ></textarea>
(10) select标签
<select>
<option value="1">
<option value="2">
<option value="3">
</select>
(11) form标签
作用：用于提交表单
属性：
action: 表单提交到的url
method: post/get
enctype="multipart/form-data": 上传文件
- a标签
作用：
(1) 跳转
(2) 锚 ----- href="#id=?" ,id不能重复
- img标签
src: 图片的url
alt: alt 属性是在图片不能正常显示时出现的文本提示
title: title 属性是在鼠标在移动到元素上的文本提示
height: 图片的高度
图片的宽度
- 列表
ul: 定义无序列表
ol: 定义有序列表
dl: 定义列表
dt: 自定义列表项目
dd: 定义自定列表项的描述
- 表格
thead:
tr
th
tbody:
tr
td
colspan="3": 合并行
rowspan="2": 合并列
- label
用于点击文字，使得关联的标签获取光标
- fieldset
legend
作用：
<fieldset> 标签可以将表单内的相关元素分组。
<fieldset> 标签会在相关表单元素周围绘制边框。
- h系列
- div
- span
3、代码：
改代码包括以上全部内容：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <!--html实现页面跳转--> <!--<meta http-equiv="refresh" content="1,url=http://www.autohome.com">--> <!--刷新--> <!--<meta http-equiv="refresh" content="3">--> <!--关键字--> <meta name="keywords" content="美女,野兽"> <!--web页面描述--> <meta name="description" content="这是个分享美女图片的网站"> <!--页面作者--> <meta name="author" content="Jack"> <!--IE兼容性--> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>美女图片</title> <!--link:链接样式表--> <link rel="stylesheet" href="html/css/commons.css"> <style> .middle { width: 120px; height: 40px; line-height: 40px; margin: 0 auto; } .div_middle { /* 250px;*/ margin: 50px 50px 50px 300px; } .split_line { left: 200px; } .menu{ height: 40px; font-size: 16px; text-align: center; line-height: 40px; font-weight: bold; } </style> </head> <body> <!--a链接:锚--> <div style="position: fixed;left: 20px;top: 20px"> <p style="text-align: left; font-size: large;">目录(使用a链接实现)</p> <!-- <hr style="border: solid;"> --> <a href="#i1" class="menu">第1节：HTML5中input输入类型</a><br> <a href="#i2" class="menu">第2节：a链接:跳转</a><br> <a href="#i3" class="menu">第3节：img图片</a><br> <a href="#i4" class="menu">第4节：style属性</a><br> <a href="#i5" class="menu">第5节：form表单:用户登录</a><br> <a href="#i6" class="menu">第6节：form表单:向搜狗引擎提交数据</a><br> <a href="#i7" class="menu">第7节：form表单:input的使用</a><br> <a href="#i8" class="menu">第8节：HTML列表标签:ol</a><br> <a href="#i9" class="menu">第9节：HTML列表标签:ul</a><br> <a href="#i10" class="menu">第10节：HTML列表标签:dl与dt、dd</a><br> <a href="#i11" class="menu">第11节：HTML表格</a><br> </div> <!--HTML5中input输入类型--> <div id="i1" class="div_middle"> <p style="text-align: center">HTML5中input输入类型</p> <hr style="border: solid;"> <div> <input type="button" value="查询"/><br><br> <input type="checkbox"/><br><br> <input type="color"/><br><br> <input type="date"/><br><br> <input type="datetime-local"/><br><br> <input type="email"/><br><br> <input type="file"/><br><br> <input type="hidden"/><br><br> <input type="image"/><br><br> <input type="month"/><br><br> <input type="number"/><br><br> <input type="password" value="密码"/><br><br> <input type="radio"/><br><br> <input type="range"/><br><br> <input type="reset" value="重置"/><br><br> <input type="search"/><br><br> <input type="tel"/><br><br> <input type="text"/><br><br> <input type="time"/><br><br> <input type="url"/><br><br> <input type="week"/><br><br> <textarea></textarea> </div> </div> <!--a链接:跳转--> <div id="i2" class="div_middle"> <p style="text-align: center">a链接</p> <hr style="border: solid;"> <a href="http://www.baidu.com">百度搜索:在当前页面跳转</a><br><br> <a href="http://www.baidu.com" target="_blank">百度搜索:打开新页面跳转</a> </div> <!--img图片--> <div id="i3" class="div_middle"> <p style="text-align: center">img图片</p> <hr style="border: solid;"> <img src="html/1.jpg" alt="girls" title="模特" style=" 200px; height: 150px"> </div> <!--style属性--> <div id="i4" class="div_middle"> <p style="text-align: center">style属性</p> <hr style="border: solid;"> <div style="position: relative" > <div id="n2" style="position: absolute;left: 300px;bottom: 100px;color: purple;border:solid;font-size:xx-large"> position位置属性 </div> <div>展示style中position位置属性，字体颜色为紫色,字体为xx-large</div> <div id="n1" style="position: fixed;bottom: 0;right:0;">我是谁</div> </div> </div> <!--form表单:用户登录--> <div id="i5" class="div_middle"> <p style="text-align: center">form表单:用户登录</p> <hr style="border: solid;"> <fieldset> <legend style="text-align: center">用户登录</legend> <form action="login.html" method="post"> <div > <label for="username">用户名:</label> <input id="username" type="text" name="username"><br><br> </div> <div > <label for="password">密   码:</label> <input id="password" type="password" name="password"><br><br> </div> <div > <input type="button" value="登录"><br><br> </div> </form> </fieldset> </div> <!--form表单:向搜狗引擎提交数据--> <div id="i6" class="div_middle"> <p style="text-align: center">form表单:向搜狗引擎提交数据</p> <hr style="border: solid;"> <form action="https://www.sogou.com/web" method="post"> <div class="middle"> <input type="text" name="query"/> </div> <div class="middle"> <input type="submit" value="搜索"/> </div> </form> </div> <!--form表单:input的使用--> <div id="i7" class="div_middle"> <p style="text-align: center">form表单:input的使用</p> <hr style="border: solid;"> <form enctype="multipart/form-data"> <div > <div> <label for="name">用户名:</label> <input id="name" type="text" name="user"> </div> <div> <p>请选择性别:</p> 男<input type="radio" name="gender" value="1"/> 女<input type="radio" name="gender" value="2"/> 公公<input type="radio" name="gender" value="3"/> </div> <div> <p>爱好</p> 篮球:<input type="checkbox" name="favor" value="1"> 足球:<input type="checkbox" name="favor" value="2"> 排球:<input type="checkbox" name="favor" value="3" checked> 橄榄球:<input type="checkbox" name="favor" value="4"> 兵乓球:<input type="checkbox" name="favor" value="5"> </div> <div> <p>技能</p> 撩妹:<input type="checkbox" name="skill" value="1"> 写代码:<input type="checkbox" name="skill" value="2"> </div> <div> <p>上传文件</p> <input type="file" value="提交" name="fname"><br><br> </div> <div> <select name="city" size="6" multiple="multiple"> <option value="1">北京</option> <option value="2">上海</option> <option value="3" selected="selected">深圳</option> <option value="4">广州</option> </select> <br><br> </div> <textarea name="meno" style=" 200px; height: 100px;">这是个多行文本输入区域 </textarea><br><br> <input type="submit" value="提交"> <input type="reset" value="重置"> </div> </form> </div> <!--HTML列表标签:ol--> <div id="i8" class="div_middle"> <p style="text-align: center">HTML列表标签:ol</p> <hr style="border: solid;"> <div> <P>ol:定义有序列表</P> <ol> <li>鲁哈尼:美国制裁伊朗被孤立 与伊朗为敌注定失败</li> <li>索马里总统府附近发生爆炸 政府人员或为目标</li> <li>美俄关系转折难有＂实锤＂ 改善双边关系氛围更重要</li> <li>美国务卿：美墨北美自贸协定谈判取得重大进展</li> </ol> </div> </div> <!--HTML列表标签:ul--> <div id="i9" class="div_middle"> <p style="text-align: center">HTML列表标签:ul</p> <hr style="border: solid;"> <div> <P>ul:定义无序列表</P> <ul> <li>以色列战机轰炸加沙地带数十个哈马斯军事目标</li> <li>普京将与多国领导人出席世界杯闭幕式并观看决赛</li> <li>塔希提岛“海上漂浮城市”将开工 现有技术并非困难</li> <li>＂空袭＂特朗普 苏格兰民众乘滑翔伞空中盘旋抗议</li> </ul> </div> </div> <!--HTML列表标签:dl与dt、dd--> <div id="i10" class="div_middle"> <p style="text-align: center">HTML列表标签:dl与dt、dd</p> <hr style="border: solid;"> <div> <P>dl:定义列表; dt:自定义列表项目; dd: 定义自定列表项的描述</P> <dl> <dt>今日新闻</dt> <dd>博彩公司开2022世界杯夺冠赔率:法国第1 中国被无视</dd> <dd>中国情报收集船在环太军演海域行使＂航行自由＂权</dd> <dd>联合国安理会谴责发生在巴基斯坦的恐怖袭击</dd> <dd>美媒:美国将成世界最大产油国 全球石油版图将重构</dd> </dl> </div> </div> <!--HTML表格--> <div id="i11" class="div_middle"> <p style="text-align: center">HTML表格</p> <hr style="border: solid;"> <table border="1"> <thead> <tr> <th>姓名</th> <th>班级</th> <th>年龄</th> <th colspan="5">爱好</th> </tr> </thead> <tbody> <tr> <td>张三</td> <td>1班</td> <td>16</td> <td colspan="5">篮球、足球、排球</td> </tr> <tr> <td>李四</td> <td rowspan="2">2班</td> <td>15</td> <td colspan="5">书法、绘画</td> </tr> <tr> <td>王五</td> <td>16</td> <td colspan="5">游戏、上网、看美女</td> </tr> </tbody> </table> </div> <div id="i12"> </div> <script language="JavaScript" type="text/javascript"> //直接跳转 // window.location.href = 'http://www.baidu.com'; //定时跳转 // setTimeout("javascript:location.href='http://www.baidu.com'", 5000); </script> </body> </html>