黑马程序员-------HTML基础知识

最新推荐文章于 2024-04-03 00:31:49 发布

原创最新推荐文章于 2024-04-03 00:31:49 发布 · 678 阅读

1 ·

CC 4.0 BY-SA版权

这篇博客详细介绍了HTML的基础知识，包括HTML的结构、常见标签、属性、路径、链接、列表、表格、表单、样式表以及HTML标准。还提到了HTML中的框架和Div+CSS布局，是学习HTML的全面指南。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

---------------------- <a href="http://edu.youkuaiyun.com"target="blank">ASP.Net+Android+IOS开发</a>、

<a href="http://edu.youkuaiyun.com"target="blank">.Net培训</a>、期待与您交流！ ----------------------

一、HTML简介

（1）HTML是什么？

HTML（Hyper Text Markup Language）超文本标记语言,就是用来描述网页的外观。

（2）HTML文档

一个HTML文档就是一个网页，由“标签”和“页面内容”组成。网页的文件格式是.html或者.htm

标签内部有属性信息

（3）HTML文件的结构

<html>-----------------------------------html文档开头标记

<head>---------------------------html文档头部标记

<title>--------------------html网页的标题标记

</title>

</head>

<body>----------------------------html文档的正文

</body>

</html>------------------------------------html文档的结束标记

（4）HTML文件的规范

1.标签大多都是成对出现的例如：<font> </font>

2.有个别单标签可以出现一次就闭合例如：<br / >

3.属性的值都用“”括起来，可以有多个属性，用空格分开，并且用键值对方式。例如：color=“red”

4.HTML标签一般使用小写。（XHTML中强制使用小写）

HTML 每一个标签可以理解成为一个基本块，所以一般成对使用，代表一块，但标签内部闭合，也是一块，只是这一块只包括自己的内容。

（5）HTML开发工具

有记事本、NotePad++、EditPlus等等。

二、HTML常见标签

1.<p>段落标签：表示另起一段

2. 空格标签：在html文件中，如果你的文本之间加入多个空格，显示中只出现一个，只能通过表格标记来增加多个空格。

3.<h1>标题标签，数字可以是1-6,，字号依次变小。使用标题标签自动换行并加粗。

4.<img>图片标签，一般里面添加src 等属性来让网页显示图片

5.<br>换行标签

6.文档注释，增加网页可读性。

7."&gt " ：表示>

8."&lt" ：表示<

9.& "amp"：表示&

10. <hr />水平线：把内容用水平线划分开

11. "&copy"：©© 版权标记

12." &quot"：“ 引号标记

13.®"&reg"：® 注册商标标记

14.<font>自体标签

15.<b>定义自体加粗

16.<i>让自体倾斜

17.<tt>定义打字机文本（等长等宽）

18.<u>给文本加下划线

19.<s>给文字添加删除线

20.<strong>强调文本并加粗（一般在搜索时容易查找）

21.<em>强调文本并倾斜

22.<code>定义计算机代码文本

23.<samp>定义计算机代码样本

24.<pre>预定义文本，可以保留你的文本格式

25.<marquee>让网页元素运动起来、可以设定方向

三、常见属性

1.Border ：图片或者表格的边框

2.Src ：图片的路径

3.Width ：长度属性

4.Height ：宽度属性

5.Alt ：图片的描述属性，在网页中如果鼠标指向图片，可以显示alt属性值的文字。

6.Align：元素的对齐位置，可选值（left,right,center）

7.Size ：字号大小（水平线中表示高度）

8.Color：颜色标签

9.Noshage：水平线属性，去掉水平线的阴影。

10.Face:font标签内的自体属性

11.Direction配合<marquee>标签，让网页元素想某一方向运动

12.Behavior配合<marquee>标签值有scroll、alternate、slide。

13.常见的body属性：text 代表所有body文本文字颜色、link链接颜色、Alink链接时的颜色、vlink 链接后的颜色、bgcolor背景颜色、background背景图片、bgproperties.

四、HTML中路径问题

1.绝对路径

绝对路径就是一个网页资源的绝对固定的地址，一旦资源文件的地址发生变化，则网页元素不会显示。

所以，网页的内容一般不用绝对路径，因为当网站发布时，里面的文件地址不改变，则网页里的很多用了绝对路径的元素不会显示。

2.相对路径

相对路径就是根据所运行文件的相对地址。

3.·的意义

··\表示父目录

·\表示当前目录

五、HTML链接（<a>标签）

（1）、超链接<a href=“URL”>页面元素</a>---URL要链接到的地址。

（2）、锚定标签<a href=”#name”></a> 要链接到的目的标签<a name=””></a>

（3）Target属性：表示要链接的地址打开状态（_blank 空白页 _self 自己 _top 置顶 _parent 父窗口）

六、HTML 列表

（1）无序列表（Unorder List）没有顺序列表（属性有type [disk实心圆、circle环状、square方框]）

