新闻页面主要由新闻的标题、新闻的内容、照片和视频等组成。
列表标签
新闻页面主要由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>
最后的成果展示：
在此基础上可以加上对应新闻的图片和视频等，让其更加的丰富，还可以加上一些超链接，让其进行跳转，同时也可以对它进行布局，让它更加的美观。
