javaweb(01)HTML&CSS

其他 2020-10-15 13:38:34 阅读次数: 0

javaweb(01):HTML&CSS

B/S软件架构

B：browser 浏览器

S: server 客户端

image-20200803193813873

网页的组成成分

  • 结构（网页上有什么东西）
    • HTML用于描述页面的结构
  • 表现（这些东西长什么样）
    • CSS用于控制页面中元素的样式
  • 行为（网页界面和用户交互）
    • Javascript用于响应用户操作

image-20200803194404840

HTML

简介

Hyper Text Markup Language （超文本标记语言） 简写：HTML

HTML 通过标签来标记要显示的网页中的各个部分。网页文件本身是一种文本文件， 通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字如何处理，画 面如何安排，图片如何显示等）

书写规范

表示整个 html 页面的开始

​ 头信息

​ 标题 标题

​

​ body 是页面的主体内容

​ 页面主体内容

​

表示整个 html 页面的结束

Html 的代码注释:

示例：

image-20200803195638342

标签介绍

image-20200803200735328

标签的语法

  • 标签不能交叉嵌套

    <!-- ①标签不能交叉嵌套 -->
	正确：<div><span>早安，安溥</span></div>
	错误：<div><span>早安，安溥</div></span>

  • 标签必须正确关闭

    	<!-- i.有文本内容的标签： -->
	正确：<div>早安，安溥</div>
	错误：<div>早安，安溥
	<hr />
	
	<!-- ii.没有文本内容的标签： -->
	正确：<br />
	错误：<br >
	<hr />

  • 属性必须有值，属性值必须加引号

    	正确：<font color="blue">早安，安溥</font>
	错误：<font color=blue>早安，安溥</font>
	错误：<font color=>早安，安溥</font>

  • 注释不能嵌套

    ​ 正确：

    ​ 错误：<!-- -->

常用标签

1.br：换行； hr:分割线

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我是一个网页</title>
</head>
<body>
    hello,I'm deserts~~<br />
    hello,I'm deserts~~<hr />
    hello,I'm deserts~~
</body>
</html>

效果：

image-20200803202349147

2.font 字体标签

属性：

color 属性修改颜色

face 属性修改字体

size 属性修改文本大小

示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>2.font标签.html</title>
</head>
<body>
	<font color="blue" face="宋体" size="20"> 我是一个字体标签</font>
	<!-- 字体标签 -->
</body>
</html>

效果：

image-20200803203041045

3.特殊字符

常用特殊字符表

image-20200803203253844

示例：把br换行标签 变成文本 转换成字符显示在页面上

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>3.特殊字符.html</title>
</head>
<body>
	
	<!-- 特殊字符 -->
	<font size="20" color="red">我是&lt;br&gt;标签</font>

</body>
</html>

效果：

image-20200803203758041

4.标题标签

h1~h6:一级到六级标题

示例：

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

	
</body>
</html>

效果：

image-20200803204222846

5.超链接（重点）

a标签是超链接，href属性设置连接的地址，target 属性设置哪个目标进行跳转

_self 表示当前页面**(默认值)*

_blank 表示打开新页面来进行跳转*

示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>5.超链接.html</title>
</head>
<body>

	<!-- 超链接 -->
	<a href="www.baidu.com" target="_self">_self百度</a><br/>
	<a href="www.baidu.com" target="_blank">_blank百度</a><br/>
</body>
</html>

效果：

image-20200803205138159

6.列表标签

常用的有：无序列表、有序列表

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表标签</title>
</head>
<body>
    <!--无序列表 使用ul定义一个无序列表 li定义具体的列表项-->
    <ul>
        <li>儿歌</li>
        <li>宝贝</li>
        <li>喜欢</li>
        <li>日子</li>
    </ul>

    <!--有序列表 ol li-->
    <ol start="3">
        <li>儿歌</li>
        <li>宝贝</li>
        <li>喜欢</li>
        <li>日子</li>
    </ol>
</body>
</html>

效果：

