Web之html+CSS入门

WEB

HTML

文本标签

作用：展示文本
普通文本：font，span
段落：p
标题：h1-h6
加粗：b
加大：big
变小：small
斜体：i
上标：sup
下标：sub
删除线：del

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GKF3mBrV-1678885984647)(C:\Users\fjc23\AppData\Roaming\Typora\typora-user-images\image-20230314200422075.png)]

图片标签

作用：展示图片
img：
	src：图片地址
	alt：提示字

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hKDerwhi-1678885984648)(C:\Users\fjc23\AppData\Roaming\Typora\typora-user-images\image-20230314200741178.png)]

表单标签

作用：提交或输入
input：输入
 	type：输入类型，值由系统提供，不能自定义
 		text：文本输入，搜索框，账号输入框。为默认
 		password：密码输入，会自动加密显示
 		radio：单选按钮，name属性值相同时才可以进行单选
 		checkbox：多选按钮，name属性值相同
 		file：文件上传
 		sumbit：提交按钮 在form中使用
 		resetL:重置按钮  在form中使用
 	name：名称
 	value:值
 		当type为text或password时，表示输入框的内容
 		当type为button时，表示按钮上显示的文本
 		当type为radio或者checkbox时，表示选项的值，不回展示
 	placeholder：提示字
 		一般在type类型为text或password时使用
 from
     actionL:提交地址
     method：提交的方式
     	get：或将上传的数据拼接到网址尾部，不安全，只能上传少量数据
     	post：不会将上传的数据拼接到网址尾部，安全的，可以输出大量数据
     enctype：上传数据类型
     		multipart/form-data：有文件上传
     		application/x-www-form-urlencode:默认的类型，不能上传文件
     		注意：目前市面使用的主流技术为前后端分离，所有form基本被淘汰。

汽车调查问卷

个人信息

姓名：

​

	<p><span>年龄：</span>
	<input type="text" placeholder="如:25"/>
	<br /></p>
	
	<p><span>性别:</span>
	<input type="radio" name="sex" value="男"/><span>男</span>
	<input type="radio" name="sex" value="女"/><span>女</span>
	<br /></p>
	
	<p><span>联系方式：</span>
	<input type="text"  placeholder="173****5555"/>
	<br /></p>
	
	<span>爱好:</span>
	<input type="checkbox" name="like"/><span>篮球</span>
	<input type="checkbox" name="like"/><span>足球</span>
	<input type="checkbox" name="like"/><span>排球</span>
	<input type="checkbox" name="like"/><span>棒球</span>
	<br />
	<p><span>国籍:</span>
	<select>
		<option>中国</option>
		<option>中国台湾</option>
		<option>中国香港</option>
		<option>美国</option>
		<option>英国</option>
		<option>日本</option>
		<option>韩国</option>
		<option>意大利</option>
		<option>瑞士</option>
		<option>法国</option>
		<option>俄罗斯</option>
	</select></p>
	
	<h3>问卷调查</h3>
	<p>1.您所钟爱的汽车品牌</p>
	<td><input type="checkbox" />红旗
	<td><input type="checkbox" />凯迪拉克
	<td><input type="checkbox" />法拉利
	<td><input type="checkbox" />宝马
	<td><input type="checkbox" />奥迪
	<td><input type="checkbox" />大众
	<td><input type="checkbox" />兰博基尼
	<td><input type="checkbox" />玛莎拉蒂
	<td><input type="checkbox" />比亚迪
	<td><input type="checkbox" />理想
	<td><input type="checkbox" />特斯拉
	<td><input type="checkbox" />悍马
	</td>
	<p>2.您所钟爱的汽车类型</p>
	<td>
		<input type="radio"/>跑车
		<input type="radio"/>轿车
		<input type="radio"/>suv
		<input type="radio"/>越野
	</td>
	<p>2.您所钟爱的动力类型</p>
	<td>
		<input type="checkbox"/>混动
		<input type="checkbox"/>油车
		<input type="checkbox"/>油气混合
		<input type="checkbox"/>新能源
	</td>
	<p>2.您所能接受的价格区间</p>
	<td>
		<input type="checkbox"/>1-5万
		<input type="checkbox"/>5-15万
		<input type="checkbox"/>15-35万
		<input type="checkbox"/>35-50万
		<input type="checkbox"/>50-100万
		<input type="checkbox"/>100万以上
	</td>
	<p align="center">
		<input type="button" value="提交" />
		<input type="button" value="返回" />
	</p>
</body>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-doVhIb08-1678885984649)(C:\Users\fjc23\AppData\Roaming\Typora\typora-user-images\image-20230314202210885.png)]

媒体标签

音频播放：audio
	src：资源地址
	autoplay：自动播放
	loop：循环播放
视频播放：video
	src：资源地址
	autoplay：自动播放
	loop：循环播放

排版标签

br：换行
hr：水平分割线

容器标签

div：快标签
	用：容纳其他标签，可以把代码分解成不同的快

表格标签

