• Web开发 前端介绍 HTML CSS （2）

    Web开发 前端介绍 HTML CSS-CSDN博客

    2.3.2 新浪新闻-正文实现

    2.3.2.1 正文排版
    2.3.2.1.1 分析

    图片有敏感词就不放出来

    整个正文部分的排版，主要分为这么四个部分：

    1). 视频 (当前这种新闻页面,可能也会存在音频)

    2). 文字段落

    3). 字体加粗

    4). 图片

    2.3.2.1.2 标签

    1). 视频、音频标签

    • 视频标签:
    • 音频标签:

    2). 段落标签

    • 换行标签:
      • 注意: 在HTML页面中,我们在编辑器中通过回车实现的换行, 仅仅在文本编辑器中会看到换行效果, 浏览器是不会解析的, HTML中换行需要通过br标签

    • 段落标签:

      • 如:

        这是一个段落

    3). 文本格式标签

    效果

    标签

    标签(强调)

    加粗

    b

    strong

    倾斜

    i

    em

    下划线

    u

    ins

    删除线

    s

    del

    前面的标签 b、i、u、s 就仅仅是实现加粗、倾斜、下划线、删除线的效果，是没有强调语义的。 而后面的strong、em、ins、del在实现加粗、倾斜、下划线、删除线的效果的同时，还带有强调语义。

    2.3.2.1.3 实现
    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>焦点访谈：国粮仓title>
    8.     <style>
    9.         h1 {
    10.             color: #4D4F53;
    11.         }
    12.         
    13.         #time {
    14.             color: #968D92;
    15.             font-size: 13px; /* 设置字体大小 */
    16.         }
    17.  
    18.         a {
    19.             color: black;
    20.             text-decoration: none; /* 设置文本为一个标准的文本 */
    21.         }
    22.  
    23.         p {
    24.             text-indent: 35px; /* 设置首行缩进 */
    25.             line-height: 40px; /* 设置行高 */
    26.         }
    27.  
    28.         #plast {
    29.             text-align: right; /* 对齐方式 */
    30.         }
    31.     style>
    32. head>
    33. <body>
    34.  
    35.     
    36.     <img src="img/news_logo.png"> <a href="http://gov.sina.com.cn/" target="_self">新浪政务a>  > 正文
    37.  
    38.     <h1>焦点访谈：h1>
    39.  
    40.     <hr>
    41.     <span id="time">2023年03月02日 21:50span>
    42.     <span><a href="https://news.cctv.com/2023/03/02/ARTIUCKFf9kE9eXgYE46ugx3230302.shtml" target="_blank">央视网a>span>
    43.     <hr>
    44.  
    45.     
    46.     
    47.     <video src="video/1.mp4" controls width="950px">video>
    48.  
    49.     
    50.     
    51.  
    52.     <p>
    53.     <strong>央视网消息strong> 
    54.     p>
    55.  
    56.     <p>
    57.     人勤春来早，春耕农事忙。立春之后，由南到北，我国春耕春管工作陆续展开，春天的田野处处生机盎然。
    58.     p>
    59.  
    60.     <img src="img/1.jpg">
    61.  
    62.     <p>
    63.         今年，我国启动了新一轮千亿斤粮食产能提升行动，这是一个新的起点。2015年以来，我国粮食产量连续8年稳定在1.3万亿斤以上，人均粮食占有量始终稳稳高于国际公认的400公斤粮食安全线。从十年前的约12200亿斤到2022年的约13700亿斤，粮食产量提高了1500亿斤。
    64.     p>
    65.  
    66.     <img src="img/2.jpg">
    67.  
    68.     <p>
    69.         中国式现代化一个重要的中国特色是人口规模巨大的现代化。我们粮食生产的发展，意味着我们要立足国内，解、不懈奋斗，我们就一定能够牢牢守住粮食安全这一“国之大者”，把中国人的饭碗牢牢端在自己手中，夯实中国式现代化基础。
    70.     p>
    71.  
    72.     <p id="plast">
    73.         责任编辑：王树淼 SN242
    74.     p>
    75. body>
    76. html>

    在上述的正文排版实现中，还用到了几个CSS属性：

    • text-indent: 设置段落的首行缩进
    • line-height: 设置行高
    • text-align: 设置对齐方式, 可取值为 left / center / right
    注意事项:
    在HTML页面中无论输入了多少个空格, 最多只会显示一个。 可以使用空格占位符（ ；）来生成空格，如果需要多个空格，就使用多次占位符。
    那在HTML中，除了空格占位符以外，还有一些其他的占位符(了解, 只需要知道空格的占位符写法即可)，如下：

    2.3.2.2 页面布局

    目前，新闻页面的基本排版，我们都已经完成了，但是，大家会看到，无论是标题部分，还是正文部分，都是铺满了整个浏览器。 而我们再来看看新浪新闻的原始页面，我们会看到新闻网页内容都是居中展示的，左边、右边都是一定的边距的。

    图片有敏感词就不放出来

    那接下来呢，我们就需要按照这个效果，来完成页面布局。 而要想完成这样一个页面布局，我们就需要介绍一下CSS中的盒子模型 。

    2.3.2.2.1 盒子模型
    • 盒子：页面中所有的元素（标签），都可以看做是一个 盒子，由盒子将页面中的元素包含在一个矩形区域内，通过盒子的视角更方便的进行页面布局
    • 盒子模型组成：内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（margin）

    CSS盒子模型，其实和日常生活中的包装盒是非常类似的，就比如：

    盒子的大小，其实就包括三个部分： border、padding、content，而margin外边距是不包括在盒子之内的。

    2.3.2.2.2 布局标签
    • 布局标签：实际开发网页中，会大量频繁的使用 div 和 span 这两个没有语义的布局标签。
    • 标签：
    • 特点：
      • div标签：
        • 一行只显示一个（独占一行）
        • 宽度默认是父元素的宽度，高度默认由内容撑开
        • 可以设置宽高（width、height）
      • span标签：
        • 一行可以显示多个
        • 宽度和高度默认由内容撑开
        • 不可以设置宽高（width、height）

    测试：

    1. <body>
    2.     <div>
    3.         A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A 
    4.     div>
    5.     <div>
    6.         A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A 
    7.     div>
    8.  
    9.     <span>
    10.         A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A 
    11.     span>
    12.     <span>
    13.         A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A 
    14.     span>
    15. body>

    浏览器打开后的效果:

    1). div会独占一行，默认宽度为父元素 body 的宽度

    2). span一行会显示多个，用来组合行内元素，默认宽度为内容撑开的宽度

    2.3.2.2.3 盒子模型代码

    代码如下:

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>盒子模型</title>
    8.     <style>
    9.         div {
    10.             width: 200px;  /* 宽度 */
    11.             height: 200px;  /* 高度 */
    12.             box-sizing: border-box; /* 指定width height为盒子的高宽 */
    13.             background-color: aquamarine; /* 背景色 */
    14.             
    15.             padding: 20px 20px 20px 20px; /* 内边距, 上 右 下 左 , 边距都一行, 可以简写: padding: 20px;*/ 
    16.             border: 10px solid red; /* 边框, 宽度 线条类型 颜色 */
    17.             margin: 30px 30px 30px 30px; /* 外边距, 上 右 下 左 , 边距都一行, 可以简写: margin: 30px; */
    18.         }
    19.     </style>
    20. </head>
    21.  
    22. <body>
    23.     
    24.     <div>
    25.         A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A 
    26.     </div>
    27.  
    28. </body>
    29. </html>

    代码编写好了, 可以通过浏览器打开该页面, 通过开发者工具,我们就可以看到盒子的大小, 以及盒子各个组成部分(内容、内边距、边框、外边距)：

    我们也可以，通过浏览器的开发者工具，清晰的看到这个盒子，以及每一个部分的大小：

    2.3.2.2.3 布局实现

    在实现新闻页面的布局时，我们需要做两部操作：

    • 第一步：需要将body中的新闻标题部分、正文部分使用一个 div 布局标签将其包裹起来，方便通过css设置内容占用的宽度，比如：65%。
    • 第二步：通过css为该div设置外边距，左右的外边距分别为：17.5%，上下外边距靠边展示即可，为：0%。

    具体的代码实现如下：

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>焦点访谈：中国底气 新思想夯实大国粮仓</title>
    8.     <style>
    9.         h1 {
    10.             color: #4D4F53;
    11.         }
    12.         
    13.         #time {
    14.             color: #968D92;
    15.             font-size: 13px; /* 设置字体大小 */
    16.         }
    17.  
    18.         a {
    19.             color: black;
    20.             text-decoration: none; /* 设置文本为一个标准的文本 */
    21.         }
    22.  
    23.         p {
    24.             text-indent: 35px; /* 设置首行缩进 */
    25.             line-height: 40px; /* 设置行高 */
    26.         }
    27.  
    28.         #plast {
    29.             text-align: right; /* 对齐方式 */
    30.         }
    31.  
    32.         #center {
    33.             width: 65%;
    34.             /* margin: 0% 17.5% 0% 17.5% ; */ /* 外边距, 上 右 下 左 */
    35.             margin: 0 auto;
    36.         }
    37.     </style>
    38. </head>
    39. <body>
    40.     
    41.     <div id="center">
    42.         <!-- 标题 -->
    43.         <img src="img/news_logo.png"> <a href="http://gov.sina.com.cn/" target="_self">新浪政务</a>  > 正文
    44.  
    45.         <h1>焦点访谈：中国底气 新思想夯实大国粮仓</h1>
    46.  
    47.         <hr>
    48.         <span id="time">2023年03月02日 21:50</span>
    49.         <span><a href="https://news.cctv.com/2023/03/02/ARTIUCKFf9kE9eXgYE46ugx3230302.shtml" target="_blank">央视网</a></span>
    50.         <hr>
    51.  
    52.         <!-- 正文 -->
    53.         <!-- 视频 -->
    54.         <video src="video/1.mp4" controls width="950px"></video>
    55.  
    56.         <!-- 音频 -->
    57.         <!-- <audio src="audio/1.mp3" controls></audio> -->
    58.  
    59.         <p>
    60.         <strong>央视网消息</strong> 牢牢端在自己手中，为保障经济社会发展提供了坚实支撑，为应对各种风险挑战赢得了主动。连续八年1.3万亿斤，这个沉甸甸的数据是如何取得的呢？
    61.         </p>
    62.  
    63.         <p>
    64.         人勤春来早，春耕农事忙。立春之后，由南到北，我国春耕春管工作陆续展开，春天的田野处处生机盎然。
    65.         </p>
    66.  
    67.         <img src="img/1.jpg">
    68.  
    69.         <p>
    70.             今年，我国启动了新一轮千亿斤粮食产能提升行动，这是一个新的起点。2015年以来，我国粮食产量连续8年稳定在1.3万亿斤以上，人均粮食占有量始终稳稳高于国际公认的400公斤粮食安全线。从十年前的约12200亿斤到2022年的约13700亿斤，粮食产量提高了1500亿斤。
    71.         </p>
    72.  
    73.         <img src="img/2.jpg">
    74.  
    75.         <p>
    76.             中国式现代化一个重要的中国特色是人口规模巨大的现代化。我们粮食生产的发展，意味着我们要立足国内，解决14亿多人吃饭的问题。仓廪实，天下安。保障粮食安全是一个永恒的课题，任何时候都不能放松。在
    77.         </p>
    78.  
    79.         <p id="plast">
    80.             责任编辑：王树淼 SN242
    81.         </p>  
    82.     </div>
    83. </body>
    84. </html>

    浏览器打开此页面，最终效果如下：

    2.4 表格标签

    场景：在网页中以表格（行、列）形式整齐展示数据，我们在一些管理类的系统中，会看到数据通常都是以表格的形式呈现出来的，比如：班级表、学生表、课程表、成绩表等等。

    标签：

    • : 用于定义整个表格, 可以包裹多个 ， 常用属性如下：
      • border：规定表格边框的宽度
      • width：规定表格的宽度
      • cellspacing: 规定单元之间的空间
    • : 表格的行，可以包裹多个
    		• : 表格单元格(普通)，可以包裹内容 , 如果是表头单元格，可以替换为

      演示：

      代码如下：

      1. <!DOCTYPE html>
      2. <html lang="en">
      3. <head>
      4.     <meta charset="UTF-8">
      5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
      6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
      7.     <title>HTML-表格</title>
      8.     <style>
      9.         td {
      10.             text-align: center; /* 单元格内容居中展示 */
      11.         }
      12.     </style>
      13. </head>
      14. <body>
      15.     
      16.     <table border="1px" cellspacing="0"  width="600px">
      17.         <tr>
      18.             <th>序号</th>
      19.             <th>品牌Logo</th>
      20.             <th>品牌名称</th>
      21.             <th>企业名称</th>
      22.         </tr>
      23.         <tr>
      24.             <td>1</td>
      25.             <td> <img src="img/huawei.jpg" width="100px"> </td>
      26.             <td>华为</td>
      27.             <td>华为技术有限公司</td>
      28.         </tr>
      29.         <tr>
      30.             <td>2</td>
      31.             <td> <img src="img/alibaba.jpg"  width="100px"> </td>
      32.             <td>阿里</td>
      33.             <td>阿里巴巴集团控股有限公司</td>
      34.         </tr>
      35.     </table>
      36.  
      37. </body>
      38. </html>

      打开浏览器，效果如下图所示：

      整合表格使用 table 标签包裹 , 其中的每一行数据都是一个 tr , 每一行中的每一个单元格都是一个 td , 而如果是表头单元格, 可以使用 th (具有加粗居中展示的效果)。

      2.5 表单标签

      2.5.1 表单

      2.5.1.1 介绍

      那表单呢,在我们日常的上网的过程中,基本上每天都会遇到。比如，我们经常在访问网站时，出现的登录页面、注册页面、个人信息提交页面，其实都是一个一个的表单 。 当我们在这些表单中录入数据之后，一点击 "提交"，就会将表单中我们填写的数据采集到，并提交， 那其实这个数据呢，一般会提交到服务端，最终保存在数据库中 （后面的课程中会讲到）。

      那其实，上述的整个窗口是一个表单，而表单是一项一项的，这个我们称为表单项 或 表单元素。

      • 表单场景: 表单就是在网页中负责数据采集功能的，如：注册、登录的表单。
      • 表单标签:
      • 表单属性:
        • action: 规定表单提交时，向何处发送表单数据，表单提交的URL。
        • method: 规定用于发送表单数据的方式，常见为： GET、POST。
          • GET：表单数据是拼接在url后面的， 如： xxxxxxxxxxx?username=Tom&age=12，url中能携带的表单数据大小是有限制的。
          • POST： 表单数据是在请求体（消息体）中携带的，大小没有限制。
      • 表单项标签: 不同类型的input元素、下拉列表、文本域等。
        • input: 定义表单项，通过type属性控制输入形式
        • select: 定义下拉列表
        • textarea: 定义文本域
      2.5.1.2 演示

      1). GET方式提交的表单

      1. <!DOCTYPE html>
      2. <html lang="en">
      3. <head>
      4.     <meta charset="UTF-8">
      5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
      6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
      7.     <title>HTML-表单</title>
      8. </head>
      9. <body>
      10.     <!-- 
      11.     form表单属性: 
      12.         action: 表单提交的url, 往何处提交数据 . 如果不指定, 默认提交到当前页面
      13.         method: 表单的提交方式 .
      14.             get: 在url后面拼接表单数据, 比如: ?username=Tom&age=12 , url长度有限制 . 默认值
      15.             post: 在消息体(请求体)中传递的, 参数大小无限制的.
      16.     -->   
      17. 	
      18.     <form action="" method="get">
      19.         用户名: <input type="text" name="username">
      20.         年龄: <input type="text" name="age">
      21.  
      22.         <input type="submit" value="提交">
      23.     </form>
      24. 	
      25. </body>
      26. </html>

      表单编写完毕之后，通过浏览器打开此表单，然后再表单项中录入值之后，点击提交，我们会看到表单的数据在url后面提交到服务端，格式为：?username=Tom&age=12。

      2). POST方式提交表单

      将上述的表单提交方式由get，改为post

      1. <!DOCTYPE html>
      2. <html lang="en">
      3. <head>
      4.     <meta charset="UTF-8">
      5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
      6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
      7.     <title>HTML-表单</title>
      8. </head>
      9. <body>
      10.     <!-- 
      11.     form表单属性: 
      12.         action: 表单提交的url, 往何处提交数据 . 如果不指定, 默认提交到当前页面
      13.         method: 表单的提交方式 .
      14.             get: 在url后面拼接表单数据, 比如: ?username=Tom&age=12 , url长度有限制 . 默认值
      15.             post: 在消息体(请求体)中传递的, 参数大小无限制的.
      16.     -->   
      17. 	
      18.     <form action="" method="post">
      19.         用户名: <input type="text" name="username">
      20.         年龄: <input type="text" name="age">
      21.  
      22.         <input type="submit" value="提交">
      23.     </form>
      24. 	
      25. </body>
      26. </html>

      表单编写完毕之后，通过浏览器打开此表单，然后再表单项中录入值之后，点击提交，我们会看到表单的数据在url后面提交到服务端，格式为：?username=Tom&age=12。

      2.5.1.3 注意事项

      表单中的所有表单项，要想能够正常的采集数据，在提交的时候能提交到服务端，表单项必须指定name属性。 否则，无法提交该表单项。

      用户名: <input type="text" name="username">

      2.5.2 表单项

      2.5.2.1 介绍

      在一个表单中，可以存在很多的表单项，而虽然表单项的形式各式各样，但是表单项的标签其实就只有三个，分别是：

      • : 表单项 , 通过type属性控制输入形式。

      type取值

      描述

      text

      默认值，定义单行的输入字段

      password

      定义密码字段

      radio

      定义单选按钮

      checkbox

      定义复选框

      file

      定义文件上传按钮

      date/time/datetime-local

      定义日期/时间/日期时间

      number

      定义数字输入框

      email

      定义邮件输入框

      hidden

      定义隐藏域

      submit / reset / button

      定义提交按钮 / 重置按钮 / 可点击按钮