29.javaEE-前端(html/CSS)

最新推荐文章于 2023-11-27 17:07:37 发布

leokk111

最新推荐文章于 2023-11-27 17:07:37 发布

阅读量325

点赞数

分类专栏： javaEE 前端

本文链接：https://blog.csdn.net/weixin_45449911/article/details/104607537

版权

javaEE 同时被 2 个专栏收录

50 篇文章 0 订阅

订阅专栏

前端

4 篇文章 0 订阅

订阅专栏

1.html

1.1html是什么?

HTML(HyperText Markup Language)称为超文本标记语言，是一种标识性的语言。
html其实就是一种特殊的文本存储格式,例如dos文件如果用wps打开,则会呈现各种效果,而html文件是专门设计用作网络传输的文本文件,使用浏览器解析打开的一种文件格式.

1.2html的结构?

1.案例
新建一个txt文档，将后缀名改为.html，代码实现如下：

<!DOCTYPE html>
<html>
	<head>
		<title>网页的标题</title>
		<meta charset="utf-8" />
	</head>
	<body>
		Hello CGB1808...
	</body>		
</html>

另存html文档时保存的编码为utf-8:
只要在html文档中添加一个meta标签，同时也指定保存的编码为utf-8即可解决乱码问题!!

2.HTML结构详解

(1)<!DOCTYPE HTML> 文档声明, 用来声明HTML文档所遵循的HTML规范和版本
	上面是html5.0的声明, 也是目前最常用的版本

(2)<head></head> 头部分, 用来存放HTML文档的基本属性信息, 比如网页的标题, 文档使用的编码等, 这部分信息会被浏览器优先加载.

(3)<body></body> 体部分, 用来存放网页可视化数据. 即真正的网页数据

(4)<title></title> 声明网页的标题

(5)<meta charset="utf-8"/> 用来通知浏览器使用哪一个编码来打开HTML文档, 这个编码一定要和文件保存时的编码保持一致, 才不会出现中文乱码问题.

1.3HTML语法(了解)

1、html标签

HTML是一门标记语言，标记也叫做元素/标签，标签分为开始标签和结束标签。例如:
<body></body>
<table></table>
<form></form>
...
如果标签内没有内容要修饰，可以合并成一个自闭标签。例如:
<meta/> <br/> <hr/> <input/> <img/>等等

2、html属性

标签都可以具有属性，属性可以有多个，多个属性之间用空格隔开。例如：
<font size="7" color="red" face="华文琥珀">文本内容…</font>
提示：属性的值用单引号或双引号引起来，或者不用引号。通常使用双引号引起来。

3、html注释

注释格式：<!-- 注释内容 -->，注意html注释不能交叉嵌套，例如：
<!-- 下面声明了一个标题 -->
<h1>一级标题</h1>

4、html空格和换行

如何在网页中做一个空格或者做一个换行？
由于在网页中多个连续的空白字符会被当成一个空格来显示，所以
如果要做一个空格，可以用转义字符 &nbsp;来代替;
如果要做一个换行，可以用<br/>标签来代替;
提示：中文状态下的空格(全角空格)请使用:&emsp;

这里只对html做简单的解释,因为主要是针对后端开发人员的,所以就不过多的介绍html的标签.

2.CSS

CSS的作用:修改本dom元素中标签的属性.所以重点有两个?第一个是选中标签,第二个是设值.
2.1什么是CSS?
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。 [1]

html的作用: 通过html标签组织网页的结构
css的作用: 渲染网页、美化网页
在这里插入图片描述
2.2在HTML中引入CSS
1.大多数标签都可以具有style属性，可以通过style属性为当前标签设置样式，例如：

<td rowspan="2" style="width:50px;height:100px">21</td>

2、在head标签内部提供一个style标签，在style标签内部可以选中元素进行修饰，例如：

<style type="text/css">
		table{
			/* 这是设置边框为2像素,实线,红色 */
			border: 2px solid red;
			/* 设置边框合并 */
			border-collapse: collapse;
			/* 这是设置表格宽度占屏幕的70% */
			width: 70%;
			/* 外边距 :设置为auto自适应,即左右外边距相等,也就是居中*/
			margin-left: auto;
			margin-right: auto;
			/* 背景色 */
			background: pink;
		}
		
		td{
			border: 2px solid red;
			/* 设置内边距 */
			padding: 50px;
		}
		
		h1{
			/*设置文本内容的位置:left-左 center-中 right-右  */
			text-align: center;
		}
		
</style>

3.在head标签下添加一个link标签，link标签可以引入外部的css文件

<link rel="stylesheet"  href="myDemo1.css">

