一、HTML5介绍
1、HTML用来定义结构和内容，CSS用来定义样式。
2、<!DOCTYPE html>是文档类型声明，表示该文件为HTML5文件。
3、<head>标签里面可以包含title（出现在浏览器标题栏中）、link、meta、style、script等标签。
二、HTML5语义化标签
1、语义化的好处
（1）更容易被搜索引擎收录。
（2）更容易让屏幕阅读器读出网页内容。
三、HTML5效果标签
1、使用特殊字符 实现空格标签。
2、使用<hr>标签实现水平线标签。
五、HTML5图片、链接及表格标签
1、<img src="图片地址" alt="下载失败时的替换文本" title="鼠标滑过显示的文本">
2、<a href="目标网址" title="鼠标滑过显示的文本" target="_self（当前页面打开）/_blank（新窗口打开）">链接显示的文本</a>
3、表格的元素：table（border属性用数字设定表格边框）、caption（表格标题）、tr（行）、th（表格表头）、td（列）。
4、<thead><tbody><tfoot>的划分可以使<tbody>的内容优先下载并显示。当长的表格被打印时，表格的表头和页脚可被打印在包含表格数据的每张页面上。
六、HTML5表单标签与浏览者交互
1、<form method="传送方式" action="服务器文件">
2、<input type="text/password" name="名称" value="输入框的默认值" placeholder="输入框的提示信息"> type为number时只有数字是合法输入，type为url时需以http://或者https://开头且后面必须有内容，type为email时必须包含@且@之后必须有内容。
3、<textarea rows="行数" cols="列数">默认值</textarea>
4、<label for="控件id名称（需要给控件加id）"></label>
5、<input type="radio（单选框）/checkbox（复选框）" value="提交数据到服务器的值" name="控件名称" checked="checked">
6、<select>嵌套<option>创建下拉菜单，<option value="向服务器提交的值" selected="selected">显示的值</option>。
7、<input type="submit" value="提交"> <input type="reset" value="重置">
七、CSS3介绍：为网页添加样式
1、外部CSS样式：<link href="文件名称" rel="stylesheet" type="text/css" />
八、CSS3选择器
1、通用选择器（*）、标签选择器、类选择器（.）、id选择器（#）、伪类选择器（a:hover）、伪元素选择器、分组选择器（用,合并相同样式）。
2、id选择器和类选择器的区别：
（1）ID选择器只能在文档中使用一次（不能有重复的id）。
（2）可以用类选择器词列表方法为一个元素同时设置多个样式（不能给同个元素添加多个id）。
3、用>来指定标签元素的第一代子元素，用空格来指定所有子元素。
九、CSS3的继承、优先级和重要性
十、CSS字体样式
1、font-family设置字体、font-size设置字号、font-weight设置字体粗细、font-style="normal（默认样式）、italic（斜体）、oblique（斜体）"设置字体样式、color设置字体颜色。
十一、CSS文本样式
1、text-decoration="none（默认）、underline（下划线）、overline（上划线）、line-through（删除线）"。
2、text-indent为文本添加首行缩进。
3、line-height设置行间间距（行高）。
4、letter-spacing设置字母间距，word-spacing设置单词间距。
5、text-align="center（居中）、left（居左）、right（居右）"设置文本对齐方式。
6、长度值：像素（显示器的实际像素）、em（本元素给定字体大小的倍数、如果本元素没有给定大小则相对于父元素）、百分比（本元素给定字体大小的比例）。
十二、CSS盒模型
1、块元素（display:block）：独占一行；元素的高度、宽度、行高以及顶和底边距都可设置；元素宽度在不设置的情况下，是它本身父容器的100%。
<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>；
内联元素（display:inline）：元素从左到右排布；元素的高度、宽度及顶部和底部边距不可设置；元素的宽度就是它包含的文字或图片的宽度，不可改变。
<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>；
内联块元素（display:inline-block）：元素从左到右排布；元素的高度、宽度、行高以及顶和底边距都可设置。
<img>、<input>；
2、盒模型的宽度（补充）
W3C盒模型：content
IE盒模型：border×2+padding×2+content
3、用border设置边框属性：border:2px solid red;是border-width:2px; border-style:solid; border-color:red;的简写。border-style常见样式有：dashed（虚线）| dotted（点线）| solid（实线）。也可用border-bottom单独设置某个方向的属性。
4、用border-radius设置边框圆角，方向是左上、右上、右下、左下，当全部设置为50%时是圆。
5、用padding设置内边距、用margin设置外边距，方向是上、右、下、左。
十三、CSS3布局模型
1、布局模型：流动模型（flow、默认）、浮动模型（float）、层模型（定位）。
2、绝对定位（position:absolute）：将元素从文档流中拖出来，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口。
相对定位（position:relative）：通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。相对定位完成的过程是首先按static（float）方式生成一个元素（并且元素像层一样浮动了起来），然后相对于以前的位置移动，移动的方向和幅度由left、right、top、bottom属性确定，偏移前的位置保留不动。
固定定位（position:fixed）：表示固定定位，与absolute定位类型类似，但它的相对移动的坐标是视图（屏幕内的网页窗口）本身。由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化，除非你在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小，因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响。
relative和absolute的组合使用：父元素设置relative、子元素设置absolute。
十四、flex弹性盒模型
1、项目在主轴上的对齐方式
justify-content: flex-start | flex-end | center | space-between | space-around;space-between：两端对齐，项目之间的间隔都相等。
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
2、项目在交叉轴上的对齐方式
align-items: flex-start | flex-end | center | baseline | stretch;3、通过flex属性，设置子元素相对于父元素的占比。
扫一扫
2420
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
