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

【JavaWeb】快速入门——HTMLCSS

news 来源：原创 2025/5/15 21:14:42

文章目录

一、 HTML简介
- 1、HTML概念
- 2、HTML文件结构
- 3、可视化网页结构
二、 HTML标签语法
- 1、标题标签
- 2、段落标签
- 3、超链接
- 4、换行
- 5、无序列表
- 6、路径
- 7、图片
- 8、块
- - 1 盒子模型
  - 2 布局标签
三、使用HTML表格展示数据
- 1、定义表格
- 2、合并单元格
- - 横向合并
  - 纵向合并
四、使用HTML表单收集数据
- 1、form标签
- 2、name和value
- 3、单行文本框
- 4、密码框
- 5、单选框
- 6、多选框
- 7、下拉列表
- 8、按钮
- 9、表单隐藏域
- 10、多行文本框
五、 CSS的简单应用
- 1、设置CSS样式的三种方式
- 2、CSS代码语法
- 3、CSS选择器

一、 HTML简介

1、HTML概念

HTML是超文本标记语言，是由一系列『标签』组成的，每个标签都有它固定的含义和确定的页面显示效果。
HTML文件本质上是文本文件，HTML技术则通过HTML标签把其他网页、图片、音频、视频等各种多媒体资源引入到当前网页中，让网页有了非常丰富的呈现方式，这就是超文本的含义——本身是文本，但是呈现出来的最终效果超越了文本。

2、HTML文件结构

在这里插入图片描述

 <!DOCTYPE html> 声明为 HTML5 文档
 <html> 元素是 HTML 页面的根元素
 <head> 元素包含了文档的元（meta）数据，如 <meta charset="utf-8"> 定义网页编码格式为 utf-8。
 <title> 元素描述了文档的标题
 <body> 元素包含了可见的页面内容
 <h1> 元素定义一个大标题
 <p> 元素定义一个段落

显示效果：
在这里插入图片描述

3、可视化网页结构

在这里插入图片描述

只有 <body> (白色部分) 才会在浏览器中显示。

二、 HTML标签语法

HTML语法规则：

根标签有且只能有一个
无论是双标签还是单标签都必须正确关闭
标签可以嵌套但不能交叉嵌套
注释不能嵌套
属性必须有值，值必须加引号，单引号或双引号均可
标签名不区分大小写但建议使用小写

标签名称	功能
h1~h6	1级标题~6级标题
p	段落
a	超链接
ul/li	无序列表
img	图片
div	定义一个前后有换行的块
span	定义一个前后无换行的块

1、标题标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>这是一级标题</h1>
    <h2>这是二级标题</h2>
    <h3>这是三级标题</h3>
    <h4>这是四级标题</h4>
    <h5>这是五级标题</h5>
    <h6>这是六级标题</h6>
</body>
</html>

在这里插入图片描述

注意：标题标签前后有换行。

2、段落标签

代码

<p> view some of the existing designs in the list. Clicking on any one will load the style sheet into this very page. The code remains the same, the only thing that has changed is the external .css file. Yes, really.</p>

页面显示效果
在这里插入图片描述

注意：段落标签前后有换行。

3、超链接

代码

<a href="page02-anchor-target.html">点我跳转到下一个页面</a>

页面显示效果
在这里插入图片描述

点击后跳转到href属性指定的页面。

4、换行

代码

browsing public. <br/>The only real requirement we have is that your CSS validates.

页面显示效果
在这里插入图片描述

5、无序列表

代码

  <ul>
        <li>Apple</li>
        <li>Banana</li>
        <li>Grape</li>
    </ul>

页面显示效果
在这里插入图片描述

6、路径

绝对路径:

绝对磁盘路径: C:\Users\Administrator\Desktop\HTML\img\news_logo.png

<img src="C:\Users\Administrator\Desktop\HTML\img\news_logo.png">

绝对网络路径: https://i2.sinaimg.cn/dy/deco/2012/0613/yocc20120613img01/news_logo.png

 <img src="https://i2.sinaimg.cn/dy/deco/2012/0613/yocc20120613img01/news_logo.png">

