网页基础:网页设计(我所知道的所有的html和css代码(含H5和CSS3)),如有错误请批评指正...

最基础的网页设计,就是给你一个图片你做成一个网页,当然,我的工作是C#,个人网页的功底不是很高
首先先认识一下网页的一些相关知识:

一般的,现在一个html网页一般包含html文件,css文件,js文件,img文件这几个部分
css文件,全名叫成叠样式表稍后会说说,js呢,这个文章暂时先不说
现在说说网页
静态网页htm,html 最早的静态网页文本，目前也常见
非静态网页 
asp 微软的动态网页文件
php php的文档格式，参看www.php.net，常用，比asp流行
jsp sun公司的动态网页文本,常用
shtml 动态页面文件，较少
nsp 较少，使用java，一般是lotus服务器
等等等等...
这篇文章呢,主要讲的是html页面
在网页中呢,会有很多图片,当然,并不是任何图片都支持
HTML页面中常用的有：bmp,gif,jpg,png。
BMP是一种与硬件设备无关的图像文件格式，使用非常广。它采用位映射存储格式，除了图像深度可选以外，不采用其他任何压缩，因此，BMP文件所占用的空间很大
GIF 意为Graphics Interchange format（图形交换格式），GIF图片的扩展名是gif。现在所有的图形浏览器都支持GIF格式，而且GIF格式支持背景透明。
JPEG 代表Joint Photograhic Experts Group（联合图像专家组）JPG最主要的优点是能支持上百万种颜色，从而可以用来表现照片.
PNG 是20世纪90年代中期开始开发的图像文件存储格式，其目的是企图替代GIF和TIFF文件格式
既然有图片,就会有图片的处理,下面讲述了一些Photoshop的一些快捷键
取消当前命令：Esc； 工具选项板：Enter； 选项板调整：Shift＋Tab； 退出系统：Ctrl＋Q； 获取帮助：F1； 剪切选择区：F2 / Ctrl＋X； 拷贝选择区：F3 / Ctrl＋C； 粘贴选择区：F4 / Ctrl＋V； 显示或关闭画笔选项板：F5； 显示或关闭颜色选项板：F6； 显示或关闭图层选项板：F7； 显示或关闭信息选项板：F8； 显示或关闭动作选项板：F9； 显示或关闭选项板、状态栏和工具箱：Tab； 全选:Ctrl＋A; 反选:Shift＋Ctrl＋I; 取消选择区:Ctrl＋D； 选择区域移动：方向键； 将图层转换为选择区：Ctrl＋单击工作图层； 选择区域以10个像素为单位移动：Shift＋方向键； 复制选择区域：Alt＋方向键； 填充为前景色：Alt＋Delete； 填充为背景色：Ctrl＋Delete； 调整色阶工具：Ctrl＋L； 调整色彩平衡：Ctrl＋B； 调节色调/饱和度：Ctrl＋U； 自由变形：Ctrl＋T； 增大笔头大小：“中括号”； 减小笔头大小：“中括号”； 选择最大笔头：Shift＋“中括号”； 选择最小笔头：Shift＋“中括号”； 重复使用滤镜：Ctrl＋F； 移至上一图层：Ctrl＋“中括号”； 排至下一图层：Ctrl＋“中括号”； 移至最前图层：Shift＋Ctrl＋“中括号”； 移至最底图层：Shift＋Ctrl＋“中括号”； 激活上一图层：Alt＋“中括号”； 激活下一图层：Alt＋“中括号”； 合并可见图层：Shift＋Ctrl＋E； 放大视窗：Ctrl＋“＋”； 缩小视窗：Ctrl＋“－”； 放大局部：Ctrl＋空格键＋鼠标单击； 缩小局部：Alt＋空格键＋鼠标单击； 翻屏查看：PageUp/PageDown； 显示或隐藏标尺：Ctrl＋R； 显示或隐藏虚线：Ctrl＋H； 显示或隐藏网格：Ctrl＋”。 打开文件：Ctrl＋O； 关闭文件：Ctrl＋W； 文件存盘：Ctrl＋S； 打印文件：Ctrl＋P； 恢复到上一步：Ctrl＋Z；由钢笔图形转换成选区： Ctrl＋回车

