html和css的简单教程.docx
《html和css的简单教程.docx》由会员分享，可在线阅读，更多相关《html和css的简单教程.docx（33页珍藏版）》请在冰豆网上搜索。
html和css的简单教程
HTML简明讲义
第一节HTML根底
什么是HTML
是一种超文本标记语言〔HyperTextMarkupLanguage〕
超文本：
包含有链接关系的文本，且包含多媒体对象的文件。
1.2HTML标记的格式
<标识标记属性=“值〞>
1.3HTML文档的根本构造
欢迎进入HTML世界这会是一种很有趣的体验
第二节页面的主体标记
网页的主体部分位于
和这两个标记之间，放置的是页面中的所有内容，如文字、图片、链接、表格、表单等。
文字颜色属性Text
在没有对文字进展单独定义颜色时，这个属性对页面中的所有文字产生作用。
根本语法：
常用color_value
颜色
颜色名称
十六进制代码
黑色
black
#000000
绿色
green
#009900
灰色
gray
#808080
白色
white
#FFFFFF
黄色
yellow
#FFFF00
红色
red
#FF0000
蓝色
blue
#0000FF
例如：
设定页面文字颜色为蓝色
背景颜色属性BgColor
设定整个页面的背景颜色。
根本语法：
例如：
设定页面背景颜色为深蓝色〔#336699〕，文字颜色为白色
背景图片属性BackGround
背景图片位于网页的最底层，文字和图片等都位于它的上方。
根本语法：
例如：
设定页面背景平铺效果显示
背景图片固定属性BgProperties
背景图片固定，是指不管阅读器的滚动条如何拖动，背景永远固定在一样位置，并不会随着文字的滚动而滚动。
根本语法：
例如：
设定页面效果背景图片固定显示
上边距属性TopMargin
定义页面的上边距，即内容和阅读器上部边框之间的间隔。
根本语法：
例如：
设定页面上边距为30
左边距属性LeftMargin
定义页面的左边距，即内容和阅读器左部边框之间的间隔。
根本语法：
例如：
设定页面左边距为30
第三节文字内容
输入普通文字
例如：
输入空格符号
例如：
输入常用特殊符号
特殊符号
符号码
“
"
&
&
<
<
>
>
例如：
注释语句
根本语法：
……
根本语法：
--……-->
例如：
标题字标记
标题文字就是以某几种固定的字号去显示文字
根本语法：
定义六级标题，从一到六级，每级标题的字体大小依次递减
标记
描绘
……
一级标题
……
二级标题
……
三级标题
……
四级标题
……
五级标题
……
六级标题
例如：
定义标题字对齐属性
根本语法：
属性
描绘
……
标题左对齐
……
标题中对齐
……
标题右对齐
例如：
文字修饰标记
标记
描绘
粗体
粗体
斜体
斜体
斜体
上标
下标
大字体
小字体
下划线
删除线
删除线
例如：
字体标记Font
属性
描绘
face
字体
size
字号从1到7逐渐增大
color
颜色
例如：
第四节段落标记
在html中，使用
……
标记来表示段落。
定义段落对齐属性
根本语法：
属性
描绘
……
段落左对齐
……
段落中对齐
……
段落右对齐
例如：
换行标记与强迫换行标记
标记
描绘
换行
文字过长时，强迫阅读器不换行。
在默认情况下，阅读器会对较长文字进展自动换行。
例如：
预格式化标记
保存文字在源代码中的格式，阅读器在显示内容时，会完全按照其真正的文本格式来显示。
根本语法：
……
例如：
第五节程度线标记
程度线用于段落与段落之间的分割，使文档构造更加明晰。
插入程度线
根本语法：
例如：
程度线属性设置
根本语法：
属性
描绘
语法
width
设置程度线宽度
size
设置程度线高度
noshade
程度线去除阴影
color
设置程度线颜色
align
在程度方向上，设置居中、居左和居右
例如：
第六节列表标记
在html页面中，列表可以起到提纲挈领的作用。
列表分为两种类型：
列表类型
描绘
有序列表
按照数字或字母等顺序排列列表工程
无序列表
按照工程符号来标记无序的列表工程
有序列表设置
根本语法：
工程1工程2工程3……
标记
描绘
ol
有序列表
li
列表工程
属性
描绘
type
1数字1、2、3……
a小写字母a、b、c……
A大写字母A、B、C……
i小写罗马数字
I大写罗马数字
start
设置有序列表工程的起始值
例如：
无序列表设置
根本语法：
工程1工程2工程3……
标记
描绘
ul
无序列表
li
列表工程
属性
描绘
type
disc
circle
square
例如：
无序列表和有序列表的嵌套〔难点〕
例如：
定义列表标记〔选学〕
定义列表是一种两个层次的列表，用于解释名词的定义，名词为第一层次，解释为第二层次，并且不包含工程符号，类似于字典词条一样。
根本语法：
- 名词一
- 解释一
- 名词二
- 解释二
- 名词三
- 解释三
……
标记
描绘
dl
定义列表的声明
dt
名词标题
dd
解释名词
例如：
定义列表的嵌套〔难点〕
例如：
第七节插入图片
在html页面中可以使用![]()
标记插入图片，网页中常用的图片格式为JPEG和GIF。
![]()
标记需要配合其它属性来完成工作
属性
描绘
src
图片所在途径
alt
鼠标挪动到图片上时显示的提示文字
width、height
图片宽度和高度
border
设置图片边框宽度
vspace
设置图片与文字的上下间隔
hspace
设置图片与文字的左右间隔
align
Top文字的中间线位于图片上方
Middle文字的中间线位于图片中间
Bottom文字的中间线位于图片底部
Left文字位于图片左侧
Right文字位于图片右侧
例如：
第八节多媒体页面之滚动文字
在HTML页面中通过标记可以实现如字幕一般的滚动文字效果，在一个排版整齐的页面中，添加适当的滚动文字可以使页面更有动感。
滚动方向属性Direction
根本语法：
滚动文字
direction属性值
描绘
up
滚动文字向上
down
滚动文字向下
left
滚动文字向左
right
滚动文字向右
例如：
滚动方式属性Behavior
根本语法：
滚动文字
behavior属性值
描绘
scroll
循环往复
slide
下只进展一次滚动
alternate
交替进展滚动
例如：
滚动速度属性ScrollAmount
根本语法：
滚动文字
例如：
滚动延迟属性ScrollDelay
根本语法：
滚动文字
例如：
滚动循环属性Loop
根本语法：
滚动文字
例如：
滚动范围属性Width、Height
根本语法：
滚动文字
例如：
滚动背景属性BgColor
根本语法：
滚动文字
例如：
第九节嵌入多媒体内容
在页面中可以放置mp3、电影、swf动画等多种多媒体内容。
根本语法：
滚动文字
例如：
第十节嵌入背景音乐
使用标记可以嵌入多种格式的背景音乐，最常用的为mid格式的文件。
根本语法：
例如：
背景音乐循环次数属性
根本语法：
根本语法：
例如：
第十一节使用表格
表格是用于排列内容的最正确手段，在html页面中，绝大多数页面都是使用表格进展排版。
表格相关标记
标记
描绘
表格标记
……
行标记
…… | 单元格标记
……表格标题标记
…… | 表格表头标记
例如：
制作一个三行两列的表格
表格标记属性设置
属性
描绘
border
设置表格边框线宽度
width、height
设置表格的宽度和高度
bordercolor
设置表格边框颜色
borderlight
设置表格亮边框颜色〔左上边框颜色〕
bordercolordark
设置表格暗边框颜色〔右下边框颜色〕
bgcolor
设置表格背景颜色
background
设置表格背景图片
align
设置表格对齐方式
cellspacing
设置表格单元格和单元格之间的间隔
cellpadding
设置单元格内容和边框之间的间隔
例如
表格标题标记
在html中通过在
标记中使用……标记为表格添加标题，而且可以控制标题文字的排列属性。根本语法：
属性
描绘
align
设置标题文字的程度对齐方式〔left、center、right〕l
valign
设置标题文字的垂直对齐方式〔top、bottom〕
例如
表格表头标记
表头指的是表格的第一行，在html中通过在 标记中使用| …… | 标记为表格设置表头，表头中的文字可以实现居中并且加粗显示。根本语法： 例如 行标记属性设置 属性 描绘 bordercolor 设置行的边框颜色 borderlight 设置行的亮边框颜色〔左上边框颜色〕 bordercolordark 设置行的暗边框颜色〔右下边框颜色〕 bgcolor 设置行的背景颜色 background 设置行的背景图片 align 设置行内容程度对齐方式 valign 设置行内容垂直对齐方式 例如 单元格属性设置 、 | 属性 描绘 align 设置单元格内容程度对齐方式 valign 设置单元格内容垂直对齐方式 width、height 设置单元格的宽度和高度 bgcolor 设置单元格背景颜色 background 设置单元格背景图片 bordercolor 设置单元格边框颜色 borderlight 设置单元格亮边框颜色〔左上边框颜色〕 bordercolordark 设置单元格暗边框颜色〔右下边框颜色〕 例如 跨行属性 在复杂的表格构造中，有的单元格在程度方向上是跨多个单元格的，这就需要使用跨行属性rowspan。 根本语法：
语法解释： value代表单元格跨的行数。 例如 跨列属性 在复杂的表格构造中，有的单元格在垂直方向上是跨多个单元格的，这就需要使用跨列属性colspan。 根本语法：
语法解释： value代表单元格跨的列数。 例如 表格嵌套〔重点〕 例如 第十二节建立超链接 超链接是网页页面中最重要的元素之一，一个网站是由多个页面组成的，页面之间根据链接确定互相的导航关系。 链接标记 链接虽然在网站设计中占有不可替代的地位，但是其标记只有一个，那就是标记。 链接标记具有如下属性： 属性 描绘 href 指定链接地址 name 给链接命名 title 链接提示文字 target 指定链接的目的窗口 例如 关于链接途径 链接途径类型 描绘 绝对途径 : //sina.cn ftp: // 相对途径 1、要链接到同一目录下的文件时，只需要输入要链接文件的名称 2、要链接到下一级目录中的文件，只需要先输入目录名，然后加“/〞，再输入文件名 3、要链接到上一级目录中的文件，那么先输入“../〞，再输入目录名、文件名 根途径 以“/〞开头，代表根目录，再输入目录名、文件名 例如 内部链接 所谓内部链接，是指在同一网站内部，不同html页面之间的链接关系。 根本语法： 链接文字 例如 target属性 描绘 _parent 在上一级窗口中翻开，经常使用于分帧的框架页 _blank 在新窗口中翻开 _self 在同一个窗口中翻开，默认设置 _top 在阅读器的整个窗口中翻开，忽略任何框架 书签链接 建立书签链接，分为两步： 一是建立书签，二是为书签建立链接。 根本语法： 书签链接文字 链接文字 链接文字 例如 target属性 描绘 _parent 在上一级窗口中翻开，经常使用于分帧的框架页 _blank 在新窗口中翻开 _self 在同一个窗口中翻开，默认设置 _top 在阅读器的整个窗口中翻开，忽略任何框架 所谓外部链接，是指跳转到当前网站外部，和其他网站中的页面或者其他元素之间的链接关系。 效劳 url格式 描绘 www : // 链接到外部网站 ftp ftp: // 链接到文件传输效劳器 e-mail mailto: 启动邮件 根本语法： //〞>链接文字 //〞>链接文字 〞>链接文字 第十三节建立页面表单 Html表单是html页面与阅读器实现交互的主要手段，利用表单可以搜集客户端提交的有关信息。 表单是网站实现交互功能的重要组成部分。
根本语法：
……. 属性 描绘 Name 表单的名称 Method 定义表单结果从阅读器传送到效劳器的方法，一般有两种： get、post Action 用来定义表单处理程序 在
标记 描绘 表单输入标记 菜单和列表标记 菜单和列表工程标记 属性 描绘 Name 文本域名称 Rows 文本域的行数 Cols 文本域的列数 Value 文本域的默认值 第十四节元信息
展开阅读全文
相关搜索
|
|---|
|