大型html示例,HTML介绍(示例代码)

一、HTML5介绍

网页声明!DOCTYPE html

网页标题title

设置字符编码集格式meta charset

网页头部head

二、文本标记

行内元素用来做细微的调整，可以和其他行内元素共存一行

b 加粗

i 倾斜

u 下划线

s 删除线

sup 上标

sub 下标

span

三、HTML5与CSS3之间的关系

CSS 样式表

CSS语法规范

选择器{样式规则}

样式规则-属性名：属性值

元素选择器-使用元素的名称作为选择器的名称

四、常用CSS属性与属性值

字体颜色 color：合法颜色值；

背景颜色 background-color：合法颜色值；

文本排列 text-align:left/center/right;

文本修饰 text-decoration:none/underline;

文本尺寸 font-size: n px;

宽度 width: n px;

高度 height: n px;

五、其它标记

块级元素用来做布局，独占一行，元素前后都会换行

标题元素 hn

n - 1~6

特点：

独占一行(独占一行的基本都能使用文本排列样式)

文本加粗

字体大小依次减小

每行文本上下都有一定的距离

段落元素p

独占一行，不嵌套，不放独占一行的元素

可以使用文本排列

只要是纯文本，就使用P

块级元素与行内元素：

块级元素：默认情况下，独占一行

div、hn、p

行内元素：可以和其他行内元素在一行内显示

span、b、i、u等

换行br

分割线hr

预格式化pre

实体字符

图像格式

JPEG

采用有损压缩算法，压缩比较大

GIF

使用256色的方法来压缩图像，色彩会有较大的失真，主要用于线条为主的图像，或图像面幅很小时。另外GIF支持动画和透明图像

PNG

采用无损压缩，有8位、24位、32位三种形式，支持透明色(PNG24位不支持)，但不支持动画

六、图像元素

src设置图片路径

src引用图片的路径

width height

当图片只设置了宽度或高度，另外一个属性会跟着等比缩放

css圆角图片

border-radius : n px/n% 之间的区别

相对路径是从引用的网页文件本身开始构建的，如果在A网站中的a-test.html中要插入图片a-next.jpg，可以这样做:，重点是img前面的../，表示从html处于的include开始起步，输入一个../表示回到上面一级父文件夹下，然后再接着img/表示又从父级文件夹下的img文件开始了，最后定位img下面的next.jpg。

根路径是从网站的最底层开始起，一般的网站的根目录就是域名下对应的文件夹，就如D盘是一个网站，双击D盘进入到D盘看到的就是网站的根目录，这种路径的链接样式是这样的：如果在A网站中的a-test.html中要插入图片a-next.jpg，可以这样做:，以/开头表示从网站根目录算起，找到根目录下面的img文件夹下的next.jpg。

绝对路径就很好理解了，这种路径一般带有网站的域名，如果在A网站中的a-test.html中要插入图片a-next.jpg，需要这样这样写:，将图片路径上带有了域名信息，再打个比方：如果在A网站中的a-test.html中要插入B网站的图片b-next.jpg，就需要这样写：，这种方法适用与在不同网站之间插入外部网站的图片。

伪类

锚伪类：规定链接不同状态的显示方式

七、链接

语法 a

必须的属性 href - 跳转的URL路径/地址

可选的属性 target

_blank 在新页面中打开

CSS样式

伪类选择器：给元素添加一些特殊效果

link：当链接没有被访问过的样式

visited：当链接已经被访问过的样式

hover当鼠标移动到链接上时的样式

active：当链接被选中时的样式

锚点

创建锚点

内容

链接到锚点

跳转到其他页面中的锚点

八、浮动概述

浮动定位是指将元素排除在普通流之外，即元素将脱离标准文档流(不占据页面空间)

浮动回见浮动元素放置在包含框的左边和右边

浮动元素依旧位于包含框之内

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止

经常使用它来解决块级元素在一行内显示的问题

九、列表

定义 - 将一些具有相同或者相似特征的元素进行整齐的排列

分类 有序列表 ol &无序列表 ul

列表项 li

属性 type - 控制列表项表示的样式

ol的属性 start - 控制有序列表项标识的开始位置

CSS样式

list-style-type:none; 去掉列表项标识

十、尺寸

常用尺寸单位

px - 像素

% - 百分比

常用的颜色单位

rgb(0,0,255); 0~255之间的数字

rrggbb; 6位的16进制数字

英文单词

尺寸

width - 宽度

height - 高度

哪些元素能够设置尺寸属性

所有的块级元素都能设置尺寸属性

能够设置宽度和高度的html元素：img 等

大部分的行内元素都不能设置尺寸属性

十一、浮动

语法 float

取值 none/left/right

概述

浮动的元素会脱离文档流，不占据页面空间

浮动户籍将浮动的元素放置在包含框的左边或右边

浮动的元素依然会位于父元素之内

如果浮动的元素之前已经有了一个已经浮动的元素，那么该浮动元素会统考在前一个已经浮动元素的旁边

浮动专门用于解决块级元素在一行显示的问题

清楚浮动

语法：属性 clear 取值 none/left/right/both;

常用语法 clear:both; 清楚两侧浮动

浮动对父元素造成的影响 - 父元素没有高度

解决办法

直接给父元素设置高度

让父元素也浮动

追加空元素，并使用clear:both; 清除浮动的影响

overflow：hidden；溢出隐藏，清除浮动

