HTML基础教程-优快云博客

本文链接：https://blog.youkuaiyun.com/Carlos__z/article/details/37741537

1）HTML的概念

HTML(HypertextMarkup Language，超文本标注语言) ，(这是曾经的一道笔试题)

HTML就是一个标准，是一套标记。比如：加粗：<b>广州传智</b>

2）一个HTML文件的结构标记

<html>

<head>

<title>凤凰网首页</title>

</head>

<body>

99%的内容都放在这里

</body>

</html>

<html></html>是网页中最大的一对标记，告诉浏览器如何给我翻译这个文件的内容。<html>中包含两大标记<head>和<body>。

<head></head>中的内容不可见，一般用于特殊功能。

<body></body>是网页的主体内容。这里的内容都是用户可见的。

<title></title>是网页标题，只能填写纯文本。

注意：如果这个<meta>标记，设置的不合格，会造成乱码的问题。

—————————————————————————————————————————————————————————————————————————————

字体修饰标记

加粗：<b>内容</b>

斜体：<i>内容</i>

下划线：<u>内容</u>

下标：<sub></sub>

上标：<sup></sup>

字体颜色、大小：<font size=“字号大小，取值1-7” color=“颜色单词”>内容</font>

例如：<font size=”6” color=”blue”>大家好</font>

<div>和<span>

<div></div>和<span></span>标记，没有任何意义，但在网页中，又是使用最多的标记。

这两个标记，基本上没有太多的属性。

<div>和<span>这两个标记，一般要结合CSS来实现效果，或者说，DIV+CSS来实现各种样式。

块元素和行内元素(详细在CSS中再讲)

块元素(标记)：是块元素的前后，会自动插入一个换行符。块元素会另起一行进行排版。

比如：<div>、<p>、<ul><ol><dl>、<pre>、<h1>、<h2>等

行内元素(标记)：行内元素的高度和宽度由内容决定。多个行内元素将排在同一行，不会另起一行进行排版。

比如：<font><b><i><u><a><span>等

————————————————————————————————————————————————————————————————————————————

滚动字幕标记

常用属性：

Direction：滚动的方向，取值：left、 right、up、 down

Behavior：滚动的方式，取值：alternate(弹动)、scroll(滚动)、slide(滚动一次)

bgColor：背景颜色

width：滚动的宽度

height：滚动的高度

align：水平对齐方向，取值：left center right

scrollAmount：滚动的步长值，值越大，滚动的越快。

scrollDelay：两次滚动间的停留时间

<marqueedirection="up" width="450" height="300"bgcolor="#FFFF99" behavior="scroll" scrollamount="10"scrolldelay="1000"></marquee>

2、超级链接的标记<a></a>，双边标记，是行内元素

常用属性：

Href：目标URL，如：href=http://www.sina.com.cn href=“about/index.html”

Name：主要用于设置一个锚点的名称。

Target：设置目标页面打开方式。

_blank：在新窗口中来打开目标文件，原来的窗口不关闭

_self：在当前窗口中来打开目标文件，原来窗口中的内容将被替换掉。

_top：在最顶层窗口中来打开目标文件，常用于“框架技术”中

_parent：在父级窗口中来打开目标文件，常用于“框架技术”中

例如：<a href=“http://www.sina.com.cn”></a>

————————————————————————————————————————————————————————————————————————

6、锚点链接：实现在一个网页的不同部分进行跳转

第一步：先定义一个锚点(记号)

<a name=“top”></a> 中间一般不写内容

第二步：链接到定义的锚点所在的位置

地址栏中的地址显示：http://www.sina.com.cn/about/index.html#top

——————————————————————————————————————————————————————————————————————————

图片标记

单边标记：<img>

常用的属性

Src：指图片的路径，如：src=“images/bg.gif”

Width：指图片的宽度，不加单位。Width=400

Height：指图片的高度。

Align：指图片的水平对齐方式，取值：left center right

Border：图片的边框线的粗细

Alt：如果图片不显示时，将显示alt指定的内容

Hspace：指图片左右的边距

Vspace：指图片上下的边距

Title：指定图片的提示信息，有利于SEO优化(关键字优化)

说明：title是一个公共的属性，任何标记都有title属性。

注意事项：

（1）如果要想保证图片等比例缩放，请只设置width和height其中一个。

（2）如果想实现图文混排的效果，请使用align属性，取值为left或right。

————————————————————————————————————————————————————————————————————

<meta>

（1）<meta>标记的概念

（2）<meta>的两个属性

http-equiv：相当于http的文件头信息，告诉浏览器如何正确的显示网页的内容。

name：描述信息，指定网页关键字、网页描述、作者、版权信息

（3）常用的<meta>设置

设置网页的字符集：<meta http-equiv=“content-type” content=“text/html;charset=utf-8” />

网页自动刷新：<meta http-equiv=“refresh”content=“3” /> 3秒自动刷新网页

延迟一定时间后跳转：<meta http-equiv=“refresh” content=“3;url=http://www.sina.com.cn” />

设置网页的关键字：<meta name=“keywords” content=“网站建设,广州网站,网站开发”/>

网页描述：<meta name=“description” content=“描述信息” />

网站作者：<meta name=“author” content=“广州传智” />

1、表格的结构

<table>

<tr>

</tr>

<tr>

</tr>

</table>

表格结构的说明：

<table>是表格标记，里面包含<tr>行标记；

<tr>代表一个行

<td>或<th>代表一个单元格(列)，<th>标题单元格(内容居中加粗显示)，<td>普通单元格

2、<table>的常用属性

Width：表格的宽度

Height：表格的高度

Border：表格的边线粗细

Bordercolor：表格的边线颜色

Align：表格的水平对齐方式，取值：left center right

Cellpadding：指单元格边线到内容间的距离(内边距)

Cellspacing：指两个单元格之间的距离(外边距)

bgColor：表格背景色

background：表格的背景图片

注意：在HTML中所有的属性值都不加px单位，但在CSS中所有数值都必须加单位。

3、<tr>的常用属性

Height：一行的高度

bgColor：行的背景色

align：一行的内容水平居中显示，取值：left、center、right

valign：行的内容垂直居中，取值：top、middle、bottom

4、<td>或<th>的属性

Width：单元格的宽度

Height：单元格的高度

bgColor：背景色

background：背景图片

align：单元格内容水平对齐

valign：单元格内容垂直对齐

rowspan：合并行的单元格(跨行合并)

colspan：合并列的单元格(跨列合并)

图片热点(图像地图)

图像地图的标记<map>

<map>

<areashape=“热点的形状” coords=“热点在图片上的坐标” href=“URL” alt=“提示信息” />

</map>

<map>标记的属性

Name：指定热点地图的名称；

Id：指定热点地图的名称；

<area>标记的属性

Shape：热点的形状，取值：rect(矩形)、circle(圆形)、polygon(多边形)

Coords：热点形状的坐标，根据热点形状来确定坐标值。

Rect(矩形)：coords=“x1,y1,x2,y2”，左上角和右下角坐标

Circle(圆形)：coords=“x,y,r”，圆心坐标和半径

Polygon(多边形)：coords=“x1,y1,x2,y2,x3,y3,xN,yN”