html+css基础1
2015-09-19 21:24
537 查看
（1）web前端主要包括：
1.html 文档标记语言，属于页面的结构2.css 层叠样式表，属于样式修饰页面结构的
3.js 网页脚本语言，主要是增加用户与页面的交互行为
（2）html
<!DOCTYPE html><!--文档类型声明-->
<html lang="en">
<head>
<meta charset="UTF-8">
<!--
主要用来提供有关页面的元信息，比如针对浏览器引擎和更新频度的描述和关键词，
位于文档的头部，标签属性用来定义了与文档相关联的名称/值对。
指定浏览器以utf-8的形式来解析此文本，所以文本文件的编码方式要和此相对应。
保证文本文件的编码与浏览器解析的编码方式相对应
-->
<title>index</title>
</head>
<body>
<h1>index首页</h1>
</body>
</html>
（3）css
css样式表放的位置有3种;1.行间样式表，拥有最高的优先级
<div style="……"></div>
2.内部样式表
<style></style>
3.外部样式表
<link href=”style.css“ rel="stylesheet"/>
三种样式表中以行间样式表为最高优先级，内部样式表和外部样式表，根据浏览器加载文本时的顺序来确定，相同属性名称的以后出现的为主，
但是如果css样式中含有!important的话，相同的命名规则最后一个!important优先。
（4）css 样式零碎
1.padding 内边距 : 会影响盒子本身的大小2.margin 外边距：
a. 上下外边距会叠压
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index</title>
<style>
.div1{
width: 100px;
height: 100px;
background: red;
margin-bottom: 30px;
}
.div2{
width: 100px;
height: 100px;
background: green;
margin-top: 30px;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
</body>
</html>
b.父子级包含的时候子级的margion-top会传递给父级
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index</title>
<style>
.div1{
width: 200px;
height: 200px;
background: red;
margin-top: 30px;
}
.div2{
width: 100px;
height: 100px;
background:green;
margin-top: 30px;
}
</style>
</head>
<body>
<div class="div1">
<div class="div2"></div>
</div>
</body>
</html>
在使用上：尽量使用内边距，用父级的内边距替代子级的外边距
3.盒子居中显示
margion：0 auto
4.盒子模型
盒子大小= border + padding + width/height
5.文字属性：
font-size 文字大小（一般均为偶数）font-family 字体（中文默认宋体）
color 文字颜色（英文、rgb、十六位进制色彩值）
line-height 行高
text-align 文本对齐方式
text-indent 首行缩进（em缩进字符）
font-weight 文字着重
font-style 文字倾斜
text-decoration 文本修饰
letter-spacing 字母间距
word-spacing 单词间距（以空格为解析单位）
6.html标签 <a> 锚点
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<title>锚点</title>
</head>
<body>
<div>
<a href="#top">顶部</a>
<a href="#mid">中间</a>
<a href="#bottom">底部</a>
<div id="top" style="height: 1000px">顶部</div>
<div id="mid" style="height: 1000px">中间</div>
<div id="bottom" style="height: 1000px">底部</div>
</div>
</body>
</html>
7.浅析SEO：搜索引擎优化
a.页面标签语义化b.使用SEO有利的标签：h1/h2/h3/strong/em.....
c.提高页面关键词密度
8.css选择符：
群组：#id1 , #id2....(逗号分隔)
包含选择符：
div p { }
9.css伪类
a:link 未访问a:hove 鼠标悬停
a:active 链接激活
a:visited 访问过后
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 