好了,回到正题;
一.html简介
HTML——
Hypertext markup language
超文本 标记 语言

文件的扩展名为.html或 .htm

首页：index.html default.html 默认页

HTML的基本语法
标记 /标签(元素)
双标签 格式为:<标签>内容
网页 页面根元素
头部
主体

段落

标题
表格。。。

单标签 格式为:<标签>
例如： 图片
换行

---

水平线
一个最基本的网页构造





网页主题


保存为html文件就可以以浏览器打开网页了

一个html网页的结构是html网页,css层叠样式表,js代码,还有图片
在一个文件夹目录下创建这四个文件夹就可以说是一个站点
一般的,
[定义文档类型]
位于文档中的最前面的位置，告知浏览器文档使用哪种HTML或XHTML规范




二.标题元素 
一般的,在网页中都会有标题元素 .标题的概念：标明文章、作品等内容的简短语句.
一下是常用的标题元素

标题1

标题2

 

标题3

标题4

标题5

标题6

从1到6的标题元素出来的效果是从大到小,

是最大，

最小,自带加粗效果
标题一般是剧中对齐的,对齐是align属性,值Left,Center,Right(水平对齐方式),比如:

段落标签

默认存在段间距 ,一对标签是一个段落
换行是单标签
,在一些浏览器中,
也是可以解析的

到了这里,我突然的想了起来,在网页中,尖括号,双印号啊这些都是关键的网页标记,那么我们咋样在网页上显示这些符号呢:
空格   半角空格

小于号 < < left
大于号 > > right

双引号” "
版权符© © 
注册符® ® 

一些常用的标签:
粗体。 bold
在网页中，比较重要的文本通过粗体方式显示

倾斜。 italic
下划线。 underline

强调。
强调显示文本内容，文字以斜体方式显示

加强强调。
强调的程度更强烈一些，加粗的字体 

水平线标记

---

,单标签
color 颜色，
size 粗细
Width 宽度
align 对齐 

图片标签:
图像标记
属性：
src 图片路径
alt 提示文字
title 标题（鼠标弹出框）
width/ height 宽高
border=“5” 边框
所有标签都有title属性
比如

这里是一些概念
属性：用来表示标签的特征。
属性值：为属性赋的值称为属性值。
语法为：<标记 属性="属性值"> 内容

在插入图片的路径要选择正确,下面是路径的一些知识
路径分为绝对路径和相对路径:
绝对路径：完整的描述文件位置
比如:C：/image/1.jpg
http://www.baidu.com
相对路径：就是网页相对于目标位置
站点内部相对路径
../ 上一级
../../ 上上级

列表
无序列表ul 
语法：

• 列表项


• 列表项


• 列表项

列表类型type
disc 实心圆 
circle 空心圆 
square 方块
有序列表ol
语法：

1. 列表项


2. 列表项


3. 列表项

列表类型type
1 1 2 3 4… 
a a b c d… 
A A B C D…
i i ii iii iv ..小写罗马字母 
I I II III IV ..大写罗马字母
reversed 倒序
自定义列表dl

定义项

描述项

描述项

三.图像和超链接
超级链接是一对一关系
格式:文字、图片
链接地址 

给文字和图片添加链接
首页

链接网站
百度

空链接：
首页 单击后仍停留在当前页

超链接地址可以是
网页、 图片、文字、压缩包.rar zip 、应用程序.exe等任意文件

target属性值
_self 原窗口 本窗口 (默认)
_blank 新窗口
_top 顶框架
_parent 父框架

四.表格
格式:
表格table、 tr行、 td 列/单元格 内容

姓名	身高	体重
张三	175CM	70kg

table的属性
Width、height 宽高（单位像素或百分比,默认不是100%）
align 对齐
border 外边框
bgcolor 背景色
background 背景图片

特有属性
cellspacing 单元格间距 默认2像素
cellpadding 单元格边距 （边框与内容的间距）
设置tr基本属性
属性：
align 水平对齐
left/center/ right

valign 垂直对齐
top 顶部
middle 中部 
bottom 底部

bgcolor 背景色
设置td的基本属性
属性：
Width、height 宽高（单位是像素或%）
align valign 水平对齐、垂直对齐
bgcolor 背景色
background 指定背景图片
rowspan=“2” 垂直跨度 合并行

