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编码方式
9081
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
