Web信息安全实践_2.1 HTML_2.2HTML重要元素

HTML（Hypertext Markup Language）：指定网页 静态内容的语言

• Hypertext：文本、多媒体、链接...
• Markup：可以用来标识文档结构和内容类型的特殊符号，即标签

2.2HTML重要元素

标签

Anchors

•  使用标签 <a> 来设置，可以链接到网络上的任意文件
•  href 属性来描述链接的地址， name ：锚名称

<a href="#001"> 点我跳转到页面底部 </a> <br>
<a href="http://www.baidu.com"> 点我跳转到百度 </a>

<img> 图片 

• 图片的属性
• 图像由 <img> 标签定义，没有闭合标签

• 源属性 src 的值是 URL 地址，存储图像的位置。

<img src="die1.gif"/>
<img height=100px src="http://www.bank.com/img/logo.jpg" />

　　

 <form> 表单

• <form> 用于为用户输入创建表单
• action ：指定将表单数据发送到何处
• method ：指定提交方法
• 包含 input 元素，如文本字段、复选框、单选框、提交按钮
• 包含 textarea 、 fieldset 、 legend 和 label 元素

<form method="get" action="http://www.attacker.com/welcome.php">    
    First name: <input type="text" name="firstname"><br>
    Last name: <input type="text" name="lastname"><br>
    Password: <input type="password" name="pwd"><br>
    <input type="radio" name="sex" value="male">Male<br>
    <input type="radio" name="sex" value="female">Female<br>
    <input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
    <input type="checkbox" name="vehicle" value="Car">I have a car <br>
    <input type="submit" value="Submit">
</form> 

<h1 align=center>
    Welcome
    <?php
    echo $_REQUEST['firstname'],'',$_REQUEST['lastname'],'!';
    ?>
</h1>

iframe

• 通过使用 iframe ，可以在同一个浏览器窗口中显示不止一个页面。
• iframe 语法
• <iframe src="URL"></iframe>
• height 和 width 属性用来定义 iframe 标签的高度与宽度 , 单位可以是属性或比例

<iframe src="https://next.xuetangx.com/"></iframe>

Div

•  <div> 元素用于文档布局
• div+css取代了使用表格定义布局

<div style=“text-align: center;”>
    <h2> News</h2>
    <p><a href=“budget.html”>Budget</a></p>
    <p><a href=“invest.html”>Investment</a></p>
</div>

• 把一些元素划分为一个块（一个整体）处理，本身不承载内容

<p>id = div-before</p>
<p>id = div-1</p>
<p>id = div-1a</p>
<p>Lorem ipsum dolor sit amet.</p>
<p>id = div-1b</p>
<p>Lorem ipsum dolor sit amet.</p>
<p>id = div-after</p>

<style type="text/css">
​
    #div-before, #div-after {
        background-color:#aee;
        color:#000;
        width:400px;
    }
​
    #div-1 {
        width:400px;
        background-color:#000;
        color:#fff;
    }  
​
    #div-1-padding {
        padding:20px;
    }
​
</style>
​
<div>
 
    <div id="div-before">  
        <p>id = div-before</p> 
    </div>
 
    <div id="div-1">
        <div id="div-1-padding">
            <p>id = div-1</p>
            <div id="div-1a">
                <p>id = div-1a</p>
                <p>Lorem ipsum dolor sit amet.</p>
            </div>
            <div id="div-1b">
                <p>id = div-1b</p>
                <p>Lorem ipsum dolor sit amet .</p>
            </div>
        </div>
    </div>
​
     <div id="div-after">  
        <p>id = div-after</p> 
    </div>
 
</div>

属性

• 属性在起始标签中使用
• 属性有三种类型
• 可选的属性：特定标签才有的属性
• 标准属性：所有标签都有： id, class, title, style, dir, lang
• 事件属性： onclick,ondblclick,onmousedown,onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup

<h1 style= "color:red; "onclick="alert('hello');">Hello,world!</h1>