4.也可以通过@import url()方式引入css文件,注意这种方式引入文件的写在style标签内,并且写在第一行.

<style type="text/css">
			/* ****** CSS样式 ****** */
			/* 这是通过import引入外部css文件 */
		@import url(myDemo1.css);
			span{
				border: 2px solid green;
				font-size: 30px;
				font-weight: bolder;
			}
</style>

2.3CSS选择器
1标签名选择器
根据标签(元素)的名称来选择指定名称的元素进行样式的修饰.
格式：标签名{ css属性… }

body,input{font-size:18px;}

2.类选择器
通过标签上通用的属性class，可以为标签指定所属的类(组)，所有class值相同的元素则为一组(类)，可以通过class属性的值选择这一组的标签，为这一组的标签统一设置样式。
格式：.类名{ css属性… }
示例：

.c1{
			background: #CBF74B;
			color:green;
			font-size: 50px;
		}

3id选择器
通过标签上通用的属性id，可以为标签设置唯一的标识(ID的值在整个HTML中应该是独一无二的)，可以通过id值选中指定的元素。
格式：#id值{ css属性… }

#p1{
			font-size: 28px;
			color: red;
			text-indent: 20px;
		}

4 后代选择器
选中父元素内部的指定后代元素
格式：父选择器后代元素{ css属性… }
示例：

p span{
			font-size: 40px;
			background: cyan;
		}

5 属性选择器
根据属性条件选中元素进行修饰
格式: 选择器[属性条件…] { css属性… }
示例:

input[type="text"][name="user"]{
			background: pink;
			font-size: 30px;
			text-indent: 30px;
		}

2.4 常用属性总结
2.4.1 文本属性
1.text-align 设置元素中文本水平对齐方式，其常用取值为:
left: 默认值。左对齐
right: 右对齐
center: 居中对齐
justify: 两端对齐

2.text-indent：设置首行缩进:
像素值

3.text-decoration：设置文本下划线，其常用取值为:
underline: 有下划线
none: 没有下划线

4.letter-spacing: 设置字符间隔/间距，其常用取值为:
normal
像素值

5.text-shadow: 设置字体阴影，其取值为:
例如:text-shadow:5px 5px 5px #ffffff;
像素值像素值像素值颜色值
第一个值为阴影水平位移, 第二个值为阴影垂直位移, 第三个值为阴影扩散值, 第四个值为阴影颜色

2.4.2 字体属性
font-size：设置字体大小
font-weight：设置字体粗细 bold、bolder、normal
font-family：设置字体，比如微软雅黑、黑体、楷体等
color：设置字体颜色
Line-height:设置行高

2.4.3背景属性
Background:这是复合属性,可以同时设置背景图片,颜色等等.
background-color：设置背景颜色
background-image：设置背景图片，url(‘图片的路径’);
background-repeat：设置或检索对象的背景图像是否及如何铺排
background-position：设置或检索对象的背景图像位置

2.4.4边框（border）
border: 宽度样式颜色;
border用于设置元素的边框，可以同时设置边框的宽度、样式、颜色等
例如，设置div元素的边框为2像素、实线、红色：border:2px solid red;

扩展内容
3.4.1display属性

display用来设置元素的类型，常用取值：
block：块级元素的默认值默认情况下独占一行可以设置宽高
inline：行内元素的默认值默认情况下多个行内元素可以处在同一行一般不能设置宽高 inline-block：行内块元素
多个元素既可以显示在同一行, 也可以设置宽和高 none：表示隐藏元素

3.4.2其他属性

width：设置元素的宽度
height：设置元素的高度
margin:外边距(这是复合的值)
Margin-top/right/buttom/left: Padding:内边距
Padding-top/right/buttom/left: vertical-align: middle;(这是设置同行元素中线对齐)

3.4.3元素类型(了解)

(1)块级元素（block）默认情况下，块级元素独占一行可以设置宽和高，就是设置宽和高如果不设置宽和高，其中宽是默认填满父元素，而高是由内容决定(由内容支撑)

(2)行内元素（inline）默认情况下，多个行内元素处在同一行不能设置宽和高

(3)行内块元素（inline-block）既具备行内元素的特征(可以同行显示)，还具备块级元素的特征(可以设置宽和高)

leokk111

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
29.javaEE-前端(html/CSS)

1.html1.1html是什么?HTML(HyperText Markup Language)称为超文本标记语言，是一种标识性的语言。html其实就是一种特殊的文本存储格式,例如dos文件如果用wps打开,则会呈现各种效果,而html文件是专门设计用作网络传输的文本文件,使用浏览器解析打开的一种文件格式.1.2html的结构?1.案例新建一个txt文档，将后缀名改为.html，代码实...
复制链接

扫一扫