【Javaweb学习|黑马笔记|Day1】初识，入门网页，HTML-CSS|常见的标签和样式|标题排版和样式、正文排版和样式

发布于：2025-08-16 ⋅ 阅读:(11) ⋅ 点赞:(0)

【DAY1】

从今天开始Javaweb的学习了，学了Javaweb基础知识，HTML CSS常见的标签和样式

文章目录

HTML-CSS

1）初识

  • web标准也称网页标准，由一系列的标准组成
  • 三个组成部分
    • HTML：负责网页的结构（页面元素和内容）
    • CSS：负责网页的表现（页面元素的外观、位置等页面样式 颜色大小）
    • JavaScript：复制网页的行为

2）入门

HTML：超文本标记语言

  • 超文本：超越文本的现在，比普通文本更大，除了文本信息还可定义图片、音频等
  • 标记语言：由标签"<标签名>"构成的语言
    • HTML表都是定义好的，<h1>展示图片 <img>展示图片 <video>展示视频

在这里插入图片描述

CSS：层叠样式表，用于控制页面的样式

在这里插入图片描述

入门
在这里插入图片描述

<html>
		<head> <!--头部-->
				<title>HTML快速入门</title>

		</head>
		<body> <!--内容-->
				<h1>Hello HTML</h1> <!--h1表示一级标题-->
				<img src="img/1.png">
		</body>
</html>


<!--在vscode输入!生成基本框架-->

<!-- 声明文档类型为 HTML-->
<!DOCTYPE html>
<html lang="en">
<head>
  <!--字符编码为UTF-8-->
  <meta charset="UTF-8">
  <!--设置手机上的屏幕宽度和缩放比例，让其在手机上也能正常显示-->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
</body>
</html>

ctrl + / 自动生成注释

HTML的标签特点

  • html标签不区分大小写，建议小写
  • html标签的属性值使用单引号/双引号都行
  • html语法结构松散

3）常见标签和样式

标题
标题排版

  • 标题标签：<h1> - <h6>

  • 超链接标签：<a href="...">...</a>

    • href：指定资源访问的utl

    • target：指定在何处打开资源链接

      _self：默认值，在当前页面打开

      _blank：在空白页面打开

示例：

【练习1】2025.8.15.1

【练习1】2025.8.15.1

MDN 2025年8月15日
标题样式

CSS引入方式：

  • 行内样式：

    写在标签的style属性中（配合JavaScript使用）

    <span style="color: gray;">2025年8月15日</span>

  • 内部样式：

    写在style标签中（可以写在页面任何位置，但通常写在head标签中）

    <style>
  span{
    color: gray;
  }
</style>

  • 外部样式：

    写在单独的一个.css文件中（需要通过link标签在网页中引用）

    <!-- news.css -->
 span{
  color: gray;
 }

<!-- 外部样式 -->
<link rel="stylesheet" href="cssnews.css"></link>

示例

【练习1】2025.8.15.1

【练习1】2025.8.15.1

MDN 2025年8月15日

颜色表示形式

在这里插入图片描述

备注: 要想拾取某一个网页中的颜色，我们可以借助于截图软件的拾色器插件来完成

CSS选择器是用来选取需要设置样式的元素的

在这里插入图片描述

优先级：id选择器>类选择器>元素选择器

示例

<!--类选择器-->

<style>
    .cls{
      color: gray;
    }
 </style>
  
<span class="cls">2025年8月15日</span>

去除超链接中的下划线

/* 超链接去除下划线 */
a{
    text-decoration: none;
 }
正文
正文排版

在这里插入图片描述

  • 绝对路径:
    • 绝对磁盘路径: <img src="C:\Users\Administrator\Desktop\HTML\img\logo.png">
    • 绝对网络路径: <img src="``https://i2.sinaimg.cn/dy/deco/2012/0613/yocc20120613img01/news_logo.png``">
  • 相对路径:

​ ./ : 当前目录 , ./ 可以省略的

​ …/: 上一级目录

示例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>【练习1】2025.8.15.1</title>
  <style>
    .cls{
      color: gray;
    }

    /* 超链接去除下划线 */
    a{
      text-decoration: none;
    }
  </style>
