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>

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