html和css的简单教程.docx
- 文档编号:24368594
- 上传时间:2023-05-26
- 格式:DOCX
- 页数:33
- 大小:26.86KB
html和css的简单教程.docx
《html和css的简单教程.docx》由会员分享,可在线阅读,更多相关《html和css的简单教程.docx(33页珍藏版)》请在冰豆网上搜索。
html和css的简单教程
HTML简明讲义
第一节HTML根底
什么是HTML
是一种超文本标记语言〔HyperTextMarkupLanguage〕
超文本:
包含有链接关系的文本,且包含多媒体对象的文件。
1.2HTML标记的格式
<标识标记属性=“值〞>
1.3HTML文档的根本构造
这会是一种很有趣的体验
第二节页面的主体标记
网页的主体部分位于
和这两个标记之间,放置的是页面中的所有内容,如文字、图片、链接、表格、表单等。文字颜色属性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页面中,列表可以起到提纲挈领的作用。
列表分为两种类型:
列表类型
描绘
有序列表
按照数字或字母等顺序排列列表工程
无序列表
按照工程符号来标记无序的列表工程
有序列表设置
根本语法:
……
标记
描绘
ol
有序列表
li
列表工程
属性
描绘
type
1数字1、2、3……
a小写字母a、b、c……
A大写字母A、B、C……
i小写罗马数字
I大写罗马数字
start
设置有序列表工程的起始值
例如:
无序列表设置
根本语法:
……
标记
描绘
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动画等多种多媒体内容。
根本语法:
例如:
第十节嵌入背景音乐
使用
根本语法:
例如:
背景音乐循环次数属性
根本语法:
根本语法:
例如:
第十一节使用表格
表格是用于排列内容的最正确手段,在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:
//
链接到文件传输效劳器
mailto:
启动邮件
根本语法:
//〞>链接文字 //〞>链接文字 〞>链接文字 第十三节建立页面表单 Html表单是html页面与阅读器实现交互的主要手段,利用表单可以搜集客户端提交的有关信息。 表单是网站实现交互功能的重要组成部分。 根本语法: ……. 属性 描绘 Name 表单的名称 Method 定义表单结果从阅读器传送到效劳器的方法,一般有两种: get、post Action 用来定义表单处理程序 在 标记 描绘 表单输入标记 菜单和列表标记 菜单和列表工程标记 文本域标记 13.2输入标记 输入标记是表单中最常用的标记之一,常用的文本域、按钮等都使用这个笔记。 根本语法:
属性
描绘
Name
域的名称
Type
域的类型
在type属性中,可以包含以下属性值:
Type属性值
描绘
Text
文字域
Password
密码域
File
文件域
Checkbox
复选框
Radio
单项选择框
Button
普通按钮
Submit
提交按钮
Reset
重置按钮
Hidden
隐藏域
Image
图像域〔图像提交按钮〕
在文字域中可以输入任何类型的文本、数字或字母,输入内容以单行显示。
根本语法:
size=〞value〞value=〞field_value〞> 属性 描绘 Name 文字域的名称 Maxlength 文字域最大输入字符数 Size 文字域的宽度 Value 文字域的默认值 在密码域中可以输入的文字以“*〞星号显示。 根本语法: size=〞value〞> 可以通过文件域上传文件。 根本语法: 根本语法: 语法注释: checked表示此项被默认选中; value表示选中工程后提交给效劳器端的值。 单项选择框radio 根本语法: 语法注释: checked表示此项被默认选中; value表示选中工程后提交给效劳器端的值。 普通按钮button 根本语法: 语法注释: value表示表示显示在按钮上的文字。 提交按钮submit 单击提交按钮后,可以实现表单内容的提交。 根本语法: 单击重置按钮后,可以去除表单的内容,恢复成默认的表单内容设定。 根本语法: 图像域是指可以用于提交按钮位置上的图片,这幅图片具有按钮功能。 根本语法: 隐藏域在页面中对于用户是不可见的。 根本语法: 菜单和列表标记 根本语法: …… 属性 描绘 Name 菜单或列表名称 Multiple 列表中的工程多项选择 Size 显示的选项数目 Value 选项值 Selected 默认选项 13.14文本域标记 制作多行的文字域。 根本语法: 属性 描绘 Name 文本域名称 Rows 文本域的行数 Cols 文本域的列数 Value 文本域的默认值 第十四节元信息 如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。 copyright@ 2008-2022 冰点文档网站版权所有 经营许可证编号:鄂ICP备2022015515号-1
冰豆网所有资源均是用户自行上传分享,仅供网友学习交流,未经上传用户书面授权,请勿作他用。