html

下面来看一些高级技巧

视频video

video的标签是

1

<video src="xxx" controls width=""></video>

同样的指明路径就可以添加进来，初次之外还需要添加播放组件和进度条这些功能

音频 audio

音频的标签

1

<audio src= "XXX"></audio>

正文

正文的标签是<p>,使用正文可以包裹一些文字

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73


<!DOCTYPE html>
<!-- 超链接部分 -->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>焦点访谈：中国底气 新思想夯实大国粮仓</title>

    <!-- <style>
        h1 {
            color: blue;
        }

    </style> -->
    <link rel="style" href="../css/news.css"/>
    <style>
        span {
            color: red;
        }
        .time {
            color: black;
        }
        #f {
            color: black;
        }
        a {
            color: red;
            text-decoration: none
        }
    </style>

</head>
<body>
    <img src="../img/news_logo.png" /> 新浪政务 > 正文
    <!-- <h1 style="color: red;"> 焦点访谈：中国底气 新思想夯实大国粮仓 </h1> -->
    <h1> 
        焦点访谈：中国底气 新思想夯实大国粮仓 
    </h1>
    <hr/>
    <span class="time">
        2023年03月02日 21:50 
    </span>
    <span id="f"> 
        <a href="baidu.com"> 央视网 </a> 
    </span> 
    <hr/>
    <!-- 添加视频 -->
    <video src="../video/1.mp4" controls width="900"></video>

     <!-- 添加音频 -->
    <audio src="../audio/1.mp3"></audio>
    <p>
    <strong>央视网消息</strong> （焦点访谈）：党的十八大以来，以习近平同志为核心的党中央始终把解决粮食安全问题作为治国理政的头等大事，重农抓粮一系列政策举措有力有效，我国粮食产量站稳1.3万亿斤台阶，实现谷物基本自给、口粮绝对安全。我们把饭碗牢牢端在自己手中，为保障经济社会发展提供了坚实支撑，为应对各种风险挑战赢得了主动。连续八年1.3万亿斤，这个沉甸甸的数据是如何取得的呢？
    </p>

    <p>
    人勤春来早，春耕农事忙。立春之后，由南到北，我国春耕春管工作陆续展开，春天的田野处处生机盎然。
    </p>

    <img src="../img/1.jpg">

    <p>
        今年，我国启动了新一轮千亿斤粮食产能提升行动，这是一个新的起点。2015年以来，我国粮食产量连续8年稳定在1.3万亿斤以上，人均粮食占有量始终稳稳高于国际公认的400公斤粮食安全线。从十年前的约12200亿斤到2022年的约13700亿斤，粮食产量提高了1500亿斤。
    </p>

    <img src="../img/2.jpg">

    <p>
        中国式现代化一个重要的中国特色是人口规模巨大的现代化。我们粮食生产的发展，意味着我们要立足国内，解决14亿多人吃饭的问题。仓廪实，天下安。保障粮食安全是一个永恒的课题，任何时候都不能放松。在以习近平同志为核心的党中央坚强领导下，亿万中国人民辛勤耕耘、不懈奋斗，我们就一定能够牢牢守住粮食安全这一“国之大者”，把中国人的饭碗牢牢端在自己手中，夯实中国式现代化基础。
    </p>
    
</body>
</html>

其中，加黑加粗的字体可以使用strong标签和b标签来进行表示。

表格

表格的标签是table开头，在中间，每一行的标签是tr，行内数据是td,如果是第一行，那么可以使用th来进行加粗显示

例如，以下表格

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格</title>
</head>
<body>
    <table border="1px" cellspacing="0" width="600px">
        <!-- 表格的第一个头可以使用th -->
         <tr> 单元行
            <th> 行内内容
                序号
            </th>
            <th>
                品牌logo
            </th>
            <th>
                品牌名称
            </th>
            <th>
                企业名称
            </th>
         </tr>
         
    </table>
</body>
</html>

其样式结果如下

可以把这个表格更加完善一下

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格</title>
    <style>
        td {
            text-align: center;
        }
    </style>
</head>
<body>
    <table border="1px" cellspacing="0" width="600px">
        <!-- 表格的第一个头可以使用th -->
         <tr>
            <th>
                序号
            </th>
            <th>
                品牌logo
            </th>
            <th>
                品牌名称
            </th>
            <th>
                企业名称
            </th>
         </tr>

         <tr>
            <td>
                1
            </td>
            <!-- logo -->
             <td>
                <img src="../img/huawei.jpg" width="100">
             </td>
             <td>
                华为
             </td>
             <td>
                华为技术有限公司
             </td>
         </tr>
         <tr>
            <td>
                2
            </td>
            <td>
                <img src="../img/alibaba.jpg" width="100">
            </td>
            <td>
                阿里
            </td>
            <td>
                阿里巴巴集团有限公司
            </td>
         </tr>
    </table>
</body>
</html>

为了更加美观，我们可以给这个单元格加入居中效果

1
2
3
4
5


<style>
        td {
            text-align: center;
        }
</style>

表单

表单是以form的形式开头，form里面有两个参数，一个是action，一个是method这两个参数，action指向的是提交的url，如果不指定，那么默认就是本机;method一个是get，另一个就是post方法，get会把提交的参数全部放到url里面，而post是直接以原始数据的形式进行提交。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=form, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="", method="get">
        用户名：<input type="text" name="userName">
        年龄：<input type="text" name="age">
        <input type="submit" value="提交">
    </form>
</body>
</html>

输入条和提交条都是以input标签的形式存在，需要显示使用type来指定他们的提交类型。

总结

视频可以使用标签video来进行插入
音频可以使用audio来进行插入
正文是使用p标签来进行插入，在p包裹的标签内。同时可以使用text-indent来指定每一段的缩进尺寸
表格是一种特殊的样式
- 以table开始
- 每一行单元格可以使用tr来进行包裹
- 行中间，如果是第一行非数据元素，可以使用th(table head)来起到加大加粗剧中的样式
- 其它则可以使用td来进行包裹
表单是以form来进行书写的，action可以指向需要提交的url，method可以选择需要提交的方法。