01.JavaWeb-HTML+CSS

LB_bei

已于 2023-06-05 15:59:08 修改

阅读量505

点赞数 1

分类专栏：前端 JavaEE 文章标签： html 前端

于 2023-05-26 17:58:48 首次发布

本文链接：https://blog.csdn.net/LB_bei/article/details/130825916

版权

JavaEE 同时被 2 个专栏收录

34 篇文章 0 订阅

订阅专栏

前端

9 篇文章 0 订阅

订阅专栏

1.HTML超文本标记语言（Hypertext Markup Language）

HTML是一种用于创建网页的标记语言。它使用标记标签来描述网页的结构和内容。HTML标签告诉浏览器如何显示网页的不同部分，包括标题、段落、链接、图像等。

创建基础框架的vscode快捷键：!+tab

1.1HTML基础标签

<html>	定义HTML文档的根目录
<head>	定义文档的头部区域，包含与文档相关的元数据和链接
<title>	定义网页的标题，显示在浏览器的标题栏或选项卡上
<body>	定义文档的主体内容
<h1>到<h6>	定义标题级别，从最高到最低级别
<p>	定义段落
<a>	定义链接，可以跳转到其他网页或同一页面的其他部分
	href="地址" 地址分相对地址和绝对地址，用 ../ 可以回退到上一层
	target属性用来指定链接在何处打开（当前窗口、新窗口）
	title属性用于提供链接的提示文本等
	name 属性用于为锚点（anchor）创建一个名称。锚点是文档内的一个位置，可以通过链接跳转到该位置 <a name="section1"></a> <a href="#section1">Go to Section 1</a>
	现代html推荐使用id创建锚点
<img>	定义图像，用于在网页中插入图片
	src属性指定要显示的图像的 URL `alt` 属性提供图像的替代文本。
	`width` 和 `height` 属性用于指定图像的宽度和高度。可以使用像素值或百分比进行指定。 `title` 属性用于提供图像的标题文本，当鼠标悬停在图像上时显示。 `align` 属性用于指定图像的对齐方式，如左对齐、右对齐等。 `border` 属性用于指定图像的边框宽度。
<ul>和<li>	定义无序列表，用于显示项目列表
<ol>和<li>	定义有序列表，用于显示按顺序排列的项目列表
<table>、<tr>、<td>、<th>	定义表格结构，用于显示数据表格
<div>	定义文档中的一个区块或容器，用于组织和样式化内容
<span>	定义文档中的行内元素，用于对文本进行样式化或标记
<br>	换行

<!DOCTYPE html>
<html>
	<head>
		<title>标题</title>
	</head>
	<body>
		<h1>一级标题</h1>
		<p>段落</p>
		<a href="https://www.pexels.com/zh-cn/photo/3358880/">链接</a>

		<!--图片-->
		<img src="https://images.pexels.com/photos/3358880/pexels-photo-3358880.png" alt = "城堡" 	width="400" >
		
		<ul>
			<li>无序列表1</li>
		</ul>
		<ol>
			<li>有序列表1</li>
		</ol>
		<table>
		<tr>
			<th>表格头1</th>
		</tr>
		<tr>
			<td>表格内容1</td>
		</tr>
		</table>

		<!--区块/容器-->
		<div>
			<h2>二级标题</h2>
			<p>区块中的段落</p>
		</div>
		
		<p>行内<span style="color:red;">红</span>元素</p>
	</body>
</html>

1.2 表单标签Form

可以包含各种输入字段、按钮和其他交互元素，用于用户输入数据并提交到服务器进行处理。

form中两个重要属性：	action：将数据提交到何处（默认提交到本页）	本机内网路径（相对路径、绝对路径）
		互联网路径（某个网址）
	method：将数据以何种方式提交	get提交方式：提交的参数列表拼接到了地址栏后面，提交数据量小（信息不安全）
		post提交方式：提交的参数列表不拼接到地址栏后面，提交数据量大（信息相对安全）

