1.html5基本格式:
<!DOCTYPE> --> 文档类型声明.
<html lang="zh-cn"> --> 表示html文档开始
<head> --> 包含文档元素开始.
<meta charset="utf-8"> --> 表示字符编码
<title>文档标题</title> --> 设置文档标题
</head>
<body> --> 表示html的内容:
<a href="www.baidu.com">链接</a>-->超链接标签.
</body>
</html>
.元素单标签(不需要包含内容),双标签(包含内容).
.属性和值.比如a的属性href,属性值:"www.baidu.com"
2.HTML5文本元素:常见:
<span></span> -->表示一般性文本.
<strong></strong> -->加粗
<em></em> -->定义着重文字
<q></q> -->定义短的引用语
<cite></cite> -->定义引用、引证
<address></address> -->地址
<del></del> -->删除字
3.a元素:
href:连接到哪个网页.如果有http:// 链接到web网页。
target:告诉浏览器显示在哪里._self 默认打开,_blank 新窗口打开.
.相对路径:同一个磁盘或目录,相对于自己的路径,常用.
.绝对路径:不常用,需要加盘符,路径还太长.
.目录语法:
当前目录:./
子目录:xxx/index.html
孙子目录:xxx/xxx/index.html
父目录:../
爷爷目录:../../
.锚点(了解):
<a href="#1">第一章</a>
<a name="">第一章详细内容</a> -- id也行.
4.分组元素:就是会默认换行的元素.
.<p></p>
.<div></div>
.<blockquote></blockquote>引用大段他出的内容
.<pre></pre> 原封不动的展示.
.<hr> 添加水平线.
.<ul><li></li></ul>无序列表
.<ol><li></li></ol>有序列表
.<dl><dt></dt><dd></dd></dl>说明列表
.<figure>
<figcaption>这是一张图片</figcaption>
<img src="img1.png" />
</figure>图片文本结合.
.表格元素标签:
table : 表示表格 OK
thread : 表示标题行 OK
tbody : 表示主体 OK
tfoot : 表示表脚
tr : 一行 OK
th : 表示标题单元格 OK
td : 表示单元格 OK
col : 表示一列
colgroup : 表示一组列
caption : 表示表格标题 提示:
colspan 合并单元格属性
rowspam 合并列
例子:设置span2就是两列字体颜色红色,默认第一列
<colgroup style="color:red" span=""></colgroup>
第二列变为红色 第一个占了一列是1,第二列也是1.
<colgroup style="color:blue" span=""></colgroup>
<colgroup style="color:red" span=""></colgroup>
第二种方式,设置第二列红色 <colgroup>
<col> <!-- 占位符 -->
<col style="background:red;">
</colgroup>
h1~h6 标题
header 头部
footer 尾部
nav 导航元素
section 概念主题
article 表示独立的内容
address 联系信息
aside 表示周边内容少有牵涉的信息
hgroup 表示一组标题组合在一起
details 生成区域,用户可以展开显示更多信息. 主浏览器不支持
summary 用于details元素中,表示该元素内容或者标题. 主浏览器不支持
5.img
.img 图片.
src : 图片路径
alt : 图片加载错的时候提示。
width : 宽.
height : 高.
ismap : 分区坐标例子
<a href="index.html" ><img src="index.png" width="" height="" ismap/></a>
6.ifname : 框架页面. src : 显示页面 width : .. height : .. name : 名字
7.<embed>嵌入插件内容
src: falsh 视频
type : falsh
width : ..
height : ..
.progress : 进度条 ie 不支持
value : 长度
max : 最大长度
.meter : 范围值 ie 不支持
min : 最小10
max : 最大100
low : 小于某个值
high : 大于某个值 提示:Ctrl + f5 重度刷新.
8.视频,音频
.video 播放视频
src : 视频资源路径
width : 视频宽度
height : 视频高度
autoplay : 设置后,开始播放视频
preload : 设置后,预先载入视频 none 什么都不加载 metadata 表示播放只能加载元数据(宽,高,第一帧画面等信息)
auto表示请求浏览器尽快下载整个视频.
controls : 设置后,显示播放控件
loop : 设置后,表示反复播放视频
muted : 设置后,表示视频静音状态
poster : 指定视频数据载入时显示的图片. poster = '图片路径' .audio : 音频
src : 音频资源路径
controls : 设置后,显示播放控件
9.form: 表单
method : get,post
action : 提交到的地方
enctype : multipart/form-data 上传文件需要设置以下.
name : 表单名称
autocomplete : on 自动完成,off 不想自动完成.
novalidate : 设置客户端数据的有效验证.
input : 收集用户输入的数据.
autofocus : 让光标聚集在某个input元素上,让用户直接输入.
disabled : 禁用input元素.
autocomplete : 单独设置input自动完成功能
type : input的类型
name : input的名称.
form : 让表单外的元素和指定表单挂钩,表单设置id,表单外的input设置form = "form的id"就能一起提交.
value: 默认起始值
textatea 可以输入多行文本内容
select : 下拉框
option : 提供下拉框的一组选项
optgroup : 表示一组相关的option
button : 按钮
type : submit,reset 重置,button 普通按钮
datalist : 给用户定义一组建议值
fieldset : 表示一组表单元素
name : 定义名称
form : 让表单外的分组与表单挂钩
disabled : 禁用分组的表单.
legend : 表示fieldset的说明标签.
label : 表单说明标签,点label可以输入input
input 设置id 用label的for="对应input的id"点label可以输入input
或者<label>input标签</label> output : 计算结果 提示:在form下button有提交功能. input:
type : text单行文本,默认
text的属性:
list 指定文本框提供建议值的datalist元素,其值为datalist元素的id值
<datalist id="abc">
<option value="">苹果</option>
</datalist>
maxlength 设置文本最大长度
pattern 输入的验证格式
placeholder 输入字符的提示
readonly 文本框只读
disabled 文本框禁用
size 设置文本的宽度
value 设置文本的值
required 表明用户必须输入一个值,否则无法通过验证.
password隐藏字段的密码框
属性和文本框一致.
serach 搜索框,在某些浏览器键入内容会出现叉标记取消
submit,reset,button 生成提交按钮,重置按钮,普通按钮
number,range 只能输入数字,只能输入一个范围的值
list指定为文本框提供的建议值的datalist元素,其值为datalist元素的id值
max 设置可接受的最大值.
min 设置可接受的最小值.
readonly 设置文本内容只读.
required 表明用户必须输入一个值,否则无法通过验证.
step 指定上下调节值的步长
value : 初始值.
checkbox,radio 复选框,单选框.
checked:默认选中
required 表明用户必须输入一个值,否则无法通过验证.
value 设置复选框,单选框提交的数据.
image,color 生成一个图片按钮,颜色代码按钮.
email,tel,url 生成一个检测邮件,号码,网址的文本框.
date,month,time,week,datetime,datetime-local 获取时间和日期 hidden 隐藏
file 生成一个上传控件. select : 生成下拉框
size : 长度
multiple : 设置多选.
selected : 默认选中
optgroup : 对select框进行编组
option : select元素中的项目
textarea : 生成一个多行文本框.
name : 提交时候的名称
form : 与表单外的元素挂钩
readonly : 只读
disabled : 禁用
maxlength : 设置最大可输入字符长度.
autofocus : 获取焦点.
placeholder : 设置输入时的提示信息.
rows : 设置行数
cols : 设置列数
wrap : 是否有换行符
required : 设置必须输入值,否则无法通过验证.
output 表示计算结果. 验证:required,
还有正则表达式pattern,
禁止表单验证,在表单上加novalidate
10.全局属性和其他
.id属性:唯一的id.
.class属性多个设置.
.accesskey属性 了解
<input type="text" name="user" accesskey="n" />
解释,快捷键window下的alt+指定键,没什么用,用户不可能像it这么熟悉电脑,有的根本只是登录网页而已.
.contenteditable=true,p标签上设置一个这个就可以修改. false 就跟没写一样.
.dir 属性,从左到右（ltr）,从右到左.（rtl）
.hidden 隐藏属性
.lang 属性,局部设置语言,<p lang="en"></p>
.title 对元素内容进行额外的提示.
.tabindex属性
表单按tab键就可以下来了. -1则不会被选中.
.style 设置内联的样式.
知道就行:
特殊字符在html上展示:
< <
> >
空格
© 版权
.指定名/值对
元数据名称:说明
author : 当前页面的作者
description : 当前页面的元素
keywords : 当前页面的关键字
generator : 当前页面的编码工具.
例子: <mata name="author" content="bbbx" />
.声明字符编码:
<meta charset="utf-8"/>
.模拟http标头字段:
//5秒跳转到URL
<meta http-equiv="refresh" content="5;http://li.cc" />
//另一种声明的字符编码
<meta http-equiv="content-type" content="text/html" charset="utf-8" /> refresh 重新加载当前页面
content-type 另一种声明字符编码.
11.css
属性:属性值.
使用css的三种方式:
.元素内嵌样式.
<p style="color:red;"></p>
.文档内嵌样式.
<style>
p{
color : red;
}
</style>
.外部引入样式.
<link rel="stylesheet" type="text/css" href="style.css" /> 谁离得近,谁管用 元素内嵌样式. > 文档内嵌样式. > 外部引入样式. 强制优先级:
在外部引入的样式属性中设置 !important;优先级高.比元素内嵌和文档内嵌要高. 提示:样式继承:
只适用于元素的外观(文字,颜色,字体等),而元素在页面上的布局样式不会被继承.
p {color:red;}p 里面的全部都是红色.加边框则只有p有边框.
<p>a<b>b</b></p>
基本选择器:
* : 通用选择器.
id选择器 : #id名称
p : 标签的名称,p{}
.类名 : 类选择器,一个或者多个元素,类元素可以有多个. 属性选择器:
直接通过[]里面包含的属性名即可。[href]{} [type="password"] {}
[href^='http']{} : href开头等于http的.
[href$='cn']{} : href结尾等于cn的.
[href*='baidu']{} : href模糊等于baidu的.
[class~='def']{} class有这个class的话就调用.
复合选择器:
分组选择器:同时设置一组元素.
p,h1,div,span{}
后代选择器:不在乎层次,使用空格隔开:
div P {} div下面所以得p标签.
子选择器: > 儿子,不管孙子....
div p 就是div得包括的第一层,别的都不管.
相邻兄弟选择器:
p+b{} p 标签相邻的b标签变色.
普通兄弟:不是隔得特别近,也可以.
p ~ b{}
伪元素选择器,伪元素前面一般都有: div::first-line{}块级(不换行的元素)首行.
p::first-letter:块级首字母,body开始算.
a::before{content:'点击'}插入
a::after{content:'搜索'}末尾插入.
结构性选择器:
.根元素选择器
:root{} 因为总是返回html标签.
.子元素选择器:
:first-child{}选择第一个子元素.
:last-child{}选择最后一个子元素.
:only-child{}选择只有一个子元素.
:only-on-type{}选择只有一个指定类型的子元素的那个子元素.
:nth-child(n)系列:选择子元素的第二个元素.
:nth-last-child(){}:选择倒数第二个元素.
:nth-of-type():选择特定子元素的第二个元素
:nth-last-of-type(){}选择特定子元素倒数第二个元素.
UI伪类选择器:
:enabled{} :form表单启用的.
:disabled{} :form表单禁用的.
:checked{} : 比如选择勾选的复选框.
:default{} : 比如默认勾选.
下面两个伪类选择器需要input设置required html5的验证
:valid{} : 合法状态.
:invalid{} : 不合法状态.
动态伪类选择器:
.link和visited : :link表示未访问过的超链接,:visited表示已经访问过的链接.
.:hover : 表示已经悬停在超链接上.
.:active : 表示鼠标按下激活超链接时.
.:focus : 文本框是否获取焦点.
其他伪类选择器：
.:not :否定选择器反选.
.:empty : 匹配没有任何内容的选择器.
.:lang(en) : 选择包含lang属性的,属性前缀为en的元素,和属性选择器匹配结果一致.
.:target : 定位到锚点的时候选择此元素.
. ::selection {}:这是一个伪元素选择器,当选择文字时候触发.
伪类都需要个前置元素,限制范围.
颜色和度量单位:
颜色名称:white 白色
十六进制:#ffffff 白色
十进制:rgb(,,) 白色
度量单位:
in 英寸
cm 厘米
mm 毫米
pc pica
相对单位:
em 与元素字号挂钩 常用
px 像素,与分辨率挂钩 常用
% 相对于另一个值得百分比 常用
文本样式:
font-size:字体大小
font-variant:设置英文字体是否转换大小写.
font-style:设置字体是否倾斜.
font-weight:加粗.
font-family: 设置font字体.
font : 设置字体样式复合写法.
@font-face : 设置web字体.
下:
文本样式的总绘
text-decoration : 装饰出现划线.
text-transform : 将英文文本转换大小写.
text-shadow : 给文本添加阴影.
text-align : 设置文本对齐方式.
white-space : 排版中空白处理方式.
letter-spacing : 设置字母之间的间距.
word-spacing : 设置单词之间的间距.
line-height : 设置行高.
word-wrap : 设置段词.
text-indent : 设置文本首行的缩进.
盒模型:
width: 设置元素宽度. auto,长度值,百分比.
height: 设置元素高度 auto,长度值,百分比.
min-height:设置元素最小高度
min-width:设置元素最小宽度
max-width:设置元素最大宽度
max-height:设置元素最大高度
元素内边距:扩充你的长,宽.
padding 简写属性。作用是在一个声明中设置元素的所内边距属性。
padding-bottom 设置元素的下内边距。
padding-left 设置元素的左内边距。
padding-right 设置元素的右内边距。
padding-top 设置元素的上内边距。
元素外边距:
margin 简写属性。在一个声明中设置所有外边距属性。
margin-bottom 设置元素的下外边距。
margin-left 设置元素的左外边距。
margin-right 设置元素的右外边距。
margin-top 设置元素的上外边距。 溢出处理:当元素固定尺寸且内容过大,就会溢出,溢出主要朝着两个方向,右侧,底部,我们可以通过overflow系列样式来处理。
overflow-x 溢出值 设置水平方向溢出
overflow-y 溢出值 设置垂直方向溢出
overflow 溢出值 简写形式.
4种处理值:
auto 浏览器自行处理溢出的内容,如果有溢出内容,则显示滚动条,否则就不显示滚动条.
hidden : 如果有溢出内容,直接减掉.
scroll : 不管是否溢出,都会出现滚动条,但是不同平台和浏览器显示的方式不一样.
visible : 默认值,不管是否溢出,都显示内容. 盒子模型下:
.元素可见性:
visibility : visible 默认元素可见.
hidden 元素不可见但会占用空间
collapse 元素不可见,隐藏表格的行与列,如果不是表格,和hidden一样.
.块级元素:设置元素尺寸,隔离其他元素.<div>,<p>
.行内元素:不能设置尺寸,只能自适应.
.行内块级元素:img,可以设置大小.
display : block 盒子为块级元素
: inline 盒子为行内元素
: none 盒子不可见,不占位.
.浮动:
float : left 浮动元素靠左
right 浮动元素靠右.
none 禁止浮动.
clear : none 允许两侧浮动
left 左边界不得浮动
right 右边界不得浮动
both 两边不得浮动
边框背景:
边框:
border 简写属性，用于把针对四个边的属性设置在一个声明。
border-style 用于设置元素所有边框的样式，或者单独地为各边设置边框样式。
border-width 简写属性，用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。
border-color 简写属性，设置元素的所有边框中可见部分的颜色，或为 个边分别设置颜色。
border-bottom 简写属性，用于把下边框的所有属性设置到一个声明中。
border-bottom-color 设置元素的下边框的颜色。
border-bottom-style 设置元素的下边框的样式。
border-bottom-width 设置元素的下边框的宽度。
border-left 简写属性，用于把左边框的所有属性设置到一个声明中。
border-left-color 设置元素的左边框的颜色。
border-left-style 设置元素的左边框的样式。
border-left-width 设置元素的左边框的宽度。
border-right 简写属性，用于把右边框的所有属性设置到一个声明中。
border-right-color 设置元素的右边框的颜色。
border-right-style 设置元素的右边框的样式。
border-right-width 设置元素的右边框的宽度。
border-top 简写属性，用于把上边框的所有属性设置到一个声明中。
border-top-color 设置元素的上边框的颜色。
border-top-style 设置元素的上边框的样式。
border-top-width 设置元素的上边框的宽度。 CSS3圆角边框:
border-radius : 长度或者百分值 四边角
border-top-left-radius ... 左上角
border-top-right-radius ... 右上角
border-bottom-left-radius ... 左下角
border-bottom-right-radius ... 右下角 边框与背景下:
属性 描述
background 简写属性，作用是将背景属性设置在一个声明中。
background-attachment 背景图像是否固定或者随着页面的其余部分滚动。
background-color 设置元素的背景颜色。
background-image 把图像设置为背景。
background-position 设置背景图像的起始位置。
background-repeat 设置背景图像是否及如何重复。
background-size : auto 默认尺寸.cover等比例缩放.contain 等比例缩放图像,宽度,高度较大者与容器横向或纵向重合.
background-origin : border-box 在盒子内部绘制一个背景,padding-box 在内边距盒子内部绘制背景
content-box 在内容盒子内部绘制背景.
background-clip : border-box 在元素内部裁剪背景,pading-box 在内边距盒子内裁剪背景,content-box在内容盒子内部裁剪背景.
表格与列表:
border-collapse 边框样式 相邻单元格的边框样式.
border-spacing 长度值,边框间距.
caption-side 位置名称,表格标题的位置.
empty-cells 显示值 空单元格是否显示边框.
table-layout 布局样式,制定表格的布局样式.
列表样式:
list-style-type 类型值 列表中的标记类型.
list-style-image none或url 图像作为列表标记.
list-style-position 位置值,排列相对的位置.
list-style 简写属性,列表的简写形式. 表格对齐:
vertical-align : baseline 内容对象与基线对齐.
vertical-align : top 内容对象与顶端对齐.
vertical-align : middle 内容对象与中部对齐.
vertical-align : bottom 内容对象与底部对齐.
vertical-align : sub 垂直对齐文本的下标.
vertical-align : super 垂直对齐文本的上标.
颜色和透明度:
color : 颜色.
opacity : 设置元素透明度.
cursor : 光标样式.
css3:
.前缀,就是新的css属性,某些浏览器的版本支持,加个前缀,没什么用.
.长度单位rem.和相对于根元素的<html>的文本大小来计算的,这样能更好的统一整体的画面.
em.和父元素挂钩.
.文本阴影.text-shadow
.文本裁剪.text-overflow
css渐变效果:
.线性渐变linear-gradient 属性实现背景颜色的渐变功能.
例如:background-image : linear-gradient(orange,green);
重复渐变属性repeating-linear-gradient
.径向渐变:redial-gradient();
重复背景 repathing-redial-gradient;
.用这些属性可以嵌入图片形式的边框.
-:border-image-source //引入背景图片的地址.
-:border-image-slice //切割引入背景图片
-:border-image-width //边框背景图片的宽度.
-:border-image-repeat //边框背景图片的排列方式.
-:border-image-outset //边框背景向外扩张.
-:border-image //上面五种方式的简写.
transform 变形. 指定应用的变换功能.
transform-origin 指定变换的起点.
transition-property
transition-duration
transition-timing-function
transition-delay
transition 简写.
animation:动画属性简写.
animation-name : 制定一个关键帧动画.
animation-duration : 用来设置动画播放需要的时间.
animation-timing-function : 用来设置动画的方式.
animation-delay : 用来制定动画的延迟时间.
animation-iteration-count : 用来制定动画播放的循环次数.
animation-direction : 用来制定动画播放的方向.
animation-play-state : 用来控制动画的播放状态.
animation-fill-mode : 用来设置动画的时间外属性
12.传统布局
传统布局:
.表格布局: 教学了解一下,这个布局非常不适用.
<table border="">
<tr>
<td colspan="" class="header"></td>
</tr>
<tr>
<td class="aside">aside</td>
<td class="section">section</td>
</tr>
<tr>
<td colspan="" class="footer"></td>
</tr>
</table>
提示:表格布局改成流式布局,改成百分比方式即可.
.浮动布局:(局限于PC端)
<!--
body{
margin: auto;
width:xxx;
}
-->
<header>
header
<!--
height:xxx;
background-color:xxx;
margin: auto;
-->
</header>
<aside>
aside
<!--
width:xxx;
height:xxx;
background-color:xxx;
float:left;
-->
</aside>
<section>
section
<!--
width:xxx;
height:xxx;
background-color:xxx;
float:right;
-->
</section>
<footer>
<!--
width:xxx;
height:xxx;
background-color:xxx;
margin: auto;
clear:both;
-->
footer
</footer>
改成流式布局,width,height设置%这样. .定位布局.position
绝对定位,相对定位(网页特别容易乱)
static : 默认无定位.
absolute : 绝对定位,使用top,right,bottom,left进行位移. (脱离文档流) z-index设置层次.
relative : 相对定位,使用top,right,bottom,left进行位移.
fixed : 根据窗口进行定位,使用top,right,bottom,left进行位移. css3的属性:
box-sizing box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素
resize:更改元素尺寸大小;
columns:auto ;分成3列.
columns-width : /*如果每列没有设置列数,却设置了每列多少宽度,那么会自动设置.*/
columns-count : 用于设置多少列封顶.
columns-gap : 设置列的间距.
columns-rule : 设置每列的分界线.
columns-span : 设置跨列最大标题.
display:flex;将容器盒模型作为块级弹性伸缩盒显示.
display:inline-flex;将容器盒模型作为内联级弹性伸缩盒展示.