一、前言
本篇章为javaweb的开端，也是第一篇综合案例，小编也是看着黑马程序员的视频对里面的知识点进行理解，然后自己找一个新浪微博网页看着做的，主要还是因为懒，不想去领黑马程序员的资料了。
小编任务javaweb和java有诸多共同之处，所以这两个一同进行更新，周期为15天。java可能会快一点，不过还是会同步更新的。小编尽量每天都将自己所学浓缩成综合案例的形式和大家见面的。大家可以试着自己找新浪新闻进行练习。
不知道大家能否找到，小编将网址放在下面了，以防万一。
新浪新闻
二、页面展示
三、页面创建思路
先把图片给读者们奉上
3.1新闻标题部分
HTML代码部分
<img src="image/新浪新闻1.png" ><a href="http://gov.sina.com.cn/" target="_self">新浪政务</a> >正文
<h1>第十五届夏季达沃斯论坛今天开幕 规模、场次、嘉宾数量均创新高</h1>
<hr>
<span id="time">2024年06月25日 02:04</span>
<a href="http://news.cctv.com">央视网</a>
<hr>注：img的地址是上述图片所处的路径
css代码部分
h1 {
color:#4D4F53
}
#time {
color:#968D92;
font-size: 13px;/*设置字体大小*/
}
a {
color:black;
text-decoration: none;/*设置文本为一个标准文本*/
}代码逐语句解析
html部分
1.<div id="center">
<div> 是HTML中的块级元素，用于创建一个容器。
id="center" 是该 <div> 元素的id属性，用于在CSS或JavaScript中引用该元素。
2.<img src="image/新浪新闻1.png">
<img> 标签用于插入图像。
src="image/新浪新闻1.png" 是图像文件的路径，相对于当前HTML文件的位置。
3.<a href="http://gov.sina.com.cn/" target="_self">新浪政务</a>
<a> 标签用于创建超链接。
href="http://gov.sina.com.cn/" 是链接的目标URL。
target="_self" 表示在当前窗口中打开链接。
文本内容为 "新浪政务"，作为超链接的可点击文本。
>正文
简单的文本内容，直接放在前面 <a> 标签后面，可能用于表示当前页面的位置或分类。
4.<h1>第十五届夏季达沃斯论坛今天开幕 规模、场次、嘉宾数量均创新高</h1>
<h1> 标签用于创建页面中的主标题。
文本内容为文章的标题。
5.<hr>
<hr> 标签用于创建水平分隔线，用来分隔不同部分的内容。
6.<span id="time">2024年06月25日 02:04</span>
<span> 标签用于对文档中的行内元素进行组合。
id="time" 是该 <span> 元素的id属性，可能用于后续的CSS样式或JavaScript操作。
文本内容为时间信息。
7.<a href="http://news.cctv.com">央视网</a>
另一个 <a> 标签用于创建超链接。
href="http://news.cctv.com" 是链接的目标URL。
文本内容为 "央视网"，作为超链接的可点击文本。
8.<hr>
另一个 <hr> 标签，创建另一条水平分隔线，用于结尾的分隔。
css部分
1.h1 { color: #4D4F53; }
h1 是选择器，表示选择所有 <h1> 标签。
2.color: #4D4F53;
设置标题文字颜色为灰色（十六进制颜色码 #4D4F53）。
3.#time { color: #968D92; font-size: 13px; }
#time 是选择器，表示选择具有 id="time" 的元素（在前面的HTML代码中，<span id="time">）。
4.color: #968D92;
设置时间文本的颜色为浅灰色（十六进制颜色码 #968D92）。
5.font-size: 13px;
设置时间文本的字体大小为 13像素。
6.a { color: black; text-decoration: none; }
a 是选择器，表示选择所有 <a> 标签（超链接）。
7.color: black;
设置超链接文本的颜色为黑色。
8.text-decoration: none;
设置超链接文本没有下划线。
3.2新闻正文部分
因为该新闻没有图片，所以小编就简单找了张
HTML部分
<img src="./image/th.png">
<p>每经记者 蔡鼎 每经编辑 高涵</p>
<p>今天（6月25日）至27日，世界经济论坛第十五届新领军者年会（下称“夏季达沃斯论坛”或“年会”）将在海滨城市辽宁大连举办。本届年会的规模、场次、嘉宾数量都再创新高——设计了200场左右的活动，有近50场会议网络直播，截至目前，已有近80个国家和地区的1600多位商界、政界、学术界、社会组织和国际组织嘉宾注册参会。
国家发改委国际司司长潘江表示，本届年会以“未来增长的新前沿”为主题，旨在汇聚全球政、商、学、媒等各界嘉宾，通过促进沟通对话、团结合作力量、凝聚发展共识，共同探寻世界经济增长的新动能新路径。
本届年会，每日经济新闻也已派出记者团队前往大连现场，他们将以专业且独特的视角，与年会嘉宾共话人工智能、全球经济、气候及能源等当下热点话题。</p>
<p>国家发改委国际司司长潘江表示，本届年会以“未来增长的新前沿”为主题，旨在汇聚全球政、商、学、媒等各界嘉宾，通过促进沟通对话、团结合作力量、凝聚发展共识，共同探寻世界经济增长的新动能新路径。</p>
<p>本届年会，每日经济新闻也已派出记者团队前往大连现场，他们将以专业且独特的视角，与年会嘉宾共话人工智能、全球经济、气候及能源等当下热点话题。</p>
<p><b>1600多位嘉宾齐聚</b></p>
<p>自2007年以来，夏季达沃斯论坛轮流在大连、天津两个城市举办。今年也是时隔5年，夏季达沃斯论坛重回辽宁，第八次在大连举办。</p>
<p>世界经济论坛大中华区主席陈黎明表示，相比5年前，世界发生了深刻变化，一方面，气候变化、地缘冲突、贸易摩擦等引发了一系列风险及影响；另一方面，人工智能、生物技术、量子计算、能源转型等获得了快速发展。在此背景下，人类应当如何更好地合作，共同面对这个多种变革交织的时代，是当今世界至关重要的话题。</p>
<p>“亚洲是全球经济增长引擎，在全球事务中扮演着非常重要的角色，在科技创新、环境保护、社会治理、国际热点问题等方面，都展现出了强大的实力和影响力。在此举办会议是共同推动创新潜力的良好契机，并为亚洲乃至世界的可持续经济发展势头奠定基础。”陈黎明表示，欢迎更多来自各国的代表共同推动全球合作与创新。</p>
<p>《每日经济新闻》记者梳理发现，已有近80个国家和地区的1600多位商界、政界、学术界、社会组织和国际组织嘉宾注册参会。其中，注册参会的有100多位各国政要，900多位商界嘉宾，涵盖制造业、能源、消费、金融业等多个行业。</p>
<p><b>共话“未来增长的新前沿”</b></p>
<p>世界经济论坛是以研究和探讨世界经济领域存在的问题、促进国际经济合作与交流为宗旨的非官方国际性机构。</p>
<p>当今国际形势纷繁复杂，全球经济复苏乏力，气候变化、粮食和能源安全等全球性挑战不断增加。在此背景下，本届夏季达沃斯论坛的举办备受关注。</p>
<p>“当前世界正在经历深刻变革，论坛的召开具有重要意义。”陈黎明表示，发展是解决一切问题的关键，本届论坛将汇聚各方共识，围绕人工智能、生物技术、量子计算、能源转型等重要领域，推动世界经济稳步迈向更加平等、更可持续和更有韧性的未来。</p>
<p>本届论坛将围绕“未来增长的新前沿”主题举办200场左右活动。具体来看，在“未来增长的新前沿”会议主题下，将围绕六大主题展开，包括全球新经济，中国和世界，人工智能时代的企业家精神，产业新前沿，对人进行投资，气候、自然与能源的相互联系。其中，重点场次包括“在充满竞争的世界格局中探索合作之道”“中国经济展望”“在复杂风险中寻求增长”“重新布局全球贸易路径”“应对全球金融系统碎片化”等话题。</p>
<p>与会嘉宾将围绕各个议题深入交流，为激发世界经济发展新动能献计献策。比如，在“全球新经济”议题中，来宾将探讨平衡技术加速和包容性增长等优先事项，并探讨如何协调财政、贸易和产业战略，在抑制通胀的同时加快全球经济的速度；在“中国和世界”议题中，来宾将讨论中国不断扩大的全球技术足迹和不断增长的支出；在“人工智能时代的企业家精神”议题中，各方将讨论生成式人工智能的快速发展、多样化应用、内在风险和机遇，同时强调与社会主流价值观一致的人工智能相关治理的重要性。</p>
<p id="plast">责任编辑：刘德宾</p>
<p><b>关键字 </b>: <a href="https://www.sina.com.cn/">人工智能</a></p>css部分
p {
text-indent: 35px;/* 设置首行缩进 */
line-height: 30px;
}
#plast {
text-align: right;/* 对齐方式 */
}
#center {
width: 65%;
margin: 0 auto;
}代码逐语句解析
p是选择器，表示选择所有<p>标签（段落）。text-indent: 35px;设置段落的首行缩进为 35 像素。line-height: 30px;设置段落的行高为 30 像素。#plast是选择器，表示选择具有id="plast"的元素。text-align: right;设置该元素内文本内容右对齐。#center是选择器，表示选择具有id="center"的元素。width: 65%;设置该元素的宽度为其父容器宽度的65%。margin: 0 auto;设置元素在水平方向上自动居中，上下边距为0
四、HTML、css全套代码展示
HTML代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>新浪微博</title>
<link rel="stylesheet" href="./css/01.新浪微博.css">
</head>
<body>
<div id="center">
<img src="image/新浪新闻1.png" ><a href="http://gov.sina.com.cn/" target="_self">新浪政务</a> >正文
<h1>第十五届夏季达沃斯论坛今天开幕 规模、场次、嘉宾数量均创新高</h1>
<hr>
<span id="time">2024年06月25日 02:04</span>
<a href="http://news.cctv.com">央视网</a>
<hr>
<img src="./image/th.png">
<p>每经记者 蔡鼎 每经编辑 高涵</p>
<p>今天（6月25日）至27日，世界经济论坛第十五届新领军者年会（下称“夏季达沃斯论坛”或“年会”）将在海滨城市辽宁大连举办。本届年会的规模、场次、嘉宾数量都再创新高——设计了200场左右的活动，有近50场会议网络直播，截至目前，已有近80个国家和地区的1600多位商界、政界、学术界、社会组织和国际组织嘉宾注册参会。
国家发改委国际司司长潘江表示，本届年会以“未来增长的新前沿”为主题，旨在汇聚全球政、商、学、媒等各界嘉宾，通过促进沟通对话、团结合作力量、凝聚发展共识，共同探寻世界经济增长的新动能新路径。
本届年会，每日经济新闻也已派出记者团队前往大连现场，他们将以专业且独特的视角，与年会嘉宾共话人工智能、全球经济、气候及能源等当下热点话题。</p>
<p>国家发改委国际司司长潘江表示，本届年会以“未来增长的新前沿”为主题，旨在汇聚全球政、商、学、媒等各界嘉宾，通过促进沟通对话、团结合作力量、凝聚发展共识，共同探寻世界经济增长的新动能新路径。</p>
<p>本届年会，每日经济新闻也已派出记者团队前往大连现场，他们将以专业且独特的视角，与年会嘉宾共话人工智能、全球经济、气候及能源等当下热点话题。</p>
<p><b>1600多位嘉宾齐聚</b></p>
<p>自2007年以来，夏季达沃斯论坛轮流在大连、天津两个城市举办。今年也是时隔5年，夏季达沃斯论坛重回辽宁，第八次在大连举办。</p>
<p>世界经济论坛大中华区主席陈黎明表示，相比5年前，世界发生了深刻变化，一方面，气候变化、地缘冲突、贸易摩擦等引发了一系列风险及影响；另一方面，人工智能、生物技术、量子计算、能源转型等获得了快速发展。在此背景下，人类应当如何更好地合作，共同面对这个多种变革交织的时代，是当今世界至关重要的话题。</p>
<p>“亚洲是全球经济增长引擎，在全球事务中扮演着非常重要的角色，在科技创新、环境保护、社会治理、国际热点问题等方面，都展现出了强大的实力和影响力。在此举办会议是共同推动创新潜力的良好契机，并为亚洲乃至世界的可持续经济发展势头奠定基础。”陈黎明表示，欢迎更多来自各国的代表共同推动全球合作与创新。</p>
<p>《每日经济新闻》记者梳理发现，已有近80个国家和地区的1600多位商界、政界、学术界、社会组织和国际组织嘉宾注册参会。其中，注册参会的有100多位各国政要，900多位商界嘉宾，涵盖制造业、能源、消费、金融业等多个行业。</p>
<p><b>共话“未来增长的新前沿”</b></p>
<p>世界经济论坛是以研究和探讨世界经济领域存在的问题、促进国际经济合作与交流为宗旨的非官方国际性机构。</p>
<p>当今国际形势纷繁复杂，全球经济复苏乏力，气候变化、粮食和能源安全等全球性挑战不断增加。在此背景下，本届夏季达沃斯论坛的举办备受关注。</p>
<p>“当前世界正在经历深刻变革，论坛的召开具有重要意义。”陈黎明表示，发展是解决一切问题的关键，本届论坛将汇聚各方共识，围绕人工智能、生物技术、量子计算、能源转型等重要领域，推动世界经济稳步迈向更加平等、更可持续和更有韧性的未来。</p>
<p>本届论坛将围绕“未来增长的新前沿”主题举办200场左右活动。具体来看，在“未来增长的新前沿”会议主题下，将围绕六大主题展开，包括全球新经济，中国和世界，人工智能时代的企业家精神，产业新前沿，对人进行投资，气候、自然与能源的相互联系。其中，重点场次包括“在充满竞争的世界格局中探索合作之道”“中国经济展望”“在复杂风险中寻求增长”“重新布局全球贸易路径”“应对全球金融系统碎片化”等话题。</p>
<p>与会嘉宾将围绕各个议题深入交流，为激发世界经济发展新动能献计献策。比如，在“全球新经济”议题中，来宾将探讨平衡技术加速和包容性增长等优先事项，并探讨如何协调财政、贸易和产业战略，在抑制通胀的同时加快全球经济的速度；在“中国和世界”议题中，来宾将讨论中国不断扩大的全球技术足迹和不断增长的支出；在“人工智能时代的企业家精神”议题中，各方将讨论生成式人工智能的快速发展、多样化应用、内在风险和机遇，同时强调与社会主流价值观一致的人工智能相关治理的重要性。</p>
<p id="plast">责任编辑：刘德宾</p>
<p><b>关键字 </b>: <a href="https://www.sina.com.cn/">人工智能</a></p>
</div>
</body>
</html>css代码
h1 {
color:#4D4F53
}
#time {
color:#968D92;
font-size: 13px;/*设置字体大小*/
}
a {
color:black;
text-decoration: none;/*设置文本为一个标准文本*/
}
p {
text-indent: 35px;/* 设置首行缩进 */
line-height: 30px;
}
#plast {
text-align: right;/* 对齐方式 */
}
#center {
width: 65%;
margin: 0 auto;
}五、总结
刚开始学的都比较简单，不知道能否坚持下去，自己定的目标是15天，希望能够不断坚持吧。没有任何一门编程语言是困难的，困难的不过是坚持！！！
大家的点赞收藏就是小编持续更新下去的动力。