1.2.1 get与post的区别：

		get	post
提交位置	数据包含在URL的查询字符串中		数据包含在请求的消息体中
提交数据长度	有限制，通常在几千个字符左右		无限制，可以发送大量数据
数据可见性	数据明文显示在URL中，可以在浏览器地址栏和历史记录中看到		数据不会明文显示在URL中，更安全
适用场景	获取资源、查询数据		提交数据、修改数据
安全性	由于数据明文显示在URL中，相对较不安全		数据不会明文显示在URL中，相对更安全
数据类型	只能传输ASCII字符		可以传输非ASCII字符
二进制数据	不适合传输二进制数据		适合传输二进制数据
浏览器回退	无害		会重新提交数据

<form action="/submit" method="post">
    <!-- 表单提交的目标地址为 "/submit"，使用 POST 方法发送请求 -->
    
    <label for="message">Message:</label>
    <!-- 创建一个标签，关联到下面的文本框 -->
    
    <textarea id="message" name="message" rows="4" cols="40" required></textarea>
    <!-- 创建一个多行文本输入框，要求必填 -->
    
    <input type="submit" value="Submit">
    <!-- 创建一个提交按钮，用于提交表单 -->
</form>

1.2.2 输入项标签 <input/>

类型	用途	示例
1.文本输入：<input type="text">	用于单行文本输入	<input type="text" placeholder="请输入用户名">
2.密码输入：<input type="password">	用于密码输入，输入内容将被隐藏	<input type="password" name="密码">
3.单选按钮<input type="radio">	用于选择一个选项	<input type="radio" name="性别" value="男">男
4.复选框<input type="checkbox">	用于选择多个选项	<input type="checkbox" name="爱好" value="读书">读书
5.文件上传<input type="file">	用于选择上传文件	<input type="file" name="上传">
6.提交按钮<input type="submit">	用于提交表单数据	<input type="submit" value="提交">
7.按钮<input type="button">	用于设置一个按钮	<input type="button" value="按钮"> 按下的事件需要在JavaScript中设置
8.隐藏域<input type="hidden">	用于设置用户不可见，后台可见的数据	<input type="hidden" name="id" value="adw2121as">

1.2.3 选择框标签<select></select>

注意：Option的内容体一般是用来进行展示的，参数值是option的value属性值

multiple属性可以设置选择框为多选

<body>
  <form >
    <!-- 若想提交选择框中值，需要给选择框设置name -->
    <select name="city">
      <!-- 选项 -->
      <option value="1">请选择所在城市</option>
      <!-- selected可以设置选择框默认选中的选项 -->
      <option value="2" selected="selected">成都</option>
      <option value="3">上海</option>
    </select>
    <br>
    <input type="submit">
    <br>

    <select name="hobby" multiple="multiple">
      <!-- 选项 -->
      <option value="1">请选择你的爱好</option>
      <option value="2">打篮球</option>
      <option value="3">跑步</option>
      <option value="4">编码</option>
      <option value="5">游泳</option>
    </select>
    <br>
    <input type="submit">
  </form>
</body>

2. CSS 层叠样式表（Cascading Style Sheets）

用于设置HTML页面中的文本内容，美化页面

2.1 CSS格式规范

选择器名称 { 属性名: 属性值: ; 属性名: 属性值: ; ......}

2.1.1 元素选择器（标签选择器）

<!DOCTYPE html>
<head>
    <title>Document</title>
    <style>
        span{
            font-size: 40px;
            color: blueviolet;
            /* 设置边框粗细、样式、颜色 */
            border: 1px solid green
        }
    </style>
</head>
<body>
    <span>CSS演示设置文字的样式</span>
</body>
</html>

2.1.2 类选择器

<!DOCTYPE html>
<head>
    <title>Document</title>
    <style>
        .black{
            color: black;
        }
        .red{
            color: red;
        }
    </style>