image-20200803205924603

7.img标签

img标签常用属性：

src 属性可以设置图片的路径

width 属性设置图片的宽度

height 属性设置图片的高度

border 属性设置图片边框大小

alt 属性设置当指定路径找不到图片时*,*用来代替显示的文本内容

绝对路径、相对路径：

image-20200803210344940

示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>7.img标签.html</title>
</head>
<body>
    <!--
    img 标签是图片标签,用来显示图片
        src 属性可以设置图片的路径
        width 属性设置图片的宽度 height 属性设置图片的高度
        border 属性设置图片边框大小
        alt 属性设置当指定路径找不到图片时,用来代替显示的文本内容
    -->
    <img src="../imgs/deserts.jpg" width="374" height="274" border="1" alt="anpu"/>
</body>
</html>

效果：

image-20200803212748806

8.表格标签table（重点）

属性：

border 设置表格标签(有边线)

width 设置表格宽度

height 设置表格高度

align 设置表格相对于页面的对齐方式

cellspacing 设置单元格间距

tr 是行标签

th 是表头标签

td 是单元格标签

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>表格标签</title>
	</head>
	<body>
		<table align="center" border="1" width="300" cellspacing="0">
			<tr>
				<th>姓名</th><th>性别</th><th>爱好</th>
			</tr>
			<tr>
				<td>张三</td><td>男</td><td>打游戏</td>
			</tr>
			<tr>
				<td>李四</td><td>女</td><td>跳舞</td>
			</tr>
			<tr>
				<td>王五</td><td>男</td><td>唱歌</td>
			</tr>
		</table>

		
	</body>
</html>

效果图：

image-20200804104739931

跨行跨列：

  • colspan 跨列 值是一个数字，表示跨几列
  • rowspan 跨行 值是一个数字，表示跨几行

示例：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>表格标签</title>
	</head>
	<body>
		<table align="center" border="1" width="300" cellspacing="0">
			<tr>
				<th>姓名</th><th>性别</th><th>爱好</th>
			</tr>
			<tr>
				<td colspan="2">张三</td><td>打游戏</td>
			</tr>
			<tr>
				<td rowspan="2">李四</td><td>女</td><td>跳舞</td>
			</tr>
			<tr>
				<td>男</td><td>唱歌</td>
			</tr>
		</table>

		
	</body>
</html>

效果：

image-20200804110929786

9.表单标签form（重点）

表单：把数据提交到服务器，数据一般都是用户填写

属性：

action：表示要提交到的地方（资源路径） 指定要提交到的资源位置

method：表单的提交方式；

​ get提交：会把数据使用键值对方式，追加到地址栏（默认）

​ post提交：不会追加到地址栏

input标签：

表单是将用户输入的内容以键值对方式提交

name：定义表单项的键名

value：定义表单项的值

表单提交多个表单项，键值会以&符连接

输入的类型：

  • input 定义一个文本框（type = “text”）
  • input 定义一个提交按钮 (type = “submit”)
  • input 定义一个密码框 (type = “password” )
  • input 定义一个单选框 (type = “radio” )需要将name属性设为一致，才可以实现单选
  • input (type = “checkbox”)一组多选框的name属性设为一致，还需为value赋值
  • select 定义一个下拉列表 使用option定义选项
  • input 提交 (type = “submit” value = “登录”)

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单标签</title>
</head>
<body>
    <form action="target.html">
        用户名：<input type="text"/><br/>
        密码：<input type="password"/> <br/>
        性别： 男：<input type="radio" name="gender" value="male"/>
              女：<input type="radio"name="gender" value="female"/> <br/>
        爱好： 西瓜<input type="checkbox" name="ah" value="xg"/>
              香蕉<input type="checkbox" name="ah" value="xj"/>
              芒果<input type="checkbox" name="ah" value="mg"/><br/>
        最喜欢的歌手：
        <select name="singer">
            <option value="zhang">张悬</option>
            <option value="sun">孙燕姿</option>
            <option value="xu">徐佳莹</option>
            <option value="yang">杨乃文</option>
        </select>
        <br/>
        <input type="submit" value="登录">
    </form>