相对路径:

./ : 当前目录 , ./ 可以省略的
../: 上一级目录

7、图片

src: 指定图像的url (可以指定绝对路径 , 也可以指定相对路径)
width: 图像的宽度 (像素 / 百分比 , 相对于父元素的百分比)
height: 图像的高度 (像素 / 百分比 , 相对于父元素的百分比)

一般width 和 height 只会指定一个，另外一个会自动的等比例缩放。

<img src="url">  //只包含属性，并且没有闭合标签

8、块

1 盒子模型

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

在这里插入图片描述

2 布局标签

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

测试：

<body>
    <div>
        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 
    </div>
    <div>
        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 
    </div>
    <span>
        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 
    </span>
    <span>
        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 
    </span>
</body>

浏览器打开后的效果:
1). div会独占一行，默认宽度为父元素 body 的宽度
在这里插入图片描述

2). span一行会显示多个，用来组合行内元素，默认宽度为内容撑开的宽度
在这里插入图片描述

3 盒子模型代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒子模型</title>
    <style>
        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; */
        }
    </style>
</head>
<body>
    
    <div>
        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 
    </div>
</body>
</html>

这个盒子的大小, 以及盒子各个组成部分(内容、内边距、边框、外边距)：
在这里插入图片描述

三、使用HTML表格展示数据

1、定义表格

页面显示效果
在这里插入图片描述

HTML代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>定义表格</title>
    <style type="text/css">
        table,th,td {
            border-collapse: collapse;
            border: 1px solid black;
            padding: 5px;
        }
    </style>
</head>
<body>
    <!-- 使用table标签定义表格 -->
    <table>
        <!-- 使用tr标签定义表格的行 -->
        <tr>
            <!-- 使用th标签定义表头，表头有字体加粗效果 -->
            <th>姓名</th>
            <th>属性</th>
            <th>级别</th>
            <th>忍村</th>
        </tr>
        <tr>
            <!-- 使用td标签定义单元格 -->
            <td>漩涡鸣人</td>
            <td>风</td>
            <td>下忍</td>
            <td>木叶</td>
        </tr>
        <tr>
            <td>宇智波佐助</td>
            <td>雷&火</td>
            <td>下忍</td>
            <td>木叶</td>
        </tr>
        <tr>
            <td>我爱罗</td>
            <td>沙</td>
            <td>影</td>
            <td>砂隐村</td>
        </tr>
    </table>
</body>
</html>

2、合并单元格

横向合并

使用colspan属性将两个横向相邻的单元格跨列合并：

<tr>
    <td>宇智波佐助</td>
    <td>雷&火</td>
    <td colspan="2">下忍</td>
</tr>

在这里插入图片描述

注意：被合并的单元格要删掉。

纵向合并

使用rowspan属性将两个纵向相邻的单元格跨行合并：

<tr>
     <td>宇智波佐助</td>
      <td rowspan="2">雷&火</td>
      <td colspan="2">下忍</td>
</tr>
<tr>
       <td>我爱罗</td>
       <td>影</td>
       <td>砂隐村</td>
</tr>

在这里插入图片描述

注意：『被合并』的单元格要删掉。

四、使用HTML表单收集数据

在这里插入图片描述

1、form标签

使用form标签来定义一个表单。

<form action="/aaa/pro01-HTML/page05-form-target.html" method="post">
    
</form>

①action属性
用户在表单里填写的信息需要发送到服务器端，在页面上我们就必须正确填写服务器端的能够接收表单数据的地址。
②method属性
在form标签中method属性用来定义提交表单的请求方式。method属性只有两个可选值：get或post，没有极特殊情况的话使用post即可。

2、name和value

服务器端就是使用Map类型来接收请求参数的。具体的是类型是：Map<String,String[ ]>。name属性就是Map的键，value属性就是Map的值。
在各个具体的表单标签中，我们通过name属性来给数据起名字，通过value属性来保存要发送给服务器的值。

