HTML CSS学习笔记

最新推荐文章于 2024-05-06 21:08:34 发布

月满西楼l

最新推荐文章于 2024-05-06 21:08:34 发布

阅读量201

点赞数 1

本文链接：https://blog.csdn.net/qq_40859235/article/details/81163202

版权

话不多说，先上思维导图

这里是一个数据的传输过程，我整个的学习过程就是按照这个来的，先java，再数据库，再网页

先来看HTML

HTML的全称：HyperText Markup Language（超文本标记语言），用于定义网页的内容和结构
超文本：网页语言
纯文本：123，hello
1.html基本结构
html是由标签（标记,网页元素,markup,element）组成的

基本结构：

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

</body>
</html>

标签：

<!--单标记-->
     <br/>
     <input/>    
    <标签名 属性名=“属性值”/>

<!--双标记-->
     <p></p>
     <a></a>
    <div></div>
    <标签名  属性名=“属性值>文本</标签名>

2.常用标签

H4常用标签
   embed：多媒体标签（已被淘汰）H5：video audio
   br：换行
   a：超链接
重要属性：herf='要跳转的页面的地址'
   h1~h6：大纲级标题
   img：图片
重要属性：src='图片的路径' alt='图片布恩那个正常显示时出现的文字' width='宽px' height='高px'，只能修改一个，否则会失真
   p：段落，前后自动空行

例：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>我的第一个网页</title>
</head>
<body>
	<h1 style='coler: #ff33aa'>hello world</h1>
	<img alt="aa" src="desktop.jpg" width=400px />
	<br />
	<a href='Welcome.html'>点我</a>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>月满西楼</title>
</head>
<body>
	<h1 style='color: pink;'>欢迎光临</h1>
	<h2 style='color:blue;'>看动画片</h2>
	<br />
	<h2 style='color:blue;'>小短片</h2>
	<video src="1.mp4" controls="controls">
		<!--自动播放  autplay='autoplay'-->
	</video>
	<br/>
	<br/>
	<h2 style='color:blue;'>听歌</h2>
	<br/>
	<h2 style='color:blue;'>于文文-体面</h2>
	<br/>
	<audio src="1.FLAC" controls="controls">
</audio>
	<br/>
	<a href='First.html'>回去</a>
</body>
</html>

这里注意一下因为我是初学者，所以把图片，视频和音乐文件和项目放在同一个目录下面，如果不是同一个目录，则需要调取文件。

3.表格
   表格
       表格的基本结构
       合并单元格
       有序列表，无序列表
   表单
       文本框，密码框，当选框，复选框，下拉列表，提交按钮，一般按钮……

例1：表格

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<!-- 表格，emp表，员工表 -->
	>
	<table border ="1"  width='600px' align ="center">
		<!-- 根标记 -->
		<thead>
			<!-- 表头 -->
			<tr>
				<!-- 加入一行 -->
				<th>员工编号</th>
				<!-- 在行中假如一个单元格 -->
				<th>员工姓名</th>
				<th>员工性别</th>
				<th>员工年龄</th>
				<th>员工薪资</th>
				<th>所在部门</th>
			</tr>
		</thead>
		<tbody align ="center">
			<tr>
				<td>01</td>
				<td>云滢北海</td>
				<td>女</td>
				<td>20</td>
				<td>10000</td>
				<td>人事部</td>
			</tr>
			<tr>
				<td>02</td>
				<td>月满西楼</td>
				<td>男</td>
				<td>21</td>
				<td>20000</td>
				<td>java开发部</td>
			</tr>
		</tbody>
	</table>
</body>
</html>

例2：表单

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<!-- -
		 文本框  密码框  当选框 复选框  
     下拉列表  提交按钮 一般按钮
     action = "后台的地址"
      -->
	<form>
		用户：<input type="text" name="username" />
		<br /> 
		密码: <input type="password" name="pwd" /> 
		<br /> 
		性别： 
		<label> 
			<inputtype="radio" name="sex" value="M" />男
		</label>
		 <label>
		  <input type="radio" name="sex" value="F" />女
		</label> 
		<br /> 
		兴趣爱好:
		 <label> <input type="checkbox" name="hobby"value="ball" />看书
		</label> <label> <input type="checkbox" name="hobby" value="swimming" />运动
		</label> <label> <input type="checkbox" name="hobby" value="reading" />玩游戏
		</label> <label> <input type="checkbox" name="hobby" value="coding" />编程
		</label> <br /> 您是从何处知晓本网站的信息 <select name="info">
			<option value="-1">---------请选择----------
			<option />
			<option value="lele">网站推荐
			<option />
			<option value="teacher">老师推荐
			<option />
			<option value="school">学校推荐
			<option />
			<option value="myself">自己发现
			<option />
		</select> <input type='submit' value='提交' /> <input type='reset' value='重置' />
		<input type='button' value='自定义' onclick="alert('hello world')" />
	</form>
