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

学不懂语言

于 2024-03-01 10:06:32 发布

阅读量1k

点赞数 4

文章标签：前端 html

本文链接：https://blog.csdn.net/ganli_lin/article/details/136383441

版权

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

列表标签

新闻页面主要由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>