3、单行文本框

代码

个性签名：<input type="text" name="signal"/><br/>

显示效果
在这里插入图片描述

4、密码框

代码

密码：<input type="password" name="secret"/><br/>

显示效果
在这里插入图片描述

5、单选框

代码

你最喜欢的季节是：
<input type="radio" name="season" value="spring" />春天
<input type="radio" name="season" value="summer" checked="checked" />夏天
<input type="radio" name="season" value="autumn" />秋天
<input type="radio" name="season" value="winter" />冬天

<br/><br/>

你最喜欢的动物是：
<input type="radio" name="animal" value="tiger" />路虎
<input type="radio" name="animal" value="horse" checked="checked" />宝马
<input type="radio" name="animal" value="cheetah" />捷豹

效果
在这里插入图片描述

注意：

name属性相同的radio为一组，组内互斥
当用户选择了一个radio并提交表单，这个radio的name属性和value属性组成一个键值对发送给服务器
设置checked="checked"属性设置默认被选中的radio

6、多选框

代码

你最喜欢的球队是：
<input type="checkbox" name="team" value="Brazil"/>巴西
<input type="checkbox" name="team" value="German" checked="checked"/>德国
<input type="checkbox" name="team" value="France"/>法国
<input type="checkbox" name="team" value="China" checked="checked"/>中国
<input type="checkbox" name="team" value="Italian"/>意大利

效果
在这里插入图片描述

7、下拉列表

代码

你喜欢的运动是：
<select name="interesting">
    <option value="swimming">游泳</option>
    <option value="running">跑步</option>
    <option value="shooting" selected="selected">射击</option>
    <option value="skating">溜冰</option>
</select>

效果
在这里插入图片描述

注意：

下拉列表中select标签用来定义下拉列表，option标签设置列表项。
name属性在select标签中设置。
value属性在option标签中设置。
option标签的标签体是显示出来给用户看的，提交到服务器的是value属性的值。
通过在option标签中设置selected="selected"属性实现默认选中的效果。

8、按钮

代码

<button type="button">普通按钮</button>
<button type="reset">重置按钮</button>
<button type="submit">提交按钮</button>

效果
在这里插入图片描述

类型	功能
普通按钮	点击后无效果，需要通过JavaScript绑定单击响应函数
重置按钮	点击后将表单内的所有表单项都恢复为默认值
提交按钮	点击后提交表单

9、表单隐藏域

<input type="hidden" name="userId" value="2233"/>

通过表单隐藏域设置的表单项不会显示到页面上，用户看不到。但是提交表单时会一起被提交。用来设置一些需要和表单一起提交但是不希望用户看到的数据，例如：用户id等等。

10、多行文本框

代码

自我介绍：<textarea name="desc"></textarea>

效果
在这里插入图片描述

textarea没有value属性，如果要设置默认值需要写在开始和结束标签之间。

五、 CSS的简单应用

1、设置CSS样式的三种方式

（1）在HTML标签内设置，仅对当前标签有效

<div style="border: 1px solid black;width: 100px; height: 100px;">&nbsp;</div>

在这里插入图片描述

（2）在head标签内设置，对当前页面有效

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .one {
            border: 1px solid black;
            width: 100px;
            height: 100px;
            background-color: lightgreen;
            margin-top: 5px;
        }
    </style>
</head>
<body>

    <div style="border: 1px solid black;width: 100px; height: 100px;">&nbsp;</div>
    <div class="one">&nbsp;</div>
    <div class="one">&nbsp;</div>
    <div class="one">&nbsp;</div>
</body>

在这里插入图片描述

（3）引入外部CSS样式文件

创建CSS文件
编辑CSS文件

.two {
    border: 1px solid black;
    width: 100px;
    height: 100px;
    background-color: yellow;
    margin-top: 5px;
}

引入外部CSS文件

在需要使用这个CSS文件的HTML页面的head标签内加入：

<link rel="stylesheet" type="text/css" href="/aaa/pro01-HTML/style/example.css" />

