HTML知识总结

本文介绍了HTML的基础知识,包括标记的构成、基本结构、文字与图像的处理方法,如字体样式、文本对齐、列表、图像插入和移动元素的技巧。
摘要由CSDN通过智能技术生成

一.基础知识

1、 HTML简介HTML(Hypertext Markup Language),超文本标记语言,HTML利用各种标记来标识文档的结构以及标识超链接的信息。它是从SGML(Standard Generalized Markup Language,标准通用标识语言)中的一个子集演变而来的。

2、 HTML的标记组成HTML用于描述功能的符号称为“标记”。标记在使用时必须用尖括号“<>”括起来,而且是成对出现的,无斜杠的标记表示该标记的作用开始,有斜杠的标记表示该标记的作用结束。如<body></body>、<p></p>等

1) 单标记:有些标记能完整的表达标记里的意思,只须在尖括号中输入标记名即可,这类标记叫单标记。XHTML中要求单标记也必须闭合,即在标记“>”前添加斜杠。常见的单标记如<br />、<hr />等。2) 双标记:双标记有头有尾,且前面的标记与后面的标记保持一致,但在后面的标记前有斜线,语法形如:<标记>内容</标记>。例如:<p>段落</p>3) XHTML要求所有标记均为小写,且所有标记属性必须添加双引号4) 标记对不能交叉

3、 HTML基本结构<html>

<head>

<title>网页标题</title>

</head>

<body>

<!--下面是网页的正文-->

</body>

</html>

1) <title>标记对不能放在<body>标记对中,同理,其它表示内容的标记也不能放在<head>标记对中

2) <html></html>表示HTML语言,在<html></html>里面包含头部(<head></head>)和内容体(<body></body>)。

3) HTML注释表示为<!--注释内容-->

 

第二章 文字与图像

1、 设置文字字体、大小与颜色语法:<font face=”宋体” size=”1” color=”red”>文字</font>1) 设置文字的字体、大小、颜色需要使用<font>标签2) Face属性设置文字字体,多种字体用逗号隔开3) Size属性设置文字大小4) Color属性设置文字颜色,参数值可以是RGB颜色值,如#000000,也可以用颜色的单词表示,如red

2、 设置正文的标题语法:<h#>主题文字</h#>,其中“#”代表数字1-6中的任意一个,从数字1到数字6,标题大小排列由大到小(数字越大,标题字号就越小)。

3、 设置段落语法:<p>这里表示段落</p>

4、 强制换行与不换行1) 强制换行:<br />2) 强制不换行:<nobr />

5、 字体标记

1) 物理字体<b>…</b>设置成粗体    <i>…</i>设置成斜体<u>…</u>增加下划线    <s>…</s>增加删除线<sup>…</sup>设置成上标字体    <sub>…</sub>设置成下标字体<tt>…</tt>设置成打字机字体

2) 逻辑字体<em>…</em>强调文字    <strong>…</strong>字体加重<code>…</code>显示编程代码    <samp>…</samp>显示救命文字<kbd>…</kbd>显示键盘按键文字    <small>…</small>缩小文字<big>…</big>放大文字

6、 文字对齐

1) 文字对齐使用标签的align属性,例如:<p align=”#”>对齐文字</p>,其中“#”代码表示方位,可选择”left”(向左)、”right”(向右)、”center”(居中)。Align属性可用于<p>、<div>、<table>、<td>等标签。

2) 居中对齐可使用<center>标签,例如:<center>居中文字</center>7、 列表

1) 无序列表<ul type=”#”><li>表项一</li><li>表项二</li></ul>Type=”#”取值可为disc(默认,实心黑点)、square(实心黑方块)、circle(空心圆)

2) 有序列表<ol type=”#”><li>表项一</li><li>表项二</li></ol>Type=”#”取值可为A、a、I、i、1等

3) 定义列表<dl><dt>项目</dt><dd>描述一</dd><dd>描述二</dd></dl><dt>标签定义了定义列表中的项目,<dd>标签在定义列表中定义条目的定义部分,可以理解为对定义条目进行特征描述。

4) 无序列表、有序列表、定义列表间可以相互嵌套,但一定要注意嵌套时不能交叉

8、 其它方式修饰文本

1) 欲格式化文本:<pre>…</pre>

2) 代码样式斜体字渲染:<var>…</var>

3) 表示它所包含的文本对某个参考文献的引用:<cite>…</cite>

9、 图像

1) 插入图像基本语法:<img src=”#” />,其中#代表图像的URL路径,示例:<img src=”c.jpg” />

2) 图像无法显示时的提示信息,使用alt属性,如:<img src=”c.jpg” alt=”风景” />

3) 图像的大小:<img src=”c.jpg” width=”400px” height=”300px” />,width属性定义图像的宽度,height属性定义图像的高度

4) 图像和文字对齐:<img src=”c.jpg” align=”top” />,align属性的取值为top(顶部)、middle(中间)、bottom(默认,底部)

5) 图像的边框:<img src=”c.jpg” border=”0” />,border设置为0时表示图像不显示边框,否则设置成需要的边框大小

10、移动的字体和图片

1) 移动基本语法:<marquee>移动文字或图片</marquee>,默认是向左循环移动,移动范围在其父对象的有效区域内。

2) 文本移动的方向:<marquee direction=”#”>…</marquee>,其中#可以选择left、right、up、down

3) 文本的滚动循环:<marquee behavior=”#”>…</marquee>,其中#可以选择scroll(循环移动)、slide(只移动一个回合)、alternate(来回移动)。

4) 如果设置文本来回移动,还可以设置循环次数:<marquee loop=”#”>…</marquee>,其中#为代表循环的次数。

5) 文本的移动速度:<marquee scrollamount=”#”>…</marquee>,其中#设置移动的速度,取正整数。数值越大,速度越快。

6) 移动对象的延时:<marquee scrolldelay=”1000”>我走一走,停一停</marquee>,scrolldelay以时间为单位,用毫秒表示。

7) 移动的区域和背景:<marquee width=”100” height=”100” bgcolor=”pink”>…</marquee>

  • 8
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值