订阅博客
收藏博客
微博分享
QQ空间分享

html入门,第一天

频道:前端 标签: 时间:2019年07月08日 浏览:75次 评论:0条
作者: 三只松果

html入门,第一天,练习和演示

各种标签和表格超链接等的使用

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
        .h{
        color: bisque;
        }
        .b{
        background-color: aliceblue;
        }
        .div1{
        background-image: url(10.jpg);
        height: 200px;
}
</style>

        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title></title>
<!-- <base href="http://qq.com" target="" /> --><!-- 设置默认值,当下面a标签的对应值为空时使用base里指定的值 -->
</head>
<body>
    <div>
    <h1 > hello world </h1>
    <h2 > hello world </h2>
    <h3 > hello world </h3>
    <h4 > hello world </h4>
    </div>
    <hr/>
    <p id="p1">啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</p>
    <p>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</p>
    <hr >
    <font size="8" color="red">你好世界</font><br>
    <b>粗体</b>&nbsp;<strong>粗体</strong><br>
    <i>斜体</i>&nbsp;<em>斜体</em><br>
    <s>删除线</s>&nbsp;<del>删除线</del><br>
    <u>下划线</u>&nbsp;<ins>下滑线</ins><br>
<hr >
    <a href="http://baidu.com" target="_blank"><img src="baidu.gif" width="100px" title="百度"></a><br>
    <a href="http://qq.com" target="_self" title="腾讯"><button  type="button">腾讯</button></a><br>
    <a href="helloworld.zip"><button type="button">下载</button></a><br>
    <a href="#p1"><button type="button">去到p1</button></a><br>
<hr >
    &lt;
    &gt;
    &copy;
    &reg;
    &divide;
    &deg;
    &plusmn;
    &times;
<hr >
<!-- type : square circle disc -->
    <ul type="circle">
    <li>列表一</li>
    </ul>
    <ul type="square">
    <li>列表二</li>
    </ul>
    <ul type="disc">
    <li>列表三</li>
    </ul>
<!-- type : 1 a B i I  start 表示从第几个开始 -->
    <ol type="i">
    <li>列表一</li>
    <li>列表二</li>
    <li>列表三</li>
    </ol>
    <ol type="A" start="6">
    <li>列表一</li>
    <li>列表二</li>
    <li>列表三</li>
    </ol>
    <ol type="I" start="5">
    <li>列表一</li>
    <li>列表二</li>
    <li>列表三</li>
    </ol>

<!-- 自定义列表 -->
<dl>
<dt>列表一</dt>
<dd>列表1</dd>
<dd>列表2</dd>
<dd>列表3</dd>
</dl>

<!-- 嵌套使用 -->
<ol type="I" start="5" >
<li><dl>
<dt>列表一</dt>
<dd>列表1</dd>
<dd>列表2</dd>
<dd>列表3</dd>
</dl></li>
<li><dl>
<dt>列表二</dt>
<dd>列表1</dd>
<dd>列表2</dd>
<dd>列表3</dd>
</dl></li>
<li><dl>
<dt>列表三</dt>
<dd>列表1</dd>
<dd>列表2</dd>
<dd>列表3</dd>
</dl></li>
</ol>
<hr >


</body>
</html>


演示:


hello world

hello world

hello world

hello world


啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊

啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊


你好世界
粗体 粗体
斜体 斜体
删除线 删除线
下划线 下滑线







< > &copy; &reg; &divide; &deg; &plusmn; &times;


  • 列表一

  • 列表二

  • 列表三

  1. 列表一

  2. 列表二

  3. 列表三

  1. 列表一

  2. 列表二

  3. 列表三

  1. 列表一

  2. 列表二

  3. 列表三

  • 列表一

  • 列表1

  • 列表2

  • 列表3


    • 列表一

    • 列表1

    • 列表2

    • 列表3


    • 列表二

    • 列表1

    • 列表2

    • 列表3


    • 列表三

    • 列表1

    • 列表2

    • 列表3


◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。