码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2020-01-27 12:35:09      阅读:78      评论:0      收藏:0      [点我收藏+]

标签:color   class   action   设置   radio   ips   创建   round   ngx   

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>

 

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

标签:color   class   action   设置   radio   ips   创建   round   ngx   

原文地址:https://www.cnblogs.com/tianjiazhen/p/12235532.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!