Web安全工程师入门
合天网安实验室课程2周训练
第一天
HTML基础
HTML中100个实例
链接: 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>