首页 > 代码库 > html+css手记
html+css手记
----------------------html定义和基本结构----------------------
HTML是 HyperText Mark-up Language 的首字母简写，意思是超文本标记语言，超文本指的是超链接，标记指的是标签，是一种用来制作网页的语言，这种语
言由一个个的标签组成，用这种语言制作的文件保存的是一个文本文件，文件的扩展名为html或者htm，一个html文件就是一个网页，html文件用编辑器打开显示
的是文本，可以用文本的方式编辑它，如果用浏览器打开，浏览器会按照标签描述内容将文件渲染成网页，显示的网页可以从一个网页链接跳转到另外一个网页。
一个html的基本结构如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>网页标题</title>
</head>
<body>
网页显示内容
</body>
</html>
第一行是文档声明，第二行“<html>”标签和最后一行“</html>”定义html文档的整体，“<html>”标签中的‘lang=“en”’定义网页的语言为英文，定义
成中文是‘lang="zh-CN"‘,不定义也没什么影响，它一般作为分析统计用。 “<head>”标签和“<body>”标签是它的第一层子元素，“<head>”标签里面负责对网
页进行一些设置以及定义标题，设置包括定义网页的编码格式，外链css样式文件和javascript文件等，设置的内容不会显示在网页上，标题的内容会显示在标题
栏，“<body>”内编写网页上显示的内容。
html文档规范
1、标签小写
2、属性用双引号括起来
3、所有的标签闭合
<div></div> <br />
4、图片加alt属性；alt=“”加上属性，可以读图片信息
----------------------常用html标签----------------------
#<h1>、<h2>、<h3>、<h4>、<h5>、<h6>：html标题
#<p>：标签定义一个文本段落
#<br/>：换行
#<：<
#>：>
# ：空格
#<img src="http://www.mamicode.com/images/pic.jpg" alt="产品图片" />：标签可以在网页上插入一张图片，它是独立使用的标签，通过“src”属性定义图片的地址，通过“alt”属性
定义图片加载失败时显示的文字，以及对搜索引擎和盲人读屏软件的支持。
#<font></font>：字体标签
#./：当前路径
#../：上一级路径
#<a href="">：标签可以在网页上定义一个链接地址，通过src属性定义跳转的地址，通过title属性定义鼠标悬停时弹出的提示文字框。页面内定义了“id”或者
“name”的元素，可以通过a标签链接到它的页面滚动位置，前提是页面要足够高，有滚动条，且元素不能在页面顶部，否则页面不会滚动。
#<ol></ol>、<li></li>：定义一个有编号的内容列表
#<ul></ul>、<li></li>：定义一个无编号的内容列表
#<dl></dl>、<dt></dt>、<dd></dd>：定义列表通常用于术语的定义。<dl>标签表示列表的整体。<dt>标签定义术语的题目。<dd>标签是术语的解释。
#table标签：声明一个表格
1、border： 定义表格的边框
2、cellpadding： 定义单元格内内容与边框的距离
3、cellspacing： 定义单元格与单元格之间的距离
4、align： 设置单元格中内容的水平对齐方式,设置值有：left | center | right
5、valign： 设置单元格中内容的垂直对齐方式 top | middle | bottom
6、colspan： 设置单元格水平合并
7、rowspan： 设置单元格垂直合并
#tr标签：定义表格中的一行
#td和th标签：定义一行中的一个单元格，td代表普通单元格，th表示表头单元格
#<iframe>标签：创建包含另外一个html文件的内联框架（即行内框架），src属性来定义另一个html文件的引用地址，frameborder属性定义边框，scrolling属性
定义是否有滚动条，a标签的target属性可以将链接到的页面直接显示在当前页面的iframe中
-----------------------常用表单----------------------
#form：定义一个表单区域,action属性定义表单数据提交的地址，method属性定义提交的方式。
#label：定义表单控件的文字标注
#input类型为text：定义了一个单行文本输入框
#input类型为password：定义了一个密码输入框
#input类型为radio：定义了单选框
#input类型为checkbox：定义了单选框
#textarea：定义多行文本输入
#select：定义下拉列表选择
#input类型为submit：定义提交按钮
#input类型为reset：定义重置按钮
----------------------css基本语法及页面引用----------------------
#css页面引入方法：
1、外联式：通过link标签，链接到外部样式表到页面中。
2、嵌入式：通过style标签，在网页上创建嵌入的样式表。
3、内联式：通过标签的style属性，在标签上直接写样式。
#常用的应用文本的css样式：
1、color 设置文字的颜色，如： color:red;
2、font-size 设置文字的大小，如：font-size:12px;
3、font-family 设置文字的字体，如：font-family:‘微软雅黑‘;
4、font-style 设置字体是否倾斜，如：font-style:‘normal‘; 设置不倾斜，font-style:‘italic‘;设置文字倾斜
5、font-weight 设置文字是否加粗，如：font-weight:bold; 设置加粗 font-weight:normal 设置不加粗
6、font 同时设置文字的几个属性，写的顺序有兼容问题，建议按照如下顺序写： font：是否加粗 字号/行高 字体；如： font:normal 12px/36px ‘微软雅
黑‘;
7、line-height 设置文字的行高，如：line-height:24px;
8、text-decoration 设置文字的下划线，如：text-decoration:none; 将文字下划线去掉
9、text-indent 设置文字首行缩进，如：text-indent:24px; 设置文字首行缩进24px
10、text-align 设置文字水平对齐方式，如text-align:center 设置文字水平居中
11、margin:30 auto;盒子水平居中
12、margin-top:-1px 进行边线的合并
13、margin合并问题：两个盒子margin重叠去相对比较大的值作为之间的margin值
14、Object.style.background=background-color(图片背景颜色) background-image(背景图片路径) background-repeat(背景图片是否及如何重复)
background-attachment(背景图片是否固定) background-position(背景图像的起始位置)
#css选择器：
1、标签选择器：
2、id选择器：
3、类选择器：
4、属性选择器：
1、[attribute] 用于选取带有指定属性的元素。
2、[attribute=value] 用于选取带有指定属性和值的元素。
3、[attribute~=value] 用于选取属性值中包含指定词汇的元素。
4、[attribute|=value] 用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。
5、[attribute^=value] 匹配属性值以指定值开头的每个元素。
6、[attribute$=value] 匹配属性值以指定值结尾的每个元素。
7、[attribute*=value] 匹配属性值中包含指定值的每个元素。
5、派生选择器：
1、后代选择器：‘空格‘，h1 em 选择器可以解释为 “作为 h1 元素后代的任何 em 元素
2、子元素选择器：‘>‘
3、相邻兄弟选择器：‘+‘
6、组选择器：‘,‘
7、伪类及伪元素选择器：一般称为黑魔法解决一些html中的bug
.box2:before：
.box2:before{
content："前面的文字"；
color：red ；
}
a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
a:active {color: #0000FF} /* 选定的链接 */
p:first-child {color: red; } /*匹配第一个p元素*/
q:lang(no){ quotes: "~" "~" }/*为属性值为 no 的 q 元素定义引号的类型：*/
#css盒子模型
margin：
4值，顺时针方向：分别设置上 右 下 左 的margin的值
3个值，顺时针方向：分别设置上 左右 下 的margin的值
2个值，分别设置：上下 和 左右 的margin的值
1个值，同时设置四个边的margin
border
padding：
4值，顺时针方向：分别设置上 右 下 左 的padding的值
3个值，顺时针方向：分别设置上 左右 下 的padding的值
2个值，分别设置：上下 和 左右 的padding的值
1个值，同时设置四个边的padding
html+css手记