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

javaweb -html -CSS

news 来源：原创 2025/6/7 7:13:31

HTML是一种超文本标记语言

超文本：超过了文本的限制，比普通文本更强大，除了文字信息，还可以定义图片、音频、视频等内容。

标记语言：由标签"<标签名>"构成的语言。

CSS:层叠样式表，用于控制页面的样式（表现）。

常见标签

类别	标签	说明
文本处理标签	`<h1>` - `<h6>`	一级标题 - 六级标题(h1到h6字体逐渐变小)
	`<br>`、`<p>`	换行、段落
	`<strong>`、`<em>`、`<ins>`、`<del>`	文本加粗、倾斜、下划线、删除线（具有强调作用）
	`<a href="...">`	超链接（属性：href、target）
图片音视频标签	`<img src="...">`	图片（路径：绝对路径、相对路径）
图片音视频标签	`<audio src="...">`、`<video src="...">`	音频、视频
布局标签	`<div>`、`<span>`	没有语义的布局标签，配合CSS实现页面布局
表格标签	`<table>`、`<thead>`、`<tbody>`<br>`<tr>` / `<th>`、`<td>`	表格、表头、表格主体行/单元格
表单标签	`<form>`	定义表单（属性：action、method）
	`<input type="text/button">`	表单项（文本输入框、按钮...）
	`<select>` / `<option>`	表单项（下拉列表/选项）

类别	属性	说明
盒子模型	width, height	作用：控制元素尺寸、内边距、边框、外边距，从而控制页面的布局展示<br>高度、宽度
	box-sizing	高度和宽度的计算方式；content-box, border-box
	padding	内边距（上、右、下、左；上下、左右）
	border	边框
	margin	外边距（上、右、下、左；上下、左右）
flex弹性布局	display	作用：是一种一维的布局模型，为元素之间提供强大的空间分布和对齐能力。<br>flex: 使用flex布局
	flex-direction	设置主轴方向（row: x轴，水平方向；column: y轴，垂直方向）
	justify-content	子元素在主轴上的对齐方式

样式

若是需要更改某个标签下字体的颜色，有三种样式

1、内部样式

在style标签里直接定义需要标签字体的颜色（如以下代码style标签定义span标签内的字体颜色）

2、行内样式

在定义标签时直接在标签后跟需要的颜色（如以下代码2024年05月15日 20:07）

3、外部样式

通过调用外部css文件中的代码为某个标签定义颜色（如<link rel="stylesheet" href="css/news.css">）

下面为css文件中的内容

以下均为没有内容的示例，可以自己往title等标签内加入内容测试。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title></title><!-- 内部样式 --><style>span{/* 关键字 *//* color:gray; *//* RGB表示法 *//* color:rgb(255, 0, 0); *//* RGBA表示法 *//* color: rgba(255, 120, 0, 0.1); *//* 十六进制表示法 */color: #8e8282;}</style><!-- 方式三：外部样式 --><!-- <link rel="stylesheet" href="css/news.css"> -->
</head>
<body><!-- 定义一个标题，标题内容：： --><h1></h1><!-- 定义一个超链接，里面展示 央视网 --><!-- a 超链接标签href 属性 超链接的地址target 属性 超链接打开方式1、_blank 新窗口打开2、_self 当前窗口打开（默认）3、_parent 父窗口打开内容 超链接的文本 --><a href="http://www.cctv.com" target ="_blank">央视网</a> <!-- span为没有语义的标签，此处用于修改字体颜色 --><!-- 方式一：行内样式 --><!-- <span style="color:gray">2024年05月15日 20:07</span> --><!-- 方式二：内部样式 --><span>2024年05月15日 20:07</span></body>
</html>

选择器

以上的设置样式的方法有缺陷，方式一、三会直接将所有span标签的字体都设为灰色，方式二书写步骤繁琐，但选择器可以解决这个问题。

选择器有元素选择器，类选择器与id选择器，其中元素选择器就是上文介绍的方法

类选择器

语法：在style标签内 .类名{这个类需要的修改}，使用时在标签后声明是哪个类就行（如 2024年05月15日 20:07）

id选择器

语法：在style标签内 #id名{此id需要的修改} ，使用时标签内声明是哪个id即可（如 2024年05月15日 20:07）

优先级顺序如下（从高到低）：

ID 选择器（#id）：优先级最高。
类选择器（.class）、属性选择器（如 [type="text"]）、伪类选择器（如 :hover）：优先级次之。
元素选择器（div, span 等）：优先级最低。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>  </title><!-- 内部样式 --><style>/* 元素选择器 *//* span{color:gray;} *//* 类选择器 *//* .cls{color:#f00;} *//* id选择器 */#time{color:#0000ff; }</style><!-- 方式三：外部样式 --><!-- <link rel="stylesheet" href="css/news.css"> --></head>
<body><!-- -----------------新闻标题------------------------ --><h1></h1><a href="http://www.cctv.com" target ="_blank">    </a> <span class="cls" id="time">2024年05月15日 20:07</span><!-- 换行 --><br></br><!-- -----------------新闻正文------------------------ --><!-- 定义一个视频，引入video/news.mp4 --><!-- video标签的属性src :视频地址没有播放控件视频不能播放controls :显示播放控件autoplay :自动播放width :视频宽度（建议宽度和高度只设计一个，另一个会等比例缩放）height :视频高度单位：像素px    % ：百分比（相对于父元素的百分比）--><video src="video/news.mp4" controls autoplay width="60%"></video><br></br><!-- 音频播放器 --><!-- <audio src="audio/news.mp3" controls autoplay></audio> --><!-- 段落标签：p --><p></p><P></P><!-- 定义一张图片，引入img/1.gif --><!-- img标签的属性src :图片访问地址:1、绝对路径1.1、绝对磁盘路径：D:\我的文档\桌面\HTML-CSS\img\1.gif1.2、绝对网络路径：https://p3.img.cctvpic.com/photoworkspace/contentimg/2024/05/15/2024051520034237647.gif2、相对路径2.1、 ./ 表示当前目录(可以省略)2.2、../ 表示上一级目录alt :图片描述width :图片宽度height :图片高度（建议宽度和高度只设计一个，另一个会等比例缩放）--><img src="img/1.gif" width="60%"></img></body>
</html>