合并必须是相邻的单元格

水平跨度colspan 

垂直跨度rowspan









表头th
特殊的单元格，加粗、居中

它的用法是取代的位置即可

餐饮类型
主要菜系
价格



thead 表格页眉 一个
tbody 表格主体 
tfoot 表格页脚 一个

对表格的行进行分组，
注意：thead ，tfoot只有一个 tbody可以有多个

….
….
….
....
….


表格属性:
1px细线表格
表格Table中
border=1 
cellspacing=0
Bgcolor=边框色

单元格td
Bgcolor=白/浅色
五.表单
结构:

 
属性:
Name 表单名字
action=“url” 提交地址
method 提交方式
get 获取
Post 传送
target 新窗口提交
输入标签
：
text 文本框
password 密码框

radio 单选框
checkbox 复选框

file 文件域

submit 提交按钮
reset 重置按钮

button 普通按钮
image 图像域按钮

Hidden 隐藏域


文本框

输入 类型 初始值
placeholder=字体变虚且可直接输入
密码框
属性值：
type 表单对象类型
size 文字的长度

例如：
男
女

单选同一组可以设置不同名称 错误
单选同一组不可以设置不同名称 对
复选框checkbox
属性值：
type 表单对象类型
Checked 默认选中

例如：
上网
学习
旅游
文件域 file

例如：

下拉菜单

请选择您的学历 
高中
默认选中 不是checked
。。。

Select标签的属性
Multiple 多选

上网
体育
学习

文本域 textarea（多行文本框）
属性值：
cols 列数
rows 行数

例如：

列数 行数
四种按钮
提交、重置

普通按钮

图像域
Label标签
有触发对应表单控件功能。如点击单选按钮或多选框前文字，对应选项就能被选中
表单控件id的值与label标签内的for值相同

性别：

男

女
六.一些简单的CSS
结构+表现+行为 
Html+ css +js

传统html的缺点
标记较少，缺少文字间距，段落缩进等标记，美化困难
维护困难，修改过程繁琐。
网页代码过多，影响网页浏览速度

Css作用例子：链接样式表
Css(cascading style sheet)层叠样式表

用于控制网页的外观 

CSS优点
使网页代码更少，网页下载更快
实现了内容与样式的分离
使网站维护更方便、快捷
使网页与浏览器的兼容性更好

注释
html
css /* */
CSS的基本语法
张飞{
身高：185cm；
体重：80kg；
性别：男；
}

css的基本语法:
选择器{
属性:属性值;
…}
三部分组成
css选择器:也称为选择符，用于选择需要添加样式的元素。
基本CSS选择器
全局选择器(通用)

用*来表示，代表所有标签

一般用于将所有元素的外边距和内填充清除。
*{
margin:0; 外边距
padding:0; 内填充
}

基本CSS选择器
标签选择器(元素选择器)--通过元素名选择元素
如：body{}, ul{}, a{}，img{} h2{} p{}等

类别选择器--通过class属性选择元素
先定义样式 css：
.blue {color:blue;}

然后引用：

文字内容

ID选择器
先定义样式： 
#ab001{color:#ff0000;}
然后引用：

文字内容

用法和class类似，但一个ID选择器只能选定一个元素
伪类选择器——作用在超链接的状态上
a:link{} 点击前 默认
a:visited{} 点击后
a:hover{} 放上去 鼠标滑过
a:active{} 按下去 点击瞬间
a:focus{} 获取焦点

书写时，要按照以上顺序,不可颠倒
行内样式
写在标签里，使用style属性，优先级最高
例如：

css常用的几种方式 
内部样式（内嵌）
放于之间，用标记进行声明

这是第1行正文内容……

链接样式（外部样式）
html文件和css文件分开，是最实用的方法。
结构 样式 分离

关联 样式表 类型

CSS标题

这是正文内容……

导入样式
作用和链接样式表基本相同。
Html中和css文件中都可导入样式表



css权重 优先级　
全局 0
标签 1
类别 10
id 100
行内 1000
七.CSS设置文本和背景

文字属性
Color 颜色

font-size:12px; 14px 字号

字体
font-family: 楷体，宋体; 
多个字体用逗号分隔
优先使用第一个字体 楷体

