HTML 标签
<b></b> 加粗
<strong></strong> 加粗
<i></i> 倾斜
<em></em> 倾斜
<u></u> 下划线
<ins></ins> 下划线
<span></span> 不换行
<p></p> 段落
<br> 换行
<div></div> 布局
<h1></h1> 一级标题
<del></del> 删除线
<s></s> 删除线
<a href=""></a> 超链接
<ul><li></li><ul> 无序列表
<ol><li></li><ol> 有序列表
<dl>
<dt>项目标题</dt>
<dd>项目描述</dd> 项目列表
</dl>
空格字符实体
表格:
<!-- table嵌套tr,tr嵌套td table是整个表格,tr是行,td是单元格 -->
<!-- cellspacing:td之间的距离 cellpadding:内容和边框线之间的距离 -->
<!-- colspan横向合并 rowspan纵向合并 -->
<table cellspacing="0" cellpadding="20">
<tr>
<td>1</td>
<td>2</td>
</tr>
</table>
表单:
<form action="" method="POST">
文本框:<input type="text placeholder="框内的提示文字">
<br><br>
密码框:<input type="password">
<br><br>
单选框:<input type="radio" name="sex">男 <input type="radio" name="sex">女
<br><br>
复选框/多选框:<input type="checkbox" checked>读书 <input type="checkbox">听音乐 <input type="checkbox">lol
<!-- xhtml1.0 checked="checked" -->
<!-- html5.0 checked -->
<br><br>
上传文件:<input type="file">
<br><br>
文本域:<textarea></textarea>
<br><br>
下拉菜单:
<select>
<option>北京</option>
<option>上海</option>
<option>广州</option>
</select>
<br><br>
<input type="submit" value="提交按钮">
<input type="button" value="普通按钮">
<input type="reset" value="重置">
<button>普通按钮button</button>
</form>
css选择器
1.标签选择器
div{color:red;}
.......
<div>div</div> <!-- 对应以上样式 -->
###2.类选择器
.blue{color:blue;}
......
<div class="blue">...</div>
###3.层级选择器 结合上面两种使用,减少命名
.con{width:10px;height:20px;}
.con span{color:red;}
......
<div class="con">
<span>...</span>
</div>
4.id选择器
通过id名选择元素,id名称不能重复
#box{color:red;}
<p id="box">段落</p> <!-- 对应一条样式,其他元素不允许使用 -->
5.伪类选择器
常用的有hover,表示鼠标悬浮在元素上的状态
.box{width:100px;height:100px;}
.box:hover{width:300px;}
CSS属性
布局属性
width:200px /* 宽度 */
height:300px /* 高度 */
background:#ccc; /* 背景色 */
font-style:italic /* 倾斜 */
border:1px solid red /* 外边框为1px的红色实线 */
border-collage:collapse /* 把小表格之间的两条框线变成一条 */
border-radius /* 把边框变圆 */
padding:30px /* 内边距 */
margin:50px /* 外边距 */
box-sizing:border-box /* 启动盒子内减模式
margin:0 px auto /* 水平居中 */
float:left/right /* 浮动 */
list-style /* 去除列表前的圆点 */
resize:none /* 设置文本域禁止拖拽 */
outline:none /* 去掉焦点框 */
opacity 设置元素透明度
文本样式属性
text-align 设置文字水平对齐方式
text-indent 设置文字首行缩进
color:red /* 颜色 */
font-size:30px /* 字号 */
font-weight:bold /* 加粗 */
font-family 设置文字字体
line-height 设置文字行高
text-decoration:none /* 去除下划线 */
设置元素
(1)display 设置元素类型及隐藏
1.none 隐藏且不占位置
2.block 以块元素显示
(2)css元素溢出
1.overflow:visible 默认值,超出元素框显示
2.overflow:hidden 内容被修剪,多余不可见
3.overflow:scroll 以滚动条显示
4.overflow:auto 超出会以滚动条显示
(3)定位
position属性设置元素定位类型
1.position:relative 生成相对定位元素,占位
2.position:absolute 生成绝对定位元素,不占位,浏览器参照
3.position:fixed 生成固定定位元素,不占位,相对浏览器,固定不动。
<!-- 定位:绝对定位和相对定位配合使用:子级绝对定位 父级相对定位 -->
<!-- 绝对定位:默认以浏览器为参照物,但是父级是已经定位的,就以这个父级为参照物定位 -->
<!-- 默认情况下,定位是后来者居上 -->
偏移:使用left/right/top/bottom, z-index 设置元素层级
(4)页面嵌套
<iframe src="#" class="" name=""></iframe>