1、前端网页设计的知识点大全必看解析 head定义文档头部，包含： title, script, style, link, meta body是网页主要内容，包含：h1,h2-h6, p, a, img2. 认识head标签： . 网页标题 . . 4. 认识body标签： 段落文本 有三段就放三个 标题文本 h1-h6共6个标题分级 斜体文本（强调） 斜体文本内容 粗体文本 粗体显示文本内容 单独样式文本 没有语义的，它的应用就是为了 设置单独的格式用的 引用的文本 引用的文本内容，会自动加上双引号 大段引用 引用大段的文本内容，文本前后会加上缩进 换行 水平横线 空格 地址信息
2、地址信息，通常用于公司地址显示 代码内容 代码，通常是一行内 多行代码 多行代码,你需要在网页中预显示格式时都可以使用它 ul-li 列表信息，以圆点显示 信息1 信息2 . ol-li 列表信息，带上序号 信息 信息 . 排版内容 排版中使用，相当于一个容器 确定逻辑部分：逻辑部分是页面上相互关联的一组元素，如栏目版块 div 带上ID号，使之更清晰 表格内容 创建表格 标题文本 为表格添加标题文本 . 若加此标签后，表格会一次性显示出来（而非网页加载一点显示一点） 表格一行 表格中的一行 表格单元格 表格中的一个单元格 表格表头 表格头部的一个单元格，表格表头 . 为表格添加摘要，但不会被
3、浏览器显示出来 链接显示文本 链接标签 target=_blank 网页将在新窗口中打开 mailto: 网页中邮件地址，可带多个参数 mailto: 邮箱地址 cc= 抄送地址 bcc= 密抄地址 ; 多个邮箱地址 subject=邮件主题 body= 邮件内容 完整举例: 发送邮件 5. 与用户交互： 语法： 举例： 用户名: 密码: 表单控件： 文本框、文本域、按钮、单选框、复选框 method: post/get 1. 文本框（文本/密码） type：有“text”和“password”两种类型 name：为文本框命名，方便后台ASP和PHP使用 value：文本框默认值，一般起提示作
4、用 2. 文本域（多行文本） 默认文本内容 cols：多行输入域的列数 rows：多行输入域的行数 3. 单选框、复选框 type：radio单选，checkbox复选框 value：提交数据到服务器的值，后台PHP处理使用 name：为控件命名，以备后台程序ASP和PHP使用 checked：checked=checked时，此选项默认被选中 注意：同一组的单选按钮，name取值一定要一致 4. 下拉列表框 爱好: 看书 看书 旅游 运动 购物 value：向服务器提交值 selected：设置selected=selected时，默认选中 multiple：multiple=multipl
5、e时，可以使用Ctrl多选，但很丑 label：为了改进鼠标易用性，鼠标点击文本时，选择上Radio6. 认识CSS样式： CSS：层叠样式表（Cascading Style Sheets），主要用于定义HTML内容在浏览器内的显示样式 语法： 选择符 属性: 值 举例： p color: blue 选择符：又称选择器，指明要应用样式规则的元素，如、. 声明：指的是冒号”:“ 多条声明：使用分号”;“隔开，最好每行都加上分号 注释：CSS使用 /*/，HTML注释则使用7. CSS样式分类： 1. 内联式 这里文字是红色。 2. 嵌入式 较通用的一类，CSS样式放置在标签中，而通常要放置在内
6、span color:blue; font-size:12px; 3. 外部式 把CSS代码写到一个单独的外部文件中，以.css扩展名结尾，在内使用标签引入，如： href: .css文件路径 rel和type: rel=stylesheet type=text/css 是固定写法，不能改 三种方法的优先级： 内联式 嵌入式 外部式 就近原则，嵌入式外部式有一个前提：嵌入式css样式的位置一定在外部式的后面 以上规则适用于相同权值的情况8. CSS 类选择器 语法： .类选器名称css样式代码; 举例： .stress color:red; 注意：前边的小圆点是必须要有的 使用： 胆小如鼠9.
7、 CSS ID选择器 语法： #ID选择器名称css样式代码 举例： #setGreencolor:green; 胆小如鼠 区别： 起始于 . 与 # 调用时 class= 与 id= ID选择器只能在文档中使用一次，类选择器则可以使用多次 一个元素可以使用多个类选择器同时设置多个样式，而ID选择器是不可以的，如 三年级10.CSS 子选择器 还有一个比较有用的选择器子选择器，即大于符号(),用于选择指定标签元素的第一代子元素。举例： .foodliborder:1px solid red; 若大于符号换成空格( ),用于选择指定标签元素的所有后辈元素，举例： .first spanborde
8、r:1px solid red;11. CSS 通用选择器 通用选择器是功能最强大的选择器，它使用一个（*）号指定，它的作用是匹配html中所有标签元素： * color: red; 此时，所有元素的字体都为红色12. CSS 伪类选择符 伪类选择符，它允许给html不存在的标签（标签的某种状态）设置样式，比如说我们给html中一个标签元素的鼠标滑过的状态来设置字体颜色 a:hovercolor:red; 此时，把鼠标放置到元素上边，颜色就会切换为红色13. CSS 分组选择符 多个标签使用逗号隔开： h1,spancolor:red; 相当于： h1color:red; spancolor:
9、red;14. CSS 继承 CSS的某些样式是具有继承性的，那么什么是继承呢？继承是一种规则，它允许样式不仅应用于某个特定html标签元素，而且应用于其后代 如： pcolor:red; /*可被span继承*/ pborder:1px solid red; /*此时，span将不继承，边框显示红色*/15. CSS 特殊性（权值） 权值： pcolor:red; /*权值为1*/ p spancolor:green; /*权值为1+1=2*/ .warningcolor:white; /*权值为10*/ p span.warningcolor:purple; /*权值为1+1+10=12*
10、/ #footer .note pcolor:yellow; /*权值为100+10+1=111*/ 注意：还有一个权值比较特殊-继承也有权值但很低，有的文献提出它只有0.1，所以可以理解为继承的权值最低。 层叠： 相同权值时，最后一个将被应用 重要性： 相同权值时，使用 !important 将得到最高权重，如 pcolor:red!important; 样式优先级为：浏览器默认的样式 网页制作者样式 用户自己设置的样式，使用 !important 优先级比 用户自己设定 还高16. CSS 文字排版 1. 字体 bodyfont-family:宋体; bodyfont-family:Mic
11、rosoft Yahei; 2. 字号，颜色 bodyfont-size:12px;color:#666 3. 粗体 p spanfont-weight:bold; afont-weight:bold; 4. 斜体 p afont-style:italic; pfont-style:italic; 5. 下划线 p atext-decoration:underline; 6. 删除线 .oldPricetext-decoration:line-through; 7. 缩进 ptext-indent:2em; /*2em 表示两倍文字大小*/ 8. 行间距 pline-height:1.5em;
12、 9. 字间距、字母间距 h1letter-spacing:50px;word-spacing:50px; /*分别是字母、单词间距*/ 19.对齐 h1text-align:center; /*left、right和center*/17. CSS 元素分类 块状元素： 、.、 、 内联元素： 、 内联块状元素： 、 1. 块状元素： 1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。（真霸道，一个块级元素独占一行） 2、元素的高度、宽度、行高以及顶和底边距都可设置。 3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。 注意：adispl
13、ay:block; /*可以把内联元素 a 转换为 块状元素*/ 2. 内联元素： 1、和其他元素都在一行上； 2、元素的高度、宽度、行高及顶部和底部边距不可设置； 3、元素的宽度就是它包含的文字或图片的宽度，不可改变。 注意：display:inline 可以转换成内联元素 3. 内联块状元素： 1、和其他元素都在一行上； 2、元素的高度、宽度、行高以及顶和底边距都可设置。 注意：display:inline-block 可以转换成内联块状18. CSS 盒模型 1. 边框 div border:2px solid red; 相当于： div border-width:2px; border
14、-style:solid; border-color:red; border-style: dashed（虚线）| dotted（点线）| solid（实线） border-color:#888; /前面的井号不要忘掉。 border-width: 有 thin | medium | thick（但不是很常用），最常还是用象素（px） 2. 上下左右边框： divborder-bottom:1px solid red; /*top、bottom、left和right*/ 3. 高度和宽度 div width:200px; /*宽度*/ height:30px; /*高度*/ padding:2
15、0px; /*元素到边框的距离，又名为“填充”*/ border:1px solid red; margin:10px; /*两盒子距离，又名为“边界”*/ 19. CSS 布局模型 元素有三种布局模型： 1、流动模型（Flow） 网页在默认状态下的 HTML 网页元素都是根据流动模型来分布网页内容的 第一点，块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100% 第二点，在流动模型下，内联元素都会在所处的包含元素内从左到右水平分布显示 2、浮动模型 (Float) 现在我们想让两个块状元素并排显示 任何元素在默认情况下是不能浮动的，但可以用CS
16、S定义为浮动，如div、p、table、img等元素都可以被定义为浮动 举例： #div1float:left; #div2float:right; 3、层模型（Layer） 就像是图像软件PhotoShop中非常流行的图层编辑功能一样，每个图层能够精确定位操作，但在网页设计领域，由于网页大小的活动性，层布局没能受到热捧 层模型有三种形式： 1、绝对定位(position: absolute) 需要设置position:absolute(表示绝对定位)，这条语句的作用将元素从文档流中拖出来 然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对
17、定位 如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口 举例： div xxxx:yyyy; position:absolute; right:100px; top:20px; 2、相对定位(position: relative) position:relative（表示相对定位），它通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置 相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来)， 然后相对于以前的位置移动，移动的方向和幅度由left、right、top、bottom属性确定，偏移前的位置保留
18、不动 举例： #div1 width:200px; height:200px; border:2px red solid; position:relative; left:100px; top:50px; 3、固定定位(position: fixed) 如弹窗广告 fixed：表示固定定位，与absolute定位类型类似，但它的相对移动的坐标是视图（屏幕内的网页窗口）本身 它不会随浏览器窗口的滚动条滚动而变化，除非你在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小， 因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响 举例： #div1 width:200p
19、x; height:200px; border:2px red solid; position:fixed; left:100px; top:50px; Relative与Absolute组合使用： 1、参照定位的元素必须是相对定位元素的前辈元素 相对参照元素进行定位 2、参照定位的元素必须加入position:relative; #box1 width:200px; height:200px; position:relative; 3、定位元素加入position:absolute，便可以使用top、bottom、left、right来进行偏移定位了 #box2 position:absol
20、ute; top:20px; left:30px; 20. 代码简写： 1. 盒模型： margin:10px; 相当于 margin:10px 10px 10px 10px; （上右下左顺序） margin:10px 40px; 相当于 margin:10px 40px 10px 40px; （上右 下左顺序） padding, border和 margin是一致的； 2. 颜色值： pcolor:#000000; 相当于 pcolor: #000; pcolor: #336699; 相当于 pcolor: #369; 3. 字体： body font-style:italic; font-
21、variant:small-caps; font-weight:bold; font-size:12px; line-height:1.5em; font-family:宋体,sans-serif; 编写为： bodyfont:italic small-caps bold 12px/1.5em 宋体,sans-serif; 注意： 1、使用这一简写方式你至少要指定 font-size 和 font-family 属性，其他的属性未指定将自动使用默认值。 2、在缩写时 font-size 与 line-height 中间要加入“/”斜扛。21. 长度值 1. 像素 像素为什么是相对单位呢？因为像
22、素指的是显示器上的小点（CSS规范中假设“90像素=1英寸”） 2. em 假定 font-size设定 14px，那么 1em=14px 3. 百分比 pfont-size:12px;line-height:130%一，html+css基础1-1Html和CSS的关系学习web前端开发基础技术需要掌握：HTML、CSS、JavaScript语言。下面我们就来了解下这三门技术都是用来实现什么的：1. HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。2. CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框
23、等。所有这些用来改变内容外观的东西称之为表现。3. JavaScript是用来实现网页上的特效效果。如：鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻（新闻图片）的轮换。可以这么理解，有动画的，有交互的一般都是用JavaScript来实现的。1-21， HTML标签不区分大小写，和是一样的，但建议小写，因为大部分程序员都以小写为准。1-3一个HTML文件是有自己固定的结构的。.代码讲解：1. 称为根标签，所有的网页标签都在中。2. 标签用于定义文档的头部，它是所有头部元素的容器。头部元素有、 、 等标签，头部标签在下一小节中会有详细介绍。3. 在和标签之间的内容是网页的主要内容，如、等网页内容标签，在这里的标签中的内容会在浏览器中显
