当前位置：首页 > news >正文

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

news 2025/8/16 5:57:39

【DAY1】

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

文章目录

- 【DAY1】
- HTML-CSS
- - 1）初识
  - 2）入门
  - 3）常见标签和样式
  - - 标题
    - - 标题排版
      - 标题样式
    - 正文
    - - 正文排版
      - 正文样式
      - 整体布局

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

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

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.gif1.2 绝对网络路径 http://www.baidu.com/img/1.gif2.相对路径--><img src="img/1.gif" width="80%"></img></body>
</html>

正文样式

在这里插入图片描述

加粗展示：

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

设置行高：

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

设置缩进：

使用空格实体字符  
```
&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.gif1.2 绝对网络路径 http://www.baidu.com/img/1.gif2.相对路径--><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；

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