</head>
<body>
    <span class="black">span1 我是黑色</span>
    <span class="red">span2 我是红色</span>

    <div class="black">div1 我也是黑色</div>
    <div class="red">div2 我也是红色</div>
</body>
</html>

2.1.3 id选择器

每个HTML标签都有一个id属性，id的属性值必须在本页面是唯一的。

id选择器就是以HTML的id前面加一个#作为选择器名称；

2.1.4子组合器

/* 选择所有 <ul> 元素下的直接子元素 <li> */
ul > li {
  /* 样式规则 */
}

2.1.5属性选择器

[class] {
  color: red;
}

<p class="highlight">文本内容</p>

2.2基本选择器的组合方式

层级关系：选择器可以嵌套选择器

2.3常用样式

2.3.1边框属性

border 设置边框的样式	border: 1px solid red ; 1像素粗的实线红色边框
width 设置边框的宽度	width:1px;
height 设置边框的宽度	height: 2px;
background-color 设置标签的背景颜色	background-color: bule;

2.3.2布局

float 设置元素的浮动位置	float: none; 元素不浮动
	float: right; 元素向右浮动
	float: left; 元素向左浮动
position 设置元素的位置	position: relative 设置为相对位置，以自己的左上角为起始位置
	position: absolute 设置为绝对位置，以父元素左上角为起始位置
	position: fixed 设置为固定位置，以页面左上角为原点进行移动
注意：因为元素设置浮动属性后，会脱离原有文档版式，从而会影响其他元素的样式，所以设置浮动以后，页面样式需要重新调整 <div style="clear:both"></div>

2.3.3转换

display 可以使得元素在行内元素和块元素之间相互转换	display: block; 将元素显示为块元素
	display: inline; 将元素显示为行内元素
	display: none; 将元素隐藏，不占用空间

2.3.4字体

font-size 设置字体大小	font-size: 100px
color 设置字体颜色	color: blue;

2.4CSS盒子模型

每一个HTML元素都可以看成一个盒子，css可以设置这个盒子的内边距、边框、外边距等

2.4.1边框

border-top 设置上边框	border-top: 1px solid red;
border 设置上下左右的边框	border: 1px solid red ;
border-radius 边框逐渐变为一个圆

2.4.2内边距

padding-bottom 设置下内边距	padding-bottom: 10px;
padding 设置上下左右的内边距	padding: 10px ;

2.4.3外边距

相距其他元素盒子的距离

margin-left 设置左外边距	margin-left: 1px solid red;
margin 设置上下左右的外边距	margin: 1px solid red ;

2.5伪类和伪对象

2.5.1伪类

用于选择处于特定状态的元素

:hover  选择鼠标悬停在元素上的状态。
:active  选择被点击的状态。
:visited  点击过的超链接的状态
:link  未点击过的超链接的状态

2.6常用CSS属性

font-size 字体大小	cursor 设置鼠标显示效果
font-family 字体样式	text-decoration 删除线/下划线
font-weight 字体粗细	text-align 对齐方式

3. CSS与HTML的结合方式

3.1内部样式

3.1.1行内样式

通过标签的style属性来设置元素的样式

<body>
    <a style="font-size: 120px; color: red;">行内样式</a>
</body>

3.1.2标签方式

适合页面中进行样式复用

<head>
    <title>Document</title>
    <style>
        a{
            font-size: 40px;
            color: blueviolet;
        }
    </style>
</head>
<body>
    <a>CSS演示设置文字的样式1</a>
    <a>CSS演示设置文字的样式2</a>
</body>

3.2外部样式

用于给不同页面中的元素进行复用样式

新建CSS文件将要复用的样式写入

a{
    font-size: 40px;
    color: blueviolet;
}

然后需要复用样式的页面调用这个CSS文件

<link rel="stylesheet" type="text/css" href="css文件路径"/> （声明类要放到头标签中）
rel="stylesheet"	固定值，表示样式表
type="text/css"	固定值，表示css类型
href="css文件路径"	表示css文件位置