HTML网页制作基础.docx
《HTML网页制作基础.docx》由会员分享,可在线阅读,更多相关《HTML网页制作基础.docx(33页珍藏版)》请在冰豆网上搜索。
![HTML网页制作基础.docx](https://file1.bdocx.com/fileroot1/2023-3/19/d68408a8-6a15-4159-b086-c26addf44814/d68408a8-6a15-4159-b086-c26addf448141.gif)
HTML网页制作基础
HTML网页制作基础
HTML文档的结构
示例:
标题部分
我的第一个html页面
元素出现在文档的开头部分。
与之间的内容不会在浏览器的文档窗口中显示,但是其之间可以嵌入javascript和css样式等丰富网页的内容。
用来标记你的页面的解码方式。
元素定义HTML文档的标题。与之间的内容将显示在浏览器窗口的标题栏。元素表明是HTML文档的主体部分。
在
与之间,通常都会有很多其它元素;这些元素和元素属性构成HTML文档的主体部分。
元素的属性概述
1.Bgcolor属性标志HTML文档的背景颜色。
如:
Bgcolor=“#RRGGBB”
示例:
标题部分
背影色设置为灰色
2.background属性设置背景图片可使用GIF,JPG
示例:
标题部分
设置背景图片
3.bgproperties=“fixed”使背景图片成固定效果,图片不随滚动条滚动。
示例:
标题部分
bgproperties="fixed"
bgproperties设置为fixed 图片不随着滚动条而滚动。
4.text设置非链接文字的色彩。
5.link、vlink、alink分别对应普通超级链接、访问过的超级链接、当前活动超级链接颜色。
示例:
标题部分
点击进入
点击进入
6.leftmargin和topmargin页面左边的空白距与上边的空白距。
HTML文字设置1
文字是网页设计的基础部分,设置好文字的样式,可以起到事半功倍的效果,通常可以使用两种方法。
第1种方法是直接使用HTML标记进行设置,如:
使用粗体标记将文本设置为加粗样式。
第2种方法是使用css,层叠样式表。
HTML定义了6级标题,1-6级,标题文字随级数增大依次减小。
h1的效果
h2的效果
h3的效果
h4的效果
h5的效果
h6的效果
示例:
标题部分
h1的效果
h2的效果
h3的效果
h4的效果
h5的效果
h6的效果
利用align属性可以实现标题文字水平方向左、中、右的对齐方式。
align=“left/center/right”
示例:
标题部分
right的效果
center的效果
left的效果
HTML文字设置2
设置文字以粗体的方式显示。
语法…
设置文字以斜体显示。
语法…
效果同语法…
设置文字以上标文本效果显示。
语法…
设置文字以下标文本效果显示。
语法…
设置文字以下划线显示。
语法…
设置文字以删除线显示。
语法…
示例:
标题部分
粗体
斜体
斜体
字体上标
字体下标
下划线
删除线
控制的字体、大小和文字。
语法:
…
face控制文字使用的字体
size控制文字的大小
color设置文字颜色
HTML段落设置
段落标记,一般情况下在每个段落的前面加上一个
标记可以区分段落,又可以换行。
之后的文字将在下一行显视。
设置水平线。
标记所有包含的内容,将以居中对齐的方式显示在网页中。标签可以把原文件中的空格,回车,换行,tab键表现出来标记将取消浏览器由于窗口大小变化而换行。
在HTML文档中加入标记,使标记内的HTML标记不起作用。示例:
标题部分
这是一个段落标记。
<p>
这是一个<br>
居中显示
abc #sdfsd%#% de f g!
<> sdfsad s$!
@$( h $#@#%% i dsfasf jk
天空在不断的变暗 但在玻璃窗的边缘 留下了一丝宝石的蓝 那样的深邃 像大海深处的暗淡 那样的忧郁 像我心底深处的盘旋 多么渴望留住这一丝 这最后的暗淡宝石的蓝 可时间的蔓延 总要将它消逝 然后 变得黑暗无边
天空在不断的变暗 但在玻璃窗的边缘 留下了一丝宝石的蓝 那样的深邃 像大海深处的暗淡 那样的忧郁 像我心底深处的盘旋 多么渴望留住这一丝 这最后的暗淡宝石的蓝 可时间的蔓延 总要将它消逝 然后 变得黑暗无边
标题部分
这是一个段落标记。
<p>
这是一个<br>
居中显示
HTML的转义字符--HTML跑动文
direction文字走动方向
bgcolor设置文字背景颜色
height设置跑动文字的高度
width设置跑动文字的宽度
hspace设置文字的水平边距
vspace设置文字的上边距
behavior设置文字的运动方式scroll/alternate/slide
loop设置跑动文字的圈数
scrollamount设置跑动文字移动速度
scrolldelay设置跑动文字移动延时
示例:
标题部分
文字
示例:
标题部分
"
<
>
±
×
&
§
¢
¥
·
€
£
™
©
®
HTML超链接
超链接是一个网站的重要元素之一,一个网站由多个页面组成,各页面之间是通过超链接来确定相互关系的,每个页面的地址都不同。
格式:
这是一个连接
href设置超链接目标地址URL
name在html文档中建立特定位置的名称
target设置被链接的网页打开时的窗口_blank/_parent/_self/_top
accesskey设置超链接的快捷键
title设置超链接的说明文字
style运用css样式设置超链接文字样式
示例:
标题部分
title="说明文字" accesskey="q" >html链接
HTML超链接的锚点
是指同一页面中的不同位置链接。
一个网页的内容很长,我们就可以在网页的顶部设置一些锚点,这样便可以方便浏览者点击相应的锚点,到达本页内相应的位置,而不必在一个很长的网页里自行寻找。
示例:
标题部分
08-A.html
页面内的锚点1-_-
页面外的锚点1…………
页面内的锚点2
返回顶部
HTML有序列表
列表分成三种类型:
有序列表、无序列表和自定义列表。
有序列表使用编号来记录项目的顺序,无序列表使用项目符号来记录无序的项目,自定义列表它由两个部分组成:
定义条件和定义描述。
项目一项目二....
type
1阿拉伯数字
a英文小写
A英文大写
i罗马小写数字
I罗马大写数字
start编号样式的起始数字,如:
编号样式设为A,起始值设置为2,则列表的起始值为B.
示例:
标题
- ☆
- 无序列表
- ☆
- 有序列表
- ☆
- 定义列表
- 无序列表
- 不以数字为开始,而是使用一个符号作为分项标记的列表。
- 有序列表
- 使用数字编号,分项带有顺序性质的列表。
- 定义列表
- 用于解释名词的列表,包含了两种层次,一是名词,一是名词的解释。
HTML无序列表
无序列表标记
type
circle空心圆
disc圆点
square正方形
示例:
标题
- 啊啊
- 啊啊
- 啊啊
- 啊啊
HTM自定义列表
- 无序列表
- 不以数字为开始,而是使用一个符号作为分项标记的列表。
- 有序列表
- 使用数字编号,分项带有顺序性质的列表。
- 定义列表
- 用于解释名词的列表,包含了两种层次,一是名词,一是名词的解释。
示例:
标题
HTML建立表格
使用表格可以划分页面的布局
格式:
表格中的一行数据 |
--表格中的一行数据-->
表格中的二行数据 |
--表格中的一行数据-->
表格中的三行数据 |
--表格中的一行数据-->
示例:
标题
表格中的一行数据 | 表格中的一行数据 |
表格中的二行数据 | 表格中的二行数据 |
表格中的三行数据 | 表格中的三行数据 |
标签的属性border设置表格边框
caption设置表格标题
align设置表格在网页中的布局
width设置表格宽度
height设置表格高度
cellspacing设置表格各单元格之间距离
cellpadding设置单元格内部与文本之间的间距
bordercolor设置表格边框颜色
bordercolorlight设置表格亮面颜色
Bordercolordark设置表格暗面颜色
示例:
标题
表格中的一行数据 | 表格中的一行数据 |
表格中的二行数据 | 表格中的二行数据 |
表格中的三行数据 | 表格中的三行数据 |
标签的属性bgcolor设置背景颜色。
align设置行对齐方式。
valign设置单元格垂直对齐方式。
示例:
标题
表格中的一行数据 | 表格中的一行数据 |
表格中的二行数据 | 表格中的二行数据 |
表格中的三行数据 | 表格中的三行数据 |
和 | 标签的属性 bgcolor设置单元各背景颜色 rowspan设置单元格所占行数 colspan设置单元格所占的列数 align设置对齐方式 valign设置单元格垂直对齐方式 width设置单元格宽度 height设置单元格高度 示例: 标题 表格中的一行数据 | 表格中的一行数据 | 表格中的二行数据 | 表格中的二行数据 | 表格中的三行数据 | 表格中的三行数据 | rowspan colspan 第一行数据 | 第二行数据 | 第二行数据 | 第三行数据 | 第三行数据 | th 表格中的一行数据 | 表格中的一行数据 | --前者用来显示数据的名称,后者用来显示数据的内容。 --> 表格中的二行数据 | 表格中的二行数据 | 表格中的三行数据 | 表格中的三行数据 | HTML特殊表格 Rules设置单元格的特效 Fieldset设置特殊表格 示例: 标题 |