HTML&CSS 汇总

最新推荐文章于 2022-06-09 22:42:42 发布

wigger

最新推荐文章于 2022-06-09 22:42:42 发布

阅读量157

点赞数

分类专栏：前端文章标签： HTML CSS 用法详解概要

本文链接：https://blog.csdn.net/wigger/article/details/92698248

版权

前端专栏收录该内容

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属性一起使用
	元素脱离了文档流就会出现元素相互重叠的情况