那么下面HTML代码的显示效果是：

    <div class="two">&nbsp;</div>
    <div class="two">&nbsp;</div>
    <div class="two">&nbsp;</div>

在这里插入图片描述

2、CSS代码语法

CSS样式由选择器和声明组成，而声明又由属性和值组成。
属性和值之间用冒号隔开。
多条声明之间用分号隔开。
使用/* … */声明注释。

3、CSS选择器

（1）标签选择器
HTML代码：

<p>Hello, this is a p tag.</p>
<p>Hello, this is a p tag.</p>
<p>Hello, this is a p tag.</p>
<p>Hello, this is a p tag.</p>
<p>Hello, this is a p tag.</p>

CSS代码：

p {
    color: blue;
    font-weight: bold;
}

在这里插入图片描述

（2）id选择器
HTML代码：

    <p>Hello, this is a p tag.</p>
    <p>Hello, this is a p tag.</p>
    <p id="special">Hello, this is a p tag.</p>
    <p>Hello, this is a p tag.</p>
    <p>Hello, this is a p tag.</p>

CSS代码：

#special {
font-size: 20px;
background-color: aqua;
}

在这里插入图片描述

（3）类选择器
HTML代码：

<div class="one">&nbsp;</div>
<div class="one">&nbsp;</div>
<div class="one">&nbsp;</div>

CSS代码：

.one {
    border: 1px solid black;
    width: 100px;
    height: 100px;
    background-color: lightgreen;
    margin-top: 5px;
}

机器人领域专业名词汇总

C++学习——顺序表（六）

【探秘机器人：从当下到未来的科技跃迁】

理解 Retrofit 请求头与 GsonConverterFactory 的自动处理机制

关于ant-design-vue中input元素disabled后无法选中复制内容

SNIPAR：快速实现亲缘个体的基因型分离与推断

Linly-Talker：开源数字人框架的技术解析与影响

C# 通过chrome插件将HTML网页转换为PDF

用TypeScript和library needle来创建视频爬虫程序

编写Dockerfile制作Redis镜像，生成镜像名为redis:v1.1，并推送到私有仓库。

从简单 Rocket 实现到 RESTful API：计算机网络中的 Web 通信解析

前端小食堂 | Day14 - Vue 3 の传送门与悬念

【科研绘图系列】python绘制分组点图（grouped dot plot）

迁移Kubuntu到thinkbook14+ 2025

第4节：分类任务

【WRF模拟】如何查看 WPS 的输入静态地理数据（二进制格式）？

香港公司建立公司网站和手机APP小程序等作为出口推广政统可补贴50%，最高补贴可100万

Sass (Scss) 与 Less 的区别与选择

对称二叉树二叉树的最大深度二叉树的最小深度

Pygame实现射击鸭子游戏3-3

缅甸内观冥想的历史漂流：从“人民鸦片”到东方灵修

现场丨在胡适施蛰存等手札与文献间，再读百年光华

伊朗最高领袖顾问：伊朗愿承诺永不制造核武，换取美解除制裁

紫光集团原董事长赵伟国一审被判死缓

上海北外滩开发建设五周年交出亮眼答卷，未来五年有何新目标？

郑州通报涉“健康证”办理有关问题查处进展情况

文章目录

一、 HTML简介

1、HTML概念

2、HTML文件结构

3、可视化网页结构

二、 HTML标签语法

1、标题标签

2、段落标签

3、超链接

4、换行

5、无序列表

6、路径

7、图片

8、块

1 盒子模型

2 布局标签

三、 使用HTML表格展示数据

1、定义表格

2、合并单元格

横向合并

纵向合并

四、 使用HTML表单收集数据

1、form标签

2、name和value

3、单行文本框

4、密码框

5、单选框

6、多选框

7、下拉列表

8、按钮

9、表单隐藏域

10、多行文本框

五、 CSS的简单应用

1、设置CSS样式的三种方式

2、CSS代码语法

3、CSS选择器

相关文章：

三、使用HTML表格展示数据

四、使用HTML表单收集数据