</body>
</html>

效果：

image-20200804113817888

image-20200804113950487

利用表格表单进行格式化：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="target.html">
    <table>
        <tr>
            <td>用户名：</td><td><input type="text"/><br/></td>
        </tr>
        <tr>
            <td>密码：</td><td><input type="password"/> <br/></td>
        </tr>
        <tr>
            <td>性别：</td>
            <td>
                男：<input type="radio" name="gender" value="male"/>
                女：<input type="radio"name="gender" value="female"/> <br/>
            </td>
        </tr>
        <tr>
            <td>爱好：</td>
            <td>
                西瓜<input type="checkbox" name="ah" value="xg"/>
                香蕉<input type="checkbox" name="ah" value="xj"/>
                芒果<input type="checkbox" name="ah" value="mg"/>
            </td>
        </tr>
        <tr>
            <td> 歌手：</td>
            <td>
                <select name="singer">
                    <option value="zhang">张悬</option>
                    <option value="sun">孙燕姿</option>
                    <option value="xu">徐佳莹</option>
                    <option value="yang">杨乃文</option>
                </select>
            </td>
        </tr>
        <tr>
            <td></td>
            <td><input type="submit" value="登录"></td>
        </tr>
    </table>
  </form>
  </body>
</html>

效果图：

image-20200804114959842

10.ifram标签

ifarme 标签可以在页面上开辟一个小区域显示一个单独的页面

ifarme 和 a 标签组合使用的步骤:

  1. 在 iframe 标签中使用 name 属性定义一个名称

  2. 在 a 标签的 target 属性上设置 iframe 的 name 的属性值

示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>iframe标签.html</title>
</head>
<body>
	<iframe src="5.img标签.html" width="200" height="200" name="abc"></iframe>
    <ul>
        <li><a href="../imgs/deserts.jpg" target="abc">anpu</a></li>
        <li><a href="../imgs/deserts.jpg" target="abc">anpu</a></li>
        <li><a href="../imgs/deserts.jpg" target="abc">anpu</a></li>
        <li><a href="../imgs/deserts.jpg" target="abc">anpu</a></li>
    </ul>
</body>
</html>

效果：

image-20200804120241506

11.其它标签

div 标签 ：默认独占一行

span 标签： 它的长度是封装数据的长度

p 段落标签： 默认会在段落的上方或下方各空出一行来（如果已有就不再空）

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>其它标签</title>
</head>
<body>
    <div>div 标签 1</div>
    <div>div 标签 2</div>
    <span>span 标签 1</span>
    <span>span 标签 2</span>
    <p>p 段落标签 1</p>
    <p>p 段落标签 2</p>
</body>
</html>

效果：

image-20200804121420152

CSS

什么是CSS

CSS(Cascading Style Sheets) 指层叠样式表，主要用来设置网页中元素的样式。如边框、颜色、位置等

基本语法

image-20200804121000717

CSS选择器

标签选择器

示例：

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>CSS选择器</title>
	<style type="text/css">
		div{
     
     
			color: blue;
			font-size:30px;
			border: 1px solid yellow;
		}
		span{
     
     
			color: yellow;
			font-size: 20px;
			border: 5px solid blue;
		}
	</style>
</head>
<body>
	<!-- 
	需求1：在所有div标签上修改字体颜色为蓝色，字体大小30个像素。边框为1像素黄色实线。
	并且修改所有span 标签的字体颜色为黄色，字体大小20个像素。边框为5像素蓝色虚线。
	 -->
	<div>div标签1</div>
	<div>div标签2</div>
	<span>span标签1</span>
	<span>span标签2</span>
	
</body>
</html>

效果：

image-20200804122636180

id选择器

示例：

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>ID选择器</title>
	<style type="text/css">
		#id001{
     
     
			color: blue;
		}
		#id002{
     
     
			color: red;
			font-size: 20px;
			border: 5px blue dotted;
		}
	</style>
