HTML5总结

一、            常用基本标签

标题标签<h1>~<h6>

段落标签<p>

换行标签<br/>

水平线标签<hr/>

字体加粗标签<strong>

文字倾斜标签<em>

注释<!—注释内容-->

特殊符号：

空格：&nbsp

大于号：&gt

小于号：&lt

引号：&quot

版权符号：&copy

1)      超链接标签<a>

语法：<a         href=”链接地址”  target=”目标窗口位置”>链接文本或图像<a/>

target：属性值为_self（自身窗口）_blank（新建窗口）

页面间链接：直接链接文件或网站

锚链接：

一、     在页面乙位置设置标记

语法：<a  name=“标记名”>目标位置乙<a/.>

二、     设置甲位置链接路径href属性值为

语法：<a  name=“#标记名”>当前位置甲<a/.>

功能性链接：电子邮箱链接的用法：mailto:电子邮箱地址

2)      图像标签<img/>

语法：<img   src=”图片地址”     alt=”图像的替代文字”     title=”鼠标悬停提示文字”       width=”图片宽度”      height=”图片高度”

 

 

二、            网页布局

1)      列表

无序列表语法：

<ul>

       <li>第一项<li/>

       <li>第二项<li/>

       <li>第三项<li/>

<ul/>

有序列表语法：

<ol>

<li>第一项<li/>

       <li>第二项<li/>

       <li>第三项<li/>

<ol/>

定义列表语法：

<dl>

       <dt>标题一<dt/>

       <dd>第一项<dd/>

       <dd>第二项<dd/>

<dt>标题二<dt/>

       <dd>第一项<dd/>

       <dd>第二项<dd/>

 

<dl/>

2)    表格

参加表格的语法：

<table>

       <tr>

              <th>单元格的标题<th/>

<tr/>

       <tr>

              <td>第一个单元格的内容<td/>

              <td>第二个单元格的内容<td/>

<tr/>

<table/>

单元格的跨列语法：

<table>

       <tr>

              <td colspan=“所跨的列数”>单元格内容<th/>

<tr/>

      

<table/>

单元格的跨行语法：

<table>

       <tr>

              <td rowspan=“所跨的行数”>单元格内容<th/>

<tr/>

      

<table/>

 

 

3)    HTML5媒体元素

视频元素：video元素的基本语法：

<video src=“视频路径”      controls></video>

音频元素：audio元素的基本语法：

<audio src=“音频路径”      controls></audio>

autoplay属性（自动播放）

loop属性（循环播放）

4)    HTML5结构标签

header元素：标题头部区域的内容

footer元素：标记脚部区域的内容

section元素：web页面中的一块独立区域

article元素：独立的文章内容

aside元素：相关内容或应用（常用于侧边栏）

nav元素：导航类辅助内容

5)    内联框架

<iframe>语法：

<iframe       src=“引用页面地址”    name=“框架标识名”><iframe/>

 

三、            表单

1)    表单页面的基本结构

使用<form>标签创建表单

<form>标签的属性：

action：提交的地址

method：如果将数据发送到服务器。属性值：post方法（不会改变地址栏状态，表单数据不会被显示）get方法（会改变地址栏状态，表单数据会被显示）

2)    表单元素

<input>元素常用属性：

type：指定表单元素的类型

属性值：

文本框（text）

密码框（password）

单选按钮（radio）

复选框（checkbox）

重置表单元素按钮（reset）

提交按钮（submit）

普通按钮，需要与事件关联使用（button）

图片按钮（image）

文件域，实现文件的选择（file）

name: 指定表单元素的名称

value: 指定表单元素的初始值

size: 指定表单元素的初始宽度

maxlength: 指定可在text或password元素中输入的最大字符数

checked: 指定按钮是否是被选中的

number：提供输入数字的文本框

       number类型的属性值：

              规定的默认值（value）

              规定允许的最小值（min）

              规定允许的最大值（max）

              规定合法的数字间隔（Step）

Range：滑块

       Range类型的属性值：

              规定的默认值（value）

              规定允许的最小值（min）

              规定允许的最大值（max）

              规定合法的数字间隔（Step）

Search：搜索框

Hidden：创建隐藏域

列表框：

语法：<select        name=“指定列表名称”     size=“行数”>

       <option      value=“可选项的值”>……</option>

  <select>

多行文本域：

语法：<textarea   name=”textarea”   cols=“显示的列数”      rows=“显示的行数”>

              文本内容

              </textarea>

3)    表单元素的高级用法     

只读效果：readonly

禁用效果：disabled

表单元素的注释：

语法：<label   for=“表单元素的id”>标注的文本</label>

4)    表单初级验证

Placeholder：用于为input类型的文本框提供一种提示

Required：规定文本不能为空

Pattern：用于验证input类型的文本框中输入的内容是否与自定义的正则表达式相匹配

 

四、            CSS3基础语法

1)    CSS选择器

伪类选择器：

E：first-child：作为父元素的第一个子元素的元素E

E：last-child：作为父元素的最后一个子元素的元素E

E F：nth-child（n）：选择父级元素E的第N个子元素F

E：first-fo-type：选择父元素内具有指定类型的第一个E元素

E：last-of-type：选择父元素内具有指定类型的最后一个元素E

E F：nth-of-type（n）：选择父级元素内具有指定类型的第N个F元素

属性选择器：

E[attr]：选择匹配具有属性attr的E元素