</head>
<body>
  <!-- ----------标题---------- -->

  <h1>【练习1】2025.8.15.1</h1>
  <a href="https://developer.mozilla.org/zh-CN/">MDN</a>
  <span class="cls">2025年8月15日</span>
  <br>
  <!-- ----------正文---------- -->
   <!-- 定义一个视频 -->
    <!-- video标签属性 
      src:视频地址
      controls:显示视频控制器
      autoplay:自动播放
      width:视频宽度 建议宽度高度只设置一个 另一个会等比例缩放   
      height:视频高度 单位px：像素 %：百分比（占用父元素的百分比）
      poster:视频封面
    -->
    <video src="video/news.mp4" controls autoplay width="80%"></video>
  <!-- 音频标签
  <audio src="audio/news.mp3" controls autoplay></audio> -->

  <!-- 段落标签 -->
  <p>
    这是一个段落
  </p>
  <!-- 段落之间自动换行不需要换行标签 -->
  <p>
    这是第二个段落
  </p>

  <!-- 换行标签 -->
   <br>
   123456

  <!-- 插入一个动图 -->
   <!-- src：图片的访问地址
    1.绝对路径
     1.1 绝对磁盘路径 C:\Users\Administrator\Desktop\img\1.gif
     1.2 绝对网络路径 http://www.baidu.com/img/1.gif
    2.相对路径
     -->
   <img src="img/1.gif" width="80%"></img>

</body>
</html>
正文样式

在这里插入图片描述

加粗展示：

<!--b标签-->
<b>...</b>

<!--strong标签-->
<strong>...</strong>

设置行高：

p{
      /* 设置行高 */
      line-height: 2; /*两倍行高*/
 }

设置缩进：

  • 使用空格实体字符 &nbsp;

    &nbsp;&nbsp;这是一行字

  • 为所有段落设置首行缩进

    p{
      /* 设置首行缩进 */
      text-indent: 2em;/*缩进两个字符*/
  }
整体布局
/* 让整体版面居中显示 */
    #content-container{
      width: 70%;/*宽度*/
      margin-left: auto;
      margin-right: auto;
    }

把body内的所有内容括在<div></div>中，并设置id选择器

<body>
  <div id="content-container">
      <!-- ----------标题---------- -->

  <h1>【练习1】2025.8.15.1</h1>
  <a href="https://developer.mozilla.org/zh-CN/">MDN</a>
  <span class="cls">2025年8月15日</span>
  <br>
  <!-- ----------正文---------- -->
   <!-- 定义一个视频 -->
    <!-- video标签属性 
      src:视频地址
      controls:显示视频控制器
      autoplay:自动播放
      width:视频宽度 建议宽度高度只设置一个 另一个会等比例缩放   
      height:视频高度 单位px：像素 %：百分比（占用父元素的百分比）
      poster:视频封面
    -->
    <video src="video/news.mp4" controls autoplay width="100%"></video>
  <!-- 音频标签
  <audio src="audio/news.mp3" controls autoplay></audio> -->

  <!-- 段落标签 -->
  <p>
    <b>&nbsp;&nbsp;这是一个段落</b>

  </p>
  <!-- 段落之间自动换行不需要换行标签 -->
  <p>
    这是第二个段落
  </p>

  <!-- 换行标签 -->
   <br>
   123456

  <!-- 插入一个动图 -->
   <!-- src：图片的访问地址
    1.绝对路径
     1.1 绝对磁盘路径 C:\Users\Administrator\Desktop\img\1.gif
     1.2 绝对网络路径 http://www.baidu.com/img/1.gif
    2.相对路径
     -->
   <img src="img/1.gif" width="100%"></img>
</div>

</body>

盒子模型：

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

在这里插入图片描述

  • 布局标签：实际开发网页中，会大量频繁的使用 div 和 span 这两个没有语义的布局标签。
  • 标签：<div> <span>
  • 特点：
  • <div>标签：
    • 一行只显示一个（独占一行）
    • 宽度默认是父元素的宽度，高度默认由内容撑开
    • 可以设置宽高（width、height）
  • <span>标签：
    • 一行可以显示多个
    • 宽度和高度默认由内容撑开
    • 不可以设置宽高（width、height）
div {
       width: 200px;  /* 宽度 */
       height: 200px;  /* 高度 */
       box-sizing: border-box; /* 指定width height为盒子的高宽 */
       background-color: aquamarine; /* 背景色 */
            
       padding: 20px 20px 20px 20px; 
   /* 内边距, 上 右 下 左 , 边距都一行, 可以简写: padding: 20px;*/ 
       border: 10px solid red; /* 边框, 宽度 线条类型 颜色 */
       margin: 30px 30px 30px 30px; 
   /* 外边距, 上 右 下 左 , 边距都一行, 可以简写: margin: 30px; */
   }

备注：

  • 上述的padding、margin属性值，可以是4个值、也可以是两个值、也可以是一个值，具体的含义如下：
  • padding: 20px 20px 20px 20px; -------> 表示上、右、下、左都是20px；
  • padding: 20px 10px; ----------------------> 表示上下是20px，左右是10px；
  • padding: 20px; -----------------------------> 表示上、右、下、左都是20px；

（笔记内容主要基于黑马程序员的课程讲解，旨在加深理解和便于日后复习）
在这里插入图片描述
希望这篇笔记能对大家的学习有所帮助，有啥不对的地方欢迎大佬们在评论区交流

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布