html网页布局模板
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
注意：a:link{}定义的样式针对所有的写了href属性的超链接(不包括锚)
a{}定义的样式针对所有的超链接(包括锚)
2) :动态伪类:针对所有的标签都适用
:hover :是移动到某个标签上的时候
:focus :是某个标签获得焦点的时候
:active :点击某个标签没有放松鼠标时
eg: label:hover{color:#00ff00; }
1 html笔记
一、HTML的概述（了解）
a.html是什么：hypertext markup language超文本标记语言
超文本：音频，视频，图片称为超文本。.
标记：<英文单词或者字母>称为标记.一个HTML页面都是由各种标记组成。
b.作用：编写HTML页面。
c.HTML语言不是一个编程语言(有编译过程)，而是一个标记语言(没有编译过程).
eg: .one{background-color:#ff0099; }
c. ID选择器：规定用#来定义
eg: #one{cursor:hand; }
区别：标签选择器针对的是页面上的一类标签.
类选择器可以供多种标签使用.
ID选择器是值供特定的标签(一个). ID是此标签在此页面上的唯一标识。
d:通用选择器：用*定义,代表页面上的所有标签。
u:下划线
s:中划线(删除线)
sup:上标
sub:下标.
3.图像标记
img:代表是一副图片
属性：src :图片的路径
两种写法：a) :相对路径路径是相对页面所在的路径两个标记.和.. ,分表代表当前目录和父路径
b)：绝对路径
1) :以盘符开始的路径
eg: C:\Documents and Settings\Administrator\桌面\day01_html\上课示例/images/1.jpg
scrolldelay:移动一次休息多长时间。单位是毫秒
10.头标记
css笔记
一、CSS概述(了解)
*.CSS：Cascading Style Sheet层叠样式表
*.CSS作用就是给HTML页面标签添加各种样式
*.为什么用CSS
HTML的缺陷：1.不能够适应多种设备
2.要求浏览器必须智能化足够庞大
input:focus{
background-color:#ff9999;
border:1px solid red;
}
a:active{
color:blue;
}
五、CSS各种选择器的冲突(掌握)
CSS样式的冲突:
1.ID选择器>类选择器>标签选择器
2.行级样式表>内嵌样式表>外部样式表
外部样式表的ID选择器>内嵌样式表的标签选择器
CSS代码理论上位置是任意的，但通常写在style标签里
CSS和HTML的结合方式有3种：
a.行级样式表:采用style属性,范围只针对此标签适用
<div style = "border:1px solid red ;">大家好</div>
b.内嵌样式表:采用<style>标签完成。范围针对此页面
c.外部样式表:采用建立样式表文件。针对多个页面.
*属性：给每一个标签所做的辅助信息。
* xhtml：符合XML语法标准的HTML。
* dhtml：dynamic,动态的。javascript + css + html合起来的页面就是一个dhtml
* http：协议标准。用来规定客户端浏览器和服务端交互时数据的一个格式。SMTP邮件传输协议,ftp:文件传输协议.
dir:单元格内容的排列方式取值：ltr从左到右，rtl:从右到左
tr:行
属性：dir:
bgcolor:
td:单元格
属性：align:内容的横向对齐方式
valign:内容的纵向对齐方式top,middle,bottom
width:绝对值或者相对值(%)
height:单元格的高度
单元格的合并：
单元格的属性：
引入样式表文件的方式:
1):采用<link>标签
eg:<link rel = "stylesheet" type = "text/css" href = "a.css"></link>
2):采用import，必须写在<style>标签中，并且必须是第一句
eg: @import url(a.css) ;
2) :网络路径
eg: http://www.baidu.com/images
width:宽度
height：高度
Alt：当图片显示不出来的时候代替图片显示的内容
title：提示性文本
border:边框
热点：就是特定的位置添加超链。
<img src="images/1.jpg" width="300" height="300" usemap="#Map" border="0" />
P：p代表一个段落
属性：align:对齐方式.取值：left,right,center
<br>代表是换行。
hr:
color:线的颜色
size :线的粗细
width:线的长短
两种写法：1)绝对值eg: 500
2)相对值：50%
noshade:不要阴影
align:对齐方式取值：left,right,center
noresize :固定框架大小
bordercolor:给框架边框起一个颜色
name :给框架起一个名字
内嵌框架：嵌入在一个页面上的框架.(仅仅IE支持)
iframe:
属性：width:宽度
height：高度
scrolling :是否需要滚动条
8.表单标记及语义化
9.多媒体标记
bgsound:背景音乐
b.有序列表(OL)
属性: type:取值：1(阿拉伯数字，默认),a,A,i,I
start:从几开始
c.定义列表(dl)
dt:列表项的标题
dd:列表项
5.超链接
3种超链接:
1.连接到其他页面
2.锚:指给超链接起一个名字，作用是连接到本页面或者其他页面的特定位置。使用name属性给超链起名字
3.连接到邮件: <a href = "mailto:xugang@itcast.cn">进入我的邮箱</a>
*.html不区分大小写
*.html页面的后缀名是html或者htm(有一些系统不支持后缀名长度超过3个字符，比如dos系统)
*.html的结构
1)声明部分。主要作用是用来告诉浏览器这个页面使用的是那个标准。<!doctype html>是HTML5标准。
2)head部分：不会显示在页面上。作用是告诉浏览器一些页面的额外信息。
7.框架标记及<iframe>
框架页面上不允许有body标签
frameset:框架的集合
rows:纵向分部框架.
cols:横向分部框架.
写法有两种: 1)绝对值"200,*" ,*代表剩余的
2)相对值"30%,*"
frame:框架.一个框架显示一个页面
scrolling:是否需要滚动条。默认是true
center:内容居中
pre:预定义格式标签.告诉浏览器不要忽略空格和空行
div:块级标签必须单独占据一行
属性：align :
span:块级标签不换行字体标记
2字体标签
h1...h6:定义字体大小
属性：align :居中
font:
color:字体颜色
颜色的写法有3种：1)英文单词: red
2)十六进制：#00ffcc
HTML页面直接由浏览器解析执行。
二、HTML的历史（了解）
三、HTML的网络术语（明白）
*网页：由各种标记组成的一个页面就叫网页.
*主页(首页) :一个网站的起始页面或者导航页面.
*标记:<p>称为开始标记</p>称为结束标记.也叫标签.每个标签都规定好了特殊的含义。
*元素：<p>内容</p>称为元素.
两种引入方式的区别：
外部样式表中不能写<link>标签,但是可以写import语句
四、CSS选择器
选择器分为两大类:
1.基本选择器
a.标签选择器:指的就是选择器的名字代表html页面上的标签
源自文库p{
color:red ;
border:1px dashed green;
}
b.类选择器：规定用圆点.来定义
优点：灵活
原则：就近原则
cellpadding:单元格内容到边的距离
cellspacing:单元格和单元格之间的距离
bgcolor:背景颜色
background:背景图片
bordercolorlight:表格的上，左边框，以及单元格的右，下边框的颜色
bordercolordark:表格的右，下边框，以及单元格上，左的边框的颜色
<map name="Map" id="Map">
<area shape="circle" coords="122,81,38" href="demo_字体标签.html" />
</map>
4.清单标记
列表标签：3种
a.无序列表ul
属性：type :值：disc(默认，实心原点),square(实心方点),circle(空心圆)
colspan:横向合并
rowspan:纵向合并
th:相当于<td> + <b>
属性同<td>
caption:表格的标题
属性：align:取值：left,center,right,top,bottom
thead
tbody
tfoot
写与不写的区别：
1.当表格非常大的时候，如果不写，则必须等表格的内容全部下载完成才能显示。但是用tbody标签的话，那么边下载边显示。2.如果不写thead,tbody,tfoot那么浏览器解析表格内容的时候是从上到下解析。如果写了，那么顺序任意，浏览器解析的时候还是按照thead,tbody,tfoot的顺序显示内容
3)RGB(三原色) : new RGB(124,156,23)
size:字体大小
face：字体类型
特殊字符：<小于>大于& &符号"双引号'单引号
©版权™商标 空格
扩展：绐
b:加粗
strong:加粗
i:斜体
em:斜体
*{
font-size:30px;
margin-left:0px;
margin-top:0px;
}
2.扩展选择器
a.组合选择器:采用逗号隔开
eg: p,h1,h2,.one,#two{color:red ; }
b.关联选择器(后代选择器):采用空格隔开
eg: h4 span i{color:red ; }
属性：target:告诉浏览器怎么显示目标页面
HTML中已定义4个值：_self :在同一个浏览器中显示
_blank:打开新的浏览器显示
_parent:在父窗口中显示
_top:在顶级窗口中显示
6.表格标记
table:表格
属性：border:边框
width:宽度
height：高度
align:表格的对齐方式
表示h4标签中的span标签中的i标签的样式
h4和span和i标签不一定是紧挨着的。
c.伪类选择器
1) :静态伪类：规定是用:来定义.只有两个.只能用于超链接.
:link表示超链接点击之前的颜色
:visited表示链接点击之后的颜色
eg:a:link{color:red ;}
a:visited{color:yellow;}
四、HTML的编辑工具（了解）
*.notepad记事本
*.editplus :语法高亮显示
技巧：根据颜色判断单词是否出错。（不是100%）
*.ultraedit :根据颜色判断单词是否出错,可以显示2进制数据.
*.dw(dreamweaver,专业工具)代码提示.
五、HTML的规范(知道)
*.HTML是一个弱势语言
3.数据和显示没有分开
4.功能不够强大
CSS优点：
1.使数据和显示分开
2.降低网络流量
3.使整个网站视觉效果一致
4.使开发效率提高了
二、CSS语法
p{color：red;}
选择器{属性名：属性值;}
选择器后一定是大括号.属性名后必须用冒号隔开.属性值后用分号
属性名和冒号之间最好不要有空格。
三、CSS和HTML的结合方式
embed:播放多媒体文件.
marquee:移动
属性：direction移动目标方向left,right ,up,down ,up，down移动距离是固定的200px
behavior:行为方式取值：slide,alternate,scroll
scrollamount :移动速度
loop:循环多少圈。负值表示无限循环
3)body部分：我们缩写的代码必须放在此标签內。
六、HTML的各种标签(掌握)
明确：每个标签都有私有属性。也都有公有属性。
html中表示长度的单位都是像素。HTML只有一种单位就是像素。
body:
bgcolor:背景颜色
background:背景图片
text:文本颜色
1.排版标签
所有的浏览器默认情况下都会忽略空格和空行
a{}定义的样式针对所有的超链接(包括锚)
2) :动态伪类:针对所有的标签都适用
:hover :是移动到某个标签上的时候
:focus :是某个标签获得焦点的时候
:active :点击某个标签没有放松鼠标时
eg: label:hover{color:#00ff00; }
1 html笔记
一、HTML的概述（了解）
a.html是什么：hypertext markup language超文本标记语言
超文本：音频，视频，图片称为超文本。.
标记：<英文单词或者字母>称为标记.一个HTML页面都是由各种标记组成。
b.作用：编写HTML页面。
c.HTML语言不是一个编程语言(有编译过程)，而是一个标记语言(没有编译过程).
eg: .one{background-color:#ff0099; }
c. ID选择器：规定用#来定义
eg: #one{cursor:hand; }
区别：标签选择器针对的是页面上的一类标签.
类选择器可以供多种标签使用.
ID选择器是值供特定的标签(一个). ID是此标签在此页面上的唯一标识。
d:通用选择器：用*定义,代表页面上的所有标签。
u:下划线
s:中划线(删除线)
sup:上标
sub:下标.
3.图像标记
img:代表是一副图片
属性：src :图片的路径
两种写法：a) :相对路径路径是相对页面所在的路径两个标记.和.. ,分表代表当前目录和父路径
b)：绝对路径
1) :以盘符开始的路径
eg: C:\Documents and Settings\Administrator\桌面\day01_html\上课示例/images/1.jpg
scrolldelay:移动一次休息多长时间。单位是毫秒
10.头标记
css笔记
一、CSS概述(了解)
*.CSS：Cascading Style Sheet层叠样式表
*.CSS作用就是给HTML页面标签添加各种样式
*.为什么用CSS
HTML的缺陷：1.不能够适应多种设备
2.要求浏览器必须智能化足够庞大
input:focus{
background-color:#ff9999;
border:1px solid red;
}
a:active{
color:blue;
}
五、CSS各种选择器的冲突(掌握)
CSS样式的冲突:
1.ID选择器>类选择器>标签选择器
2.行级样式表>内嵌样式表>外部样式表
外部样式表的ID选择器>内嵌样式表的标签选择器
CSS代码理论上位置是任意的，但通常写在style标签里
CSS和HTML的结合方式有3种：
a.行级样式表:采用style属性,范围只针对此标签适用
<div style = "border:1px solid red ;">大家好</div>
b.内嵌样式表:采用<style>标签完成。范围针对此页面
c.外部样式表:采用建立样式表文件。针对多个页面.
*属性：给每一个标签所做的辅助信息。
* xhtml：符合XML语法标准的HTML。
* dhtml：dynamic,动态的。javascript + css + html合起来的页面就是一个dhtml
* http：协议标准。用来规定客户端浏览器和服务端交互时数据的一个格式。SMTP邮件传输协议,ftp:文件传输协议.
dir:单元格内容的排列方式取值：ltr从左到右，rtl:从右到左
tr:行
属性：dir:
bgcolor:
td:单元格
属性：align:内容的横向对齐方式
valign:内容的纵向对齐方式top,middle,bottom
width:绝对值或者相对值(%)
height:单元格的高度
单元格的合并：
单元格的属性：
引入样式表文件的方式:
1):采用<link>标签
eg:<link rel = "stylesheet" type = "text/css" href = "a.css"></link>
2):采用import，必须写在<style>标签中，并且必须是第一句
eg: @import url(a.css) ;
2) :网络路径
eg: http://www.baidu.com/images
width:宽度
height：高度
Alt：当图片显示不出来的时候代替图片显示的内容
title：提示性文本
border:边框
热点：就是特定的位置添加超链。
<img src="images/1.jpg" width="300" height="300" usemap="#Map" border="0" />
P：p代表一个段落
属性：align:对齐方式.取值：left,right,center
<br>代表是换行。
hr:
color:线的颜色
size :线的粗细
width:线的长短
两种写法：1)绝对值eg: 500
2)相对值：50%
noshade:不要阴影
align:对齐方式取值：left,right,center
noresize :固定框架大小
bordercolor:给框架边框起一个颜色
name :给框架起一个名字
内嵌框架：嵌入在一个页面上的框架.(仅仅IE支持)
iframe:
属性：width:宽度
height：高度
scrolling :是否需要滚动条
8.表单标记及语义化
9.多媒体标记
bgsound:背景音乐
b.有序列表(OL)
属性: type:取值：1(阿拉伯数字，默认),a,A,i,I
start:从几开始
c.定义列表(dl)
dt:列表项的标题
dd:列表项
5.超链接
3种超链接:
1.连接到其他页面
2.锚:指给超链接起一个名字，作用是连接到本页面或者其他页面的特定位置。使用name属性给超链起名字
3.连接到邮件: <a href = "mailto:xugang@itcast.cn">进入我的邮箱</a>
*.html不区分大小写
*.html页面的后缀名是html或者htm(有一些系统不支持后缀名长度超过3个字符，比如dos系统)
*.html的结构
1)声明部分。主要作用是用来告诉浏览器这个页面使用的是那个标准。<!doctype html>是HTML5标准。
2)head部分：不会显示在页面上。作用是告诉浏览器一些页面的额外信息。
7.框架标记及<iframe>
框架页面上不允许有body标签
frameset:框架的集合
rows:纵向分部框架.
cols:横向分部框架.
写法有两种: 1)绝对值"200,*" ,*代表剩余的
2)相对值"30%,*"
frame:框架.一个框架显示一个页面
scrolling:是否需要滚动条。默认是true
center:内容居中
pre:预定义格式标签.告诉浏览器不要忽略空格和空行
div:块级标签必须单独占据一行
属性：align :
span:块级标签不换行字体标记
2字体标签
h1...h6:定义字体大小
属性：align :居中
font:
color:字体颜色
颜色的写法有3种：1)英文单词: red
2)十六进制：#00ffcc
HTML页面直接由浏览器解析执行。
二、HTML的历史（了解）
三、HTML的网络术语（明白）
*网页：由各种标记组成的一个页面就叫网页.
*主页(首页) :一个网站的起始页面或者导航页面.
*标记:<p>称为开始标记</p>称为结束标记.也叫标签.每个标签都规定好了特殊的含义。
*元素：<p>内容</p>称为元素.
两种引入方式的区别：
外部样式表中不能写<link>标签,但是可以写import语句
四、CSS选择器
选择器分为两大类:
1.基本选择器
a.标签选择器:指的就是选择器的名字代表html页面上的标签
源自文库p{
color:red ;
border:1px dashed green;
}
b.类选择器：规定用圆点.来定义
优点：灵活
原则：就近原则
cellpadding:单元格内容到边的距离
cellspacing:单元格和单元格之间的距离
bgcolor:背景颜色
background:背景图片
bordercolorlight:表格的上，左边框，以及单元格的右，下边框的颜色
bordercolordark:表格的右，下边框，以及单元格上，左的边框的颜色
<map name="Map" id="Map">
<area shape="circle" coords="122,81,38" href="demo_字体标签.html" />
</map>
4.清单标记
列表标签：3种
a.无序列表ul
属性：type :值：disc(默认，实心原点),square(实心方点),circle(空心圆)
colspan:横向合并
rowspan:纵向合并
th:相当于<td> + <b>
属性同<td>
caption:表格的标题
属性：align:取值：left,center,right,top,bottom
thead
tbody
tfoot
写与不写的区别：
1.当表格非常大的时候，如果不写，则必须等表格的内容全部下载完成才能显示。但是用tbody标签的话，那么边下载边显示。2.如果不写thead,tbody,tfoot那么浏览器解析表格内容的时候是从上到下解析。如果写了，那么顺序任意，浏览器解析的时候还是按照thead,tbody,tfoot的顺序显示内容
3)RGB(三原色) : new RGB(124,156,23)
size:字体大小
face：字体类型
特殊字符：<小于>大于& &符号"双引号'单引号
©版权™商标 空格
扩展：绐
b:加粗
strong:加粗
i:斜体
em:斜体
*{
font-size:30px;
margin-left:0px;
margin-top:0px;
}
2.扩展选择器
a.组合选择器:采用逗号隔开
eg: p,h1,h2,.one,#two{color:red ; }
b.关联选择器(后代选择器):采用空格隔开
eg: h4 span i{color:red ; }
属性：target:告诉浏览器怎么显示目标页面
HTML中已定义4个值：_self :在同一个浏览器中显示
_blank:打开新的浏览器显示
_parent:在父窗口中显示
_top:在顶级窗口中显示
6.表格标记
table:表格
属性：border:边框
width:宽度
height：高度
align:表格的对齐方式
表示h4标签中的span标签中的i标签的样式
h4和span和i标签不一定是紧挨着的。
c.伪类选择器
1) :静态伪类：规定是用:来定义.只有两个.只能用于超链接.
:link表示超链接点击之前的颜色
:visited表示链接点击之后的颜色
eg:a:link{color:red ;}
a:visited{color:yellow;}
四、HTML的编辑工具（了解）
*.notepad记事本
*.editplus :语法高亮显示
技巧：根据颜色判断单词是否出错。（不是100%）
*.ultraedit :根据颜色判断单词是否出错,可以显示2进制数据.
*.dw(dreamweaver,专业工具)代码提示.
五、HTML的规范(知道)
*.HTML是一个弱势语言
3.数据和显示没有分开
4.功能不够强大
CSS优点：
1.使数据和显示分开
2.降低网络流量
3.使整个网站视觉效果一致
4.使开发效率提高了
二、CSS语法
p{color：red;}
选择器{属性名：属性值;}
选择器后一定是大括号.属性名后必须用冒号隔开.属性值后用分号
属性名和冒号之间最好不要有空格。
三、CSS和HTML的结合方式
embed:播放多媒体文件.
marquee:移动
属性：direction移动目标方向left,right ,up,down ,up，down移动距离是固定的200px
behavior:行为方式取值：slide,alternate,scroll
scrollamount :移动速度
loop:循环多少圈。负值表示无限循环
3)body部分：我们缩写的代码必须放在此标签內。
六、HTML的各种标签(掌握)
明确：每个标签都有私有属性。也都有公有属性。
html中表示长度的单位都是像素。HTML只有一种单位就是像素。
body:
bgcolor:背景颜色
background:背景图片
text:文本颜色
1.排版标签
所有的浏览器默认情况下都会忽略空格和空行