Html学习笔记
01.HTML简介
HTML(Hyper Text Mark-up Language超文本标记语言)，标记就是用来描述网页内容的一些特定符号，HTML不是编程语言，而是一种描述性的标记语言，用于描述网页中内容的显示方式，比如文字以什么颜色、大小来显示，这些都是利用HTML标记来实现的.
HTML文档的创建方式: 用HTML语言创建的文档
·手工直接编写(例如记事本)
·通过图形化的HTML开发软件Dreamweaver
·由Web服务器上的动态网页程序生成
标记也称为标签或元素.
02.HTML语法
HTML最基本的语法是: <标记符>内容</标记符>
标记符通常都是成对出现的，有一个开头标记和结束标记，结束标记只是在开头标记的前面加一个斜杠"/"，当浏览器打开html文件后，就会理解里面的标记符，然后把标记符对应的功能表达出来。例如:
文字内容
制作一个html网页文件:
·新建一个记事本的文件，命名为 *.html
·在文件里面输入内容
HTML标记的类型: 单标记与双标记
·单标记: <标记名称>
·单一型，无属性值: 如:
·单一型，有属性值: 如:
·双标记
·无属性值: <标记名称>...</标记名称> 如:
·有属性值: <标记名称 属性="属性值">...</标记名称> 如:
...
说明:
·标记与属性、属性之间以空格分隔
·属性不区分先后顺序，且属性不是必需的.
·虽然在HTML中标记不区分大小写，但在XHTML中所有标记都必须小写，所以建议所有标记都采用小写.
03.HTML文档结构
所有的网页文件，通常由四对标记来构成文档的骨架:
标题
正文
说明:
·... 标识网页文件的开始与结束，所有的html元素都要放在这对标记中.
·... 标识网页文件的头部信息，如标题、搜索引擎关键字等.
· 标识网页文件的标题
·...标识网页文件的主体部分
04.注释:
注释格式:
05.头部(head)标记
meta标记用于定义文件信息，对网页文件进行说明，便于搜索引擎查找。放置于
之间.
·设置关键字: 多个关键字内容之间可以用","分隔.
·设置描述:
·设置作者:
·设置字符集:
·设置页面定时跳转:
06.主体(body)标记
background="背景图象"
text="文本颜色"
link="链接文本颜色"
leftmargin="左边界"
rightmargin="右边界"
topmargin="上边界"
bottommargin="下边界">
·在HTML4.01中，所有body元素的"呈现属性"均不被赞成使用。
·在XHTML1.0 Strict DTD中，所有body元素的"呈现属性"均不被支持。
07.字符格式
功能 标记
加粗 文本
倾斜 文本
加强语气(加粗) 文本
加强语气(倾斜) 文本
下划线 文本
删除线 文本
上标 文本
下标 文本
说明
·如果标记的内容比较重要，可以在语义上加权
·文章网页的主题推荐使用
...
·网页的段落文字推荐使用
...
08.段落控制标记
...
段落标题说明:
·x取值[1-6]
·hx内的文本会自动加粗显示
·hx针对的对象是段落，而font针对的对象是任意文本.
09.换行
: 换行(换行不换段)
10.修饰标记
: 线条
属性名称 属性值
说明
size
像素
绝对设置，以数字表示，属性值越大，线越粗
百分比
相对设置，以%表示，属性值越大，线越粗
width
像素
绝对设置，长度不会应视窗的改变而改变
百分比
相对设置，长度会应视窗的改变而改变
noshade="noshade"
实体线
在xhtml中，所有的标签都必须要用属性值，如果没有，使用属性名。
例如:
11.特殊标记
定义一个块引用: 使用文本缩进
格式:
...
属性名称 属性值
说明
cite
url
被引用的地址
居中标记
...
(已废弃)
预格式化
...
不加此标记会忽略所有空格和制表符。
常用在表示源代码.
12.XML的特殊符号(转义符号)
空格
版权号 ©
注册符号 ®
" "
& &
< <
> >
13.列表的标记
列表标记可以创建一般的无序列表，编号列表，以及定义列表三种方式，还可以在一种列表中嵌套另一种列表。便于概括显示一系列相关的内容。
利用列表可以做排行榜.
(1)无序列表
...
说明:
表示一个项目.
项目符号类型:
disc ●
circle ○
square ■
(2)有序列表
...
- 内容1
- 内容2
...
说明:
type 1 表示以1,2,3,4来表示
a 表示以a,b,c,d来表示
A 表示以A,B,C,D来表示
i 表示以i,ii,iii来表示
I 表示以I,II,III来表示
(3)定义列表
...
-
标题1
-
-
内容1
-
-
内容2
-
标题2
-
-
内容1
-
-
内容2
-
...
14.图片
图片标记: ![Html学习笔记（入门）]( "Html学习笔记（入门）")
图片的路径:
·绝对路径: 提供目标文档的完整主机名称、路径信息及文档全称.
·相对路径: 从当前文档开始的路径.
·如果当前文档和目标文档位置平行，则直接书写目标文档全称.
·如果当前文档和目标文档所在文件夹位置平行，则书写为: 文件夹名称/目标文档全称.
·如果当前文档所在的文件夹和目标文档位置平行，则书写为: ../目标文档全称.
·根相对路径: 从站点根目录开始的路径，以"/"开头.
图片标记属性
属性 属性值 说明
src URL 图片的路径
alt 文本 规定图片的替代文本[图片无法显示时]
title 文本 鼠标悬停时显示的内容
width 像素/百分比 设置图片宽
height 像素/百分比 设置图片高
border 数字 设置图片边框
align left 图片靠左，文字靠右
right 图片靠右，文字靠左
top 文字垂直居上靠
middle 文字垂直居中
bottom 文字垂直居下(默认)
vspace 像素 定义图象顶部和底部的空白(垂直边距)
hspace 像素 定义图象左侧和右侧的空白(水平边距)
15.表格
因为表格中可以包含任何内容，所以在使用DIV+CSS之前，网页设计师是使用表格对网页内容进行排版与布局的.
表格标记基本结构:
...
定义表格
定义表行
...
定义表列(单元格)
...
定义标题栏(文字加粗，居中)
表格属性:
设置表格的背景色
设置表格的背景图片
设置边框的宽度，若不设置此属性，则边框宽度默认为0.
设置表格单元格边框与其内部内容之间空间的大小，默认为2(表格边距)
设置表格单元格之间空间的大小，默认为2(单元格间距)
设置表格边框的颜色
设置表格边框亮部分的颜色(当border的值大于等于1时才有用).
设置表格边框暗部分的颜色(当border的值大于等于1时才有用).
设置表格的对齐方式(left=左，center=居中，right=右).
设置表格的宽度，单位用绝对像素值或总宽度的百分比.
...
属性名称
属性值
说明
align
left
靠左
center
靠中
right
靠右
valign
top
靠上
middle
靠中
bottom
靠下
span
数字
直列数
bgcolor
颜色
背景颜色
个别直列设置
功能完全和一样
16.超级链接
一个网站是由多个网页组成的，网页之间都是通过链接实现相互关联的.通过链接实现由当前文档到目标文档的一种跳转.
链接语法: 显示内容
打开链接窗口的形式:
·_blank在新窗口中打开
·_self在自身窗口中打开(默认值)
·_parent在上一级窗口中打开，框架会经常使用
·_top在浏览器的整个窗口中打开，忽略任何框架
链接重要的使用原则，不许是回路，有去有回，优化，加相关链接
链接分类:
·站内链接:
·站外链接:
·E-mail链接:
·局部链接(锚点链接): 可以跳转到某个页面或其他文档中的指定位置.
·创建锚点: 显示内容
·链接锚点: 显示内容
·空链接: 显示内容
设为首页:
onClick="this.style.behavior='url(#default#homepage)';
this.sethomepage('http://www.sohu.com')">设为首页
添加收藏:
onClick="javascript:window.external.addfavorite('http://www.sohu.com','搜狐')">加入收藏夹
·脚本链接:
是一种特殊的链接，当单击设置脚本链接的文本或图像时，可以运行相应的JavaScript.
常用的脚本链接:
网易
关闭窗口: 输入javascript:window.close()
打开窗口: 输入javascript:window.open('文件名')
17.表单
表单的作用是从访问您的web站点的用户那里获得信息.访问者可以使用诸如文本域、列表框、复选框以及单选按钮之类的表单元素输入信息，然后单击某个按钮提交这些信息.是客户端与服务器交流信息的途径.
表单标记
form标记用于创建一个表单，定义表单的开始与结束，它是一个容器，用于包含其他表单元素，例如文本框、单选框等，表单元素必须入在form标记内才有作用.
(2)多行列表式
浏览框
按钮:
·按钮类型: submit(提交按钮)
reset(重置按钮)
button(普通按钮)
图片按钮:
隐藏域:
多行文本框:
表单外框:
: 定义围绕表单中元素的边框,用在
cols="控制列数及行宽"
framespacing="框架间距"
frameborder="是否显示框架边框(yes,no/1,0)"
border="边框宽度"
bordercolor="边框颜色">
name="框架名称"
noresize="是否允许改变框架尺寸(true/false)"
scrolling="滚动条显示控制(yes/no/auto)" />
框架做作流程(以左右框架为例)
·先做主框架文件main.html
·再分别制作包含文件left.html与right.html
·通过框架技术，将left与right包含到主框架文件main.html中，主框架文件不需要写body标记
对每个被包含的框架指定名称:
·如果还需要其他文件，须制作其他文件，例read.html,write.html.
·在被包含的框架文件中指定链接，用target属性指定要在哪个框架中打开.
写信
写信
框架的链接操作
·标记
有一个属性target，默认是在自身窗口打开目标URL.
·如果链接指向的目标是一个框架中的区域，必须要给这个区域起个名称
内嵌式框架:
width="宽度(400)"
height="高度(300)"
frameborder="是否显示边框(0/1)"
scrolling="滚动条的出现方式(yes,no,auto)"
name="框架名称">
21.XHTML
XHTML(The Extensible HyperText Markup Language，可扩展标记语言)
XHTLM是HTML向XML过渡的一个桥梁，XHTML是基于HTML的，这是更严密、代码更整洁的HTML版本.
HTML发展:
1999 HTML4.01
2000 XHTML1.0
2008 HTML5
XHTML1.0与HTML的区别:
·XHTML标签必须被正确地嵌套
·XHTML标签必须被关闭
·XHTML标签名必须用小写字母
·XHTML属性名必须小写，必须有值，值必须加引号
22.DOCTYPE
DOCTYPE(Document Type,文档类型)，主要用来说明你用的XHTML或者HTML是什么版本.浏览器根据你DOCTYPE定义的DTD(文档类型定义)来结实页面代码，并展现出来。所以，要建立符合标准的网页，DOCTYPE声明是必不可少的关键组成部分.
XHTML提供的三中文档类型定义:
(1)过渡的(Transitional): 要求非常宽松的DTD，它允许你继续使用HTML4.01的标识(但是要符合xhtml的写法).
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
(2)严格的(Strict): 要求非常严格的DTD，你不能使用任何表现层的表识和属性，例如
.需要使用层叠样式表css.
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
(3)框架的(Frameset): 专门针对框架页面设计使用的DTD，如果你的页面中包含有框架，需要采用这种DTD.
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
扫一扫
2502
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
