WEB前端设计基础知识全面
三大标签：
<html></html> 创建一个HTML文档
<head></head> 设置文档标题和其它在网页中不显示的信息
<body></body> 设置文档的主体部分
标题标志：
<title></title> 将文档的题目放在浏览器的标题栏中
文本标志：
<h1></h1> 最大的标题
<h6></h6> 最小的标题
<b></b> 黑体字
<i></i> 斜体字
<em></em> 强调文本(通常是斜体加黑体)
<strong></strong> 加重文本(通常是斜体加黑体)
链接标志：
<a href="URL"></a> 创建超文本链接
超链接的四种状态：
Link :默认链接状态（蓝色带下划线）
Visited :访问过后状态(紫色带下划线)
Hover :鼠标放在链接上的状态
Active :点击的时候
格式标志
<p></p> 创建一个段落
<p align=""> 将段落按左、中、右对齐
<br> 插入一个回车换行符
<ol></ol> 创建一个标有数字的列表
<ul></ul> 创建一个标有圆点的列表
<li>放在每个列表项之前,若在<ol></ol>之间则每个列表项加上一个数字,若在<ul></ul>之间则每个列表项加上一个圆点
定义列表
自定义列表不仅仅是一列项目，而是项目及其注释的组合。
自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。
图像标志
<img src="xxx.jpg">
在HTML文档中嵌入一个图像
<img src="xxx.jpg" align=""> 排列对齐一个图像:左、中、右或上、中、下
<img src="name" border=""> 设置图像的边框的大小
- 样式
- 网页有几种样式，分别怎么引入到网页中去。
行内样式：如<p style="color:red;font-size:12px;">行内样式</p>
怎么引入的：style=" ",属性们之间用英文分号隔开。）
使用范围：HTML标签内，放在开始标签的里面。
内部样式：如
怎么引入：<style></style>包起来，放在头部，
选择符{属性1;属性2;}如：p{ color:red;font-size:12px;}
使用范围：所有标签，选择器
（切记别把别的标签分家）
外部样式：
引入：单独把样式写在一个以.css为扩展名的文件下面，然后通过上面一句话引入。
- CSS选择器
Css选择器（标签选择器，类选择器，ID选择器，群组选择器，通配符选择器，子选择器，后代选择器（补充内容），伪类选择器）
每一条CSS样式声明（定义）由两部分组成：
选择器{
样式;
}
如：body{
color:red;
}
body是选择器，color:red;是样式。
标签选择器：任何HTML元素都可以是一个CSS的选择器。
选择符仅仅指向特别样式的元素。如下面代码，当前的选择符是“p”，
p{color:red;
font-family:"宋体";
color:green;
font-size:16px;
}
类选择器：当前类选择符是“.text”，样式定义代码如下：
.text{
font-family:"宋体";
color:yellow;
font-size:16px;
}
在页面中，用class=”类别名”的调用方法。
<p class=”text”>类选择器的使用</p>，定义效果如下图所示：
ID选择器，和类选择器大致相同，记住他们的区别：
ID选择器与类选择器的区别：
ID选择器与类选择器有很多相似处，是不是可以通过呢？
相同点：可以应用于任何一种元素
不同点：
ID选择器只能在文档中使用一次。而类选择器可以使用多次。
可以使用类选择器列表法为一个元素同时设置多个样式，而ID不行。
如：
.st{color:red;}
.bi{font-size:12px;}
<p class="st bi"> 信阳职业技术学院</p>
而 #st{color:red;}
#bi{font-size:12px;}
<p id="st bi"> 信阳职业技术学院</p> 是错误的。
群组选择器：为了减少样式表的重复声明，组合的选择符声明是允许的。
如：P,div{
font-family:"宋体";
color:yellow;
font-size:16px;
}
通配符选择器：功能最强大的选择器，他针对html中所有的标签元素。使用*指定。
如果*{color：red}
Html任意标签字体变红色。
子选择器：即大于符号（>）,用于选择指定标签元素的第一代子元素。
用法：.sf > span{color:blue}
<p class="sf">商业<span>网站</span>UI设计</p>
只有网站变蓝色
包含（后代）选择器：
继承（后代）选择器 又叫（包含）选择器
特点：加入空格，用于指定标签元素下的后辈元素。
如： .footer p span{color:green;}
子孙元素继承祖先元素的某些属性，通常是从左往右，依次细化，最后锁定要控制的标签。
.foo p span{color:yellow}
<div class="foo"><p>商业<span>网站</span>UI设计</p></div>
只有网站变黄色。
区别：>作用于元素的第一代后代，空格作用于元素的所有后代。
伪类选择器：
伪类主要用来定义超链接的样式。CSS中用四个伪类来定义超链接的样式，分别是：a:link,a:visited,a:hover,a:active，分别定义了“默认链接”，“已访问过的链接”，“光标悬停时”，“单击鼠标时”的四种动态样式。声明顺序：lvha
这四种样式的范例如下：
a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
a:active {color: #0000FF} /* 选定的链接 */
在某个类上定义伪类选择器
如：.content
- content:link{ } a.content:visited{ } a.content:hover{ } a.content:active{ }
3，优先级
- 样式优先级（就近原则 权值大小 覆盖 继承 ！Important.）
就近原则
对于同一种元素，我们同时用了三种方法设置CSS样式，那么哪种方法真正有效呢？（自己试一下，使用三种样式）
试过的同学会发现，行内样式会优先被使用，调换内嵌和外部的顺序，可以发现，它们符合就近原则。
（注意：上面所总结的优先级是在一个前提下：在相同的权值情况下，那么，什么是权值呢？）
权值大小
有时候我们为同一个元素设置了不同的CSS样式代码，那么元素会启用哪种CSS样式呢？看下面代码：
p{color:red;}
.first{color:green}
<p class="first">信阳职业技术学院</p>
浏览器会根据权值判断使用哪种CSS样式。使用权值高的。
P{color:red;}/*权值为1*/
p span{color:red;}/*权值为1+1*/
.first{color:red;}/*权值为10*/
p span .first{color:red;}/*权值为1+1+10=12*/
#footer .note p{color:red;}/*权值为100+10+1=111*/
(注意：还有一个权值比较特殊--继承也是有权值的，但是权值很低，文献显示只有0.1，所以可以理解为继承权值最低。
通过style方式来定义HTML标签的样式，这种方式定义样式在css规范中有很高的优先权（1000）)。
覆盖
但是，我们来思考另外一个问题：如果HTML文件中对于同一个元素可以使用多个CSS样式表，并且多个CSS样式具有相同的权值我们该怎么办？这就是一个层次问题了。
如：样式代码：
<style>
p{color:red;}
p{color:green;}
</style>
页面代码：<p>网页设计</p>
则“网页设计”显示什么颜色？这就是个层次问题了。
层次是HTML文件中对于同一个元素可以有多个CSS样式存在，当他们又有相同的权值时，会根据CSS样式的前后顺序来决定，处于最后面的CSS样式会被应用。（即覆盖了）
继承
CSS的某些样式是具有继承性的，那么什么是继承呢？继承是种规则，它允许样式不仅应用于某个特定html标签元素，而且应用于后代。
如：p{color:red}
<p>欢迎学习<span>网页</span>设计课程</p>
这时“欢迎学习网页设计课程”都变成红色，
但是有些CSS样式是不具有继承的。如border:1px solid red;
p{border:1px solid red;}
<p>欢迎学习<span>网页</span>设计课程</p>
这里p标签设置了边框1像素，红色，实心边框线，而span没有起作用。
！Important
如果我们在做网页时，有些特殊情况需要我们为某些样式设置具有最高权值，怎么办？这时候我们可以使用！Important.
4．注释
样式注释：/*p{color:red;font-size:12px;}*/
代码注释：<!--<p>同学们好好听课吧！！！</p>-->
都是把不要的内容包起来。
5.CSS常用属性值
字体属性：
font-family:(字体系列) 如：font-family:font-family:"Times New Roman",Georgia,Serif;
color:(字体颜色) 如：body {color:red} 或 h1 {color:#00ff00} 或 p.ex {color:rgb(0,0,255)}
font-size:(字体大小) 如：font-size:12px;
font-weight:(字体粗细) 如：font-weight:bold; font-weight:900;
font-style：（字体样式）如：font-style:italic; font-style:oblique;
文本属性：
color：（设置文本颜色） 如：color:#00ff00; color:red; color:rgb(0,0,255);
text-align（设置文本水平对齐）如：text-align:center; text-align:left; text-align:right
line-height 设置行高。 line-height:1em;
text-indent 规定文本块首行的缩进。 text-indent:1em
letter-spacing 设置字符间距。 letter-spacing:2px; letter-spacing:-2px;
背景属性：
background-attachment 设置背景图像是否固定或者随着页面的其余部分滚动 background-image: url(bgimage.gif);
background-attachment: fixed;
background-color 设置元素的背景颜色。 background-color:#00ff00; background-color:yellow;
background-image 设置元素的背景图像。 background-image: url(bgimage.gif);
background-position 设置背景图像的开始位置 background-position: X轴，Y轴（top left right bottom;）。
background-repeat 设置是否及如何重复背景图像。 background-repeat: repeat -x -y;
边框属性：
border 在一个声明中设置所有的边框属性。 border:5px solid red;
border-color 设置四条边框的颜色。 border-color:red green blue pink;
border-style 设置四条边框的样式。 border-style:dotted solid double dashed;
border-width 设置四条边框的宽度。 border-width:thin medium thick 10px;
border-bottom 在一个声明中设置所有的下边框属性。 border-bottom:thick dotted #ff0000;
border-bottom-color 设置下边框的颜色。 border-bottom-color:#ff0000;
border-bottom-style 设置下边框的样式。 border-bottom-style:dotted;
border-bottom-width 设置下边框的宽度。 border-bottom-width:15px;
border-left 在一个声明中设置所有的左边框属性。 border-left:thick double #ff0000;
border-left-color 设置左边框的颜色。 border-left-color:#ff0000;
border-left-style 设置左边框的样式。 border-left-style:dotted;
border-left-width 设置左边框的宽度。 border-left-width:15px;
border-right 在一个声明中设置所有的右边框属性。 border-right:thick double #ff0000;
border-right-color 设置右边框的颜色。 border-right-color:#ff0000;
border-right-style 设置右边框的样式。 border-right-style:dotted
border-right-width 设置右边框的宽度。 border-right-width:15px;
border-top 在一个声明中设置所有的上边框属性。 border-top:thick double #ff0000;
border-top-color 设置上边框的颜色。 border-top-color:#ff0000;
border-top-style 设置上边框的样式。 border-top-style:dotted;
border-top-width 设置上边框的宽度。 border-top-width:15px;
outline 在一个声明中设置所有的轮廓属性。 outline:#00FF00 dotted thick;
outline-color 设置轮廓的颜色。 outline-color:#00ff00;
outline-style 设置轮廓的样式。 outline-style:dotted;
outline-width 设置轮廓的宽度。 outline-width:5px;
边界属性：
margin 在一个声明中设置所有外边距属性。 margin:10px 5px 15px 20px;
margin-bottom 设置元素的下外边距。 margin-bottom:2cm;
margin-left 设置元素的左外边距。 margin-left:2cm;
margin-right 设置元素的右外边距。 margin-right:2cm;
margin-top 设置元素的上外边距。 margin-top:2cm;
内边距属性（Padding）
padding 在一个声明中设置所有内边距属性。 padding:10px 5px 15px 20px;
padding-bottom 设置元素的下内边距。 padding-bottom:2cm;
padding-left 设置元素的左内边距。 padding-left:2cm;
padding-right 设置元素的右内边距。 padding-right:2cm;
padding-top 设置元素的上内边距。 padding-top:2cm;
CSS 定位属性（Positioning）
bottom 设置定位元素下外边距边界与其包含块下边界之间的偏移。 bottom:5px;
clear 规定元素的哪一侧不允许其他浮动元素。 clear:both;
clip 剪裁绝对定位元素。 clip:rect(0px,60px,200px,0px);
cursor 规定要显示的光标的类型（形状）。 cursor:wait; cursor: pointer;
display 规定元素应该生成的框的类型。 display:inline; display:block;
float 规定框是否应该浮动。 float:right;
left 设置定位元素左外边距边界与其包含块左边界之间的偏移。 left:100px;
overflow 规定当内容溢出元素框时发生的事情。 overflow:scroll;
position 规定元素的定位类型。 position:absolute;
right 设置定位元素右外边距边界与其包含块右边界之间的偏移。 right:5px;
top 设置定位元素的上外边距边界与其包含块上边界之间的偏移。 position:absolute; top:5px;
visibility 规定元素是否可见。 visibility:hidden;
z-index 设置元素的堆叠顺序。 z-index:-1;
- 表单
说实话，无论是asp,php还是jsp进行网络编程的时候，都离不开和用户的交互。而人机对话的平台，基本上是靠相应的文本、列表框进行输入，然后通过按钮提交送至数据库的。
常用表单：
单行文本框：<input type=”text” />
多行文本框：<textarea> </textarea>
密码框： <input type=”password”/>
按钮：
提交按钮<input type=”submit” />
重置按钮 <input type=”reset” />
普通按钮<input type=”button” /> <button></button>
多选按钮：<input type=”checkbox” />
单选按钮：<input type=”radio” />
下拉列表：
<select>
</select>
补充：清除浮动
浮动：float，常用的css属性，可以设置左浮动float：left；右浮动float：right；不浮动float：none；
浮动会引起父容器塌陷，导致页面布局出错等问题。
常用清除浮动的几个方法：
1.父级div定义 伪类:after 和 zoom
优点：浏览器支持好、不容易出现怪问题（目前：大型网站都有使用，如：腾迅，网易，新浪等等），IE8以上和非IE浏览器才支持:after，zoom(IE转有属性)可解决ie6,ie7浮动问题
缺点：代码多、不少初学者不理解原理，要两句代码结合使用才能让主流浏览器都支持。
建议：推荐使用，建议定义公共类，以减少CSS代码。
2结尾处加空div标签 clear:both
优点：简单、代码少、浏览器支持好、不容易出现怪问题
缺点：如果页面浮动布局多，就要增加很多空div，让人感觉很不好
建议：不推荐使用，但此方法是以前主要使用的一种清除浮动方法
3. 父级div定义 height
优点：简单、代码少、容易掌握
缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级div不一样时，会产生问题
建议：不推荐使用，只建议高度固定的布局时使用
4. 父级div定义 overflow:auto
优点：简单、代码少、浏览器支持好
缺点：内部宽高超过父级div时，会出现滚动条。
建议：不推荐使用，如果你需要出现滚动条或者确保你的代码不会出现滚动条就使用吧。
5.父级div定义 overflow:hidden
优点：简单、代码少、浏览器支持好
缺点：不能和position配合使用，因为超出的尺寸的会被隐藏。
建议：只推荐没有使用position或对overflow:hidden理解比较深的朋友使用。
- Web前端(列表)基础知识笔记(2)
- WEB前端 基础知识汇总
- web前端知识基础回顾
- web前端面试中常见的js基础又实用的知识回顾
- 零基础学习web前端开发需要学习的前端知识
- WEB前端基础知识
- web前端入门知识笔记——html基础（传智播客）
- web前端入门：javascrip基础知识
- WEB前端模块化基础知识
- web前端脚本编程（一）--JavaScript脚本基础知识
- web前端基础知识及快速入门指南
- web前端基础知识（三）——CSS编码规范
- 初学者入门web前端 C#基础知识：数组与集合
- Web前端开发基础知识--部分总结
- web前端之JavaScript必知的基础知识
- web前端开发基础知识随笔
- Web前端必备基础知识点，百万程序员：牛逼！
- web前端-HTML基础知识
- Web前端基础知识(1)
- Web前端基础知识-电脑与sublime Text3快捷键的使用