加粗
font-weight
100-900
bold 、bolder 加粗
normal 正常 去掉标题h1-h6的加粗

倾斜
font-style 
italic 斜体 
normal 正常
段落属性
text-decoration 文字装饰
Overline 上划线
Line-through 删除线 
Underline 下划线
none 无 去掉超链接下划线

text-align 水平对齐
Left center right
text-indent 首行缩进
像素： 24px
百分比 50%
2个字 2em 
负值 -100px

Line-height 行高 行距 
行高=高度 可以让文字垂直居中
数值 ：24px
百分比：200%
背景
背景颜色

Background-image:url(01.jpg) 背景图片

Background-repeat 背景重复 
Repeat(默认) 平铺
no-repeat 不重复 
repeat-x 横向重复
repeat-y 竖向重复 
背景位置
Background-position 
关键字
水平：left center right 
垂直：top center bottom
background-position:right top;

数字 background-position:200px 100px;
水平 垂直
可混用
background-position: 50px top;

一个值，第二个默认center
background-position: left （center）;

背景附件
background-attachment:fixed 固定

不随滚动条移动
背景复合属性

background:#ccc url(1.gif) no-repeat 100px 200px ；
颜色 图片地址 重复 位置 


列表样式 
list-style-type：disc; 实心圆
circle 空心圆
square 方块
decimal 数字
none 无
想要样式表现出来，必须将margin：0；padding：；删除

列表图片
list-style-image:url(1.jpg)；

列表位置
list-style-position：inside/outside；
内部 外部

列表复合
list-style：none或circle url(1.jpg) inside 

八.盒模型

division
相当于一个容器可以容纳：
段落、标题、表格、图片等
盒模型-页面所有元素都能看成盒子
一个盒子实际占据的宽度和高度由内容+填充+边框+边距组成
即 content+padding+border+margin
内容+ 填充+ 边框+ 边距

尺寸属性——盒子模型中指内容的大小
Width 宽
Height 高
backgiound 背景

内填充padding 
padding-top:30px;
padding-bottom:60px;
padding-left:40px;
padding-right:20px;
padding:30px 20px 60px 40px;
上 右 下 左
简写：
Padding：10px; 四边相同10px
Padding：0 10px; 上下 左右
Padding:10px 20px 30px; 上 左右 下
Padding:10px 20px 30px 40px; 上 右 下 左 
边框border
Border-width:10px ; 边框宽度
Border-color:#f00; 边框颜色
Border-style: 边框样式
solid 实线
dashed 虚线
dotted 点线

复合属性—不可三缺一
四边：border:10px #f00 solid;
底边 border-bottom:1px green dashed;
border-left:none;去掉
填充Padding 边框与内容的距离
边距margin 内容与内容的距离
margin -top
margin -right
margin -bottom
margin-left:10px; 当前元素向右移动

简写：
margin：10px;
margin ：0 10px; 上下 左右
margin :10px 20px 30px; 上 左右 下
margin :10px 20px 30px 40px; 上 右 下 左 
一个盒子实际占据的宽度和高度由内容+内边距+边框+外边距组成
div{width:200px; padding:0 20px;} 200+20*2=240

一个盒子的 margin 为 22px，border 为 1px，padding 为 12px，content 的宽为 220px、高为 50px，如果用标准 W3C 盒子模型解释，这个盒子的宽？？？ 
282px 错误：

布局属性
float浮动-- 横向排列
none 默认
Left 左
Right 右

clear清除浮动--元素浮动之后，需要清除浮动
None
Left
Right
both 全部
块级元素 独占一行 自动换行
div h1—h6 p ul/li form。。

行内元素（内联） 不独占一行 不自动换行
a span img b i font input ..
块级元素:自动换行，
有宽度和高
能嵌套行内元素 

默认的显示是display:block;

行内元素:不自动换行，
没有宽和高 a span
不能嵌套块级元素
默认的显示是display:inline;
display 显示属性：
block 块状显示
inline 行内显示
inline-block 行内块 
none 不显示
九.CSS新属性:
盒子阴影
box-shadow: 2px 2px 5px 2px #f00 inset;
h-shadow 水平偏移，可为负值
v-shadow 垂直偏移 可为负值
blur 模糊值
阴影外延值 可为负值
color 颜色值
inset： 内阴影。默认外阴影

