JavaWeb_01_HTML&CSS

最新推荐文章于 2024-02-16 17:36:23 发布
最新推荐文章于 2024-02-16 17:36:23 发布
阅读量145 收藏
点赞数
分类专栏： JavaWeb
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45506970/article/details/104704824
版权

HTML&CSS

网页的组成

  • 结构（HTML）：超文本标记语言
  • 表现（CSS）：层叠样式表
  • 行为（JavaScript/jQuery）：一门运行在浏览器端的脚本语言
  • 一个良好的网页要求结构、表现、行为三者分离

HTML的基本语法

  • HTML中的标签分为成对出现的标签和自结束标签
  • 标签不区分大小写，但建议小写
  • 成对出现的标签必须正确关闭
  • 标签可以嵌套，但不能交叉嵌套
  • 属性必须有值且值必须加引号
  • 注释不能嵌套

HTML中常用的标签

  • 标题标签（一共6个）
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
  • div标签
<div>我是div标签，我默认要占用浏览器的一整行，我主要用来布局</div>
  • 段落标签
<p>我是一个段落</p>
  • 转义字符（实体）
	3&lt;5 你离&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;我远点儿
  • 无序列表（主要用来做导航栏）
<ul>
    <li>网页</li>
    <li>音乐</li>
    <li>视频</li>
    <li>贴吧</li>
</ul>
<!--有序列表-->
<ol>
    <li>网页</li>
    <li>音乐</li>
    <li>视频</li>
    <li>贴吧</li>
</ol>

插入图片

  • 使用img标签向网页中插入图片
<!--通过img标签在网页上插入一张图片
        src属性：用来设置图片的路径
            相对路径：相对于当前页面所在的路径
            例如: wm.jpg，此时浏览器会去当前这个页面所在的路径下寻找wm.jpg图片
            在相对路径中，通过 ../ 返回上一级目录，返回多级目录使用多个 ../
         alt属性：用来设置当图片无法显示时的描述性信息
    -->
    <img src="../../wm.jpg" alt="这是一个美女">

超链接

  • 使用a标签创建一个超链接
  • 使用base标签可以指定当前页面中超链接的打开方式
<!DOCTYPE html>
<html>
	<head>
	<meta charset="UTF-8">
	<title>hyperlink_blank</title>
		<!--通过base标签的target属性可以指定当前页面中所有超链接的打开方式-->
		<base target="_blank">
</head>
<body>
	<!--通过a标签创建一个超链接
		href属性：设置要跳转的页面的路径
		target属性：设置要跳转的页面在何处打开
			_self：默认，在当前标签页打开
			_blank：在新的标签也打开
	-->
	<a href="pages/target.html" target="_self">我也要美女！</a><br>
	<a href="pages/target.html" target="_blank">我也要美女!</a><br>
</body>
</html>

表格

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>table_blank</title>
</head>
<body>
     <!--通过table标签创建一个表格-->
    <table border="1">
        <!--表格中的行使用tr标签表示-->
        <tr>
            <!--表格中的表头使用th标签来表示-->
            <th>姓名</th>
            <th>阵营</th>
            <th>职业</th>
            <th>武器</th>
        </tr>
        <!--表格中的行使用tr标签表示-->
        <tr>
            <!--表格中的列（单元格）使用td标签来表示-->
            <td>刘备</td>
            <td rowspan="4" align="center">蜀</td>
            <td>战士</td>
            <td>双股剑</td>
        </tr>
        <!--表格中的行使用tr标签表示-->
        <tr>
            <!--表格中的列（单元格）使用td标签来表示-->
            <td>诸葛亮</td>
<!--            <td>蜀</td>-->
            <!--跨列合并单元格使用colspan属性设置-->
            <td colspan="2" align="center">法师</td>
<!--            <td>羽扇</td>-->
        </tr>
        <!--表格中的行使用tr标签表示-->
        <tr>
        <!--表格中的列（单元格）使用td标签来表示-->
            <td>关羽</td>
<!--            <td>蜀</td>-->
            <td>战士</td>
            <td>青龙偃月刀</td>
        </tr>
        <!--表格中的行使用tr标签表示-->
        <tr>
            <!--表格中的列（单元格）使用td标签来表示-->
            <td>张飞</td>
<!--            <td>蜀</td>-->
            <td>坦克</td>
            <td>丈八蛇矛</td>
        </tr>
    </table>
   
