【JavaWeb】快速入门——HTMLCSS

文章目录

  • 一、 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语法规则：

  1. 根标签有且只能有一个
  2. 无论是双标签还是单标签都必须正确关闭
  3. 标签可以嵌套但不能交叉嵌套
  4. 注释不能嵌套
  5. 属性必须有值，值必须加引号，单引号或双引号均可
  6. 标签名不区分大小写但建议使用小写
标签名称功能
h1~h61级标题~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、路径

绝对路径:

  1. 绝对磁盘路径: C:\Users\Administrator\Desktop\HTML\img\news_logo.png
<img src="C:\Users\Administrator\Desktop\HTML\img\news_logo.png">
  1. 绝对网络路径: 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;
}

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/34444.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

MySQL 优化方案

MySQL 优化方案

一、MySQL 查询过程 MySQL 查询过程是指从客户端发送 SQL 语句到 MySQL 服务器&#xff0c;再到服务器返回结果集的整个过程。这个过程涉及多个组件的协作&#xff0c;包括连接管理、查询解析、优化、执行和结果返回等。 1.1 查询过程的关键组件 连接管理器&#xff1a;管理…
阅读更多...
服务性能防腐体系：基于自动化压测的熔断机制

服务性能防腐体系：基于自动化压测的熔断机制

01# 背景 在系统架构的演进过程中&#xff0c;项目初始阶段都会通过压力测试构建安全护城河&#xff0c;此时的服务性能与资源水位保持着黄金比例关系。然而在业务高速发展时期&#xff0c;每个冲刺周期都被切割成以业务需求为单位的开发单元&#xff0c;压力测试逐渐从必选项…
阅读更多...
六十天前端强化训练之第二十天React Router 基础详解

六十天前端强化训练之第二十天React Router 基础详解

欢迎来到编程星辰海的博客讲解 看完可以给一个免费的三连吗&#xff0c;谢谢大佬&#xff01; 目录 一、核心概念 1.1 核心组件 1.2 路由模式对比 二、核心代码示例 2.1 基础路由配置 2.2 动态路由示例 2.3 嵌套路由实现 2.4 完整示例代码 三、关键功能实现效果 四、…
阅读更多...
grad_traj_optimization 开源项目

grad_traj_optimization 开源项目

开源项目 grad_traj_optimization 使用教程-CSDN博客 ubuntu如何切换到root用户_ubuntu切换到root用户-CSDN博客 catkin_make: command not found 解决办法_catkin-make not found-CSDN博客 这就说明需要编译的package虽然存在&#xff0c;但不在指定的目录下。catkin_make命…
阅读更多...
深圳南柯电子｜净水器EMC测试整改：水质安全与电磁兼容性的双赢

深圳南柯电子｜净水器EMC测试整改：水质安全与电磁兼容性的双赢

在当今注重健康生活的时代&#xff0c;净水器作为家庭用水安全的第一道防线&#xff0c;其性能与安全性备受关注。其中&#xff0c;电磁兼容性&#xff08;EMC&#xff09;测试是净水器产品上市前不可或缺的一环&#xff0c;它直接关系到产品在复杂电磁环境中的稳定运行及不对其…
阅读更多...
要登录的设备ip未知时的处理方法

要登录的设备ip未知时的处理方法

目录 1 应用场景... 1 2 解决方法&#xff1a;... 1 2.1 wireshark设置... 1 2.2 获取网口mac地址&#xff0c;wireshark抓包前预过滤掉自身mac地址的影响。... 2 2.3 pc网口和设备对接... 3 2.3.1 情况1&#xff1a;... 3 2.3.2 情…
阅读更多...
GHCTF web方向题解

GHCTF web方向题解

upload?SSTI! import os import refrom flask import Flask, request, jsonify,render_template_string,send_from_directory, abort,redirect from werkzeug.utils import secure_filename import os from werkzeug.utils import secure_filenameapp Flask(__name__)# 配置…
阅读更多...
Vision Transformer (ViT)：将Transformer带入计算机视觉的革命性尝试（代码实现）

Vision Transformer (ViT)：将Transformer带入计算机视觉的革命性尝试（代码实现）

Vision Transformer (ViT)&#xff1a;将Transformer带入计算机视觉的革命性尝试 作为一名深度学习研究者&#xff0c;如果你对自然语言处理&#xff08;NLP&#xff09;领域的Transformer架构了如指掌&#xff0c;那么你一定不会对它在序列建模中的强大能力感到陌生。然而&am…
阅读更多...
蓝耘携手通义万象 2.1 图生视频：开启创意无限的共享新时代

蓝耘携手通义万象 2.1 图生视频：开启创意无限的共享新时代

在科技飞速发展的今天&#xff0c;各种新奇的技术不断涌现&#xff0c;改变着我们的生活和工作方式。蓝耘和通义万象 2.1 图生视频就是其中两项非常厉害的技术。蓝耘就像是一个超级大管家&#xff0c;能把各种资源管理得井井有条&#xff1b;而通义万象 2.1 图生视频则像是一个…
阅读更多...
IEC61850标准下MMS 缓存报告控制块 ResvTms详细解析