</body>
</html>

列表举例：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<!-- 有序列表
	  软件开发流程
	  ol order list -->
	  <ol>
	  <li>需求分析</li>
	  <li>概要设计</li>
	  <li>详细设计</li>
	  <li>编码</li>
	  <li>测试</li>
	  <li>实施</li>
	  <li>更新与维护</li>
	  </ol>
	  <ul>
	  <li>java </li>
	  <li>android</li>
	  <li>jsp</li>
	  </ul>
</body>
</html>

再来看css

css 全称：Cascading Style Sheets（层叠样式表）用于定义网页样式。
层叠样式表
级联样式表

选择器的作用：定义标签的样式，必须首先通多选择器找到对应的标签

1.样式
   内部样式
   外部样式
   内联样式：写在标签内部，style属性中

例：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 背景，字体，边框，文本，列表 -->
<style>
/*
写在style标记中的称为内部样式
*/
p{
 font-size: 50px;
}
</style>
<!--外部样式  -->
<link href="cssTest1.css" rel="stylesheat">
</head>
<body>
<!--写在标签内部style属性中的样式称为内联样式-->
<p style='color:red;'>you can you up</p>
<p>你好，世界</p>
</body>
</html>

@charset "UTF-8";
/*
在外部文件中编写css称为外部样式
*/
p{
	border:3px solid pink;
}

2.选择器(通过选择器获得要加样式的网页元素，即找标签)

(1)元素选择器，id选择器和类选择器

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
/*标签
找到页面上所有的a加样式*/
a{

}
/*id选择器*/
#d1 {
	color: red;
}
/*类选择器*/
.txt {
	border: 3px dotted red;
}

.hello {
	border: 3px dotted green;
}
</style>
</head>
<body>
	<div id='d1' class='txt'>you can you up</div>
	<p class='txt'>you can you up</p>
	<a href="#">点我</a>
	<input type="text" value="hello" class="hello" />
</body>
</html>

(2)派生选择器

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
p{
border:2px solid green;
}
/*派生选择器*/
div p{
front-size:50px;
color:red
}
</style>

</head>
<body>
	<p>一个超然的段落</p>
	<div>
	<p>一个有爹的段落</p>
	</div>
</body>
</html>

(3)群组选择器
p,a,#d1,div form{属性名:属性值;... }
求多个选择器的并集

(4)通配符
   选中页面上所有的元素加样式
     *{属性名：属性值……}
     *{argin:0;padding:0}

(5)伪类选择器

<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
a:link {
	color: #FF0000
}

a:visited {
	color: #00FF00
}

a:hover {
	color: #FF00FF;font-size:50px
}

a:active {
	color: #0000FF
}

div {
	width: 200px;
	height: 200px;
	background-color: red;
}
</style>
</head>
<body>
<a href = "#">click me</a>
</body>
</html>

(6)伪元素
first-letter：给文本第一个字符加样式
first-line：给文本的第一行加样式

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
p:first-letter{
       font-size:50px;
       color:red;
    }
</style>
</head>
<body>
	<p>
	好好学习，天天向上
	努力，不亚于任何人的努力
	</p>
</body>
</html>

(7)盒子模型
   div（内-->外）
       内边距（填充，padding）
       外边距（border）

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
div {
	/*宽，高是指盒子内容的宽，高*/
	width: 100px;/*宽*/
	height: 100px;/*高*/
	background: red;/*背景颜色*/
	padding: 20px;/*内边距*/
	border:3px solid green;/*边框*/
	margin:200px;/*外边距*/
}
</style>
</head>
<body>
<div></div>
</body>
</html>

(8)格式
{
属性名1，属性值1；属性名2，属性值2；……
}

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
div {
	width: 700px;
	height: 700px;
	background-image: url(desktop.jpg);
	/*background-position:100px 100px     移动图片*/
}
</style>
</head>
<body>
	<div></div>
</body>
</html>

（9）网页布局（浮动和定位）

浮动：

块级元素

文档流/标准流（网页元素自然的布局）
块级元素：从上到下布局
内联元素：从左到右布局

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		.one{
			width: 100px;
			height: 100px;
			background:red;
		}
		.two{
			width:200px;
			height: 160px;
			background: blue;
		}
		p{
			width: 120px;
			height: 160px;
			background:pink;
		}
		span{
			width: 200px;
			height: 200px;
			background:yellow;
		}
	</style>
