2.编写HTML代码-HTML标签基础课件_21世纪教育网-二一教育

资源简介

(共30张PPT)
2
HTML标签基础
Part two
3 超链接标签
1 标签的书写规范
2 HTML结构
目录
4 图片标签
5 路径
1.1基本语法概述
1.HTML标签是由尖括号<>包围的关键词，例如：
2.HTML标签通常是成对出现的，例如：和,这样的标签称为双标签
3.有些特殊的标签是单个标签（较少），比如
或者，这样的标签称为单标签
1、HTML语法规范
1.2标签关系
双标签关系可以分为两类：包含关系和并列关系
包含关系：

标题内容<br/>

1、HTML语法规范
并列关系：

内容

< title>网页标题

文件主体

2.HTML基本结构

2、HTML基本结构
标签名定义说明
… HTML标签页面中最大的标签，用于标识网页文档的开始与结束
… 文档头部用于标识网页文档的头部
< title>… 文档标题网页标题，内容显示在浏览器窗口的标题栏中
… 文档主体页面内容基本都放在BODY里面，用于标识网页文档的主体部分
2、dw介绍
3.HTML常用标记
3.1标签语义
学习标签最重要的是记住每个标签的语义。简单说就是指标签的含义，即这个标签是干嘛的
根据标签的语义，在合适的地方给一个合适的标签，可以让页面结构更清晰
9
格式:
功能:为代码添加注释内容,这些内容不会显示在网页中
格式:

功能:使标记之后的内容强制显示在页面下一行
强制不换行
自动换行
格式:

…

功能:将一段文字强制换成两个段落,换段之后的段落之间会多出一行空白行,可省略结束标记

,但它仍然属于容器型标记,可使用align属性来设置对齐方式>
格式:
< center>…
功能:将标记之间的文本进行居中显示
3.HTML常用标记
注释
标记
居中标记
注释
标记
换行标记
换段标记
10
格式:

…

功能:原样显示编辑排版好的文本内容
格式:…
功能:设置段落标题,以不同字号的黑粗体方式显示,自带换段功能。n的取值为1~6,n的取值越小,标题级别越大,字号越大,可使用 align属性来设置对齐方式
①格式:…功能:字体加粗
②格式:<1>…功能:字体倾斜
③格式:
功能:字体加下划线
④格式:…功能:字体加删除线
3.HTML常用标记
特殊字符标记
原样显示文本标记
段落标题标记
字体样式标记
< <
> >
& &
©
®
空格
3.HTML常用标记
标签除了语义定义外，还可以包含属性,
写作:<标签属性名1=“属性值1”属性名2=“属性值2...>，
属性可以简单设置该标签的一些表现属性，比如对齐，设置颜色，表格宽度等。但是后面学了CSS后，基本都采用css样式定义标签表现形式。
12
格式:

