html网页布局模板
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
3.连接到邮件: <a = "">进入我的邮箱<>
属性：:告诉浏览器怎么显示目标页面
中已定义4个值：:在同一个浏览器中显示
:打开新的浏览器显示
:在父窗口中显示
:在顶级窗口中显示
6.表格标记
:表格
属性：:边框
:宽度
：高度
:表格的对齐方式
:单元格内容到边的距离
:单元格和单元格之间的距离
:背景颜色
:背景图片
2):采用，必须写在<>标签中，并且必须是第一句
:表格的上，左边框，以及单元格的右，下边框的颜色
:表格的右，下边框，以及单元格上，左的边框的颜色
:单元格内容的排列方式取值：从左到右，:从右到左
:行
属性：:
:
:单元格
属性：:内容的横向对齐方式
:内容的纵向对齐方式
:绝对值或者相对值(%)
:单元格的高度
单元格的合并：
单元格的属性：
:横向合并
:纵向合并
:相当于<> + <b>
：字体类型
特殊字符：;小于;大于; &符号;双引号;单引号
;版权;商标;空格
扩展：32464;
b:加粗
:加粗
i:斜体
:斜体
u:下划线
s:中划线(删除线)
:上标
:下标.
3.图像标记
:代表是一副图片
属性：:图片的路径
两种写法：a) :相对路径路径是相对页面所在的路径两个标记.和.. ,分表代表当前目录和父路径
1笔记
一、的概述（了解）
是什么：超文本标记语言
超文本：音频，视频，图片称为超文本。.
标记：<英文单词或者字母>称为标记.一个页面都是由各种标记组成。
b.作用：编写页面。
语言不是一个编程语言(有编译过程)，而是一个标记语言(没有编译过程).
页面直接由浏览器解析执行。
二、的历史（了解）
三、的网络术语（明白）
*：协议标准。用来规定客户端浏览器和服务端交互时数据的一个格式。邮件传输协议:文件传输协议.
四、的编辑工具（了解）
*记事本
* :语法高亮显示
技巧：根据颜色判断单词是否出错。（不是100%）
* :根据颜色判断单词是否出错,可以显示2进制数据.
*(,专业工具)代码提示.
五、的规范(知道)
*是一个弱势语言
属性同<>
:表格的标题
属性：:取值：
写与不写的区别：
1.当表格非常大的时候，如果不写，则必须等表格的内容全部下载完成才能显示。但是用标签的话，那么边下载边显示。2.如果不写那么浏览器解析表格内容的时候是从上到下解析。如果写了，那么顺序任意，浏览器解析的时候还是按照的顺序显示内容
7.框架标记及<>
框架页面上不允许有标签
*网页：由各种标记组成的一个页面就叫网页.
*主页(首页) :一个网站的起始页面或者导航页面.
*标记:<p>称为开始标记<>称为结束标记.也叫标签.每个标签都规定好了特殊的含义。
*元素：<p>内容<>称为元素.
*属性：给每一个标签所做的辅助信息。
*：符合语法标准的。
*：,动态的。+ +合起来的页面就是一个
8.表单标记及语义化
9.多媒体标记
:背景音乐
:播放多媒体文件.
:移动
属性：移动目标方向，移动距离是固定的200
:行为方式取值：
:移动速度
:循环多少圈。负值表示无限循环
:移动一次休息多长时间。单位是毫秒
10.头标记
笔记
一、概述(了解)
*：层叠样式表
*作用就是给页面标签添加各种样式
*.为什么用
的缺陷：1.不能够适应多种设备
2.要求浏览器必须智能化足够庞大
3.数据和显示没有分开
4.功能不够强大
优点：
1.使数据和显示分开
2.降低网络流量
3.使整个网站视觉效果一致
4.使开发效率提高了
二、语法
p{：;}
选择器{属性名：属性值;}
选择器后一定是大括号.属性名后必须用冒号隔开.属性值后用分号
属性名和冒号之间最好不要有空格。
三、和的结合方式
*不区分大小写
*页面的后缀名是或者(有一些系统不支持后缀名长度超过3个字符，比如系统)
*的结构
1)声明部分。主要作用是用来告诉浏览器这个页面使用的是那个标准。< >是5标准。
2)部分：不会显示在页面上。作用是告诉浏览器一些页面的额外信息。
3)部分：我们缩写的代码必须放在此标签內。
六、的各种标签(掌握)
代码理论上位置是任意的，但通常写在标签里
和的结合方式有3种：
a.行级样式表:采用属性,范围只针对此标签适用
< = ":1 ;">大家好<>
b.内嵌样式表:采用<>标签完成。范围针对此页面
c.外部样式表:采用建立样式表文件。针对多个页面.
引入样式表文件的方式:
1):采用<>标签
:< = "" = "" = ""><>
明确：每个标签都有私有属性。也都有公有属性。
中表示长度的单位都是像素。只有一种单位就是像素。
:
:背景颜色
Baidu Nhomakorabea:背景图片
:文本颜色
1.排版标签
所有的浏览器默认情况下都会忽略空格和空行
P：p代表一个段落
属性：:对齐方式.取值：
<>代表是换行。
:
:线的颜色
:线的粗细
:线的长短
两种写法：1)绝对值: 500
2)相对值：50%
:不要阴影
:对齐方式取值：
:内容居中
:预定义格式标签.告诉浏览器不要忽略空格和空行
:块级标签必须单独占据一行
属性：:
:块级标签不换行字体标记
2字体标签
h16:定义字体大小
属性：:居中
:
:字体颜色
颜色的写法有3种：1)英文单词:
2)十六进制：#00
3)(三原色) : (124,156,23)
:字体大小
b)：绝对路径
1) :以盘符开始的路径
: C:\ \\桌面\01\上课示例1
2) :网络路径
:
:宽度
：高度
：当图片显示不出来的时候代替图片显示的内容
：提示性文本
:边框
热点：就是特定的位置添加超链。
< "1" "300" "300" "" "0" />
< "" "">
< "" "122,81,38" "字体标签" />
<>
4.清单标记
列表标签：3种
a.无序列表
属性：:值：(默认，实心原点)(实心方点)(空心圆)
b.有序列表()
属性: :取值：1(阿拉伯数字，默认)
:从几开始
c.定义列表()
:列表项的标题
:列表项
5.超链接
3种超链接:
1.连接到其他页面
2.锚:指给超链接起一个名字，作用是连接到本页面或者其他页面的特定位置。使用属性给超链起名字
:框架的集合
:纵向分部框架.
:横向分部框架.
写法有两种: 1)绝对值"200,*" ,*代表剩余的
2)相对值"30%,*"
:框架.一个框架显示一个页面
:是否需要滚动条。默认是
:固定框架大小
:给框架边框起一个颜色
:给框架起一个名字
内嵌框架：嵌入在一个页面上的框架.(仅仅支持)
:
属性：:宽度
：高度
:是否需要滚动条
属性：:告诉浏览器怎么显示目标页面
中已定义4个值：:在同一个浏览器中显示
:打开新的浏览器显示
:在父窗口中显示
:在顶级窗口中显示
6.表格标记
:表格
属性：:边框
:宽度
：高度
:表格的对齐方式
:单元格内容到边的距离
:单元格和单元格之间的距离
:背景颜色
:背景图片
2):采用，必须写在<>标签中，并且必须是第一句
:表格的上，左边框，以及单元格的右，下边框的颜色
:表格的右，下边框，以及单元格上，左的边框的颜色
:单元格内容的排列方式取值：从左到右，:从右到左
:行
属性：:
:
:单元格
属性：:内容的横向对齐方式
:内容的纵向对齐方式
:绝对值或者相对值(%)
:单元格的高度
单元格的合并：
单元格的属性：
:横向合并
:纵向合并
:相当于<> + <b>
：字体类型
特殊字符：;小于;大于; &符号;双引号;单引号
;版权;商标;空格
扩展：32464;
b:加粗
:加粗
i:斜体
:斜体
u:下划线
s:中划线(删除线)
:上标
:下标.
3.图像标记
:代表是一副图片
属性：:图片的路径
两种写法：a) :相对路径路径是相对页面所在的路径两个标记.和.. ,分表代表当前目录和父路径
1笔记
一、的概述（了解）
是什么：超文本标记语言
超文本：音频，视频，图片称为超文本。.
标记：<英文单词或者字母>称为标记.一个页面都是由各种标记组成。
b.作用：编写页面。
语言不是一个编程语言(有编译过程)，而是一个标记语言(没有编译过程).
页面直接由浏览器解析执行。
二、的历史（了解）
三、的网络术语（明白）
*：协议标准。用来规定客户端浏览器和服务端交互时数据的一个格式。邮件传输协议:文件传输协议.
四、的编辑工具（了解）
*记事本
* :语法高亮显示
技巧：根据颜色判断单词是否出错。（不是100%）
* :根据颜色判断单词是否出错,可以显示2进制数据.
*(,专业工具)代码提示.
五、的规范(知道)
*是一个弱势语言
属性同<>
:表格的标题
属性：:取值：
写与不写的区别：
1.当表格非常大的时候，如果不写，则必须等表格的内容全部下载完成才能显示。但是用标签的话，那么边下载边显示。2.如果不写那么浏览器解析表格内容的时候是从上到下解析。如果写了，那么顺序任意，浏览器解析的时候还是按照的顺序显示内容
7.框架标记及<>
框架页面上不允许有标签
*网页：由各种标记组成的一个页面就叫网页.
*主页(首页) :一个网站的起始页面或者导航页面.
*标记:<p>称为开始标记<>称为结束标记.也叫标签.每个标签都规定好了特殊的含义。
*元素：<p>内容<>称为元素.
*属性：给每一个标签所做的辅助信息。
*：符合语法标准的。
*：,动态的。+ +合起来的页面就是一个
8.表单标记及语义化
9.多媒体标记
:背景音乐
:播放多媒体文件.
:移动
属性：移动目标方向，移动距离是固定的200
:行为方式取值：
:移动速度
:循环多少圈。负值表示无限循环
:移动一次休息多长时间。单位是毫秒
10.头标记
笔记
一、概述(了解)
*：层叠样式表
*作用就是给页面标签添加各种样式
*.为什么用
的缺陷：1.不能够适应多种设备
2.要求浏览器必须智能化足够庞大
3.数据和显示没有分开
4.功能不够强大
优点：
1.使数据和显示分开
2.降低网络流量
3.使整个网站视觉效果一致
4.使开发效率提高了
二、语法
p{：;}
选择器{属性名：属性值;}
选择器后一定是大括号.属性名后必须用冒号隔开.属性值后用分号
属性名和冒号之间最好不要有空格。
三、和的结合方式
*不区分大小写
*页面的后缀名是或者(有一些系统不支持后缀名长度超过3个字符，比如系统)
*的结构
1)声明部分。主要作用是用来告诉浏览器这个页面使用的是那个标准。< >是5标准。
2)部分：不会显示在页面上。作用是告诉浏览器一些页面的额外信息。
3)部分：我们缩写的代码必须放在此标签內。
六、的各种标签(掌握)
代码理论上位置是任意的，但通常写在标签里
和的结合方式有3种：
a.行级样式表:采用属性,范围只针对此标签适用
< = ":1 ;">大家好<>
b.内嵌样式表:采用<>标签完成。范围针对此页面
c.外部样式表:采用建立样式表文件。针对多个页面.
引入样式表文件的方式:
1):采用<>标签
:< = "" = "" = ""><>
明确：每个标签都有私有属性。也都有公有属性。
中表示长度的单位都是像素。只有一种单位就是像素。
:
:背景颜色
Baidu Nhomakorabea:背景图片
:文本颜色
1.排版标签
所有的浏览器默认情况下都会忽略空格和空行
P：p代表一个段落
属性：:对齐方式.取值：
<>代表是换行。
:
:线的颜色
:线的粗细
:线的长短
两种写法：1)绝对值: 500
2)相对值：50%
:不要阴影
:对齐方式取值：
:内容居中
:预定义格式标签.告诉浏览器不要忽略空格和空行
:块级标签必须单独占据一行
属性：:
:块级标签不换行字体标记
2字体标签
h16:定义字体大小
属性：:居中
:
:字体颜色
颜色的写法有3种：1)英文单词:
2)十六进制：#00
3)(三原色) : (124,156,23)
:字体大小
b)：绝对路径
1) :以盘符开始的路径
: C:\ \\桌面\01\上课示例1
2) :网络路径
:
:宽度
：高度
：当图片显示不出来的时候代替图片显示的内容
：提示性文本
:边框
热点：就是特定的位置添加超链。
< "1" "300" "300" "" "0" />
< "" "">
< "" "122,81,38" "字体标签" />
<>
4.清单标记
列表标签：3种
a.无序列表
属性：:值：(默认，实心原点)(实心方点)(空心圆)
b.有序列表()
属性: :取值：1(阿拉伯数字，默认)
:从几开始
c.定义列表()
:列表项的标题
:列表项
5.超链接
3种超链接:
1.连接到其他页面
2.锚:指给超链接起一个名字，作用是连接到本页面或者其他页面的特定位置。使用属性给超链起名字
:框架的集合
:纵向分部框架.
:横向分部框架.
写法有两种: 1)绝对值"200,*" ,*代表剩余的
2)相对值"30%,*"
:框架.一个框架显示一个页面
:是否需要滚动条。默认是
:固定框架大小
:给框架边框起一个颜色
:给框架起一个名字
内嵌框架：嵌入在一个页面上的框架.(仅仅支持)
:
属性：:宽度
：高度
:是否需要滚动条