IEC61850标准下MMS 缓存报告控制块 ResvTms详细解析

IEC61850标准是电力系统自动化领域唯一的全球通用标准。IEC61850通过标准的实现&#xff0c;使得智能变电站的工程实施变得规范、统一和透明&#xff0c;这大大提高了变电站自动化系统的技术水平和安全稳定运行水平。 在 IEC61850 标准体系中&#xff0c;ResvTms&#xff08;r…
阅读更多...
【DeepSeek应用】DeepSeek模型本地化部署方案及Python实现

【DeepSeek应用】DeepSeek模型本地化部署方案及Python实现

DeepSeek实在是太火了，虽然经过扩容和调整，但反应依旧不稳定，甚至小圆圈转半天最后却提示“服务器繁忙，请稍后再试。” 故此，本文通过讲解在本地部署 DeepSeek并配合python代码实现，让你零成本搭建自己的AI助理，无惧任务提交失败的压力。 一、环境准备 1. 安装依赖库 …
阅读更多...
蓝思科技冲刺港股上市，双重上市的意欲何为？

蓝思科技冲刺港股上市，双重上市的意欲何为？

首先&#xff0c;蓝思科技冲刺港股上市&#xff0c;这一举措是其国际化战略进入实质性阶段的重要标志。通过港股上市&#xff0c;蓝思科技有望进一步拓宽融资渠道&#xff0c;这不仅能够为公司带来更加多元化的资金来源&#xff0c;还能够降低对单一市场的依赖风险&#xff0c;…
阅读更多...
深入探讨RAID 5的性能与容错能力：实验与分析(磁盘阵列)

深入探讨RAID 5的性能与容错能力：实验与分析(磁盘阵列)

前言—— 本实验旨在探讨 RAID 5 的性能和容错能力。通过创建 RAID 5 阵列并进行一系列读写性能测试及故障模拟&#xff0c;我们将观察 RAID 5 在数据冗余和故障恢复方面的表现&#xff0c;以验证其在实际应用中的可靠性和效率。 首先说明&#xff1a;最少三块硬盘, 使用 4 块…
阅读更多...
excel中两个表格的合并

excel中两个表格的合并

使用函数&#xff1a; VLOOKUP函数 如果涉及在excel中两个工作表之间进行配对合并&#xff0c;则&#xff1a; VLOOKUP(C1,工作表名字!A:B,2,0) 参考&#xff1a; excel表格中vlookup函数的使用方法步骤https://haokan.baidu.com/v?pdwisenatural&vid132733503560775…
阅读更多...
基于ssm的宠物医院信息管理系统(全套)

基于ssm的宠物医院信息管理系统(全套)

一、系统架构 前端&#xff1a;html | layui | vue | element-ui 后端&#xff1a;spring | springmvc | mybatis 环境&#xff1a;jdk1.8 | mysql | maven | tomcat | idea | nodejs 二、代码及数据库 三、功能介绍 01. web端-首页1 02. web端-首页…
阅读更多...
UE小：UE5.5 PixelStreamingInfrastructure 使用时注意事项

UE小：UE5.5 PixelStreamingInfrastructure 使用时注意事项

1、鼠标默认显示 player.ts中的Config中添加HoveringMouse:true 然后运行typescript\package.json中的"build":npx webpack --config webpack.prod.js
阅读更多...
iOS底层原理系列01-iOS系统架构概览-从硬件到应用层

iOS底层原理系列01-iOS系统架构概览-从硬件到应用层

1. 系统层级结构 iOS系统架构采用分层设计模式&#xff0c;自底向上可分为五个主要层级&#xff0c;每层都有其特定的功能职责和技术组件。这种层级化结构不仅使系统更加模块化&#xff0c;同时也提供了清晰的技术抽象和隔离机制。 1.1 Darwin层&#xff1a;XNU内核、BSD、驱动…
阅读更多...
Ubuntu从源代码编译安装QT

Ubuntu从源代码编译安装QT

1. 下载源码 wget https://download.qt.io/official_releases/qt/5.15/5.15.2/single/qt-everywhere-src-5.15.2.tar.xz tar xf qt-everywhere-src-5.15.2.tar.xz cd qt-everywhere-src-5.15.22. 安装依赖库 sudo apt update sudo apt install build-essential libgl1-mesa-d…
阅读更多...
深度学习基础：线性代数本质4——矩阵乘法

深度学习基础：线性代数本质4——矩阵乘法

两个矩阵相乘的意义就是复合变换 1. 复合变换 例如先进行旋转变换再进行剪切变换&#xff0c;这很明显是两个变换&#xff0c;但是从总体上看可以看作是一个复合变换&#xff0c;是旋转和剪切作用的总和。 和其他线性变换一样&#xff0c;我们也可以通过记录变换后的 i j 来实…
阅读更多...
前端技巧第五期JavaScript函数

前端技巧第五期JavaScript函数

函数定义 1. 传统定义方式 // 1. 函数声明&#xff08;存在提升&#xff09;function sum(a, b) { return a b;} // 2. 函数表达式const multiply function(a, b) { return a * b;}; // 3. 构造函数&#xff08;不推荐&#xff09;const div new Function(a, b, return …
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023