格式<ul>列表标题

...........................

</ul>

（2）有序列表（Order List）有顺序列表（属性type可选值[a A i I ]以开头来派讯）

格式<ol>列表标题

........................

</ol>

（3）自定义列表、

格式<dl>

.......................

</dl>

七、HTML表格

（1）、为什么使用表格？

一般网页都用table表格进行布局，可以美化页面，是网页元素有序呈现

（2）表格的定义

表格标签<table>定义了一个表格

表格内分成三个层次<thead>、<tbody>、<tfoot>

<caption>定义表格的表格

<tr>定义一个行

定义了行之后，第一行的单元格一般用<th>表示表头。自动为黑体加粗

<td>定义一个单元格

（3）Table 常见属性

1、bgcolor（表格背景颜色）

2、border（表格表框，默认为0）

3、bordercolor（表格边框颜色）

4、cellspacing（单元格之间的间隔）

5、cellpadding（单元格边框与内容之间的间隔）、

6、width（单元格的宽度：可以是像素或者百分比）

7、height（表格的高度）

单元格常用属性

1、Align(水平对齐位置)：left、right、center

2、Valign(垂直对齐位置)：top 、bottom、midle

3、Bgcolor（单元格的背景颜色）

4、Width（单元格的宽度）可以是像素或者百分比

5、Height（单元格的高度）

6、Colspan（单元格的跨占的列数）

7、Rowspan（单元格跨占的行数）

8、Nowrap（禁止单元格过长内容换行显示）

八、HTML表单

（1）为什么使用表单？

是为了将用户提供的数据通过表单，提交到服务器，来完成交互，也就是专门向服务器提供数据的。

例如：163邮箱

客户端：请求登录，通过表单填写账户信息，进入邮箱主页后，需要输入用户名和密码，当用户输入完毕后，点击“登录”按钮，这时，浏览器会将数据提供到服务器，在由服务器验证登录信息以及处理相应的信息，把请求的结果返回给浏览器，这是用户就可以在浏览器端看到页面了，这也是所说的B/S模式。

（2）表单的定义

<form>标签：定义一个表单的开始

表单内部分元素都写入type=””的引号中。

（3）表单的属性

Action =”URL”：action属性就是定义把页面的数据提交到哪里的。Url提交到的地址

Method=[post、get] ：method属性就是定义表单的提交方式。

其中get是默认值，通过地址栏的参数进行提交（地址栏显示：地址？参数=值）

Post是通过报文的方式进行提交，浏览器的地址栏看不到提交到的数据

（4）表单的成员

1、以下元素定义在input标签内。（例如：<input type=”text”></input>）

Text ：定义了一个文本框（size、value、maxlength、readonly、disabled）

Password：定义一个密码框

Submit：提交按钮标签

Reset:重置按钮标签

Button 按钮标签

Image图像标签：可以提交数据差不多相当于submit按钮并且同时把坐标也提交上去（表单内图像标记<input type=”image”></input>；网页内图像直接用<img/>）

File 文件标签

Radio 单选框标签（以name标签分组来进行单选，以value 属性来命名提交选中的值）

Checkbox 复选框标签（name属性的值不一样，所以可以不用values属性）（checked、name、value）

2、一下标签不定义在input中，直接以本标签定义。

1）、Textarea：定义一个文本域<textarea>一个文本域</textarea>

Textarea的属性： cols 与rows属性是文本域用来定义行数和列数

2）、Select：定义一个列表（相当于WindowsForm中的ComboBox 和ListBox）

列表定义格式

Select 的属性：size（要显示的项数，size=1时相当于ComboBox）、multiple（多选相当于ListBox）

Option的属性：value、selected

3）Label 标签按钮（for）

for属性的用法是<label for=”控件id”>表示该标签为哪个控件服务。光标自动显示到该控件。

（5）表单元素的属性

其中name 与value属性是用来以键值对方式提交数据的。（提交数据不能没有这两个属性）

九、HTML中的<div>与<span>标签

<div>标签是代表HTML文档中的一个块属性，它的内容自动换行，使文档可以分成独立的，不同的块。

<span>标签是行内标签，可以针对一行内容中的某个元素，并改变其样式。

这两个标签一般与CSS同时使用。

十、HTML中的样式表

（1）、样式的作用

样式可以美化网页，一般要给网页元素添加一些样式，可以写入元素标签内<style格式>，但是，如果样式标签太多有可能造成网页代码混乱，因此，可以把美化网页的代码单独写入一个文件中，当程序运行时，只需引用相关的文件就可以了，很方便，而且，可以分工合作，css文件可以由美工来做，这样，程序员也可以很好的与美工合作完成了。

（2）、定义样式的格式

1、行内样式：在元素标签中定义样式（样式名：值）

例如：<div style=”background-color：red ”>...</div>

如果有多个属性，则用；隔开。

