SDKD Web作业(一) HTML 例程调试

html文件的基本结构

HTML， 超文本标记语言， 在该语言中，一个很重要的概念就是标签，例如像<head></head>就是一对标签，HTML的标签分为单标签和双标签两种

下面是一段最简单的HTML页面

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>我的第一个标题</title>
</head>

<body>
    <h1>我的第一个标题</h1>
    <p>我的第一个段落。</p>
</body>

</html>

运行效果如图

HTML基础

元素

开始标签 元素内容 结束标签
<p> 这是一个段落 </p>
<a href="index.html"> 这是一个链接 </a>
<br> 换行
<img src="/images/pulpit.jpg"> (图片)

上述示例中的标签不都是一对标签， 例如<br>就是单标签，这类标签应该写成<br />更为合适，这是关闭空元素的正确方法，HTML、XHTML 和 XML 都接受这种方式。

例程

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>我的第一个标题</title>
</head>

<body>
    <h1>我的第一个标题</h1>
    <p>我的第一个段落</p>
    <a href="index.html">我的第一个链接</a>

    <p>我的博客头像</p>
    <img src="https://img2018.cnblogs.com/blog/1542026/201909/1542026-20190908154321863-269909003.png">
</body>

</html>

运行效果如图

元素的属性

像上述的示例中 <a>标签就具有一个href属性，代表了超链接指向的地址<img>标签使用src属性指向了图片地址，此外<img>还有ALT， width， height等属性

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>我的第一个标题</title>
</head>

<body>
    <h1>我的第一个标题</h1>
    <p>我的第一个段落</p>
    <a href="index.html">我的第一个链接</a>

    <p>我的博客头像</p>
    <img src="https://img2018.cnblogs.com/blog/1542026/201909/1542026-20190908154321863-269909003.png" height="100"
        width="100">
    <img src="https://img2018.cnblogs.com/blog/1542026/201909/1542026-20190908154321863-269909003.png" height="200"
        width="200">
    <img src="https://img2018.cnblogs.com/blog/1542026/201909/1542026-20190908154321863-269909003.png" height="300"
        width="300">
</body>

</html>

运行效果如图

这里仅仅举例说明HTML的元素具有属性的特点

文本

这一部分主要是实践一下，HTML相关的标题，表格，水平线，这类的文本型内容

标题

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>我的第一个标题</title>
</head>

<body>
    <h1>我的第一个标题</h1>
    <h2>我的第一个标题</h2>
    <h3>我的第一个标题</h3>
    <h4>我的第一个标题</h4>
    <h5>我的第一个标题</h5>
    <h6>我的第一个标题</h6>
    <p>我的第一个段落</p>
    <a href="index.html">我的第一个链接</a>

    <p>我的博客头像</p>
    <img src="https://img2018.cnblogs.com/blog/1542026/201909/1542026-20190908154321863-269909003.png" height="100"
        width="100">
    <img src="https://img2018.cnblogs.com/blog/1542026/201909/1542026-20190908154321863-269909003.png" height="200"
        width="200">
    <img src="https://img2018.cnblogs.com/blog/1542026/201909/1542026-20190908154321863-269909003.png" height="300"
        width="300">
</body>

</html>

运行效果如图

段落&水平线

<hr>是水平线的标签，是单标签，<p></p>是段落标签

<p>这是一个段落。</p>
<hr>
<p>这是一个段落。</p>
<hr>
<p>这是一个段落。</p>

运行效果如图

表格

表格由 <table> 标签来定义,由<tr>标签来定义行,由<td>标签来定义单元格,单元格内容可以包含文本、图片、列表、段落、表单、水平线、表格等等。border属性来确定表格是否具有边框

<table border="0">
        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
        </tr>
        <tr>
            <td>row 1, cell 1</td>
            <td>row 1, cell 2</td>
        </tr>
        <tr>
            <td>row 2, cell 1</td>
            <td>row 2, cell 2</td>
        </tr>
    </table>

    <table border="1">
        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
        </tr>
        <tr>
            <td>row 1, cell 1</td>
            <td>row 1, cell 2</td>
        </tr>
        <tr>
            <td>row 2, cell 1</td>
            <td>row 2, cell 2</td>
        </tr>
    </table>

运行效果如图

HTML其他部分

注释

<!-- 这是一段注释不会显示在网页里 -->
<p> 这不是一段注释会显示在网页里 </p>

运行效果如图

可以在这一区域放置的标签有<title>, <style>, <meta>, <link>, <script>, <noscript>, <base>

title标签

<title>我的第二个标题</title>

运行效果如图

style标签

<style type="text/css">
        h1 {
            background-color: yellow
        }

        p {
            color: blue
        }
</style>

运行效果如图

脚本

html中可以使用script标签,执行js脚本

 	<p>
        JavaScript 能够直接写入 HTML 输出流中：
    </p>
    <script>
        document.write("<h1>这是一个标题</h1>");
        document.write("<p>这是一个段落。</p>");
    </script>
    <p>
        您只能在 HTML 输出流中使用 <strong>document.write</strong>。
        如果您在文档已加载后使用它（比如在函数中），会覆盖整个文档。
    </p>

运行效果如图

总结

以上用到的所有源码

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>我的第二个标题</title>
  <!--  <style type="text/css">
        h1 {
            background-color: yellow
        }

        p {
            color: blue
        }
    </style>
    -->
</head>

<body>

    <p>
        JavaScript 能够直接写入 HTML 输出流中：
    </p>
    <script>
        document.write("<h1>这是一个标题</h1>");
        document.write("<p>这是一个段落。</p>");
    </script>
    <p>
        您只能在 HTML 输出流中使用 <strong>document.write</strong>。
        如果您在文档已加载后使用它（比如在函数中），会覆盖整个文档。
    </p>

    <!-- 这是一段注释不会显示在网页里 -->
    <p> 这不是一段注释会显示在网页里 </p>

    <table border="0">
        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
        </tr>
        <tr>
            <td>row 1, cell 1</td>
            <td>row 1, cell 2</td>
        </tr>
        <tr>
            <td>row 2, cell 1</td>
            <td>row 2, cell 2</td>
        </tr>
    </table>

    <table border="1">
        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
        </tr>
        <tr>
            <td>row 1, cell 1</td>
            <td>row 1, cell 2</td>
        </tr>
        <tr>
            <td>row 2, cell 1</td>
            <td>row 2, cell 2</td>
        </tr>
    </table>

    <p>这是一个段落。</p>
    <hr>
    <p>这是俩个段落。</p>
    <hr>
    <p>这是仨个段落。</p>

    <h1>我的第一个标题</h1>
    <h2>我的第一个标题</h2>
    <h3>我的第一个标题</h3>
    <h4>我的第一个标题</h4>
    <h5>我的第一个标题</h5>
    <h6>我的第一个标题</h6>
    <p>我的第一个段落</p>
    <a href="index.html">我的第一个链接</a>

    <p>我的博客头像</p>
    <img src="https://img2018.cnblogs.com/blog/1542026/201909/1542026-20190908154321863-269909003.png" height="100"
        width="100">
    <img src="https://img2018.cnblogs.com/blog/1542026/201909/1542026-20190908154321863-269909003.png" height="200"
        width="200">
    <img src="https://img2018.cnblogs.com/blog/1542026/201909/1542026-20190908154321863-269909003.png" height="300"
        width="300">
</body>

</html>
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/YY666/p/12905135.html