</head>
<body>
	<!-- 块级元素 -->
	<div class="one"></div>
	<div class="two"></div>
	<p></p>
	<!--内联元素-->
	<span>hello</span>
	<input type=""name=""value="world">
</body>
</html>

浮动

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style type="text/css">
			.one{
				width: 100px;
				height: 100px;
				background:red;
				/* 浮动 */
				float:left;

			}
			.two{
				width: 100px;
				height: 100px;
				background: green;
				float:left;
				/* 清除浮动(清除左边或者右边的浮动) */
				/*clear:both;*/
			}
        </style>
    </head>
    <body>
    <div class="one"></div>
    <div class="two"></div>
    </body>
</html>

浮动布局

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<style type="text/css">
		.top{
			width: 600px;
			height: 160px;
			background:pink;
		}
		.center{
			width: 600px;
			height: 400px;
			background:#eee;
			/* 间距
			margin-top:10px;
			margin-bottom: 10px; */
			/* 间距 */
			margin:10px 0px;
		}
		.fotter{
			width: 600px;
			height: 160px;
			background:blue;
		}
		.left,.right{
			width: 285px;
			height: 400px;
			float:left;
			margin-left: 10px;
		}
		.left{
			background:green;
		}
		.right{
			background:yellow;
		}
		.main{
			width: 600px;
			border: 3px solid #999;/* 设置边框 */
			margin:0 auto;/* 居中 */
		}
	</style>
</head>
<body>
	<div class="main">
		<div class="top"></div>
		<div class="center">
			<div class="left"></div>
			<div class="right"></div>
		</div>
		<div class="fotter"></div>
	</div>	
</body>
</html>

定位

绝对定位，相对定位，子绝父相

绝对定位与相对定位

绝对定位（脱标）
   position : absolute;
       相对body：left，right，top，bottom相对于body的边缘距离
       相对父元素：将父元素和子元素都设为绝对定位，那么left，right，top，bottom都是相对于父元素移动
       使用z-index来确定盒子层叠顺序

相对定位（不脱标）
   position : relative;
       不脱离文档流
       left，right，top，bottom相对于自身原来的位置移动
       子绝父相
           将父元素设置为相对定位，将子元素设为绝对定位
               left，right，top，bottom子元素相对于父元素的边缘移动

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<style type="text/css">
		.one{
			width: 100px;
			height: 100px;
			background:red;
			/* 绝对定位 */
			position:absolute;
			/* 向左平移100px left:100px;*/
			left:100px;
			top:100px;
			z-index:1;/* 如果两个盒子由定义重叠在一起，则谁的数字大谁在上面 */


			
		}
		.two{
			width: 100px;
			height: 100px;
			background:green;
			position:absolute;
			left:120px;
			top:120px;
			z-index:2;
		}
		/* .box{
			width: 300px;
			height: 300px;
			border:3px solid blue;
			position:absolute;将父元素也设为绝对定位，再移动时，one就会相对父元素移动
		} */
	</style>
</head>
<body>
<!-- <div>
<div class="box"> -->
<div class="one"></div><!-- </div> -->
<!-- 谁的代码在前面，谁就在下面 -->
	
	<div class="two"></div>
</body>
</html>

子绝父相

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<style type="text/css">
		.one{
			width: 100px;
			height: 100px;
			background:red;
			position:absolute;/* 子绝父相 */
			
			left:100px;
		}
		.two{
			width: 100px;
			height: 100px;
			background:green;
		}
		.box{
	
			width: 300px;
			height: 300px;
			border:3px solid blue;
			position:relative;/* 相对定位 */

		}
	</style>
</head>
<body><div>
<div class="box">
	<div class="one"></div>
	</div>
	</div>
	<!-- <div class="two"></div> -->
</body>
</html>

小广告

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style type="text/css">
			.adv{
				width: 100px;
				height: 100px;
				background:red;
				position:absolute;
				bottom:10px;
				right:10px;

			}
        </style>
    </head>
    <body>
    <div class="adv">小广告</div>
    <p>you can you up</p>
    </body>
</html>

月满西楼l

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML CSS学习笔记

话不多说，先上思维导图这里是一个数据的传输过程，我整个的学习过程就是按照这个来的，先java，再数据库，再网页先来看HTMLHTML的全称：HyperText Markup Language（超文本标记语言），用于定义网页的内容和结构超文本：网页语言纯文本：123，hello1.html基本结构 html是由标签（标记,网页元素,markup,...
复制链接

扫一扫