2、内嵌样式：在<head>标签中定义的样式

1）标签选择器：网页内所以的定义样式的标签。

例如

{

...................

}

在网页中，所有的<p>标签都具有该样式。

2）组合选择器：网页内两个或以上标签用相同的样式。例如：

ul 、ol

{

List-style-type:none

}

3）Id选择器：自己命名(#开头），在标签内通过id=”name”来引用样式。

4）Class选择器：自己起一个名字（·开头），在标签内通过class=”name”来引用样式

格式<head>

样式内容...................

</style>

5）标签+类选择器：只针对该标签的分类选择器

例如：

P .class1

{

Font-family：隶书；

Color：red；

}

P .class2

{

Font-family：楷体；

Color：green；

}

6）伪选择器：针对a标签的超链接选择的样式；

a:link默认样式、a:active超链接点击时的样式、a:hover鼠标移动过来时的颜色、a:visited点击之后的样式。

3、外部样式：

引用外部·CSS文件<link type=”text/css” rel=”stylesheet” href=”css文件名”/>

4、样式优先级

行内样式>id选择器>class选择器>标签

十一、CSS样式常见的属性

（1）background-color：背景颜色（red、yellow、pink等等）

（2）Width：100px (像素值)

（3）Height：100px

（4）Border-width：边框的宽度

（5）Border-style ：（dotted点状、solid实线、dashed虚线、double双线）

（6）Border-color：边框颜色

（7）上面的边框也可以单独区分来设置：例如border-left-style：border-left-color等等

（8）Font-family：字体（华文行楷、宋体、隶书.......）

（9）Font-size：字号大小

（10）Color：字体颜色

（11）Background-image：url(地址..)背景图片（如果使用相对百分比作为单位，也要保证父类标签的单位固定或者也是100%）

（12）Font-weight：（bold加粗）

（13）Text-decoration：文字修饰（none无、underline下划线、overline上线）

（14）在<div>或者<span>中Display ：（none隐藏、block以块形式存在、inline以行内形式存在）

在<div>标签中：如果设置display的属性为inline就相当于<div>

在<span>标签中：如果设置了display的属性为block就相当于<span>

（15）Cursor ：设置鼠标显示样式可以自定义。（cursor :url(地址)）也可以选择系统自带样式（pointer、wait）。

（16）List-style-type：（none去掉列表项目符号，square 方框，circle圆圈）

（17）Float:列表浮动样式（left 、right）

（18）Border-collapse：合并表格边框；

十二、HTML标准

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”“

http://www.w3.org/TR/xhtml/DTD/xhtml1-transltional.dtd”>

十三、Div+Css

HTML里布局用的最多的，其中常用属性

Float:浮动属性：使用该属性可以改变元素的

Clear：是否允许左右两边有浮动元素

Clear可选值[ none默认为无、both两边都不允许出现浮动元素、right仅右边不允许出现浮动元素、left仅左边不允许出现浮动元素]

Position：static（默认）、absolute（定义一个元素的绝对位置）、fixed（固定一个元素的位置）、relative（一个元素相对于另一个元素的位置）定义元素的位置。Position元素与top、left一起使用来定义距离margin的位置。

Z-index：控制层次关系（控制曾与曾的高度）表示元素的优先级例如z-index：1的优先级高于z-index：0因此，处于该元素的上方。

Margin：设置多有外边距属性。

十四、HTML中的框架<frameset>

（1）、定义格式：

<frame>

</frames>

</frameset>

（2）Frameset不能与body同时使用。

（3）Frameset属性：

[cols=””| rows=””]>cols定义的列框架，rows定义的行框架

（4）Frame属性：

Name;定义每个框架名字；

Noresize:禁止框架被拖动改变大小。

Scrolling:设置滚动条（yes一直有滚动条、no一直没有滚动条、auto自动在需要时加入滚动条。）。

（5）Frame与Iframe：

可以单独使用，不配套<frameset>，如果与<frameset>搭配使用，则并且必须在<body>标签内。

Frame则必须搭配<frameset>才能使用，并且不能出现<body>标签。

不嵌套在<framset>中的iframe可以随意使用，也可以嵌套在表格中。使用比较灵活。

Iframe可以设置自己的属性例如长度、宽度，则frame要在frameset中设置。

（6）Iframe的属性

Height；width ；frameborder；name；

（7）Frameset 可以嵌套使用

例如<frameset rows=”50%,50%”> 把页面分成两行

<frame src=””></frame> 第一行

<framset cols=”30%,30%“> 第二行又分成了两列

<frame></frame> 第一列

<frame></frame> 第二列

</frameset>

---------------------- <a href="http://edu.youkuaiyun.com"target="blank">ASP.Net+Android+IOS开发</a>、

<a href="http://edu.youkuaiyun.com"target="blank">.Net培训</a>、期待与您交流！ ----------------------