html和css的简单教程.docx
- 文档编号:3183713
- 上传时间:2022-11-19
- 格式:DOCX
- 页数:29
- 大小:27.38KB
html和css的简单教程.docx
《html和css的简单教程.docx》由会员分享,可在线阅读,更多相关《html和css的简单教程.docx(29页珍藏版)》请在冰豆网上搜索。
html和css的简单教程
HTML简明讲义
第一节HTML基础
1.1什么是HTML
是一种超文本标记语言(HyperTextMarkupLanguage)
超文本:
包含有链接关系的文本,且包含多媒体对象的文件。
1.2HTML标记的格式
<标识标记属性=“值”>
1.3HTML文档的基本结构
这会是一种很有趣的体验
第二节页面的主体标记
网页的主体部分位于
和这两个标记之间,放置的是页面中的所有内容,如文字、图片、链接、表格、表单等。2.1文字颜色属性Text
在没有对文字进行单独定义颜色时,这个属性对页面中的所有文字产生作用。
基本语法:
常用color_value
颜色
颜色名称
十六进制代码
黑色
black
#000000
绿色
green
#009900
灰色
gray
#808080
白色
white
#FFFFFF
黄色
yellow
#FFFF00
红色
red
#FF0000
蓝色
blue
#0000FF
示例:
设定页面文字颜色为蓝色
2.2背景颜色属性BgColor
设定整个页面的背景颜色。
基本语法:
示例:
设定页面背景颜色为深蓝色(#336699),文字颜色为白色
2.3背景图片属性BackGround
背景图片位于网页的最底层,文字和图片等都位于它的上方。
基本语法:
示例:
设定页面背景平铺效果显示
2.4背景图片固定属性BgProperties
背景图片固定,是指不论浏览器的滚动条如何拖动,背景永远固定在相同位置,并不会随着文字的滚动而滚动。
基本语法:
示例:
设定页面效果背景图片固定显示
2.5上边距属性TopMargin
定义页面的上边距,即内容和浏览器上部边框之间的距离。
基本语法:
示例:
设定页面上边距为30
2.6左边距属性LeftMargin
定义页面的左边距,即内容和浏览器左部边框之间的距离。
基本语法:
示例:
设定页面左边距为30
第三节文字内容
3.1输入普通文字
示例:
3.2输入空格符号
示例:
 
3.3输入常用特殊符号
特殊符号
符号码
“
"
&
&
<
<
>
>
示例:
3.4注释语句
基本语法:
基本语法:
--……-->
示例:
3.5标题字标记
标题文字就是以某几种固定的字号去显示文字
基本语法:
定义六级标题,从一到六级,每级标题的字体大小依次递减
标记
描述
……
一级标题
……
二级标题
……
三级标题
……
四级标题
……
五级标题
……
六级标题
示例:
3.6定义标题字对齐属性
基本语法:
属性
描述
标题左对齐
标题中对齐
标题右对齐
示例:
3.7文字修饰标记
标记
描述
粗体
粗体
斜体
斜体
斜体
上标
下标
大字体
小字体
下划线
删除线
删除线
示例:
3.8字体标记Font
属性
描述
face
字体
size
字号从1到7逐渐增大
color
颜色
示例:
第四节段落标记
在html中,使用
……
标记来表示段落。4.1定义段落对齐属性
基本语法:
属性
描述
段落左对齐
段落中对齐
段落右对齐
示例:
4.2换行标记与强制换行标记
标记
描述
换行
文字过长时,强制浏览器不换行。
在默认情况下,浏览器会对较长文字进行自动换行。
示例:
4.3预格式化标记
保留文字在源代码中的格式,浏览器在显示内容时,会完全按照其真正的文本格式来显示。
基本语法:
……示例:
第五节水平线标记
水平线用于段落与段落之间的分割,使文档结构更加清晰。
5.1插入水平线
基本语法:
示例:
5.2水平线属性设置
基本语法:
属性
描述
语法
width
设置水平线宽度
size
设置水平线高度
noshade
水平线去除阴影
color
设置水平线颜色
align
在水平方向上,设置居中、居左和居右
示例:
第六节列表标记
在html页面中,列表可以起到提纲挈领的作用。
列表分为两种类型:
列表类型
描述
有序列表
按照数字或字母等顺序排列列表项目
无序列表
按照项目符号来标记无序的列表项目
6.1有序列表设置
基本语法:
……
标记
描述
ol
有序列表
li
列表项目
属性
描述
type
1数字1、2、3……
a小写字母a、b、c……
A大写字母A、B、C……
i小写罗马数字
I大写罗马数字
start
设置有序列表项目的起始值
示例:
6.2无序列表设置
基本语法:
……
标记
描述
ul
无序列表
li
列表项目
属性
描述
type
disc
circle
square
示例:
6.3无序列表和有序列表的嵌套(难点)
示例:
6.4定义列表标记(选学)
定义列表是一种两个层次的列表,用于解释名词的定义,名词为第一层次,解释为第二层次,并且不包含项目符号,类似于字典词条一样。
基本语法:
- 名词一
- 解释一
- 名词二
- 解释二
- 名词三
- 解释三
……
标记
描述
dl
定义列表的声明
dt
名词标题
dd
解释名词
示例:
6.5定义列表的嵌套(难点)
示例:
第七节插入图片
在html页面中可以使用标记插入图片,网页中常用的图片格式为JPEG和GIF。
标记需要配合其它属性来完成工作
属性
描述
src
图片所在路径
alt
鼠标移动到图片上时显示的提示文字
width、height
图片宽度和高度
border
设置图片边框宽度
vspace
设置图片与文字的上下距离
hspace
设置图片与文字的左右距离
align
Top文字的中间线位于图片上方
Middle文字的中间线位于图片中间
Bottom文字的中间线位于图片底部
Left文字位于图片左侧
Right文字位于图片右侧
示例:
第八节多媒体页面之滚动文字
在HTML页面中通过标记可以实现如字幕一般的滚动文字效果,在一个排版整齐的页面中,添加适当的滚动文字可以使页面更有动感。
8.1滚动方向属性Direction
基本语法:
direction属性值
描述
up
滚动文字向上
down
滚动文字向下
left
滚动文字向左
right
滚动文字向右
示例:
8.2滚动方式属性Behavior
基本语法:
behavior属性值
描述
scroll
循环往复
slide
下只进行一次滚动
alternate
交替进行滚动
示例:
8.3滚动速度属性ScrollAmount
基本语法:
示例:
8.4滚动延迟属性ScrollDelay
基本语法:
示例:
8.5滚动循环属性Loop
XX文库-让每个人平等地提升自我基本语法:
示例:
8.6滚动范围属性Width、Height
基本语法:
示例:
8.7滚动背景属性BgColor
基本语法:
示例:
第九节嵌入多媒体内容
在页面中可以放置mp3、电影、swf动画等多种多媒体内容。
基本语法:
示例:
第十节嵌入背景音乐
使用
基本语法:
示例:
背景音乐循环次数属性
基本语法:
基本语法:
示例:
第十一节
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- html css 简单 教程
![提示](https://static.bdocx.com/images/bang_tan.gif)