添加多个阴影逗号分隔
文字阴影
text-shadow: 2px 2px 5px #f00;
水平 垂直 模糊 颜色

如颜色省略，阴影颜色为文字颜色
文字溢出
text-overflow: ;
clip :裁切，默认值
ellipsis 省略号(...)

white-space:nowrap;(强制不换行)
overflow:hidden;（溢出隐藏）
text-overflow:ellipsis;
边框圆角
border-radius: ;
1个值 5px 四个角相同
2个值 5px 10px
左上与右下 右上与左下
3个值 5px 10px 15px
左上 右上与左下 右下
4个值 5px 10px 15px 20px
左上 右上 右下 左下

单独一个角 左上 border-top-left-radius:30px;
盒模型模式
box-sizing: ;
指定盒子宽度高度是否包含元素的padding和border
content-box 不包括padding，宽高是内容大小。

border-box 包括padding 宽高是实际大小
渐变背景
Background:-webkit-linear-gradient(top, orange, black);
线性渐变 方向 起点色 终点色
方向可为top 、bottom 、 left、 right

兼容firefox
-moz-linear-gradient(top , red, yellow);
兼容chrome
-webkit-linear-gradient(top , red, yellow);

放射性渐变
radial-gradient(起点色,终点色);
十.H5
新增的主体结构元素
新增元素 元素说明
article 文章
section 区块 对于网站的内容进行分块。通常由内容及标题组成
nav 导航 一个页面可有多个nav元素，作为页面整体或不同部分的导航
aside 侧栏 页面的附属信息部分，最典型的是侧边栏，内容可是友情链接，其他文章列表，广告单元等
time 时间 time为行内元素



hgroup元素 标题组
用于对网页的标题进行编组：

百度网

全球最大中文搜索引擎

。。。

新增的非主体结构元素

新增元素 说明
header 头部 一个网页可拥有多个header元素，可为每个内容 区块加一个header
main 主体(唯一)

元素中的内容对于文档来说应当是唯一的。

元素不能是以下元素的后代：

、

、

、

或

。
footer 页脚 
address 文档或作者的信息 用来在文档中呈现联系信息，包括文档作者，电话等。默认倾斜，块元素

audio音频

video视频



embed 多媒体

插入各种多媒体，格式可以是图片，音频，视频，插件等

十一.定位

定位position
static 静态定位 默认
relative 相对定位
absolute 绝对定位
fixed 固定定位（不随滚动条移动）
inherit 继承
相对定位relative
相对于自己原来位置偏移
指定偏移量：
水平left right 
垂直top bottom

绝对定位absolute
相对于父元素位置偏移
指定偏移量：left right top bottom，负值
子绝父相

#father{
position:relative;相对
}
#son{
position:absolute; 绝对
right:100px;
top:100px;}
#father{
width:300px;
height:300px;
background:#FF0000;
}
#son{
width:200px;
height:200px;
background:#99FF00;
position:absolute; 
right:100px;
top:100px;
}


z-index
用于设置绝对定位元素，层叠顺序

z-index
用于设置绝对定位元素，层叠顺序
可以为正值 或 负值, 默认值auto，默认层0层
100 -5


十二.浏览器表现标准规范及CSS优先级
浏览器
Internet Explorer 7 8 9 10,
Mozilla Firefox 火狐 FF
chrome 谷歌等

浏览器兼容性问题： 
各大主流浏览器由于厂家不同，所以核心构架和代码也不同
浏览器对CSS的解析不一样，需要针对不同浏览器写不同的CSS，能够同时兼容不同的浏览器

（2）IE和FF浏览器的默认值差别：
页边距 IE为10px FF为8px
Body默认文字大小：IE为14px FF为16px

列表 左缩进40px

解决办法：*{ margin:0; padding:0;}

浏览器默认段间距：FF默认为1.12em IE为10px

在很多情况下，需要专门针对IE不同版本写css样式，IE的css hack，
所有浏览器通用：
火狐 height:200px;

IE6专用：_height:100px;
IE7专用：*height:100px;
IE7+的浏览器标准规范

\9----------IE 6 7 8 9 10生效