E[attr=val]：选择匹配具有属性attr的E元素，并且属性值为val

E[attr^=val]：选择匹配元素E，且E元素定义了属性attr，其属性值是以val开头的任意字符串

E[attr$=val]：选择匹配元素E，且E元素定义了属性attr，其属性值是以val结尾的任意字符串

E[attr*=val]：选择匹配元素E，且E元素定义了属性attr，其属性值包含了val

 

 

 

五、            文本与图像

1)    CSS字体样式

字体类型：font-family

字体大小：font-size

字体加粗：font-weight

属性值：默认值（normal）、粗体（bold）、更粗的（bolder）、更细的（lighter）

字体风格;font-style

属性值：标准（normal）、斜体字体样式（italic）、倾斜的字体样式（oblique）

 

2)    CSS文本应用样式

文本颜色：color

 

元素水平对齐方式：text-align

属性值：把文本排列到左边（left）、把文本排列到右边（right）、把文本排列到中间（center）、两端对齐文本效果（justify）

 

首行缩进：text-indent

 

文本行高：line-height

 

文本装饰：text-decoration

属性值：默认值（none）、文本的下划线（underline）、文本的上划线（overline）、文本的删除线（line-through）

 

垂直对齐：vertical-align

 

文本阴影：text-shadow

语法：text-shadow:color x轴位移（x-offset） y轴位移（y-offset） 模糊半径（blur-radius）；

3)    CSS超链接和列表样式

超链接伪类：

a:link：单击访问前的超链接样式

a:visited：单击访问后的超链接样式

a:hover：鼠标悬浮其上的超链接样式

a:active：单击未释放的超链接样式

列表样式：

List-style-type属性值：

none：无标记符号

disc：实心圆

circle：空心圆

square：实心正方形

decimal：数字

背景样式：

Background-color：背景颜色

Background-image：背景图像

Background-repeat：背景重复方式

属性值：沿水平和垂直两个方向平铺（repeat）、不平铺（no-repeat）、只沿水平方向平铺（repeat-x）、只沿垂直方向平铺（repeat-y）

背景定位：Background-position

背景尺寸：Background-size属性值：默认值（auto）、百分值（percentage）、放大填充（cover）、缩放（contain）

CSS线性渐变：

语法：linear-gradient（position，color1，color2）

渐变方向：从顶部到底部（to  bottom）、从左到右（to     left）、从右下方到左上方（to              top        left）、从左下方到右上方（to   top rignt）、从右上方到左下方（to        bottom）、从左上方到右下方（to  bottom       right）

 

 

六、            盒子模型

1)    盒子模型属性

Border-color：边框颜色

Border-width：边框粗细

Border-style-边框样式，属性值：无边框（none）、点线边框（dotted）、虚线边框（dashed）、实线边框（solid）

Margin：外边距

Padding：内边距

2)    盒子模型尺寸

盒子模型内盒总尺寸=border+padding+内容宽度

盒子模型总尺寸=border+padding+margin+内容宽度

Box-sizing：定义盒子模型的尺寸解析方式

语法：box-sizing：content-box|border-box|inherit

3)    圆角边框

圆角属性;border-radius

制作圆形要点：元素的宽度和高度必须相同

圆角的半径为元素宽度的一半，或者直接设置圆角半径值为50%

制作半圆形的要点：制作上半圆或下半圆时，元素宽度是高度的2倍，而且圆角半径为元素的高度值。制作左半圆或右半圆时，元素的高度是宽度的2倍，而且圆角半径为元素的宽度值

4)    盒子阴影

Box-shadow：盒子阴影，语法;box-shadow:inset   x-offset       y-offset       blur-radius color

 

七、            浮动与定位

标准文档流：

display属性的属性值：块级元素的默认值（block）、行内元素的默认值（inline）、行内块元素（inline-block）、隐藏元素（none）

1)    浮动

Float属性定义浮动：

属性值：left：元素向左移动、right：元素向右移动、none：默认值

清除浮动（clear）：属性值：left：在左侧不允许浮动、right：在右侧不允许浮动、both：在左右两侧不允许浮动、none：默认值

2)    定位

position定位属性：

属性值：static：默认值、relative：相对定位、absolute：绝对定位、fixed：固定定位

 

z-iindex属性的应用：用于调整元素定位时层叠层的上下位置

设置层的透明度：

Opacity：x：x值为0~1，值越小越透明，filter：alpha（opacity=x）：x值为0~100，值越小越透明

 

八、            制作网页动画

1)    变形

transform：变形函数：

translate（）平移，基于x、y坐标重新定位元素的位置

scale（）缩放，可以是任意元素对象尺寸发生变化

roeate（）旋转，取值是一个度数值

skew（）倾斜，取值是一个度数值

 

 

2)    过渡

过渡动画transition

语法

transition：过渡属性 过渡所需时间       过渡动画函数       过渡延迟时间

 

过渡属性值：IDENT：指定的CSS属性、all：指定所有元素支持

过渡动画值：ease：默认值、linear：匀速运动、ease-in：渐显效果、ease-out：渐隐效果、ease-in-out：渐显渐隐效果

触发机制：

伪类触发：hover、active、focus、checked等

媒体查询：可以通过@media属性判断设备的尺寸、方向等

JavaScript触发：用JavaScript脚本触发

 

3)    动画

animation属性（动画）制作动画的步骤：通过@keyframes来声明一个动画。

找到要调用动画的元素，并且调用关键帧声明的动画