HTML代码-1

<!DOCTYPE html><!-- 告诉浏览器这是html文档-->
<html lang="en"><!-- lang=“en” 的作用是声明这个文档的内容所使用的语言是英文,如果想要改成中文简体,将en改成zh-Hans-->
<head> <!-- head里面的内容是文档使用的标题集,文档的样式-->
    <meta charset="utf-8"><!--用来设置文档所使用的字符集为utf-8--><!--UTF-8是绝大部分编辑默认的字符集 -->
    <title>ZzkTxdy</title><!--将文档在浏览器的标签栏的名字改为ZzkTxdy-->
</head>
<body>
    欢迎观看:<a href="http://php.cn">PHP中文网</a><!--链接标签-->
    <!--文本元素:段落<p>,标题<h1~h6>,格式化<pre>-->
    <h1 style="color:red;">ZzkTql</h1><!--标题元素,其中style="color:red;"可以设置标题颜色-->
    <h2>ZzkTql</h2>
    <h3>ZzkTql</h3>
    <h4>ZzkTql</h4>
    <h5>ZzkTql</h5>
    <h6>ZzkTql</h6>
    <p>
        HTML5<!--依然只在同一行显示-->
        是下一代
        HTML标准
    </p><!--<p>是典型的块元素标签,独占一行显示-->
    
    <p>
        春晓
        春眠不觉晓,
        处处闻啼鸟。
        夜来风雨声,
        花落知多少。
    </p>
    <!--将HTML文档中的内容原样输出特别适合代码等,需要格式化输出数据~~,用<pre标签实现>-->
    <pre style="font-size: large;"><!--可以设置字体大小-->
        春晓
        春眠不觉晓,
        处处闻啼鸟。
        夜来风雨声,
        花落知多少。
    </pre>
    <!--下面这些是语义标签-->
    <!--时间文本用<time>标签包装-->
    <!--地点文本用<address>标签包装-->
      <p>今天下午<time>4点到6点</time>  <address>在小会议室开会</address>~~ </p>

    <!--del元素给出删除线-->
    <p>苹果MacBook pro笔记本原价:<del>13999元</del>,现价:9999元</p>
    <!--ins元素给出下划线-->
    <!--u元素也可以给出下划线-->
    <!--<ins>和<u>标签内容展示效果相同,语义不同-->
    <p>PHP中文网是一个<ins>永久免费</ins>的学习平台</p>
    <p>PHP中文网是一个<u>永久免费</u>的学习平台</p>
    <!--strong元素可以给出加粗效果和强调语义-->
    <!--b元素也可以给出加粗效果,但是并没有特殊含义。推荐使用strong-->
    <p>中国强烈<strong>反对韩国部署萨德</strong>反导系统</p>
    <p>中国强烈<b>反对韩国部署萨德</b>反导系统</p>
    <!--em也起强调作用,但是强调的内容将以斜体的内容显示-->
    <!--i没有强调作用,但是会给标记的内容给出斜体效果-->
    <p>中国强烈<em>反对韩国部署萨德</em>反导系统</p>
    <p>中国强烈<i>反对韩国部署萨德</i>反导系统</p>
    <!--mark会给出所标记的内容高亮显示-->
    <p>我爱学习,<mark>学习使我快乐</mark></p>
    <p>我爱学习,<mark style="color: blue;">学习使我快乐</mark></p><!--这个只会是字体变为蓝色-->
    <!--code用来包装文档中的代码片段-->
    <p>
        #include<iostream>
        #include<cstdio>
          using namespace std;
            int main()
            {
                printf("Hello Vscode");
                return 0;
            }
    </p>
    <code>
        #include<iostream>
            #include<cstdio>
              using namespace std;
                int main()
                {
                    printf("Hello Vscode");
                    return 0;
                }
    </code>
    <!--pre和code通常是成对出现的-->
    <pre>
        <code>
            #include<iostream>
                #include<cstdio>
                  using namespace std;
                    int main()
                    {
                        printf("Hello Vscode");
                        return 0;
                    }
        </code>
    </pre>
    <!--表格元素<table>-->
    <!--表头单元格用th表示,默认是加粗-->
    <!--标题<caption>,头部<thead>,主体<tbody>,底部<tfoot>-->
     <table border="1" cellspacing="0" cellpadding="5">
         <!--border给单元格加上边框,cellspacing设置单元格之间的间距,cellpadding设置单元格的大小-->
         <caption>江湖精英班成绩表</caption>
         <thead>
               <tr>
                    <th>姓名</th>
                    <th>PHP</th>
                    <th>Python</th>
                    <th>Java</th>
               </tr>
         </thead>
         <tbody>
                <tr>
                    <td colspan="2"  rowspan="2">郭靖</td><!--既执行跨行操作又执行跨列操作-->
                    <!--<td>90</td>-->
                    <td>84</td>
                    <td>89</td>
                </tr>
                <tr>
                    <!--<td>洪七</td>-->
                    <!--<td>76</td>-->
                    <td>69</td>
                    <td>93</td>
                </tr>
                <tr>
                    <td style="color:red">杨康</td><!--设置字体颜色-->
                    <td>68</td>
                    <td>79</td>
                    <td>43</td>
                </tr>
                <tr>
                    <td>黄蓉</td>
                    <td>99</td>
                    <td>98</td>
                    <td>95</td>
                </tr>
                <tr>
                    <td>欧阳锋</td>
                    <td>87</td>
                    <td>74</td>
                    <td>96</td>
                </tr>
         </tbody>
         <tfoot>
                <td colspan="2">平均成绩</td><!--执行跨列操作-->
                <!--<td>84</td>-->
                <td>80</td>
                <td>83</td>
         </tfoot>
     </table>
     <!--如果想在网页上显示图片,应该使用<img>标签-->
     <!--使用alt属性,可以给图像添加一些说明性的文字。注:alt属性必须设置,请给予足够重视-->
     <img src="image/1.jpg" width="300" alt="Everything is possible!"><!--width和height设置其中一个即可,另一个会等比缩放的-->
     <!--有序列表和无序列表-->
     <!--ol中start可以设置起始序列号-->
     <ol start="6">
        <li>好好学习</li>
        <li>天天向上</li>
        <li>早睡早起</li>
        <li>准时吃饭</li>
     </ol>
     <br />
     <!--如果想将有序列表逆序排列的话在ol中加入reversed属性即可-->
     <!--reversed和start不能同时使用-->
     <!--value可以设置某个列表项的序号,这时它会按照设置顺序影响下面的列表项序号-->
     <ol reversed >
        <li>好好学习</li>
        <li>天天向上</li>
        <li value="4">早睡早起</li>
        <li>准时吃饭</li>
    </ol>
    <!--无序列表-->
    <ul>
        <li>好好学习</li>
        <li>天天向上</li>
        <li>早睡早起</li>
        <li>准时吃饭</li>
    </ul>
    <!--描述列表三对标签:<dl><dt><dd>-->
        <h2>PHP中文网</h2>
        <dl>
            <dt>服务对象:</dt>
            <dd>web开发新人,开发者以及爱好者。</dd>
            <dt>服务宗旨:</dt>
            <dd>打造国内领先的一站式永久免费学习的学习平台</dd>
        </dl>
    </body>
</html>

HTML代码-1

上一篇:mac 用nettop监听网络流量的方法


下一篇:HTML基础学习:表格