IT评测·应用市场-qidao123.com

标题: 【JavaWeb】快速入门——HTML&CSS [打印本页]

作者: 张春 时间: 2025-3-13 13:07
标题: 【JavaWeb】快速入门——HTML&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~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、路径

绝对路径:

绝对磁盘路径: 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>
<tr>
<th>姓名</th>
<th>属性</th>
<th>级别</th>
<th>忍村</th>
</tr>
<tr>
<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;"> </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;"> </div>
<div class="one"> </div> <div class="one"> </div> <div class="one"> </div></body>

复制代码