html网页布局模板.docx
《html网页布局模板.docx》由会员分享,可在线阅读,更多相关《html网页布局模板.docx(17页珍藏版)》请在冰豆网上搜索。
html网页布局模板
html网页布局模板
1html笔记
一、HTML的概述(了解)
a.html是什么:
hypertextmarkuplanguage超文本标记语言
超文本:
音频,视频,图片称为超文本。
.
标记:
<英文单词或者字母>称为标记.一个HTML页面都是由各种标记组成。
b.作用:
编写HTML页面。
c.HTML语言不是一个编程语言(有编译过程),而是一个标记语言(没有编译过程).
HTML页面直接由浏览器解析执行。
二、HTML的历史(了解)
三、HTML的网络术语(明白)
*网页:
由各种标记组成的一个页面就叫网页.
*主页(首页):
一个网站的起始页面或者导航页面.
*标记:
称为开始标记
称为结束标记.也叫标签.每个标签都规定好了特殊的含义。
*元素:
内容
称为元素.
*属性:
给每一个标签所做的辅助信息。
*xhtml:
符合XML语法标准的HTML。
*dhtml:
dynamic,动态的。
javascript+css+html合起来的页面就是一个dhtml
*http:
协议标准。
用来规定客户端浏览器和服务端交互时数据的一个格式。
SMTP邮件传输协议,ftp:
文件传输协议.
color:
字体颜色
颜色的写法有3种:
1)英文单词:
red
2)十六进制:
#00ffcc
3)RGB(三原色):
newRGB(124,156,23)
size:
字体大小
face:
字体类型
特殊字符:
<小于>大于&&符号"双引号'单引号
©版权™商标 空格
扩展:
绐
b:
加粗
strong:
加粗
i:
斜体
em:
斜体
u:
下划线
s:
中划线(删除线)
sup:
上标
sub:
下标.
3.图像标记
img:
代表是一副图片
属性:
src:
图片的路径
两种写法:
a):
相对路径路径是相对页面所在的路径两个标记.和..,分表代表当前目录和父路径
b):
绝对路径
1):
以盘符开始的路径
eg:
C:
\DocumentsandSettings\Administrator\桌面\day01_html\上课示例/images/1.jpg
2):
网络路径
eg:
width:
宽度
height:
高度
Alt:
当图片显示不出来的时候代替图片显示的内容
title:
提示性文本
border:
边框
热点:
就是特定的位置添加超链。
4.清单标记
列表标签:
3种
a.无序列表ul
属性:
type:
值:
disc(默认,实心原点),square(实心方点),circle(空心圆)
b.有序列表(OL)
属性:
type:
取值:
1(阿拉伯数字,默认),a,A,i,I
start:
从几开始
c.定义列表(dl)
dt:
列表项的标题
dd:
列表项
5.超链接
3种超链接:
1.连接到其他页面
2.锚:
指给超链接起一个名字,作用是连接到本页面或者其他页面的特定位置。
使用name属性给超链起名字
3.连接到邮件:
xugang@">进入我的邮箱
属性:
target:
告诉浏览器怎么显示目标页面
HTML中已定义4个值:
_self:
在同一个浏览器中显示
_blank:
打开新的浏览器显示
_parent:
在父窗口中显示
_top:
在顶级窗口中显示
6.表格标记
table:
表格
属性:
border:
边框
width:
宽度
height:
高度
align:
表格的对齐方式
cellpadding:
单元格内容到边的距离
cellspacing:
单元格和单元格之间的距离
bgcolor:
背景颜色
background:
背景图片
bordercolorlight:
表格的上,左边框,以及单元格的右,下边框的颜色
bordercolordark:
表格的右,下边框,以及单元格上,左的边框的颜色
dir:
单元格内容的排列方式取值:
ltr从左到右,rtl:
从右到左
tr:
行
属性:
dir:
bgcolor:
td:
单元格
属性:
align:
内容的横向对齐方式
valign:
内容的纵向对齐方式top,middle,bottom
width:
绝对值或者相对值(%)
height:
单元格的高度
单元格的合并:
单元格的属性:
colspan:
横向合并
rowspan:
纵向合并
th:
相当于
+ 属性同 | caption: 表格的标题 属性: align: 取值: left,center,right,top,bottom thead tbody tfoot 写与不写的区别: 1.当表格非常大的时候,如果不写,则必须等表格的内容全部下载完成才能显示。 但是用tbody标签的话,那么边下载边显示。 2.如果不写thead,tbody,tfoot那么浏览器解析表格内容的时候是从上到下解析。 如果写了,那么顺序任意,浏览器解析的时候还是按照thead,tbody,tfoot的顺序显示内容 7.框架标记及 框架页面上不允许有body标签 frameset: 框架的集合 rows: 纵向分部框架. cols: 横向分部框架. 写法有两种: 1)绝对值"200,*",*代表剩余的 2)相对值"30%,*" frame: 框架.一个框架显示一个页面 scrolling: 是否需要滚动条。 默认是true noresize: 固定框架大小 bordercolor: 给框架边框起一个颜色 name: 给框架起一个名字 内嵌框架: 嵌入在一个页面上的框架.(仅仅IE支持) iframe: 属性: width: 宽度 height: 高度 scrolling: 是否需要滚动条 8.表单标记及语义化 9.多媒体标记 bgsound: 背景音乐 embed: 播放多媒体文件. marquee: 移动 属性: direction移动目标方向left,right,up,down,up,down移动距离是固定的200px behavior: 行为方式取值: slide,alternate,scroll scrollamount: 移动速度 loop: 循环多少圈。 负值表示无限循环 scrolldelay: 移动一次休息多长时间。 单位是毫秒 10.头标记 css笔记 一、CSS概述(了解) *.CSS: CascadingStyleSheet层叠样式表 *.CSS作用就是给HTML页面标签添加各种样式 *.为什么用CSS HTML的缺陷: 1.不能够适应多种设备 2.要求浏览器必须智能化足够庞大 3.数据和显示没有分开 4.功能不够强大 CSS优点: 1.使数据和显示分开 2.降低网络流量 3.使整个网站视觉效果一致 4.使开发效率提高了 二、CSS语法 p{color: red;} 选择器{属性名: 属性值;} 选择器后一定是大括号.属性名后必须用冒号隔开.属性值后用分号 属性名和冒号之间最好不要有空格。 三、CSS和HTML的结合方式 CSS代码理论上位置是任意的,但通常写在style标签里 CSS和HTML的结合方式有3种: a.行级样式表: 采用style属性,范围只针对此标签适用 1pxsolidred;">大家好 b.内嵌样式表: 采用
|