html网页布局模板Word文档格式.docx
- 文档编号:13181791
- 上传时间:2022-10-07
- 格式:DOCX
- 页数:16
- 大小:23.90KB
html网页布局模板Word文档格式.docx
《html网页布局模板Word文档格式.docx》由会员分享,可在线阅读,更多相关《html网页布局模板Word文档格式.docx(16页珍藏版)》请在冰豆网上搜索。
*记事本
*:
语法高亮显示
技巧:
根据颜色判断单词是否出错。
(不是100%)
根据颜色判断单词是否出错,可以显示2进制数据.
*(,专业工具)代码提示.
五、的规范(知道)
*是一个弱势语言
*不区分大小写
*页面的后缀名是或者(有一些系统不支持后缀名长度超过3个字符,比如系统)
*的结构
1)声明部分。
主要作用是用来告诉浏览器这个页面使用的是那个标准。
>
是5标准。
2)部分:
不会显示在页面上。
作用是告诉浏览器一些页面的额外信息。
3)部分:
我们缩写的代码必须放在此标签內。
六、的各种标签(掌握)
明确:
每个标签都有私有属性。
也都有公有属性。
中表示长度的单位都是像素。
只有一种单位就是像素。
:
:
背景颜色
背景图片
文本颜色
1.排版标签
所有的浏览器默认情况下都会忽略空格和空行
P:
p代表一个段落
属性:
对齐方式.取值:
<
代表是换行。
:
线的颜色
线的粗细
线的长短
两种写法:
1)绝对值:
500
2)相对值:
50%
不要阴影
对齐方式取值:
内容居中
预定义格式标签.告诉浏览器不要忽略空格和空行
块级标签必须单独占据一行
块级标签不换行字体标记
2字体标签
h16:
定义字体大小
居中
字体颜色
颜色的写法有3种:
1)英文单词:
2)十六进制:
#00
3)(三原色):
(124,156,23)
字体大小
:
字体类型
特殊字符:
;
小于;
大于;
&
符号;
双引号;
单引号
;
版权;
商标;
空格
扩展:
32464;
b:
加粗
i:
斜体
斜体
u:
下划线
s:
中划线(删除线)
上标
下标.
3.图像标记
代表是一副图片
属性:
图片的路径
两种写法:
a):
相对路径路径是相对页面所在的路径两个标记.和..,分表代表当前目录和父路径
b):
绝对路径
1):
以盘符开始的路径
:
C:
\\\桌面\01\上课示例1
2):
网络路径
:
:
宽度
:
高度
当图片显示不出来的时候代替图片显示的内容
提示性文本
边框
热点:
就是特定的位置添加超链。
<
"
1"
300"
"
0"
/>
<
<
122,81,38"
字体标签"
4.清单标记
列表标签:
3种
a.无序列表
属性:
值:
(默认,实心原点)(实心方点)(空心圆)
b.有序列表()
属性:
取值:
1(阿拉伯数字,默认)
:
从几开始
c.定义列表()
列表项的标题
列表项
5.超链接
3种超链接:
1.连接到其他页面
2.锚:
指给超链接起一个名字,作用是连接到本页面或者其他页面的特定位置。
使用属性给超链起名字
3.连接到邮件:
<
a="
进入我的邮箱<
:
告诉浏览器怎么显示目标页面
中已定义4个值:
在同一个浏览器中显示
:
打开新的浏览器显示
在父窗口中显示
在顶级窗口中显示
6.表格标记
表格
边框
宽度
表格的对齐方式
单元格内容到边的距离
单元格和单元格之间的距离
背景颜色
表格的上,左边框,以及单元格的右,下边框的颜色
表格的右,下边框,以及单元格上,左的边框的颜色
单元格内容的排列方式取值:
从左到右,:
从右到左
行
单元格
内容的横向对齐方式
内容的纵向对齐方式
绝对值或者相对值(%)
单元格的高度
单元格的合并:
单元格的属性:
横向合并
纵向合并
相当于<
+<
b>
属性同<
表格的标题
取值:
写与不写的区别:
1.当表格非常大的时候,如果不写,则必须等表格的内容全部下载完成才能显示。
但是用标签的话,那么边下载边显示。
2.如果不写那么浏览器解析表格内容的时候是从上到下解析。
如果写了,那么顺序任意,浏览器解析的时候还是按照的顺序显示内容
7.框架标记及<
框架页面上不允许有标签
框架的集合
纵向分部框架.
横向分部框架.
写法有两种:
1)绝对值"
200,*"
*代表剩余的
2)相对值"
30%,*"
框架.一个框架显示一个页面
是否需要滚动条。
默认是
固定框架大小
给框架边框起一个颜色
给框架起一个名字
内嵌框架:
嵌入在一个页面上的框架.(仅仅支持)
属性:
:
高度
:
是否需要滚动条
8.表单标记及语义化
9.多媒体标记
背景音乐
播放多媒体文件.
移动
移动目标方向,移动距离是固定的200
行为方式取值:
移动速度
循环多少圈。
负值表示无限循环
移动一次休息多长时间。
单位是毫秒
10.头标记
笔记
一、概述(了解)
层叠样式表
*作用就是给页面标签添加各种样式
*.为什么用
的缺陷:
1.不能够适应多种设备
2.要求浏览器必须智能化足够庞大
3.数据和显示没有分开
4.功能不够强大
优点:
1.使数据和显示分开
2.降低网络流量
3.使整个网站视觉效果一致
4.使开发效率提高了
二、语法
p{:
;
}
选择器{属性名:
属性值;
选择器后一定是大括号.属性名后必须用冒号隔开.属性值后用分号
属性名和冒号之间最好不要有空格。
三、和的结合方式
代码理论上位置是任意的,但通常写在标签里
和的结合方式有3种:
a.行级样式表:
采用属性,范围只针对此标签适用
="
1;
大家好<
b.内嵌样式表:
采用<
标签完成。
范围针对此页面
c.外部样式表:
采用建立样式表文件。
针对多个页面.
引入样式表文件的方式:
1):
标签
2):
采用,必须写在<
标签中,并且必须是第一句
();
两种引入方式的区别:
外部样式表中不能写<
标签,但是可以写语句
四、选择器
选择器分为两大类:
1.基本选择器
a.标签选择器:
指的就是选择器的名字代表页面上的标签
p{
;
}
b.类选择器:
规定用圆点.来定义
优点:
灵活
{0099;
}
c.选择器:
规定用#来定义
{;
区别:
标签选择器针对的是页面上的一类标签.
类选择器可以供多种标签使用.
选择器是值供特定的标签(一个).是此标签在此页面上的唯一标识。
d:
通用选择器:
用*定义,代表页面上的所有标签。
*{
30;
0;
2.扩展选择器
a.组合选择器:
采用逗号隔开
12{;
b.关联选择器(后代选择器):
采用空格隔开
h4i{;
}
表示h4标签中的标签中的i标签的样式
h4和和i标签不一定是紧挨着的。
c.伪类选择器
1):
静态伪类:
规定是用:
来定义.只有两个.只能用于超链接.
表示超链接点击之前的颜色
表示链接点击之后的颜色
{;
{;
注意:
{}定义的样式针对所有的写了属性的超链接(不包括锚)
a{}定义的样式针对所有的超链接(包括锚)
2):
动态伪类:
针对所有的标签都适用
是移动到某个标签上的时候
是某个标签获得焦点的时候
点击某个标签没有放松鼠标时
{0000;
{
9999;
:
}
;
五、各种选择器的冲突(掌握)
样式的冲突:
1选择器>
类选择器>
标签选择器
2.行级样式表>
内嵌样式表>
外部样式表
外部样式表的选择器>
内嵌样式表的标签选择器
原则:
就近原则
六、的各种属性(掌握)
?
中尺度单位的介绍
的单位:
a.绝对单位12.5425.4726,是点或者磅,是派卡
b.相对单位:
(印刷单位相当于12个点),%(相对周围的文字)
*字体设置
p{
50;
/*字体大小*/
/*斜体*/
/*粗体*/
幼圆;
/*字体类型*/
/*小写变大写*/
*文本设置
0.5;
/*字母间距*/
1;
/*单词间距*/
/*在所包含容器的中间*/
/*字体修饰下划线中划线上划线*/
/*单
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- html 网页 布局 模板