javaweb学习day1《HTML篇》--新浪微博（前端页面的创建思路及其HTML、css代码详解）

一、前言

本篇章为javaweb的开端，也是第一篇综合案例，小编也是看着黑马程序员的视频对里面的知识点进行理解，然后自己找一个新浪微博网页看着做的，主要还是因为懒，不想去领黑马程序员的资料了。

小编任务javaweb和java有诸多共同之处，所以这两个一同进行更新，周期为15天。java可能会快一点，不过还是会同步更新的。小编尽量每天都将自己所学浓缩成综合案例的形式和大家见面的。大家可以试着自己找新浪新闻进行练习。

不知道大家能否找到，小编将网址放在下面了，以防万一。

新浪新闻

二、页面展示

三、页面创建思路

先把图片给读者们奉上

3.1新闻标题部分

HTML代码部分

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代码部分

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部分

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部分

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代码

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代码

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天，希望能够不断坚持吧。没有任何一门编程语言是困难的，困难的不过是坚持！！！

大家的点赞收藏就是小编持续更新下去的动力。