</body>
</html>

表单

  • 必须掌握
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>form空白</title>
</head>
<body>
    <!--通过form标签创建一个表单
        action属性：用来设置服务器的地址
        method属性：用来设置请求方式
            get：默认值，将发送一个GET请求，表单中的数据通过浏览器的地址栏进行传输
            post：将发送一个POST请求，表单中的数据通过请求体（HTTP中的知识）进行传输
    -->
    <form action="success.html" method="get">
        <!--
            1）表单中的表单项使用input标签来表示，表单项的类型使用type属性指定
            2）必须给每个表单项指定name属性值，用户输入的数据通过name属性值进行携带，
               并以键值对的形式发送到服务器，多个键值对之间通过 & 符号分隔，
               例如：username=admin&password=123456
        -->
        用户姓名：<input type="text" name="username"><br>
        用户密码：<input type="password" name="password"><br>
        <!--
             1）单选按钮需要将他们的name属性值设置为同一个，即将它们分为一组
             2）单选按钮提交的是value属性值，所以必须指定value属性
             3）通过属性checked="checked"设置默认被选中
        -->
        性别：<input type="radio" name="gender" value="man" checked="checked">男
             <input type="radio" name="gender" value="woman">女<br>
        <!--
             1）复选框也需要将他们的name属性值设置为同一个，即将它们分为一组
             2）复选框提交的也是value属性值，所以必须指定value属性
             3）通过属性checked="checked"设置默认被选中
        -->
        爱好：<input type="checkbox" name="hobby" value="basketball" checked="checked">篮球
             <input type="checkbox" name="hobby" value="football">足球
             <input type="checkbox" name="hobby" value="volleball">排球<br>
        你喜欢的女明星
            <select name="stars">
                <!--如果指定了value属性，那么提交的是value属性值，
                如果没有指定value提交的是option标签中的文本值-->
                <option value="cls">苍老师</option>
                <option>张杰</option>
                <option>鹿晗</option>
                <option value="cxk">蔡徐坤</option>
                <!--通过属性selected="selected"指定下拉列表中默认选中的值-->
                <option value="xz" selected="selected">小泽</option>
            </select><br>
        <!--重置按钮-->
        <input type="reset">
        <!--通过value属性指定提交按钮上显示的文本值-->
        <input type="submit" value="注册">
    </form>
</body>
</html>

CSS的表示方式

  • 1）写在标签的style属性中：结构与表现相耦合，不建议使用
<p style="color: red">师傅领进门，修行在个人</p>
  • 2）写在style标签中：开发阶段使用
<style type="text/css">
	p{
		color: red;
		font-size: 20px;
	}
</style>
  • 3）引入外部的css文件，项目上线后使用这种方式
<link rel="stylesheet" type="text/css" href="css.css">

CSS中的基本选择器

  • 标签选择器
h2{
    color: red;
    font-size: 30px;
}
  • ID选择器
    • 格式：#id属性值
#p1{
    color: green;
}
  • 类选择器
    • 格式：.class属性值
.p2{
    color: blue;
}
  • 分组选择器
    • 格式：将各个选择器使用逗号分隔，统一设置样式
#p1,.p2{
    font-size: 20px;
}

颜色的表示方式

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS中的颜色</title>
	<style type="text/css">
		p{
			color: #3CC4A9;
		}
	</style>
</head>
<body>
	<!--颜色的表示方式：
		1）使用英文单词
		如：红色：red
		2）使用rgb值
		如：红色：rgb(255,0,0)
		3）使用十六进制数表示（比较常用）
			每种颜色按照红、绿、蓝的顺序使用两位十六进制数表示，不区分大小写，而且前面需要添加一个#号；
			如果表示某种颜色的两位十六进制数相同可以简写成一位
		如：红色：#FF0000=#ff0000=#F00=#f00
	-->
	<p>(RGB)光学三原色</p>
</body>
</html>

注释