十二、CSS3基础选择器

通用选择器 - 选择页面中所有的元素

*{

margin:0;

padding:0;

}

元素选择器 - 以标签的名称作为选择器 - 选中页面中所有该元素标签名称{样式规则}

ID选择器 - 选择页面中ID为 xx 的元素

在元素的开始标签中 定义ID属性并设置对应的ID值

ID名称{样式规则}

类选择器 - 选择页面中clss为 xx的元素

在元素的开始标签中 定义clss属性并设置对应的class值

.class名称{样式规则}

多类选择器 - 让一个元素同时使用多个定义好的样式

分类选择器 - 对页面中的元素做细分控制

div.a1 - 选择页面中class为a1的div元素

群组选择器 - 让页面中的多个元素同时使用相同的样式

选择器1，选择器2，选择器3，……，选择器n{样式规则}

后代选择器

选择器1 选择器2{样式规则}

选择器1 必须是 选择器2 的祖先元素

子代选择器

选择器1>选择器2{样式规则}

选择器1 必须是 选择器2 的父元素

十三、绝对定位的特点

将元素的内容从普通流中完全溢出，不占据空间(脱离文档流)

使用偏移属性来固定该元素的位置

相对于最近的已定位祖先元素

如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块，比如body元素

绝对定位一般用于实现页面下拉选项框

十四、定义列表

语法 定义 - dl 定义术语 - dt 定义内容 - dd

使用场合

图文混排

十五、定位 - 控制元素的位置

相对定位 position:relative;

不脱离文档流

一般用于网页元素位置的微调

经常配合绝对定位使用

配合偏移属性使用

绝对定位 position:absolute;

脱离文档流

相对与已经定位的祖先元素进行定位

如果没有已经定位的祖先元素，那么它会相对于最初的包含框(body)进行定位

配合偏移属性使用

下拉菜单/图文混排

固定定位 position:fixed;

脱离文档流

相对于最初的包含框定位

固定定位的元素不会随着滚动条的滚动而滚动

经常用于返回顶部功能的实现

偏移属性

top/right/bottom/left

当偏移属性取值为正，元素移动方向为属性相反方向

当偏移属性取值为负，元素移动方向为属性相同方向

十六、边框

语法 border： 边框宽度 边框样式 边框颜色

实线solid

单边定义 border-方向：边框宽度 边框样式 边框颜色

常用用法 border：1px solid #000；

特殊取值 - 透明 transparent

边框倒角：border-radius：px/%

十七、框模型

外边距 margin

定义： 元素周围的空白区域

取值：

margin只有一个取值时，代表上下左右四个方向；

margin：值1 值2

值1 - 上下的外边距

值2 - 左右的外边距

margin：值1 值2 值3；

值1 - 上外编剧

值2 - 左右外边距

值3 - 下外边距

margin： 值1 值2 值3 值4

上下左右四个方向

单边定义：

margin - 方向： n px;

方向 top/right/bottom/top

auto 居中

只能控制块级元素左右居中

内边距 padding

同margin

特殊用法

元素所占大小计算方式

元素实际所占宽度 = 元素内容宽度+左右内边距+左右边框+左右外边距

元素实际所占高度 = 元素内容高度+上下内边距+上下边框+上下外边距

box-sizing:border-box;

让元素大小包含元素内容，内边距以及边框的大小

改变盒模型计算的方式

十八、过渡

语法：transition：过渡属性 过渡时间 过渡速度函数 过渡延迟；

属性 - 带有数字形式的属性值一半都可过渡

时间 - 按照程序需要的时间设置即可

速度函数 - 一般使用linear(匀速)或者不写

延迟 - 一般不设置

常用用法：transition：all 0.3 s linear；

十九、转换

平移

transform：translate(x方向平移，y方向平移)；

单方向平移 translateX、translateY(平移量)；

注意：y的正方向向下

缩放

transform：scale(默认值1)；

当取值为0~1时，缩小

当取值>1时，放大

旋转

transform：rotate(n deg)；

当取值为正时，顺时针旋转

当取值为负时，逆时针旋转

倾斜

transform：skew(n deg，n deg)；

联合使用

注意：一个元素中不允许出现多个transform属性

transform：translate() scale() rotate() skew()；

二十、动画

声明动画

@keyframes 动画名称{

0%{动画开始时的样式}

50%{动画运行到一半时的样式}

100%{动画结束时的样式}

}

调用动画

animation： 动画名称 动画时间 动画速度函数 动画延迟 动画播放次数；

无限次循环播放：infinite

速度函数 - 匀速的：linear

二十一、背景属性

背景颜色 background-color: 合法颜色值；

背景图像 background-image:url(“图像资源的路径”)；

注：背景颜色和背景图像同时设置时，背景图像会压在背景颜色的上边

背景重复 background-repeat: none/repeat-x/repeat-y/no-repeat;

背景尺寸 background-size: 宽度 高度；- px/%

背景图像定位 background-position: x方向偏移量 y方向偏移量；

x取值为正 - 向右偏移

x取值为负 - 向左偏移

y取值为正 - 向下偏移

y取值为负 - 向上偏移

配合精灵图(图像拼合技术)使用

二十二、表单form

表单控件 input

属性 type - 值不同，效果也不同

取值

text - 文本框

password 密码框

radio 单选框 - name值需要是一样的

checkbox 复选框

submit 提交按钮

reset 重置按钮

button 普通按钮