table：表格
	属性：
	border：宽边宽度
	width：表格宽度
	cellspacing：单元格间的距离
tr：行
	th：单元格
	td：单元格
		rowspan：合并行
		colspan：合并列

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jz20qHLC-1678885984649)(C:\Users\fjc23\AppData\Roaming\Typora\typora-user-images\image-20230314203649024.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6693rMTC-1678885984650)(C:\Users\fjc23\AppData\Roaming\Typora\typora-user-images\image-20230314203830101.png)]

其他标签

超链接：a
	作用：
		1.跳转到其他网站
		2.跳转到当前项目的其他页面
		3.跳转到当前网页的指定位置
		<div id="xxx"></div>
		定义id，通过超链接来跳转到指定位置
		<a href="#xxx" >
			<div  style="text-align: center;" ><img width="85" src="img/top.jpg" ></div>
		</a>

列表标签：
ul:无序列表
ol：有序列表

框架标签：
	frameset（不能下body中使用）
		frame
		feameset
	iframe	

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JJvu2o3S-1678885984650)(C:\Users\fjc23\AppData\Roaming\Typora\typora-user-images\image-20230314204446389.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-F6aKFM6A-1678885984651)(C:\Users\fjc23\AppData\Roaming\Typora\typora-user-images\image-20230314204559598.png)]

CSS

高级选择器

子代选择器
	作用：修改父容器内的指定标签
	语法：
		父选择器 子选择器{
		
		}
		父选择器>子选择器{
		
		}
伪类选择器
	鼠标悬浮：
		选择器：hover{
			鼠标悬浮在标签上时的样式
		}
		获取焦点：
			选择器：focus{
			
			}
			获取寻找到的多个标签中的第几个
				选择器：nth-of-type（位置）{
				
				}
		在其后：
        	选择器：after{
        	
        	}

文本样式

字体大小：
	font-size
		px像素，默认大小为16px
字体样式：
	font-style
		italic：斜体
		normal:默认
字体
	font-family
笔画粗细：
	font-weight
装饰线
	text-decoration
		underline：下划线
		overline：上划线
		none：取消装饰线
行高
	line-height	一行字所占的高度
文本在标签中的位置：
	text-align
		left：居左
		right：居右
		
颜色：
	color：颜色
	rgb（红色，绿色，蓝色）
	rgba（红色，绿色，蓝色，透明度）
	每个颜色0-255，透明度：0（全透明）-1（不透明）

背景样式：

背景颜色：background-color
背景图片：background-image
背景是否平铺：background-repeat
	no-repeat：不平铺
	repeat：平铺：默认
背景大小：background-size
	1参：背景宽度
	2参：背景高度
背景位置：background-position
	1参：左右的位置
		left，center，right
		0%     50%    100%
	二参：上下的位置
    	top，bottom，center
    	0%， 100%，  50%

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-P1RCmuD3-1678885984651)(C:\Users\fjc23\AppData\Roaming\Typora\typora-user-images\image-20230315173540560.png)]

元素类型：

​

行内元素：
	特点：设置宽高无效，组件大小按照内容撑开，不会独占一行
	如：span，font，b，big，a...
行内块元素：
	特点：设置宽高有效，不回独占一行
	如：input，img...
快元素：
	特点：设置宽高有效，但是独占一行
	如：div，p，h1-h6...
	
如何修改标签的元素类型；
	通过display属性进行修改
		block：块元素
		inline：行内元素
		inline-block：行内块

盒子模型：

相关属性：
	宽（width）/高（height）
		px：定值
		%：父容器的百分比
	内边距：padding
    边框 border
    	border-width 边框宽度
    	border-style 边框样式
    	border-color 边框颜色
    	border-radius：边框角度
    外边框：margin
    	注意：当元素类型为块元素时可以使用margin：0 auto，使标签位于父容器的左右中心

定位

作用：移动标签的位置
属性名：position
浏览器窗口定位：fixed
	作用：让标签位于浏览器可视化窗口的某个位置
	参考物：浏览器可视化窗口
	配合属性：
		left：标签位于浏览器可视化窗口左边的距离
		right：标签位于浏览器可视化窗口右边的距离
		top：标签位于浏览器可视化窗口顶部的距离
		bottom：标签位于浏览器可视化窗口底部的距离
		z-index：层级
	特点：不保留标签的原位置

yle 边框样式
border-color 边框颜色
border-radius：边框角度
外边框：margin
注意：当元素类型为块元素时可以使用margin：0 auto，使标签位于父容器的左右中心

### 定位

作用：移动标签的位置
属性名：position
浏览器窗口定位：fixed
作用：让标签位于浏览器可视化窗口的某个位置
参考物：浏览器可视化窗口
配合属性：
left：标签位于浏览器可视化窗口左边的距离
right：标签位于浏览器可视化窗口右边的距离
top：标签位于浏览器可视化窗口顶部的距离
bottom：标签位于浏览器可视化窗口底部的距离
z-index：层级
特点：不保留标签的原位置