Web安全工程师入门
合天网安实验室课程2周训练
链接: html常见操作.
分段：
<p>这是段落。</p> 折行：
<p> To break<br />lines<br />in a<br />paragraph,<br />use the br tag. </p> 标题居中：
<p> <h1 align="center">This is heading 1</h1> </p> 插入分割线：
<p>hr 标签定义水平线：</p> <hr /> 改变背景：
<body bgcolor="blue"> <h2>请看: 改变了颜色的背景。</h2> </body> 带换行的预格式：
<pre> for i = 1 to 10 print i next i </pre> 改变文字方向：
<p> 如果您的浏览器支持 bi-directional override (bdo)，下一行会从右向左输出 (rtl)； </p> <bdo dir="rtl"> Here is some Hebrew text </bdo> 常引用和短引用：
<blockquote> 这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。 </blockquote> 这是短的引用： <q> 这是短的引用。 </q> <p> 使用 blockquote 元素的话，浏览器会插入换行和外边距，而 q 元素不会有任何特殊的呈现。 </p> 图像作为链接：
<p> 您也可以使用图像来作链接： <a href="/example/html/lastpage.html"> <img border="0" src="/i/eg_buttonnext.gif" /> </a> </p> 如果把链接的 target 属性设置为 “_blank”，该链接会在新窗口中打开。
垂直框架
<html> <frameset cols="25%,50%,25%"> <frame src="/example/html/frame_a.html"> <frame src="/example/html/frame_b.html"> <frame src="/example/html/frame_c.html"> </frameset> </html> 水平框架同理：rows
混合框架
导航框架:
<html> <frameset cols="150,*"> <frame src="/example/html/html_contents.html"> <frame src="/example/html/frame_a.html" name="showframe"> </frameset> </html> 创建表格:
<html> <body> <p>每个表格由 table 标签开始。</p> <p>每个表格行由 tr 标签开始。</p> <p>每个表格数据由 td 标签开始。</p> <h4>一列：</h4> <table border="1"> <tr> <td>100</td> </tr> </table> <h4>一行三列：</h4> <table border="1"> <tr> <td>100</td> <td>200</td> <td>300</td> </tr> </table> <h4>两行三列：</h4> <table border="1"> <tr> <td>100</td> <td>200</td> <td>300</td> </tr> <tr> <td>400</td> <td>500</td> <td>600</td> </tr> </table> </body> </html> 通过设置border参数可调整表框粗细
border=0时无边框
带有表头和标题的表格：
<html> <body> <h4>表头：</h4> <table border="1"> <caption>我的标题</caption> <tr> <th>姓名</th> <th>电话</th> <th>电话</th> </tr> <tr> <td>Bill Gates</td> <td>555 77 854</td> <td>555 77 855</td> </tr> </table> <h4>垂直的表头：</h4> <table border="1"> <tr> <th>姓名</th> <td>Bill Gates</td> </tr> <tr> <th>电话</th> <td>555 77 854</td> </tr> <tr> <th>电话</th> <td>555 77 855</td> </tr> </table> </body> </html> 表格中任然可以嵌入表格，列表等
表格可设置背景（颜色，图片等）
创建文本域：
<html> <body> <form> 名： <input type="text" name="firstname"> <br /> 姓： <input type="text" name="lastname"> </form> </body> </html> type=password时是密码格式
type=checkbox是复选框
type=radio是单选框
type=“button” 是创建按钮
下拉列表（设置selected参数可设置预选值）：
<html> <body> <form> <select name="cars"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="fiat">Fiat</option> <option value="audi">Audi</option> </select> </form> </body> </html> 多行文本控件：
<textarea cols="30" rows="5"> 领先的 Web 技术教程 - 全部免费 在w3school，你可以找到你所需要的所有的网站建设教程。 从基础的HTML到XHTML，乃至进阶的XML、SQL、数据库、多媒体和WAP。 </textarea> 表单提交（表单处理文本框）：
<!DOCTYPE html> <html> <body> <form action="/demo/demo_form.asp"> First name:<br> <input type="text" name="firstname" value="Mickey"> <br> Last name:<br> <input type="text" name="lastname" value="Mouse"> <br><br> <input type="submit" value="Submit"> </form> <p>如果您点击提交，表单数据会被发送到名为 demo_form.asp 的页面。</p> </body> </html> 表单处理单选框，复选框，电子邮件的时候同理
插入图像：
<p> 一幅图像： <img src="/i/eg_mouse.jpg" width="128" height="128" /> </p> <p> 一幅动画图像： <img src="/i/eg_cute.gif" width="50" height="50" /> </p> <p>请注意，插入动画图像的语法与插入普通图像的语法没有区别。</p> 插入背景图像：
<body background="/i/eg_background.jpg"> 通过改变 img 标签的 “height” 和 “width” 属性的值，您可以放大或缩小图像。
为图片显示替换文本：
<img src="/i/eg_goleft123.gif" alt="向左转" /> 插入脚本：
<html> <body> <script type="text/javascript"> document.write("<h1>Hello World!</h1>") </script> </body> </html>