HTML爱淘课学习笔记.docx - 冰豆网
HTML爱淘课学习笔记.docx
- 文档编号:10141008
- 上传时间:2023-02-08
- 格式:DOCX
- 页数:20
- 大小:29.17KB
HTML爱淘课学习笔记.docx
《HTML爱淘课学习笔记.docx》由会员分享,可在线阅读,更多相关《HTML爱淘课学习笔记.docx(20页珍藏版)》请在冰豆网上搜索。
HTML爱淘课学习笔记
爱淘课学习笔记
1、 html头部标记
(1) 网页标题标记
;
(2) meta标记
meta叫做元信息标记,这个元素提供的信息不显示在页面中,一般用来定义页面的关键字、页面说明、刷新等。
meta标记不需要结束标记,一个尖括号内就是一个meta内容,在一个html页面中可以有多个meta。
meta元素的属性有两个:
分别是name和http-equiv.
name——设置网页的关键字和描述信息等;
设置关键字:
如:
设置描述信息,如:
其他的,还可以设置网页作者,如:
http-equiv——定义网页语言的属性,当访客浏览你的网页时,浏览器会自动识别并设置网页中的语言;
设置语言:
(前半部分需要记忆,只需要更改charset的属性值就可以了,可以更改为中文、日文、英文等)。
设置网页在指定时间自动跳转:
即网页打开5秒钟之后,自动跳转到XX页面上。
2、 body标签
(1) body标签的属性
①设置网页背景色或网页背景图
body标签中用bgcolor来定义网页的背景颜色,属性值为16进制的颜色值。
直接写在body标签的尖括号里即可。
如:
body标签中用background属性来定义网页的背景图,如:
(建议图片地址使用相对路径)
②设置文字的颜色——通过body标签的text属性
如:
我们可爱的学校
预览网页,可发现字体的变化。
③设置超级链接中文字的颜色
超链接中未访问的文字的颜色默认为蓝色,访问过之后为暗红色。
超链接有三种状态:
未访问,正在访问,已经访问。
对应的属性值分别为link,alink,vlike.
如
此时浏览网页,未访问过的超链接的颜色为绿色;
alink和vlink的用法和link类似。
当然在body标签里还可以设置页面与浏览器边框的距离,包括上边距和左边距,上边距的属性为topmargin,左边距的属性为leftmargin,在默认的情况下,边距的值以像素为单位,也就是说,这两个属性直接指定整数值即可。
3、 绝对路径和相对路径
我们以调用图片作为背景图片来讲解相对路径的写法。
若图片与html网页文件在同一个文件夹里,则表示为 ;
若图片在和html同级的pic文件夹里,则表示为 ;
若图片在pic文件夹里,而html网页文件在和pic文件夹同级的web文件夹里,即仍然以html网页文件为坐标来寻找图片,但是需要返回到上一级,在html语言中,上一级的地址写法为“../”,有几个上级目录,就写几个“点点斜杠”,所以表示为
4、设置标题文字
标题字标记一共6个级别,h1到h6,其中h1代表最高级别,即标题文字的字体最大,h6是最低级别,代表标题文字的字体最小。
在boby标签中添加h1标签即可设置h1的标题文字。
如:
这是h1标题
这是h2标题
这是h3标题
这是h4标题
此时可以浏览网页,可看到各级标题文字大小不同,这时的标题文字都是靠左排列的,那么在标题标签中有align属性,有三个属性值:
left、center、right,可以调整标题的显示位置。
如:
这是h1标题
5、 文本样式基本标记
标记用来控制字体、字号、文字颜色等属性,是html中最基本的标记之一,掌握好font标记,是控制好网页文本样式的基础。
格式为 文本内容
font标签中的face属性——可以设置不同的文字,设置的字体效果只有在浏览器中安装相应字体后才可以正确显示出来,否则有些特殊的字体可能被普通的字体所代替。
因此在网页设计时应该尽量少使用特殊字体。
face属性的属性值为字体样式名称,如“宋体”、“黑体”等。
如:
文本内容
font标签中的size属性——设置文字的字号。
写法非常简单,只要给font标签增加一个size属性即可。
size的属性值有两种:
从1到7的整数,代表字体大小的绝对字号;从-4到+4的整数,则是字体相对于3号字体大小的放大和缩小字号。
font标签中的color属性——设置字体的颜色,属性值仍然为用16进制表示的颜色值。
因为html中的标签可以嵌套使用,所以通过把font标签嵌套在h1等标题标签中就可以设置标题文字的属性。
6、 文本格式化的标记
在html中,有一些文本格式化的标签用来设置文本以特殊形式显示,比如粗体、下划线、文字的上下标等等。
(1) 粗体标记
格式:
输入一对b标签,即显示内容,则b标签中的文字就会以粗体显示。
(2) 斜体标记
格式:
显示内容,可以嵌套使用,如:
显示内容
(3)下划线标记
格式:
显示内容
(4)sup标签——上标标签(下边标签sub的使用方法类似)
可以成对出现在一段文字的任意地方,并且可以嵌套使用,如果在一对sup标签里嵌套使用sup标签,则里面的sup标签会变成上标的上标。
如输入:
a^2+b^2=(a+b)^2-2ab
格式为:
a2+b2=(a+b)2-2ab
(上标标签常在数学公式中使用,下标标签在化学公式中常用)
(5)big标签——放大标签(缩小标签small的用法和big标签类似)
增大文本中的字号,所包含的文字都会在原来的字号上增加一级,如果有多个big标签作用于同一个文本,那么字号会被逐级放大。
如在有些文章的开头会把第一个字放大显示,以“这样的故事”为例,把“这”字放大3级显示,则表示为:
这样的故事。
7、 文本段落格式的标记
(1) 段落标记
表示段落的开始,没有结束标记,所以也表示段落的结束。
P标签有一个简单的属性即align属性,有两个属性值:
right、center。
(2) 换行标记
在不另起一段的前提下,将当前文本强制换行。
只要在准备换行的位置加入
即可。
(3) 禁止自动换行标记
在网页中若某一行的文本过长,浏览器会自动进行换行处理,如果不想换行,可以在这段文字的末尾使用nobr标记。
(4) 水平线标记
格式:
没有结束标记
hr标签的常用属性,分别是:
width属性——设置水平线的长度(属性值可以是像素值,也可以是窗口的百分比);
size属性——设置水平线的宽度(属性值只能为像素,直接写数值,不用加单位);
color属性——设置水平线的颜色;
align属性——设置水平线的对齐方式;
noshade属性——取消水平线的阴影(此属性没有值,只要在hr标签中添加此属性,则水平线就可以取消阴影了);
8、 插入特殊符号
一般情况下,特殊符号由“前缀&和字母名称和后缀;”组成,想在哪里插入特殊符号,就在那个位置输入特殊符号的代码就可以了。
(1) 插入空格标记—— (注意要加分号)
要输入多个空格,可以添加多个“ ”。
(2) 其他常用特殊符号及其代码见下表:
特殊符号
符号代码
&
&
<
<(lessthan的缩写)
>
>(greaterthan的缩写)
×
×
版权标记©
© (copyright的缩写)
注册商标®
® (register的缩写)
商标符号TM
™
(商标符号TM是trademark的缩写,只代表上标符号,不一定注册)
网页中的图片
(1) 支持的图片格式:
gif、jpeg、png。
(其中png有些浏览器不支持,所以常用前两种)
gif格式的简介:
使用256种颜色,常用于显示色调不连续或具有大面积单一颜色的图像,如:
网页的导航条、按钮、图标等。
优点:
①可以制作动态图像
②以交错的方式将图像呈现出来:
交错显示,即图像还没有下载完成时,浏览器先以马赛克的形式将图像显示出来,使浏览者能够看到图像的大致轮廓。
png格式:
属于无损压缩,具有gif的大部分优点,能够交错显示,支持透明图。
(2) 在网页中插入图像,使用img标签,只有开始标签,没有结束标签
Img标签的常用属性
①src属性——设置图像的位置
Img标签通过src属性来制定图像的位置,格式为:
【注】:
图像的地址可以用相对路径,还可以用网址作为绝对路径。
②alt属性——设置图像提示文字
作用一:
描述和说明图像,当网页中的图像下载完成,鼠标放在图像上时,我们就可以看到alt属性中的提示文字。
作用二:
若图像没有被下载成功,在显示图像的位置上就会出现提示文字。
③height和width属性——设置图像的高度和宽度、
属性值都是像素值,直接输入整数即可。
【注】:
在制作网页时,建议需要多大的图片就设计多大的图片,尽量不要调整其高度和宽度,以免显示失真。
④border属性——设置图像边框的宽度
属性值是像素值,只能够改变图像边框的宽度,但是不能改变其颜色,默认的颜色是黑色。
⑤vspace属性——设置图像的垂直边距
图像的垂直边距:
图片上方和下方距离文字或其他元素的距离。
【注】:
常用于图像和文字混合排版的网页。
例如:
一个网页中包含有一段文字和一张图片,若图片包围在文字中,默认的图片被紧紧的包围,通过vspace属性就可以设置图像的上方和下方与文字的距离。
Vspace的属性值也是像素。
⑥hspace属性——设置图像的水平属性
图像的水平属性:
图像在水平方向上距离文字或其他元素的距离。
⑦align属性——设置图像和文字的对齐方式
Align属性常用的属性值有以下几个:
bottom:
表示图像的底部和当前行的文字底部对齐;
top:
表示图像的顶端和当前行文字的顶端对齐;
middle:
表示图片水平中线和当前行文字的中线对齐;
left:
表示图片左对齐,文字在图片右侧排列;
right:
表示图片右对齐,文字在图片左侧排列。
【注】:
当图像设置了垂直边距时,浏览器就认为图片的真正高度是“图像的高度加上所设置的垂直边距”,所以在浏览图片时,如果同时设置了这两个属性,会看起来像没有对齐一样。
⑧给图片添加超链接——图片标签没有添加超链接的功能,只能用超链接标签,使用嵌套便签的方式,把图像标签嵌套在超链接标签中,即在图像标签的前端和后端分别添加一对.
如:
列表的作用
(1) 常用的列表种类:
有序列表、无序列表和定义列表。
①无序列表:
这种列表没有顺序,只是以符号作为分项标识。
分项符号有三种:
实心圆点符号、空心圆环符号、实心正方形符号。
②有序列表:
在列表中将每个列表项按数字或字母的顺序序号排列,一般用于需要按顺序排列的内容。
如展示教程的列表。
项目符号有5种:
数字、小写字母、大写字母、小写罗马字母、大写罗马字母。
③定义列表:
由定义条件和定义描述两部分构成。
这种列表一般用于在网页中显示需要解释的名词。
(不常用)
④菜单列表:
显示效果和无序列表相同。
(2) 有序列表
【注】:
列表标签与其他标签的不同:
列表标签需要嵌套使用。
①
标签是有序列表的父标签,
标签是子标签。
li标签内部的文字就是列表项文字,一个列表有多少个列表项,就在父标签ol中添加多少个子标签li。
如:
我们用有序标签列出早上四节课的内容
星期一早上的四节课
- 数学课
- 英语课
- 语文课
- 体育课
编辑后浏览页面,会自动显示出项目符号。
②有序列表标签的两个常用属性
type属性:
共有5个属性值:
数字、小写字母、大写字母、小写罗马字母、大写罗马字母。
默认的属性值是数字。
Start属性:
起始数值属性,可以设置列表的起始值。
(3) 无序列表
和有序列表很相似,只是父标签为
,子标签与有序列表的子标签相同。
只有一个type属性,默认值是实心圆点。
目录列表——父标签是
,子标签依然是
.
菜单列表——父标签是
【注】:
目录列表和菜单列表不仅显示效果与无序列表相同,并且功能也相同,所以都可以用无序列表来实现,所以这两个列表了解即可。
(4) 定义列表——用来在网页中显示专有名词。
由三部分组成,以实例来讲解:
这是一个定义列表
爱淘课
- 一个专门开发电脑视频教程的团队
【注】:
最外边的是dl标签是父标签,表示这是一个定义列表;dt标签中的内容就是专有名词,dd标签中的内容就是对专有名词的解释。
表格的使用
1、 表格的作用
表格的基本构成有三个标签:
table标签、tr行标签、td单元格标签。
表格有几行,就需要在
中输入几对tr标签,在tr标签中插入的td标签的对数,就是这一行中包含的单元格的数目。
【注】:
表格一般是用来布局网页的,所以默认的表格不显示边框的,可以通过table标签的border属性来定义表格边框的宽度。
(1) caption标签——表格的标题标签,格式为
表格的标题一般位于表格的第一行,一个表格只能含有一个标题。
使用方法:
在table标签的开始标签
下面输入一对标签,在capition中输入标题文字即可。 表头:
在我们工作的时候,会遇到类似工资单和成绩单这样的表格,都希望第一行的文字(如姓名)会突出显示,我们把第一行的文字称为表头。
表头标签用
| 表示,就会着重显示。(2) 表格的几个常用属性(针对table标签)
① width属性——设置表格的宽度;
② height属性——设置表格的高度;
③ align属性——设置表格的对齐方式(即表格在页面中的对齐方式,而不是文字在单元 格中的对齐方式)
④ bordercolor属性——设置表格的边框颜色,属性值为16进制的颜色值;
⑤ cellspacing属性——设置单元格之间的边距,属性值为像素;
⑥ cellpadding属性——设置单元格内容与单元格边框的距离,不要设置太大,以免表格走 形;
⑦ bgcolor属性——设置表格的背景色;
⑧ background属性——设置表格的背景图片,属性值为图片的路径。
(3) 表格的行属性(针对tr标签)
① align属性——设置文字的水平对齐方式;
② valign属性——设置文字的垂直对齐方式;
③ height属性——设置行高度;
④ bordercolor属性——设置行边框的颜色;
⑤ 行标签的bgcolor属性和background属性和表格标签的类似,但是行标签的这两种属性会覆盖已经设置好的表格标签的属性。
即距离目标元素最近的标签属性起作用。
2、单元格的属性
(1)宽度和高度属性与表格相同,都是width喝height;
【注】:
默认的情况下,若不设置单元格的高度和宽度,单元格就会根据内容自动调整;
如果某一行内的一个单元格设置了高度,那么这一行的其他单元格也会随着这个设置的高度而变化。
(2)colspan属性——单元格标签的水平跨度属性
在我们设计表格的时候,有时候需要让一个单元格横跨2个单元格的宽度,这时候如果只调节此单元格的width属性,那么与这个单元格同列的其他单元格也会随之调整,永远使这个单元格只占有一个单元格跨度。
所以就需要设置colspan属性,属性值是整数,就是单元格要水平横跨的列数。
(3)rowspan属性——垂直跨度属性
与colspan作用类似,只不过此属性是控制单元格在垂直方向上的跨度。
【注】:
使用垂直跨度属性时,需要注意此行是否是表格的最后一行,如果是最后一行,那么垂直跨度属性是不起作用的,因为垂直跨度属性计算跨度是从这一行开始。
(4)水平对齐方式和垂直对齐方式属性align和valign
使用方法和行标签相同。
(5)背景颜色属性bgcolor,背景图案属性bacgground
用法与行标签的相同。
(6)边框颜色属性bordercolor
【注】:
tr行标签的边框颜色属性是设置这一行内所有单元格的颜色,有时候需要单独设置某一个单元格的颜色,就需要使用td单元格标签的背景颜色属性。
(7)boedercolorlight属性——亮边框属性
可以把单元格设置成有点突出的感觉。
(8)bordercolorblack属性——暗边框属性
可以把单元格设置成有点凹陷的感觉
超链接的使用
(1)超链接从使用形式上分为:
外部超链接、内部超链接、下载链接、电子邮件链接、锚点链接等。
(2)外部超链接
即连接到其他网站,而不是网站内部的某个页面。
一般用于网站的友情链接页面。
格式为:
XX一下
(3)内部超链接
如:
返回主页面
【注】:
与外部超链接不同,这里的地址是相对地址。
(4)超链接标签的target属性——控制目标窗口的打开方式
有四个属性值,我们暂时记住常用的两个,即-self和-blank.
-self:
在当前页面中打开超链接,是默认的属性值;
-blank:
在新页面中打开超链接。
(5)锚点链接——可以使页面跳到指定位置;
①在当前页面建立锚点,在当前页面创建锚点连接
比如:
我们要在一个介绍书本的网页中方便使浏览者可以方便跳到书本的第二章。
使用方法:
步骤一:
设置name属性,建立锚点
在指定位置(本例中就是网页中介绍书本第二章的起始位置)输入一对超链接标签,并设置一个name属性,如:
.
Name属性——属性值就是锚点的名称,名称可以是数字或英文,或两者混合,英文最好区分大小写。
同一个网页中可以有多个锚点,但锚点的名字不能相同。
步骤二:
建立锚点链接
在网页的开始部分输入一对超链接标签:
跳转至第二章
【注】:
锚点链接与其他链接稍有不同,href的属性值为:
#加上锚点名称。
②在其他页面建立锚点,在当前页面创建锚点连接
步骤相同,不同的是在建立锚点链接时,需要把href的属性值改为:
网页名称加#加锚点名称。
如:
跳转至第二章
(6)用超链接下载文件
在网页的同级目录中,放入需要下载的文件,如一张图片,1.jpg;
在网页中添加超链接标签:
下载图片 ;
【注】:
href后边的属性值可以是相对路径,也可以是绝对路径。
浏览网页,点击下载图片,即可下载。
设置滚动效果
(1)设置滚动文字的标签——marquee标签
如:
【注】:
marquee标签不仅能够移动文字,还可以移动图片、表格等。
如移动和网页在同级目录下的图片1.jpg 的代码为:
①marquee标签的direction属性——控制滚动方向的属性
有四个值:
up:
向上滚动;down:
向下滚动;left:
向左滚动;right:
向右滚动。
②behavior属性——设置滚动方式的属性
有三个属性值:
scroll——循环滚动,是默认的属性值;
slide——只滚动一次就停止;
alternate——来回交替滚动;
③设置滚动速度
scrollamount属性和scrolldelay属性都可以控制滚动速度;
scrollamount属性——通过设置每次滚动时移动的长度来控制移动的速度,属性值为的单位是像素,如scrollamount=“3”;
scrolldelay属性——属性延迟属性,设置滚动的时间间隔,属性值的单位是毫秒,
如scrolldelay=“200”,若设置的数值比较大,会产生走走停停的效果。
④loop属性——设置滚动次数
默认情况下,滚动会不断的循环下次,如果希望滚动几次后停止,可以通过loop属性控制滚动次数,如:
loop=”5”;
⑤滚动范围属性
默认情况下,水平滚动的文字背景与文字通告、与浏览器窗口同宽。
如果想控制滚动范围,就需要设置wi
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
-
HTML
爱淘课
学习
笔记
冰豆网所有资源均是用户自行上传分享,仅供网友学习交流,未经上传用户书面授权,请勿作他用。