html+css基础知识点笔记

简单回忆了一下html+css基础

一、标签

<head></head>之间

<title></title>

网页标题

<meta></meta>

定义编码格式,如:UTF-8,GB2312,GBK
eg:<metacharset="UTF-8"></meta>

<link></link>

用于导入CSS样式文件

<body></body>之间

常用标签

<h1><h6>表示6级标题
<p>段落标签
<br/>换行
<hr/>水平线
<em><i>斜体
<strong>文本加重
<img>图片
<a>超链接
eg:<a href="index.html"></a>

列表
<ul><li>

无序列表
属性:type:disc实心圆 square方块 circle空心圆

<ol><li>

有序列表

表格

<table>表格标签
<th>表头
<tr>表格的行
<td>表格的单元
属性:

水平对齐align:left左对齐,center居中,right右对齐;absmiddle图片居中对齐

垂直对齐valign:top顶端对齐,middle居中对齐,bottom底端对齐,baseline基线对齐

水平合并colspan,列表合并rowspan
表单

<form>表单标签

<form action="提交的网站" method="GET或者POST">

<input name="元素名称" type="类型" value="值" size="显示宽度" maxlength="字符长度" 
		checked="是否选中" disabled="disabled禁用" readonly="readonly只读">

<input type="text">文本单行输入
<input type="password">密码框
<input type="radio">单选按钮
<input type="checkbox"name="复选框之间的name要一致">复选框
<input type="submit">提交表单的按钮
<input type="reset">重置表单的按钮
<input type="button">表单的普通按钮
<input type="file">文件选择框
<input type="hidden">隐藏域
<select>下拉列表
<option>定义待选择的选项
<textarea>文本多行输入(文本域)
<datalist>元素规定预定义选项列表

特殊符号

&nbsp;分号
&gt;大于号
&lt;小于号
&copy;版权符号©

二、样式

选择器

1、标签选择器

标签名{属性名:属性;属性名:属性}

2、类选择器

.标签名{属性名:属性;属性名:属性}

3、ID选择器

#id{属性名:属性;属性名:属性}

4、并集选择器

标签名, .类名, #ID{属性名:属性;属性名:属性}

5、交集选择器

标签名 .类名{属性名:属性;属性名:属性}

6、后代选择器

外部标签名 内部标签名{属性名:属性;属性名:属性}

引入CSS样式的方式

1、行内样式

<h1 style="font-size:18px">行内式的使用方法</h1>

2、嵌入样式

<head>
	<style type="test/css">
		h1{属性名:属性;}
	</style>
</head>

3、导入样式

<link href="样式文件名" type="text/css链接文件的格式" rel="stylesheet"文档的外部样式表/>

CSS的属性

类型

字体类型:font-family
字体渲染:text-shadow
字体大小:font-size
字体风格:font-style
微斜:oblique
倾斜:italic
字体粗细:font-weight
字体大写:font-variant
字体属性:font

font{风格粗细大小类型}

文本修饰样式:text-decoration
下划线:underline
删除线:line-through
颜色:color

背景

背景颜色:background-color
背景图像:background-image
背景图片重复方式:bakground-repeat
背景图片X,Y轴起始位置:background-position
背景关联:background-attachment:fixed(背景不随着文字滚动)

区块

单词间距:word-spacing
字母间距:letter-spacing
垂直与文本对其方式:vertical-align,text-align
首行缩进:text-indent
显示方式:display
行高:line-height

盒子模型

定义宽高:width, height
内边距上下左右:padding-top, right, bottom, left
外边距上下左右:margin-top, right, bottom, left
网页居中:margin:0px auto
边框:border
边框厚度:width
边框风格:style
border-style:点dotted 实solid 双double 虚dashed;
边框颜色上下左右
display控制元素的显示与隐藏
odisplay:block将元素显示为块级元素,前后设置换行
odisplay:inline将元素显示为行级元素,先后不换行
odisplay:none将元素隐藏

浮动

float
clear清除浮动
both清除左右浮动
overflow盒子溢出处理
visible内容会被裁剪,被裁剪得内容出现在盒子外部
hidden内容会被裁剪,并且其余内容不可见

定位

position
relative相对定位
将出现在它所在的位置上,让这个元素“相对于”它的起点进行移动
absolute绝对定位
设置为绝对定位的元素框从文档流完全删除,并相对于其包含块定位,包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭,就好像该元素原来不存在一样。元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框。
z-index设置层次

列表

项目编号类型:list-style-type
项目编号图像:list-style-image
项目标记位置:list-style-position
inside标记显示在里面
onside标记显示在外面

超链接伪类

未单击访问时超链接样式a:link
单击访问后超链接样式a:visited
鼠标悬浮其上的超链接样式a:hover
鼠标单击未释放的超链接样式a:active

设置鼠标形状:cursor

默认光标:default
超链接的指针:pointer
span{cursor:pointer;}
指示程序正在忙:wait
指示可用的帮助:help
指示文本:text

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值