1.认识HTML标记
2.元信息标记meta
2.1设置页面关键字
2.2设置页面说明
2.3定义编辑工具
2.4添加作者信息
2.5设置网页文字及语言
2.6设置网页的定时跳转
<html> <head> <!--html注释--> <!--标题--> <!--<title> this is a tile </title>--> <title> 这是标题</title> <!--告诉浏览器使用什么码表解释html--> <meta http-equiv="content-type" content="text/html;charset=utf-8"/> <!--搜索引擎--> <meta name="keywords" content="java培训，Python培训"/> <meta name="description" content="学习IT"/> </head> <body> </body> </html>
3.文本标签
<html> <head> <title> 文本标签</title> <meta http-equiv="content-type" content="text/html;charset=utf-8"/> </head> <body> <!--标题--> <h1>标题1 </h1> <h2 align="center">标题2</h2> <!-- align 设置标题的对齐方式--> <h3>标题3</h3> <h4>标题4</h4> <h5>标题5</h5> <h6>标题6</h6> <!--水平线--> <hr/> <!--段落--> <p>这是第一段的内容这是第一段的内容这是第一段的内容这是第一段的内容这是第一段的内容 这是第一段的内容这是第一段的内容这是第一段的内容这是第一段的内容这是第一段的内容</p> <p>这是第二段的内容这是第二段的内容这是第二段的内容这是第二段的内容这是第二段的内容 这是第二段的内容这是第二段的内容这是第二段的内容这是第二段的内容这是第二段的内容</p> <!--段落缩进--> <blockquote> 这是第三段的内容这是第三段的内容这是第三段的内容这是第三段的内容这是第三段的内容 这是第三段的内容这是第三段的内容这是第三段的内容这是第三段的内容这是第三段的内容 这是第三段的内容这是第三段的内容这是第三段的内容这是第三段的内容这是第三段的内容 这是第三段的内容这是第三段的内容这是第三段的内容这是第三段的内容这是第三段的内容 </blockquote> <!--上下标，用于公式--> y=x的平方 -- y = x<sup>2</sup><br/> y = log以2为底的x -- y = log<sub>2</sub>x <!--原样输出 按照编辑器的效果，原样输出--> <pre> 静夜思 床前明月光，疑是地上霜。 举头望明月，低头思故乡。 </pre> <!--有序列表 ol li --> 你最喜欢的明星 <ol> <li>刘德华</li> <li>成龙</li> <li>杨幂</li> </ol> <ol type="a"> <!--type属性!--> <li>刘德华</li> <li>成龙</li> <li>杨幂</li> </ol> <!--无序列表 ul li --> <ul> <li>学生管理</li> <li>教师管理</li> <li>工人管理</li> </ul> <ul type="circle"> <li>学生管理</li> <li>教师管理</li> <li>工人管理</li> </ul> <!--项目列表标签 dl dt dd --> 软件公司的组织架构 <dl> <dt>技术总监</dt> <dd>工程师1</dd> <dd>工程师2</dd> <dd>工程师3</dd> <dt>财务总监</dt> <dd>财务1</dd> <dd>财务2</dd> <dd>财务3</dd> </dl> <!--行内标签（span）和块标签（div） 在HTML中使用非常少，在CSS中使用多 --> <span>span的内容</span> <div>div的内容</div> </body> </html>
4.超链接
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>超链接标签</title> </head> <body> <!-- a 超链接标签： 常用的属性： href 表示链接到的地址（文件） target 打开资源方式 _self: 当前窗口打开， _blank: 新窗口打开 协议执行资源的基本流程（超链接的原理）： 使用协议到本地计算机的注册表中查询是否有对应协议的软件（程序），有就执行，没有就不执行。 常见的协议： file:// 本地文件协议（本地或局域网） 在href中不写就是使用这个默认协议 http:// http协议（执行流程） 通常连接到域名或IP地址 thunder： 迅雷下载软件的协议 mailto: 调用本地的发送邮件的客户端软件 超链接作用； 1）链接到资源 2）作为锚点使用 打锚点： <a name="锚点名称"></a> 去到锚点： <a href="#锚点名称">内容</a> --> <a name="top"></a> <!--定义一个锚点--> <!--<a href="03.html文本标签.html#list" target="_blank">超链接</a><br/>--> <!--<a href="../1.jpg">链接到图片</a><br/>--> <a href="http://www.baidu.com">链接到百度</a><br/> <a href="http://www.moive.com/fuzhouzhe.avi">高清《复仇者联盟2》(普通通道)</a><br/> <a href="thunder://www.moive.com/fuzhouzhe.avi">高清《复仇者联盟2》(迅雷通道)</a><br/> <br/><a href="#ch01">去到第一章</a> <！--链接到锚点--> <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> <a name="ch01"></a><!--定义一个锚点--> 第一章内容第一章内容第一章内容第一章内容第一章内容第一章内容第一章内容第一章内容第一章内容第一章内容第一章内容第一章内容第一章内容第一章内容第一章内容第一章内容第一章内容第一章内容第一章内容第一章内容第一章内容第一章内容第一章内容第一章内容第一章内容第一章内容第一章内容第一章内容第一章内容第一章内容<br/> <a href="#top">返回顶部</a> </body> </html>
5.图像标签
<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/html"> <head> <meta charset="UTF-8"> <title>图像标签</title> </head> <body> <!-- img 图像标签 常用属性： src : 表示图片源位置 width: 图片宽度 height: 图片高度 alt: 替代文本。当图片的src属性失效时，alt属性的内容就会生效 title: 提示文本。当鼠标放到图片上面出现。 地图（热点区域）：map 热点： area --> <!--<img src="../picture/1.jpg" alt = "这是一张美女图片" usemap="#Map" width="100 px" height="124px" title="提示文字"><br>--> <!--<map name="Map"><area shape="rect" coords="196,338,301,398" href="http://www.baidu.com" target="_self"/></map>--> <img src="../picture/1.jpg" alt="这是一张美女图片" border="0" usemap="#Map" title="提示文字"/> <map name="Map" id="Map"> <area shape="rect" coords="196,338,301,398" href="http://www.baidu.com" target="_self" /> <area shape="circle" coords="139,191,145" href="http://www.baidu.com" target="_blank" /> </map> </body> </html>
6.转义字符
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>转义字符</title> </head> <body> <h3>标题3</h3><br/> IT教程 java培训<br/> IT教程<sup>®</sup> <br/>版权所有<sup>©</sup> </body> </html>
7.表格标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表格标签</title> </head> <body> <!-- 标签： table 表格,默认没有边框 tr 行 td 单元格 th 表头 caption 标题 常用的属性： border 表格的边框 width 宽度 heigth 高度 align 对齐方式。 left: 左对齐 center:居中 right：右对齐 rowspan 行合并。把多行的单元格合并 colspan 列合并。把多列的单元格合并 --> <table border="2px" width="400px" height="200px" align="center"> <caption>2018年成绩单</caption> <tr> <th>姓名</th> <!-- 表头 --> <th>班级</th> <th>学生</th> </tr> <tr> <td rowspan="2">狗娃</td> <!--行合并--> <td>计算机1班</td> <td>80</td> </tr> <tr> <td>经济1班</td> <td>88</td> </tr> <tr> <td>狗胜</td> <td>计算机2班</td> <td>75</td> </tr> <tr> <td>狗蛋</td> <td>软件1班</td> <td>85</td> </tr> <tr> <td colspan="2" align="center">平均分</td> <td>85</td> </tr> </table> </body> </html>
8.表单标签
8.1提交表单
8.2表单名称
8.3传送方法
8.4编码方式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表单标签</title> </head> <body> <form> <!-- 单行输入域： 常用的属性 value: 该输入的默认值 name: 这个必须填。该name的属性值用于给后台程序获取该标签输入的内容 size: 可以输入的字符数量 --> 用户名：<input type="text" value="4-10位的字母或数字" name="userName" size="25"/> <br> <!--密码输入域： 以非明文的效果获取用户输入的数据。 --> 密码：<input type="password" name="userPwd"><br> <!-- 单选： 注意： 1)如果是同一组的单选选项就使用相同的name属性值 2)单选按钮的value属性一定填。这个value的值就是发送给后台程序的内容 --> 性别：<input type="radio" name="gender" value="男"/>男 <input type="radio" name="gender" value="女"/>女<br/> <!-- 多选按钮： 注意： 1）如果是同一组的多选选项就使用相同的name属性值 2)多选按钮的value属性一定填。这个value的值就是发送给后台程序的内容 --> <input type="checkbox" name="hobit" value="篮球"/>篮球 <input type="checkbox" name="hobit" value="足球"/>足球 <input type="checkbox" name="hobit" value="兵乓球"/>兵乓球<br/> 籍贯： <!-- 下拉选项： 注意： 1）name属性就是后台程序获取的标记 2)下拉选项的option标签中的value属性一定填。这个value的值就是发送给后台程序的内容 --> <select name="jiguan"> <option value="广东">广东</option> <option value="广西">广西</option> <option value="湖南">湖南</option> </select><br /> <!-- 隐藏域：用于携带数据，但是在页面上不会显示效果 注意： 1）name属性就是后台程序获取的标记 2) 这个value的值就是发送给后台程序的内容 --> <input type="hidden" name="id" value="001"/> 个人简介： <!--多行输入域：可以输入多行文本 rows: 一共有几行 cols: 一行可以输入几行字符 --> <textarea rows="5" cols="20" name="info"></textarea> <!-- 提交按钮： 点击这个按钮，form中的全部数据就会发送到后台 value: 表示按钮显示的文本 --> <input type="submit" value="注册"/> <!-- 重置按钮： 点击这个按钮，form中的所有标签返回到初始默认状态 --> <input type="reset" /> </form> </body> </html>
9.框架标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>头部页面</title> </head> <body> <h3>学生选课系统</h3> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>底部页面</title> </head> <body> <center>江西财经大学<sup>®</sup> 版权所有<sup>©</sup></center> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>左边菜单页面</title> </head> <body> 菜单选项 <ul> <!-- 超链接标签的target属性还可以指定一个frame的名称，如果指定的是一个frame的name，那么在指定这个frame中打开href指定的页面 --> <li><a href="student.html" target="main">学生管理</a></li> <li>课程管理</li> <li>教师管理</li> <li>选课管理</li> </ul> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>中间主页面</title> </head> <body> 欢迎登陆学生选课系统 </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>学生管理页面</title> </head> <body> <h3 align="center">学生信息列表</h3> <table border="1" align="center" width="500px" height="300px"> <tr> <th>姓名</th> <th>年龄</th> <th>班级</th> </tr> <tr> <td>张三</td> <td>20</td> <td>计算机1班</td> </tr> <tr> <td>李四</td> <td>20</td> <td>计算机1班</td> </tr> <tr> <td>王五</td> <td>20</td> <td>计算机1班</td> </tr> <tr> <td>陈六</td> <td>20</td> <td>计算机1班</td> </tr> </table> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>主页面</title> </head> <frameset rows="10%,*,10%"> <frame src="header.html" name="header"/> <frameset cols="20%,*"> <frame src="menu.html"/> <frame src="main.html" name="main"/> </frameset> <frame src="footer.html"/> </frameset> <body> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>主页面</title> </head> <frameset rows="10%,*,10%"> <frame src="header.html" name="header"/> <frameset cols="20%,*"> <frame src="menu.html"/> <frame src="main.html" name="main"/> </frameset> <frame src="footer.html"/> </frameset> <body> </body> </html>