</head>
<body>		
	
	<!-- 
	需求1：分别定义两个 div 标签，
	第一个div 标签定义 id 为 id001 ，然后根据id 属性定义css样式修改字体颜色为蓝色，
	字体大小30个像素。边框为1像素黄色实线。
	
	第二个div 标签定义 id 为 id002 ，然后根据id 属性定义css样式 修改的字体颜色为红色，字体大小20个像素。边框为5像素蓝色点线。
	 -->
	
	<div id="id001">div标签1</div>
	<div id="id002">div标签2</div>
	
</body>
</html>

效果：

image-20200804123331996

类选择器

示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>class类型选择器</title>
	<style type="text/css">
		.class01{
     
     
			color: blue;
			font-size: 30px;
			border: 1px yellow solid;
		}
		.class02{
     
     
			color: gray;
			font-size: 26px;
			border: 1px red solid;
		}
	</style>
</head>
<body>

	<!-- 
		需求1：修改 class 属性值为 class01的 span 或 div 标签，字体颜色为蓝色，字体大小30个像素。边框为1像素黄色实线。
		需求2：修改 class 属性值为 class02的 div 标签，字体颜色为灰色，字体大小26个像素。边框为1像素红色实线。
	 -->

	<div class="class01">div标签class01</div>
	<div class="class02">div标签</div>
	<span class="class01">span标签class01</span>
	<span>span标签2</span>

</body>
</html>

效果：

image-20200804123836692

组合选择器

示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>class类型选择器</title>
    <style type="text/css">
        .class01,#id01{
     
     
            color: blue;
            font-size: 20px;
            border: yellow 1px solid;
        }
    </style>
</head>
<body>

	<!-- 
	需求1：修改 class="class01" 的div 标签 和 id="id01" 所有的span标签，
	字体颜色为蓝色，字体大小20个像素。边框为1像素黄色实线。
	 -->

   <div class="class01">div标签class01</div> <br />
   <span id="id01">span 标签</span>  <br /> 
   <div>div标签</div> <br />
   <div>div标签id01</div> <br />

</body>
</html>

效果：

image-20200804124725529

常用样式

1.字体颜色

color:可以用颜色名。rgb值，十六进制表示，如rgb(255,0,0) #00FF00

2.宽度

width:宽度可以写像素值：19px；也可以写百分比值：20%；

3.高度

height：高度可以写像素值：19px；也可以写百分比值：20%；

4.背景颜色

background-color:#0F2D4C

5.字体样式

color：#FF0000；字体颜色红色

font-size：20px; 字体大小

6.边框

border：1px solid red

7.DIV 居中

margin-left: auto;

margin-right: auto;

8.文本居中

text-align: center;

9.超连接去下划线

text-decoration: none;

10、列表去除修饰

ul {

list-style: none;

猜你喜欢

转载自blog.csdn.net/weixin_45834777/article/details/107784153
今日推荐
基于大语言模型的开源知识库问答系统 MaxKB GitHub Star 数量突破 5,000 个！
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
报告：Django 仍然是 74% 开发者的首选
《2024 年一季度互联网投融资运行情况》研究报告
15 年前上了“FFmpeg 耻辱柱”，今天他还得谢谢咱——腾讯QQPlayer一雪前耻？
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
周排行
BPM为企业带来的实际利益
好程序员web前端分享css常用属性缩写
Java文件下载（excel）
css样式的动态添加及显示和隐藏等零碎用法
axios全局配置以及拦截器
使用Logstash来实时同步MySQL和log日志数据到ES
C++获取当前时间（年月日、时分秒、毫秒）
Odoo产品分析 (四) -- 工具板块(11) -- 网站即时聊天(1)
Java环境配置正确，但是java、javac、java -version均返回“不是内部或外部命令，也不是可运行的程序或批处理文件”？
01 官网下载各种CentOS教程（超详细版）
每日归档
更多
2024-05-14(0)
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022