\0----------IE 8 9 10生效

Height:100px\9;

css优先级
!important
行内 1000
Id 100
类 10
标签 1
通用 0
派生选择器
.header img
p strong
.nav li

群组选择器
H1 , h2, h3, h4{}
Ul , ol , li{}

IE6.0浏览器问题
IE6下图片有空隙,怎么解决
img{display:block;}
div{font-size:0;}
img{margin-bottom:-5px;}

IE6双倍浮动边距,怎么解决
display:inline;
margin-left:100px; _margin-left:50px;减半

IE6 下1px高度容器
overflow:hidden;

line-height:1px; zoom:0.08; 缩放

让div在页面居中
div{position:absolute;
left:50%;
margin-left:-宽度一半；
top:50%;
margin-top:-高度一半；}
如：Div{
width:500px;
height:400px;
left:50%;
margin-left:-250px；
top:50%;
margin-top:-200px；
}
十三.CSS3新增选择器
伪类选择器
:first-child 第一个子元素
li:first-child{}
:last-child 最后一个子元素
dl:last-child {margin-right:0;}
nth-child(n) 指定序号的子元素
li:nth-child(2) {}
伪类选择器 
:nth-child(3n) 索引是3的倍数的元素
:nth-child(even) 索引是偶数的元素
:nth-child(odd) 索引是奇数的元素
tr:nth-child(odd) {background:#eaeaea;}
:checked 选中状态
指定表单中radio单选框或checkbox复选框被选中时的样式。
男
上网

input[type="radio"]:checked
{outline:2px red solid;}
input[type="checkbox"]:checked
{outline:2px blue solid;}
::selection 元素被选中时的状态

p::selection{color:#f00;}
可以设置color 、 background-color 、text-shadow
不可设置border

:disabled 元素处于不可用状态时的样式
:enabled 元素处于可用状态时的样式

 

input[type="text"]:enabled{background:#fff;color:#000;}
input[type="text"]:disabled{background:#eee;color:#ccc;}
属性选择器
E[att="val"] 选择具有att属性且属性值等于val的元素
元素[属性=“属性值”]
Input[type=“text”] {}
input[type="text"]{width:210px;height:24px;float:left;}

E[att*="val"] 
具有att属性且属性值val包含字符串的E元素

列表项目

列表项目

列表项目

列表项目

li[class*=“a”]{color:#f00;} 包含
E[att^="val"] 
具有att属性且属性值为以val开头的字符串的E元素

列表项目

列表项目

列表项目

列表项目

列表项目

列表项目

li[class^=“a”]{color:#f00;} 开头

E[att$="val"] 
具有att属性且属性值为以val结尾的字符串的E元素

列表项目

列表项目

列表项目

列表项目

列表项目

列表项目

li[class$=“a”]{color:#f00;} 结尾

E[att~="val"] 
具有att属性且属性值为用空格分隔，其中一个等于val的元素

列表项目

列表项目

列表项目

列表项目

li[class~="red"]{color:#f00;}

十四.弹性盒模型
1.viewport 设置网页代码适应设备宽度

在头部添加如下代码：

display:box; 盒布局 为父元素设置
flex 盒布局 新版本

display:-webkit-box;谷歌浏览器
display:-moz-box; 火狐浏览器
display:-ms-box; ie浏览器

display:box;
-webkit-box-orient 子元素排列方式 为父元素设置
horizontal：水平排列 默认
vertical： 纵向排列 
-webkit-box-flex 为子元素设置
子元素如何分配其父元素剩余空间的比例

.one{box-flex:2;}
.two{box-flex:1;}
.three{box-flex:1;}
box-ordinal-group
设置弹性盒模型对象的子元素的显示顺序。 
数值较低的元素显示在数值较高的元素前面； 
相同数值的元素，它们的显示顺序取决于它们的代码顺序

对齐方式box-pack
start： 从开始位置对齐
center：居中对齐 
end： 从结束位置对齐

对齐方式box-align
start： 从开始位置对齐
center：居中对齐 
end： 从结束位置对齐
对齐
水平排列
box-pack 水平
box-align 垂直

垂直排列
box-pack 垂直
box-align 水平

转载于:https://www.cnblogs.com/linjierd/p/10117654.html