功能:插入一条水平分隔线
3.HTML常用标记
水平线标记
字体标记
属性功能默认值
size 水平分隔线的粗细,以像素为单位 2px
width 水平分隔线的宽度,以像素或百分比为单位页面宽度
align 水平分隔线的对齐方式居中显示
color 水平分隔线的颜色黑色
noshade 取消水平分隔线的3D阴影有3D阴影
格式:…
功能:设置文本的字体、字号和颜色
属性功能
face 设置字体类别
size 设置字体大小,取值为1-7,数值越大,字号越大,也可用“+“或““来设置相对值默认是3号字
color 设置字体颜色，可以用6位16进制数表示，也可以用英文表示。
…:在一个网页文档中只能出现一次,用于标识网页文档的主体部分,常用属性如下表
3.HTML常用标记
属性功能
bgcolor 设置背景颜色
background 设置背景颜图片
text 设置文本颜色
link 设置超链接颜色默认蓝色
vlink 设置已被点击的超链接颜色默认深棕色
alink 设置正在被点击的超链接颜色默认红色
leftmargin 设置页面左边距
rightmargin 设置页面右边距
topmargin 设置页面上边距
bottommargin 设置页面下边距
9.1日22级6班学到此
作业
2、标记常用属性应用（提供背景图片“Images下的Bg.png”，背景色为：599FF5，左右边距均为60Px，顶边距为20Px；文字为白色，宋体；链接颜色为白色，访问过的链接颜色为紫色，活动链接颜色为黄色；“作者单位”链接到空链接，“联系我”为空链接：
作业：完成下发的TASK2中的作业
要求：利用记事本编辑网页，按照要求保存为HTML文件，自己预览后提交。涉及到的颜色，有提示的根据提示设置，没有的自行设置，所有颜色都可以用英文或者6位16进制数表示。用16进制数表示时格式为#000000。有问题及时反馈练习。
22.6班9.8日学到此
22.2班9.13日学到此
作业
red（红）， white（白），black（黑），green（绿），yellow（黄），blue（蓝），purple（紫），gray（灰），brown（棕），，navy （丈青色）
颜色
颜色
16进制的GEB颜色表示方法：
#ff0000红色，#0000ff蓝色，#00ff00绿色
#00FFFF青色，#ffff00黄色，FF00FF紫色
#ffffff白色，#000000黑色
4.超链接
建立超链接
本地链接
网络链接
格式:< a href="链接目标“>链接源
功能:从一个网页指向另一个目标的链接关系
添加文本
超链接的属性
属性功能
href 设置超链接的链接目标,一般是一个URL地址,也可以是图片、电子邮件地址或一个文件等
target 取值 _blank,链接内容打开在新的测览器窗口中
取值 _parent,链接内容打开在包含链接的父框架页或窗口中
取值_self,链接内容显示在当前窗口中,此取值为默认值
取值_top,将框架中的链接目标内容,显示在没有框架的窗口中
取值“框架名称”,链接内容在“框架名称”的网页框架中打开
书签链接
电子邮件链接
4.超链接
建立超链接
本地链接
网络链接
链接目标为本地计算机的不同文件,常用相对路径来表示位置,也称为相对URL链接。相对路径分为根相对路径和文档相对路径。
根相对路径:以站点根目录“/”为起始目录。
文档相对路径:以当前文档所在路径为起始目录,进行相对文档查找,不用包括协议和主机地址信息,通常只包含文件夹名和文件名,甚至只有文件名。
链接到同一目录下,只输入要链接的文件名。
链接到下级目录中的文件,先输入目录名,然后加“/”,再输人文件名。
链接到上一级目录中的文件,先输入“../”,再输入目录名/文件名
本地链接
书签链接
电子邮件链接
站点根目录
images
pages
index.html
02.html
01.html
beijing.jpg
ima1.jpg
img2.jpg
1、在index.html文件中调用ima1.jpg的路径怎么写？
2、02.html要链接到index.html路径怎么写？。。。
4.超链接
建立超链接
本地链接
网络链接
链接目标为本地计算机的不同文件,常用相对路径来表示位置,也称为相对URL链接。相对路径分为根相对路径和文档相对路径。
根相对路径:以站点根目录“/”为起始目录。
文档相对路径:以当前文档所在路径为起始目录,进行相对文档查找,不用包括协议和主机地址信息,通常只包含文件夹名和文件名,甚至只有文件名。
链接到同一目录下,只输入要链接的文件名。
链接到下级目录中的文件,先输入目录名,然后加“/”,再输人文件名。
链接到上一级目录中的文件,先输入“../”,再输入目录名/文件名
本地链接
书签链接
电子邮件链接
P33页
绝对路径的盘符/,而不是\
/(斜杠）和\（反斜杠）
在widows和dos系统中用\表示文件的路径
在UNIX和linux中用的是/表示文件路径
在编程语言中路径用/，\表示转义字符。
C:\windows\notepad.exe
C:\\windows\\notepad.exe
作业
1、根据下图上文字建立网页： 2022级2班9.14学习到此
4.超链接
建立超链接
本地链接
网络链接
链接目标为远程网络服务器上的资源的超链接,常用绝对路径来表示链接目标的位置,需要填写完整的URL地址(包括协议名、主机名、文件所在主机上的路径以及文件名)
绝对路径:给出目标文件的完整URL地址,包括传输协议在内,一般格式为 protocol：
Hostname:port/path/。端口号为默认时可省略不写(http默认端口号为80,ftp默认端口号为21）
网络链接
书签链接
电子邮件链接
作业
1、根据下图上文字建立网页：
5.超链接
建立超链接
本地链接
网络链接
书签链接
电子邮件链接
b.建立书
签链接
a.建立
书签
书签链接
书签链接
建立书签
建立书签链接
格式:< a href=”#书签名”>链接源
功能:建立由链接源指向链接目标为书签的书签链接,若要从其他网页进行书签链接,则需要在链接目标中的“#书签名”前加上书签所属的网页文件名。
书签链接的目标为网页内的其他位置的超链接,使用时需要先建立书签,再为书签建立链接。
格式:< a name=”书签名">书签内容
功能:在书签内容位置处建立name属性中所指定的书签名,书签名是代表“书签内容”的
有意义的简短字符串,用于标明书签链接的位置
书签链接
5.超链接
建立超链接
本地链接
网络链接
书签链接
电子邮件链接
书签链接
书签（锚点）链接
格式:< a href=”#ID名”>链接源
功能:建立由链接源指向链接目标为ID名的书签链接,若要从其他网页进行书签链接,则需要在链接目标中的“#ID名”前加上书签所属的网页文件名。
ID名是整个网站的唯一性
以字母开头，可以用数字和一些字符，不要用中文命名
锚点链接
作业
如果要链接到另一个文件下的书签，书签链接为
链接原
1、根据下图上文字建立网页：
5.超链接
建立超链接
本地链接
网络链接
格式:< a href=" mailto：邮件地址 cc=抄送者邮箱& subject=邮件主题&body=邮件内容”>链接源
功能:使点击者启动默认的电子邮件客户端软件,并向指定的邮件地址编辑发送邮件中的电子邮件协议名称与电子邮件地址是必写项,邮件主题是可选项 bcc=密送者的邮箱地址
如果邮件地址后有两个及以上参数加上问号再跟第一个参数。参数直接用&隔开
电子邮件链接
书签链接
电子邮件链接
作业
1、根据下图上文字建立网页：
更改链接颜色
在body标签下设置链接颜色、
Text：设置文本颜色
Link：可连接文本颜色
Vlink：已被访问过链接颜色
Alink：正在被访问链接颜色
作业：完成下发的TASK4中的作业
要求：利用记事本编辑网页，按照要求保存为HTML文件，自己预览后提交。有问题及时反馈练习。

展开更多......

收起↑

请用微信扫码

2.编写HTML代码-HTML标签基础 课件

2.编写HTML代码-HTML标签基础 课件

2.编写HTML代码-HTML标签基础课件

2.编写HTML代码-HTML标签基础课件