HTML语法

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>grammar</title>
</head>
<body>

	<!-- 1.标签的分类 -->
	在HTML中有两种类型的标签：<br>
	1）成对出现的标签，如html、head、body等<br/>
	2）自结束标签，如meta、br、input等，自结束标签后面的/可以省略不写
	<!-- 2.标签不区分大小写 -->
	<p>我是一个段落</p>
	<P>我也是一个段落</P>
	<!-- 3.标签可以嵌套但不能交叉嵌套 -->
	<div>我是div标签，我默认要占用浏览器的一整行，我主要用来布局</div>
	<div><p>我是嵌套在div标签中的段落</div></p>
	<!-- 4.标签必须正确关闭 -->
	<p>我是一个段落</p>
	<!-- 5.属性必须有值，且属性值必须加引号 -->
	<font color="red">我要红</font><br>
	<font color=red>我要红</font><br>
	<font color="">我要红</font><br>
	<!-- 6.注释不能嵌套 -->
    <!--我是注释内容  <!--嵌套的注释内容-->  -->

</body>
</html>

常用标签

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>tag</title>
</head>
<body>
	<!-- 1.标题标签：一共6个 h1~h6 -->
	<h1>一级标题</h1>
	<h2>二级标题</h2>
	<h3>三级标题</h3>
	<h4>四级标题</h4>
	<h5>五级标题</h5>
	<h6>六级标题</h6>
	<h7>没有七级标题</h7>
	<!-- 2.div标签 -->
	<div>我是div标签，我默认要占用浏览器的一整行，我主要用来布局</div>我会在下一行显示
	<!-- 3.段落标签 -->
	<p>我是一个段落</p>
	<!-- 4.转义字符（实体） -->
	3&lt;5 你离&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;我远点儿
	<!-- 5.无序列表 -->
	<ul>
		<li>网页</li>
		<li>音乐</li>
		<li>视频</li>
		<li>贴吧</li>
	</ul>
	<!--有序列表-->
	<ol>
		<li>网页</li>
		<li>音乐</li>
		<li>视频</li>
		<li>贴吧</li>
	</ol>
</body>
</html>

插入图片

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>image</title>
</head>
<body>

	<img alt="picture" src="wm.jpg">

</body>
</html>

超链接

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>hyperlink</title>
</head>
<body>

	<a href="pages/target.html">跳转到目标页面，目标页面有美女！</a>

</body>
</html>

表格

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>table</title>
</head>
<body>
	<table border="1">
		<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>蜀汉集团CEO</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>

表单

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>form</title>
</head>
<body>
	<form action="success.html">
		用户名：<input type="text" name="username"/><br/><br/>
		密码：<input type="password" name="pwd"/><br/><br/>
		
		性别：<input type="radio" name="gender" value="man" checked="checked"/>男
		  	<input type="radio" name="gender" value="woman"/>女<br/><br/>
		  	
		 爱好：<input type="checkbox" name="hobby" value="basketball" checked="checked"/>篮球
		  	<input type="checkbox" name="hobby" value="football"/>足球
		  	<input type="checkbox" name="hobby" value="volleyball"/>排球
		  	<br/><br/>
		  	
	喜欢的明星：<select name="star">
	            <option value="fbb">范冰冰</option>
	            <option value="zy">杨颖</option>
	            <option value="zzy">章子怡</option>
	         </select>
	         
	         <br/>
	         <br/>
		<input type="reset">
		<input type="submit">
	</form>
</body>
</html>

CSS

CSS基本语法

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS基本语法</title>
<!--2.写在style标签中，开发阶段使用-->
<style type="text/css">
	p{
		color: red;
		font-size: 20px;
	}
</style>
	<!--3.引入外部的css文件，项目上线后使用这种方式
		使用这种方式的好处：
			1）可以复用
			2）省流量
			3）达到了结构和表现分离
	-->
	<link rel="stylesheet" type="text/css" href="css.css">
</head>
<body>
	<!--1.写在style属性中，结构与表现相耦合，不建议使用-->
<!--	<p style="color: red">师傅领进门，修行在个人</p>-->
	<p>师傅领进门，修行在个人</p>
	<div>我要通过引入外部的css文件设置样式</div>
</body>
</html>

CSS选择器

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS选择器</title>
	<style type="text/css">
	/*
		1.标签选择器
	 */
		h2{
			color: red;
			font-size: 30px;
		}
		/*
		2.ID选择器：给某个标签设置样式
		格式:#id属性值
		 */
		#p1{
			color: green;
		}
		/*
		3.类选择器：给某些标签统一设置样式
		格式：.class属性值
		 */
		.p2{
			color: blue;
		}

		/*
		4.分组选择器：将各个选择器使用逗号分隔，然后统一设置样式
		 */
		#p1,.p2{
			font-size: 20px;
		}
	</style>
