html网页布局模板.docx
《html网页布局模板.docx》由会员分享，可在线阅读，更多相关《html网页布局模板.docx（20页珍藏版）》请在冰点文库上搜索。
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:
文件传输协议.
四、HTML的编辑工具（了解）
*.notepad记事本
*.editplus:
语法高亮显示
技巧：
根据颜色判断单词是否出错。
（不是100%）
*.ultraedit:
根据颜色判断单词是否出错,可以显示2进制数据.
*.dw（dreamweaver,专业工具）代码提示.
五、HTML的规范（知道）
*.HTML是一个弱势语言
*.html不区分大小写
*.html页面的后缀名是html或者htm（有一些系统不支持后缀名长度超过3个字符，比如dos系统）
*.html的结构
1）声明部分。
主要作用是用来告诉浏览器这个页面使用的是那个标准。
doctypehtml>是HTML5标准。
2）head部分：
不会显示在页面上。
作用是告诉浏览器一些页面的额外信息。
3）body部分：
我们缩写的代码必须放在此标签內。
六、HTML的各种标签（掌握）
明确：
每个标签都有私有属性。
也都有公有属性。
html中表示长度的单位都是像素。
HTML只有一种单位就是像素。
body:
bgcolor:
背景颜色
background:
背景图片
text:
文本颜色
1.排版标签
所有的浏览器默认情况下都会忽略空格和空行
P：
p代表一个段落
属性：
align:
对齐方式.取值：
left,right,center
代表是换行。
hr:
color:
线的颜色
size:
线的粗细
width:
线的长短
两种写法：
1）绝对值eg:
500
2）相对值：
50%
noshade:
不要阴影
align:
对齐方式取值：
left,right,center
center:
内容居中
pre:
预定义格式标签.告诉浏览器不要忽略空格和空行
div:
块级标签必须单独占据一行
属性：
align:
span:
块级标签不换行字体标记
2字体标签
h1...h6:
定义字体大小
属性：
align:
居中
font:
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.框架标记及
|