H5程序设计基础
HTML（超文本标记语言）
CSS
JavaScript
HTML5
CSS3
文档基本结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
常用标签
<!-- 标题 -->
<h1></h1>
<!-- 段落 -->
<p></p>
<!-- 图片 -->
<img src="imgs/news.jpg"/>
<!-- 超链接 anchor-->
<a target="_blank" href="http://www.baidu.com">百度一下，你就知道</a>
<!-- 列表 -->
<!-- unordered list -->
<ul>
<!-- list item -->
<li></li>
</ul>
<!-- ordered list-->
<ol>
<li></li>
</ol>
<!-- 布局 division-->
<div></div>
<span></span>
<!-- 表单 -->
<form action="" method="get">
<!-- 表单元素 -->
<p>
用户名：<input type="text">
</p>
CSS(层叠样式表)
使用方法
行内样式（1000）
外联样式
内部样式
基本选择器
标签选择器（1）
类选择器（class）（10）
id选择器（100）
选择器优先级
id > 类选择器 > 标签选择器
派生选择器
包含选择器（后代选择器）
子选择器
通配符选择器
群组选择器
相邻兄弟选择器 +
属性选择器
字体样式
font-size
font-style : italic/oblique;
font-weight : bold/bolder;
font-family : "宋体"
文本样式
（水平对齐方式）text-align : center / left / right;
（设置字体颜色）color : red;
（设置首行缩进）text-indent : 2em;
（行高/设置文字垂直对齐方式）line-height : 30px;
（文本修饰）text-decoration : none/underline/overline/line-through;
背景样式
background-color : #ccc;
background-image : url( );
background-repeat : no-repeat;
background-position :
background : red url() no-repeat 100px center;
列表样式
list-style : none;
超链接样式（伪类选择器）
:link 只有超链接可以用（未被访问之前）
:visited 只有超链接可以用（访问过后）
:hover 可用于任意标签（鼠标经过时）
:active（鼠标点击时）
盒模型
width
height
border : 1px solid red;
border-top
border-right
border-bottom
border-left
margin(外边距：盒子之间的距离)
margin-top
margin-right
margin-bottom
margin-left
padding(内边距：盒子边缘与内容之间的距离)
padding:10px；四个方向一样
padding:20px 10px；上下 / 左右
padding: 10px 20px 30px;上 / 左右 / 下
padding: 10px 20px 30px 40px;上右下左
display:block/inline/inline-block/none;
block : 将元素转换成块级元素
inline : 将元素转换成行内元素
inline-block : 将元素转换成行内块元素
none : 元素不显示
浮动(float)
包裹性
向上性
不重叠
定位（position）
position : fixed;(固定定位：相对于浏览器定位)
position : relative;(相对定位：相对于该元素自身所在的位置定位)
position : absolute;(绝对定位：相对于该元素有定位属性的父元素去定位，如果父元素都没定位属性，相对于body定位)
position : static;(不定位)
层叠上下文
z-index : 999;
overflow(溢出处理)
hidden（溢出隐藏）
scroll（出现滚动条）
auto（自动）
扫一扫
1523
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
