首页 前端知识 如何用HTML写一个新闻页面(列表标签)

如何用HTML写一个新闻页面(列表标签)

2024-04-18 00:04:03 前端知识 前端哥 179 373 我要收藏

        新闻页面主要由新闻的标题、新闻的内容、照片和视频等组成。

列表标签

        新闻页面主要由HTML中的列表标签组成。列表标签主要由有序列表--ol、无序列表--ul和数据列表--dl三部分组成。

有序列表--ol

type 属性 -----表示设置序号的种类 ,默认值是数值1,也可以是a、A等。

start属性 ------序号开始的位置(只对序号种类是数字才有作用)。

reversed属性---- 反序。

代码:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ol type="1">
        <li>内容</li>
        <li>内容</li>
        <li>内容</li>
        <li>内容</li>
        <li>内容</li>
        <li>内容</li>
    </ol>
    <ol type="1" start="5">
        <li>内容</li>
        <li>内容</li>
        <li>内容</li>
        <li>内容</li>
        <li>内容</li>
        <li>内容</li>
    </ol>
    <ol type="1" start="6" reversed>
        <li>内容</li>
        <li>内容</li>
        <li>内容</li>
        <li>内容</li>
        <li>内容</li>
        <li>内容</li>
    </ol>
    <ol type="A">
        <li>内容</li>
        <li>内容</li>
        <li>内容</li>
        <li>内容</li>
        <li>内容</li>
        <li>内容</li>
    </ol>
</body>
</html>

无序列表 --ul

type属性 ----  disc(默认值 实心圆)

                     circle(空心圆)

                     square(实心方块)  

代码:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul type="circle">
        <li>内容</li>
        <li>内容</li>
        <li>内容</li>
        <li>内容</li>
        <li>内容</li>
        <li>内容</li>
    </ul>
    <ul type="disc">
        <li>内容</li>
        <li>内容</li>
        <li>内容</li>
        <li>内容</li>
        <li>内容</li>
        <li>内容</li>
    </ul>
    <ul type="square">
        <li>内容</li>
        <li>内容</li>
        <li>内容</li>
        <li>内容</li>
        <li>内容</li>
        <li>内容</li>
    </ul>
</body>
</html>
结果: 

 

数据列表 --dl

代码:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <dl>
        <dt>地方新闻</dt>
            <dd>内容</dd>
            <dd>内容</dd>
            <dd>内容</dd>
            <dd>内容</dd>
        <dt>国际新闻</dt>
            <dd>内容</dd>
            <dd>内容</dd>
            <dd>内容</dd>
            <dd>内容</dd>
        <dt>国内新闻</dt>
            <dd>内容</dd>
            <dd>内容</dd>
            <dd>内容</dd>
            <dd>内容</dd>
    </dl>  
</body>
</html>

        根据以上的内容可知,新闻页面大体就由列表标签组成,它可以组成新闻页面中最重要的部分--新闻标题和内容。

新闻标题和内容的代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h3>成都新闻</h3>
    <h5>
        <font color="silver">LOCAL NEWS</font>
    </h5>
    <hr>
    <ul>
        <ul type="disc">
            <li>内容一</li>
            <li>内容二</li>
            <li>内容三</li>
            <li>内容四</li>
            <li>内容五</li>
            <li>内容六</li>
            <li>内容七</li>
            <li>内容八</li>
    </ul>
</body>
</html>
结果: 

 

  多窗口框架 (内联框架)

        多窗口框架的作用就是可以在一个页面里出现不同的内容(一个页面展示多个窗口),像新闻页面里有不同种类的新闻,就可以使用多窗口框架,来进行分类。

framset 标签 -----不能和body标签连用

cols ----- 定义页面列的大小

rows ----- 定义页面行的大小

frameborder----- 显示每个窗口的边框

代码:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<frameset cols="30%,40%,30%" rows="40%,60%" frameborder="0">
    <frame src="C:\Users\86191\OneDrive\桌面\云计算-前端\代码\html\winter homeword 2.1.html"></frame>
    <frame src="C:\Users\86191\OneDrive\桌面\云计算-前端\代码\html\winter homework 2.html"></frame>
    <frame src="C:\Users\86191\OneDrive\桌面\云计算-前端\代码\html\winter homeword 2.2.html"></frame>
    <frame src="C:\Users\86191\OneDrive\桌面\云计算-前端\代码\html\winter homework 2.3.html"></frame>
    <frame src="C:\Users\86191\OneDrive\桌面\云计算-前端\代码\html\winter homework 2.4.html"></frame>
    <frame src="C:\Users\86191\OneDrive\桌面\云计算-前端\代码\html\winter homework 2.6.html"></frame>
</frameset>
</html>

 最后的成果展示:

 

        在此基础上可以加上对应新闻的图片和视频等,让其更加的丰富,还可以加上一些超链接,让其进行跳转,同时也可以对它进行布局,让它更加的美观。 

转载请注明出处或者链接地址:https://www.qianduange.cn//article/5154.html
标签
评论
发布的文章

XML与JSON的使用

2024-08-23 21:08:27

npm i 常见问题

2024-08-23 20:08:23

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!