Web客户端开发技术(1)精品PPT课件
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
HTML标签
• HTML 注释
• 可以将注释插入 HTML 代码中,这样可以提高其可 读性,使代码更易被人理解。浏览器会忽略注释, 也不会显示它们。
HTML标签
• 实例
• <!--这是一段注释。注释不会在浏览器中显示。--> • <p>这是一段普通的段落。</p>
HTML标签
• 格式化文本
• <b>定义粗体文本。 • <big>定义大号字。 • <em>定义着重文字。 • <i>定义斜体字。 • <small>定义小号字。 • <strong>定义加重语气。 • <sub>定义下标字。 • <sup>定义上标字。 • <ins>定义插入字。 • <del>定义删除字。
•
<tr>
•
<td width="450" bgcolor="white“ valign="top" >
•
<textarea style="font-size:larger;" id="txt" rows="40" cols="45"></textarea>
•
</td>
•
<td width="40" align="center" valign="middle">
HTML标签
• HTML <font> 标签(不建议使用)
• <font> 规定文本的字体、字体尺寸、字体颜 色。
• color • face • size
HTML标签
• 实例
• <h1>
• <font face="verdana">A heading</font>
• </h1> • <p>
• <font size="5" face="arial" color="red"> • A paragraph. • </fonBaidu Nhomakorabea>
•
<button onclick="tar.innerHTML=txt.innerText;">Check Result</button>
•
</td>
•
<td id="tar" width="650" bgcolor="white" valign="top"></td>
•
</tr>
• </table>
• </a> • <a href=" /" target="_blank">转向百度</a>
HTML标签
• 实例
• <p> • <a href="#C4">查看 Chapter 4。</a> • </p>
• <h2>Chapter 1</h2> • <p>This chapter explains ba bla bla</p> • <h2>Chapter 2</h2> • <p>This chapter explains ba bla bla</p> • <h2>Chapter 3</h2> • <p>This chapter explains ba bla bla</p> • <h2><a name="C4">Chapter 4</a></h2> • <p>This chapter explains ba bla bla</p> • <h2>Chapter 5</h2> • <p>This chapter explains ba bla bla</p>
• </p>
HTML标签
• HTML <center> 标签(不建议使用)
• 对其所包括的文本进行水平居中。
• 实例
• <center>Some text</center>
HTML标签
• HTML 链接
• HTML 使用超级链接与网络上的另一个文档相连。 • <a> • href • target
HTML+Javascript+DOM+CSS
2020年10月16日星期五
简单的测试用网页
• <html>
• <head>
• <title>My Test Page</title>
• </head>
• <body bgcolor="gray">
• <table width="1200" cellPadding="8">
• <h1>This is heading 1</h1> • <h2>This is heading 2</h2> • <h3>This is heading 3</h3> • <h4>This is heading 4</h4> • <h5>This is heading 5</h5> • <h6>This is heading 6</h6>
• _blank, _parent, _self, _top
• name
HTML标签
• 实例
• <p>
• <a href=“”>转向百度</a>
• </p> • <a href="/example/html/lastpage.html">
• <img border="0" src=“myimage.gif" />
HTML标签
• 实例
• <p><b>bold</b></p> • <p><i>italic</i></p> • <p><em>emphasis</em><p> • <p>Text<sub>sub</sub></p> • <p>Text<sup>sup</sup></p> • <p>Text<ins>insert</insert>Text<p> • <p>Text<del>delete</del>Text<p> • <p>Text<big>big</big>Text<p> • <p>Text<small>small</small>Text<p>
HTML标签
• HTML 水平线
• <hr /> 标签在 HTML 页面中创建水平线。 • hr 元素可用于分隔内容。
HTML标签
• 实例
• <p>hr 标签定义水平线:</p> • <hr /> • <p>这是段落。</p> • <hr /> • <p>这是段落。</p> • <hr /> • <p>这是段落。</p>
• </body>
• </html>
• 注意:由于chrome关于textarea的一个bug,需要在IE浏览器中运行
HTML标签
• HTML 标题
• 标题(Heading)是通过 <h1> - <h6> 等标签进行定 义的。
• <h1> 定义最大的标题。<h6> 定义最小的标题。
HTML标签
• 实例