JavaWeb第一天/12.30
2018-01-05 17:28
169 查看
一、HTML标签
二、文本标签
三、练习
四、超链接标签
五、图像标签
六、转义字符
七、表格标签
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="keywords" content="java-php-python-c" /> <meta name="description" content="这是一个家做Java开发的软件公司" /> <title>head标签</title> </head> <body> <marquee behavior="slide" direction="down" scrollamount="">你好 HTML</marquee> </body> </html>
二、文本标签
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> < 4000 span class="hljs-tag"><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>文本标签</title> </head> <body> <!--标题标签:h1-h6--> <h1>标题1</h1> <h2>标题2</h2> <h3>标题3</h3> <h4>标题4</h4> <h5>标题5</h5> <h6>标题6</h6> <!--水平线标签--> <hr/> <!--换行标签--> 文本标签:<br/> 超链接标签 <br/> <!--段落标签:闭合标签 p--> <p> 第一次第一次第一次第一次第一次第一次第一次第一次第一次第一次第一次第一次第一次第一次第一次第一次第一次第一次第一次第一次第一次第一次第一次第一次第一次第一次第一次第一次第一次第一次第一次第一次第一次第一次第一次第一次 </p> <p> 第二次第二次第二次第二次第二次第二次第二次第二次第二次第二次第二次第二次第二次第二次第二次第二次第二次第二次第二次第二次第二次第二次第二次第二次第二次第二次第二次第二次第二次第二次第二次第二次第二次第二次第二次第二次 </p> <!--段落缩进标签:blockquote--> <blockquote> 解释第二次:解释内容解释内容解释内容解释内容解释内容解释内容 </blockquote> <!--滚动标签:marquee 滚动属性: behavior:滚动方式:默认交替滚动 direction:滚动方向:left right up down scorllamount:滚动速度,默认6,值越大滚动速度越快 --> <marquee behavior="slide" direction="right" scrollamount="6">2018年的第一场雪</marquee> <br/> <!--上下标的标签(sup上标签,sub下标签)--> y等于x的平方: y=x<sup>2</sup> 水的化学方程式:h<sub>2</sub>o <a name="标记"></a> <pre> 凉州词 作者 葡萄美酒夜光杯,欲饮琵琶马上催. 醉卧沙场君莫笑,我是流氓我怕谁. </pre> <br/> <!--有序列表: ol li:列表选项 ol默认的属性:type:默认类型:数字从1开始 --> NBA全明星: <ol type="1"> <li>欧文</li> <li>詹姆斯</li> <li>韦德</li> </ol> <hr/> <!--无序列表 ul和li ul属性:type:默认实心圆点 --> 学生管理系统: <ul type="square"> <li>选课管理</li> <li>学生管理</li> <li>教学管理</li> </ul> <!--块标签和行内标签--> <div>div</div> <span>这是一个行内标签</span> <!--架构标签:公司人员分配:dl dt dd--> XX公司整体架构: <dl> <dt>技术经理</dt> <dd>工程师1号</dd> <dd>工程师2号</dd> <dd>工程师3号</dd> <dt>财务经理</dt> <dd>出纳1号</dd> <dd>出纳2号</dd> <dd>出纳3号</dd> </dl> <br/> <!--居中标签--> <center>我在中间啦</center> <!--斜体标签--> <em>你好,我是斜体啊</em> <br/> <!--粗体标签--> <strong>粗体字体</strong> <br/> <center> <font color="#0033FF" size="+6" face="Tahoma, Geneva, sans-serif">个性字体</font> </center> </body> </html>
三、练习
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>练习</title> </head> <body> <h1>清平乐·年年雪里</h1> 朝代:<em>宋代</em> 作者:<strong>李清照</strong> <hr/> 原文: <pre> 年年雪里,常插梅花醉,挼尽梅花无好意, 赢得满衣清泪! 今年海角天涯,萧萧两鬓生华. 看取晚来风势,故应难看梅花. </pre> </body> </html>
四、超链接标签
超链接标签:<a></a> 属性: href:连接到的资源文件(包含图片文件),也可以连接URL(统一资源定位符号) URI:表示互联网协议 URL:(http://) target:打开资源文件的方式 _blank:新建一个窗口打开 _self:在当前窗口打开 超链接作用: 1)可以连接到资源文件或者资源地址 2)可以作为锚链接使用 使用锚链接: 在同一页面跳转: name属性:锚链接名称———打了一个跳转标记 a:创建了一个跳转标记<a name="name"></a> b:跳转到标记<a href="#name属性值">开始跳转</a> 在不同页面跳转: a:创建跳转标记 <a name="name"></a> b:创建跳转链接 <a bhref="xxx.html#跳转标记的name属性值"></a> 常见协议: file:// 链接到文件的话,如果前面没有写协议,默认就是file://就会在当前本地中找是否有这个文件,有就直接显示 http:// http协议的执行流程,要求访问这个链接地址,首先要在c盘下有文件hosts中找是否有该域名对应的ip,如果有,本地打开,如果没有,就需要进行联网操作,来进行访问 thunder:// 迅雷软件的协议 mailto: 邮件协议
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>超链接标签</title> </head> <body> <a name="top"></a> <a href="文本标签.html#标记" target="_blank">超链接</a><br/> <a href="../../JavaWeb资料/JavaSE_day26/html/code/1.jpg" target="_blank">图片文件</a><br/> <a href="http://www.baidu.com" target="_self">百度链接</a><br/> <a href="thunder://www.moive.com/fuchouzhelianmeng.avi">高速通道《复仇者联盟》</a><br/> <a href="http://www.moive.com/fuchouzhelianmeng.avi">普通通道《复仇者联盟》</a><br/> <a href="mailto:eric@westos.com">发邮件</a><br/> <a href="#abc">跳转到第一次跳转</a> <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> <!--跳转标记--> <a name="abc"></a> 第一次跳转第一次跳转第一次跳转第一次跳转第一次跳转第一次跳转第一次跳转第一次跳转第一次跳转第一次跳转第一次跳转第一次跳转第一次跳转第一次跳转第一次跳转第一次跳转第一次跳转第一次跳转第一次跳转第一次跳转第一次跳转第一次跳转第一次跳转 <br/> <a href="#top">[返回顶部]</a> </body> </html>
五、图像标签
<!-- 图像标签:空标签 <img/> 常用属性: src:链接到图片资源文件 title:鼠标悬浮在图片上时,会显示提示文字 alt:当图片资源失效时,会有替代文本 width:图片宽度 height:图片高度 -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>图像标签</title> </head> <body> <img src="2.jpg" alt="这是一张美图" width="600px" height="600px" border="0" usemap="#Map" title="mm"/> <!--热点区域标签:在图上画的矩形:矩形的对角点可以确定矩形 圆可以由圆心和半径确定 可以在图片矩形和圆的位置跳转链接 --> <map name="Map" id="Map"> <area shape="rect" coords="189,225,292,281" href="超链接标签.html" target="_blank" /> <area shape="circle" coords="252,419,46" href="hello.html" target="_blank" /> </map> </body> </html>
六、转义字符
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>转义字符</title> </head> <!--<h1></h1>--> <body> <h1>你好世界</h1><br/> 生活不止眼前的苟且 还有诗和远方<br/> 康师傅<sup>®</sup>版权所有<sub>©</sub><br/> <h2>hello world </body> </html>
七、表格标签
<!-- 表格标签:table 表头:th:加粗并自动居中 行标签:tr 单元格:td 表格的标题:caption table常用属性: 1)边框:border 设置为1px 2)在浏览器中显示方式:align 常用值:left center right 3)表格宽度:width 4)表格高度:height 行合并:rowspan 列合并(列单元格合并):colspan -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>表格标签</title> </head> <body> <table border="1px" width="400px" height="300px" align="center" bgcolor="#33CCFF"> <caption>学生成绩表</caption> <tr align="center"> <th>姓名</th> <th>班级</th> <th>成绩</th> </tr> <tr align="center"> <td rowspan="2">狗娃</td> <td>软工1班</td> <td>90</td> </tr> <tr align="center"> <td>网络1班</td> <td>94</td> </tr> <tr align="center"> <td>狗蛋</td> <td>软工1班</td> <td>96</td> </tr> <tr align="center"> <td>狗剩</td> <td>软工2班</td> <td>88</td> </tr> <tr align="center"> <td colspan="2">平均分</td> <td>92</td> </tr> </table> </body> </html>
相关文章推荐
- 【javaWeb第一天】-工欲善其事,必先利其器
- 开通csnd博客第一天
- 开博第一天
- 获取一个月的第一天和最后一天
- 零基础在Linux服务器上部署javaweb项目
- 5日学会动态HTML (第一天)
- javaweb使用过滤器防止图片盗链 ------请求头referer的使用
- JavaWeb学习之Servlet(三)----Servlet的映射匹配问题、线程安全问题
- 金融危机下研发人员的职业发展-SD2.0大会第一天人力资源嘉宾论坛
- javaweb项目大数据处理的解决方案
- 7月18日 第一天
- 人事管理系统第一天之整体设计
- 开博第一天,发言一下
- python 第一天练习
- [第一天]金额转换,阿拉伯数字的金额转换成中国传统的形式如
- JavaWeb
- 18:2009年的第一天
- 博客的第一天
- J2EE-JavaWeb项目的编码乱码问题
- javaweb简单的登录注册功能实现