HTML&CSS 汇总

前端 专栏收录该内容
3 篇文章 0 订阅

HTML&CSS 汇总

1. 标签

1)标题标签:	h1-h6	<h1>标题</h1>
2)段落标签:	<p>段落</p>
3)加粗标签:	<strong></strong> <b></b>
4)倾斜标签:	<em></em>  <i></i>
5)下划线:	<ins></ins>	<u></u>
6)删除线:	<del></del>	<s></s>
7)通用容器:	<div></div>  块级元素   <span></span>	行级元素
8)换行:		<br />
9)水平线:	<hr />
10)空格:		&nbsp;
11)小于:		&lt
12)大于:		&gt
13)超链接:	<a></a> # href 目标地址 # target: _blank点击时新打开一个页面,_self点击时当前页打开
14)图片标签:	<img src="" /> # src 路径 # title 标题 # alt 图片出错的提示 # width 宽 # height 高
15)列表标签
	ul配li
                        <ul>
                            <li>列表标题一</li>
                            <li>列表标题二</li>
                            <li>列表标题三</li>
                        </ul>

	列表的样式设置
		去掉小圆点: list-style:none
		去掉默认的内间距和外间距: margin:0px;    padding:0px;
		列表中的让每一项之间产生间距: line-height
16)表格标签: table
		行: tr	列: th	表头的列: td
	表格边框合并:
		border-collapse:collapse
17)整体容器: form标签
	action属性 定义表单数据提交地址
	method属性 定义表单提交的方式,一般有“get”方式和“post”方式
18)form标签中的标签
	<label>标签 为表单元素定义文字标注
		for属性,帮助输入框获取焦点
			for中的值是input标签的id值
	<input>标签 定义通用的表单元素
		type属性
			type="text" 定义单行文本输入框
				css样式的outline:none可以取出默认的高亮框
			type="password" 定义密码输入框
			type="radio" 定义单选框
			type="checkbox" 定义复选框
			type="file" 定义上传文件
			type="submit" 定义提交按钮
			type="reset" 定义重置按钮
			type="button" 定义一个普通按钮
		value属性 
			 定义表单元素的值
		name属性
			定义表单元素的名称,此名称是提交数据时的键名
		placeholder属性
			 设置input输入框的默认提示文字
		id属性
	<textarea>标签 定义多行文本输入框
	<select>标签 定义下拉表单元素
		<option>标签 与<select>标签配合,定义下拉表单元素中的选项

2. CSS属性

布局相关
	width 设置元素(标签)的宽度,如:width:100px;
	height 设置元素(标签)的高度,如:height:200px;
	background 设置元素背景色或者背景图片,如:background:gold; 设置元素背景色为金色
	border 设置元素四周的边框,如:border:1px solid black; 设置元素四周边框是1像素宽的黑色实线
	padding 设置元素包含的内容和元素边框的距离,也叫内边距
	margin 设置元素和外界的距离,也叫外边距
	float 设置元素浮动,浮动可以让块元素排列在一行,浮动分为左浮动:float:left; 右浮动:float:right;
文本常用相关
	color 设置文字的颜色,如: color:red;
	font-size 设置文字的大小,如:font-size:12px;
	font-family 设置文字的字体,如:font-family:'微软雅黑';为了避免中文字不兼容,一般写成:font-family:'Microsoft Yahei';
	font-weight 设置文字是否加粗,如:font-weight:bold; 设置加粗 font-weight:normal 设置不加粗
	line-height 设置文字的行高,如:line-height:24px; 表示文字高度加上文字上下的间距是24px,也就是每一行占有的高度是24px
	text-decoration 设置文字的下划线,如:text-decoration:none; 将文字下划线去掉

3. 定位

1)居中
	文字居中
		垂直居中
			line-height和height一样
		水平居中
			text-align为center
	块级元素自己居中
		水平居中
			margin:0 auto
		垂直居中
			定位+margin
		通用的居中办法
			1、子绝对父相对
			2、子left50% top50%
			3、transform:translate(-50%,-50%)
2)元素显示特性
	display
		控制元素显示与隐藏
			none	block	inline	inline-block
		将行内元素和块级元素进行转换
			block	inline
		行级元素设置width和height一般情况下是产生不了效果的
			inline-block
3)溢出
	overflow
		visible 溢出的部分显示,这是默认值
		hidden 溢出的部分隐藏
		scroll 显示滚动条
		auto 溢出时出现滚动条
4)定位
	文档流:是指盒子按照html标签编写的顺序依次从上到下,从左到右排列,块元素占一行,行内元素在一行之内从左到右排列,先写的先排列,后写的排在后面,每个盒子都占据自己的位置。定位可以将元素脱离文档流
	position
		relative 相对定位,元素原来的位置继续占据空间,参照自身原来的位置
		absolute 绝对定位,元素原来的位置不占空间,参照的是外层如果有定位属性的那个元素
		fixed 固定定位,元素原来的位置不占空间,参照的是浏览器的四个角
	结合left、right、top、bottom属性一起使用
	元素脱离了文档流就会出现元素相互重叠的情况
  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值