</head>
<body>
	<h2>冬夜读书示子聿</h2>
	<!--在当前页面中id值不能重复，是一个唯一的标识-->
	<p id="p1">宋代•陆游</p>
	<p class="p2">古人学问无遗力</p>
	<p class="p2">少壮工夫老始成</p>
	<p class="p2">纸上得来终觉浅</p>
	<p class="p2">绝知此事要躬行</p>
	<div class="p2">我是通过类选择器设置的样式</div>
</body>
</html>

CSS颜色

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS中的颜色</title>
	<style type="text/css">
		p{
			color: #3CC4A9;
		}
	</style>
</head>
<body>
	<!--颜色的表示方式：
		1）使用英文单词
		如：红色：red
		2）使用rgb值
		如：红色：rgb(255,0,0)
		3）使用十六进制数表示（比较常用）
			每种颜色按照红、绿、蓝的顺序使用两位十六进制数表示，不区分大小写，而且前面需要添加一个#号；
			如果表示某种颜色的两位十六进制数相同可以简写成一位
		如：红色：#FF0000=#ff0000=#F00=#f00
	-->
	<p>(RGB)光学三原色</p>
</body>
</html>
学习Java的唐唐
关注
专栏目录
JavaWeb_html&CSS
D大调奏鸣曲_第七序章_de博客
03-11 301
前言 我与春风皆过客， 你携秋水揽星河。 一、html概述&CSS概述 javaWeb的概念：使用Java语言开发基于互联网的项目 两种结构： C/S: Client/Server 客户端/服务器端 概念：在用户本地有一个客户端程序，在远程有一个服务器端程序 * 如：QQ，迅雷... B/S: Browser/Server 浏览器/服务器端 概念：只需要一个浏览器，用户通过不同的网址(URL)，客户访问不同的服务器端程序 两种结构的区别： C/S: 优点： 用...
A030_JavaWeb&HTML&CSS
窗外有风景，笔下有前途，低头是题海，抬头是未来
06-15 9953
JavaWeb，HTML，CSS
JavaWeb入门____2.DIV&CSS
weixin_43317247的博客
11-26 139
JavaWeb入门____2.DIV&amp;amp;amp;CSS
JavaWeb_CSS 汇总
魏宇轩
09-18 970
汇总
JavaWeb_HTML和CSS
m0_50796684的博客
01-17 287
JavaWeb的学习之HTML和CSS的笔记
JavaWeb01_HTML+CSS实现注册页面
SeafyLiang的博客
02-24 1636
Web概念概述 JavaWeb 使用Java语言开发基于互联网的项目 软件架构： 1. C/S: Client/Server 客户端/服务器端 * 在用户本地有一个客户端程序，在远程有一个服务器端程序 * 如：QQ，迅雷... * 优点： 1. 用户体验好 * 缺点： 1. 开发、安装，部署，维护 麻烦 2. B/S: Browser/Server 浏览器/服务器端 * 只需要一个浏览...
2、Javaweb_HTML:表单&CSS:页面美化和布局控制
qq1092881420的博客
01-08 1148
label的for属性一般会和 input 的 id属性值 对应。* placeholder：指定输入框的提示信息，当输入框的内容发生变化，会自动清空提示信息。1. 要想让多个单选框实现单选的效果，则多个单选框的name属性值必须一样。2. 一般会给每一个单选框提供value属性，指定其被选中后提交的值。1. 一般会给每一个单选框提供value属性，指定其被选中后提交的值。1. id选择器：选择具体的id属性值的元素.建议在一个html页面中id值唯一。* 语法： 元素名称[属性名="属性值"]{}
01-JavaWeb -HTML&CSS
weixin_59141187的博客
02-16 251
Java学习路线 前端概述 HTML 结构标签 基础标签&样式 标题排版 绝对和相对路径 标题样式 颜色表示 超链接 音频标签 页面布局 表格 表单
JavaWeb之HTML&CSS
weixin_42284219的博客
01-12 1135
知识回顾： JavaWeb之Java基础知识增强 JavaWeb之JDBC JavaWeb之数据库连接池 文章目录1.web概念概述1.1软件架构：1.2 B/S架构详解1.3 静态资源：2.HTML2.1 概念：是最基础的网页开发语言2.2 快速入门：2.3 标签学习2.3.1 文件标签：构成html最基本的标签2.3.2 文本标签：和文本有关的标签2.3.3 图片标签：2.3.4 列表标签：2.3.5 链接标签：2.3.6 div和span：2.3.7 语义化标签：html5中为了提高程序的可读性，提供
Javaweb笔记：第05章_HTML & CSS & JavaScript & XML
IAMLSL的博客
06-19 806
黑马程序员Java web课程笔记整理——HTML、CSS、JavaScript
paimai.rar_Javaweb系统_javaWeb/mysql_javaweb_javaweb mysql
09-19
【标题】"paimai.rar_Javaweb系统_javaWeb/mysql_javaweb_javaweb_mysql" 提供了一个基于JavaWeb技术构建的拍卖系统，该系统采用了MySQL作为其数据库管理系统。这个项目不仅展示了JavaWeb开发的核心技术，还强调了...
xiaomi.rar_eclipse 网页_javaweb_javaweb项目_xiaomi login
09-21
【标题】"xiaomi.rar_eclipse 网页_javaweb_javaweb项目_xiaomi login" 提供了一个关于JavaWeb开发的项目实例，其中涉及到的主要技术栈包括Eclipse IDE、网页设计以及特定的登录功能。这个压缩包很可能包含了一个...
基于javaweb的图书馆查询系统.zip_javaweb_javaweb_前端_javaweb前端_javaweb图书查询_基
09-20
HTML、CSS和JavaScript是前端开发的基础，而现代Web开发框架如Vue.js、React.js或Angular.js能提高开发效率和用户体验。 4. 请求处理：在JavaWeb中，Servlet是处理HTTP请求的主要组件。当用户通过浏览器发送查询...
xinwenruyi-JavaWeb-master_HTML5_CSS3源码_
10-02
CSS3还引入了边框半径（border-radius）、盒阴影（box-shadow）、背景渐变（background gradients）和多列布局（multi-column layout），增强了视觉效果。此外，媒体查询（media queries）是响应式设计的关键，允许...
模块化多电平变流器MMC VSG控制（同步发电机控制）MATLAB–Simulink仿真模型 5电平三相MMC，采用VSG控制
最新发布
10-07
模块化多电平变流器MMC VSG控制（同步发电机控制）MATLAB–Simulink仿真模型 5电平三相MMC，采用VSG控制 受端接可编辑三相交流源，直流侧接无穷大电源提供调频能量。 设置频率波动和电压波动的扰动，可以验证VSG控制的调频调压效果
使用scikit-learn进行鸢尾花数据集分类及模型评估（包含详细的完整的程序和数据）
10-07
内容概要：本篇文章详述了使用Scikit-learn这一强大的开源机器学习库对经典的鸢尾花数据集进行预处理、特征选取和模型训练。采用随机森林分类器完成对鸢尾花种类的识别和分类的任务，利用多种模型评估手段衡量其分类能力。 适合人群：对于机器学习有一定基础知识的研究人员和工程师，特别是对模型搭建感兴趣的技术人员。 使用场景及目标：针对具有明确标记的数据集进行探索性数据分析和初步模型开发的工作场景下，帮助学习者理解和掌握机器学习流程的关键步骤，提升他们使用Scikit-learn进行建模的能力。 其他说明：本文提供了详细的步骤指南与代码样例，同时指出了可能进一步提高效果的方向，如超参数优化、特征工程等。
基于C# Avalonia的Linux平台上位机应用开发与通信实操
10-07
1、跨平台应用开发需求 - 工业应用：c# Windows Winform 系统国产 Linux - 技术扩展： - Linux 应用 Ava 2、从Windows到跨平台 - C#框架：Winform、WPF、Xamarin（移动端）、MAUI（移动端、桌面 不包含Linux）、Avalonia（跨平台 Linux） Avalon(WPF) - 其他框架：QT（C++）、Electron（js） - 开发形式：项目结构、交互对接（WPF基本一致）
基于rrt算法的机器人路径规划python代码.rar
10-07
1.版本：matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。
html实现表格展示和修改
10-07
html实现表格展示和修改
JavaWeb HTML与CSS基础教程
"尚硅谷JavaWeb笔记，主要涵盖了HTML和CSS的基础知识，包括标签、属性、事件、注释、超级链接、列表以及表格的使用。" 在JavaWeb开发中，前端部分通常涉及到HTML和CSS，它们是构建网页内容和样式的基石。本笔记详细...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值