HTML、CSS知识点总结

最新推荐文章于 2024-05-27 00:00:00 发布

喜欢c罗的小菜鸡

最新推荐文章于 2024-05-27 00:00:00 发布

阅读量1.2k

点赞数 3

分类专栏：前端学习笔记

本文链接：https://blog.csdn.net/qq_41184508/article/details/95897441

版权

学习笔记同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

前端

1 篇文章 0 订阅

订阅专栏

文章目录

一，HTML+CSS基础

一，HTML+CSS基础

1-1 HTML和CSS的关系：

学习web前端开发基础技术需要掌握：HTML、CSS、JavaScript语言。下面我们就来了解下这三门技术都是用来实现什么的：

HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。
CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。
javaScript是用来实现网页上的特效效果。如：鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻（新闻图片）的轮换。可以这么理解，有动画的，有交互的一般都是用JavaScript来实现的。

1-2 HTML的结构：

1.2.1 学习要点：

理解html的结构
学习标签
标签和元素

1.2.2 HTML的固定结构：

<!DOCTYPE html>
<html lang="en">
 <head>
	<meta charset="UTF-8">
	<title></title>
 </head>
	<body>
		<h1>This is the Main Heading</h1>
		<p>This text might be an introduction to the rest of the page. And if the page is a 
			 long one it might be split up into several sub-headings.<p>
		<h2>This is a Sub-Heading</h2>
		<p>Many long articles have sub-headings so to help you follow the structure of what 
			 is being written. There may even be sub-sub-headings (or lower-level headings).
			 </p>
		<h2>Another Sub-Heading</h2>
		<p>Here you can see another sub-heading.</p>
	</body>
</html>

代码讲解：

<html></html>称为根标签，所有的网页标签都在<html></html>中。
<head> 标签用于定义文档的头部，它是所有头部元素的容器。头部元素有<title>、<script>、 <style>、<link>、 <meta>等标签，头部标签在下一小节中会有详细介绍。
在<body>和</body>标签之间的内容是网页的主要内容，如<h1>、<p>、<a>、<img>等网页内容标签，在这里的标签中的内容会在浏览器中显示出来。

在<head></head>中使用的标签

<head>
<title>...</title>
<meta>
<link>
<style>...</style>
<script>...</script>
</head>

声明部分：主要作用是用来告诉浏览器这个页面使用的是哪个标准。<!doctype html>是HTML5标准。
head部分：将页面的一些额外信息告诉服务器。不会显示在页面上。

头标签都放在头部分之间。包括：<title>、<base>、<meta>、<link>

<title>：指定整个网页的标题，在浏览器最上方显示。
<base>：为页面上的所有链接规标题栏显示的内容定默认地址或默认目标。
<meta>：提供有关页面的基本信息
<body>：用于定义HTML文档所要显示的内容，也称为主体标签。我们所写的代码必须放在此标签內。
<link>：定义文档与外部资源的关系。

小结：

HTML文档是文本文档
HTML使用标签为包含在其内的内容提供结构信息
标签经常与元素互相换用
标签通常成对出现。起始标签标示一段内容的开始；结束标签表示它的结束
起始标签可以附带特性，特性告诉我们更多关于元素内容的信息
特性由特性名称和特性值组成
信息HTML就要学习哪些标签可用，它们有什么作用以及可以用在何处

1.3HTML的文本：

本节内容：

标题和段落
粗体，斜体，强调
结构化标记和语义化标记

1.3.1标题和段落

标题

标题（Heading）是通过 <h1> - <h6> 标签进行定义的.

<h1>定义最大的标题。<h6> 定义最小的标题。

实例

<h1>这是一个标题。</h1> 
<h2>这是一个标题。</h2> 
<h3>这是一个标题。</h3>

注释: 浏览器会自动地在标题的前后添加空行。

注释：默认情况下，HTML 会自动地在块级元素前后添加一个额外的空行，比如段落、标题元素前后。

标题很重要
请确保将 HTML 标题标签只用于标题。不要仅仅是为了生成粗体或大号的文本而使用标题。

搜索引擎使用标题为您的网页的结构和内容编制索引。

因为用户可以通过标题来快速浏览您的网页，所以用标题来呈现文档结构是很重要的。

应该将 h1 用作主标题（最重要的），其后是 h2（次重要的），再其次是 h3，以此类推。

段落

HTML 段落
HTML 可以将文档分割为若干段落。
默认情况下，浏览器会在显示段落时另起一行并与后续段落保持一定距离

段落是通过 <p> 标签定义的。

实例

<p>这是一个段落</p>
<p>这是另外一个段落</p>

这是一个段落

这是另外一个段落

空白

对于空白，设计人员在写代码时为了增强代码的可读性会利用空格或者换行的形式来编写代码。
当浏览器遇到两个以上的空格，只会显示一个空格，同样换行也是一个空格

换行符和水平线

<br/>可以在文本中加入换行
<hr/>在不同主题中插入水平线来分割

1.3.2文本的格式化（语义化标记）：

HTML 文本格式化
HTML 中存在一些格式化文本的标签，它们可以被直接使用，而不用您再去写样式进行调整。

实例

<b>加粗文本</b>

<i>斜体文本</i>

这是 <sub>下标</sub> 和 <sup>上标</sup>

HTML 格式化标签
HTML 使用标签 <b>(“bold”) 与 <i>(“italic”) 对输出的文本进行格式，如：粗体 or 斜体

这些 HTML 标签被称为格式化标签（请查看底部完整标签参考手册）。

lamp 通常标签 <strong> 替换加粗标签 <b> 来使用， <em> 替换 <i>标签使用。
然而，这些标签的含义是不同的：
<b> 与<i> 定义粗体或斜体文本。
<strong> 或者 <em> 意味着你要呈现的文本是重要的，所以要突出显示。
现今所有主要浏览器都能渲染各种效果的字体。不过，未来浏览器可能会支持更好的渲染效果。
HTML 文本格式化标签
标签描述

<b>			定义粗体文本
<em>		定义着重文字
<i>	 		定义斜体字
<small>		定义小号字
<strong>	定义加重语气
<sub>		定义下标字
<sup>		定义上标字
<ins>		定义插入字
<del>		定义删除字

HTML “计算机输出” 标签
标签描述

<code>	定义计算机代码
<kbd>	定义键盘码
<samp>	定义计算机代码样本
<var>	定义变量
<pre>	定义预格式文本

HTML 引文, 引用, 及标签定义
标签描述

<abbr>			定义缩写
<address>		定义地址
<bdo>			定义文字方向
<blockquote>	定义长的引用
<q>				定义短的引用语
<cite>			定义引用、引证
<dfn>			定义一个定义项目。

实例

<html>
	<head>
		<title>Text</title>
	</head>
	<body>
		<h1>The Story in the Book</h1>
		<h2>Chapter 1</h2>
		<p>Molly had been staring out of her window for about an hour now. On her desk, lying between the copies of <i>Nature</i>, <i>New Scientist</i>, and all the other scientific journals her work had appeared in, was a well thumbed copy of <cite>On The Road</cite>. It had been Molly's favourite book since college, and the longer she spent in these four walls the more she felt she needed to be free.</p>
		<p>She had spent the last ten years in this room, sitting under a poster with an Oscar Wilde quote proclaiming that <q>Work is the refuge of people who have nothing better to do</q>. Although many considered her pioneering work, unraveling the secrets of the llama <abbr title="Deoxyribonucleic acid">DNA</abbr>, to be an outstanding achievement, Molly <em>did</em> think she had something better to do.</p>
	</body>
</html>

小结

HTML元素用来描述页面的结构（例如标题和段落）
HTML元素还提供语义信息（例如在什么位置着重强调，所使用的的缩略词定义，给定的文本何时是引用）

1.4HTML的列表

本节内容

有序列表
无序列表
自定义列表

1.4.1有序列表

有序列表也是一列项目，列表项目使用数字进行标记。有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。

有序列表适合各项目之间存在顺序关系的情况。

 <ol>

使用<ol>元素来创建有序列表

<li>

列表的每个项目都被置于<li>和</li>之间

1.4.2无序列表

无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。

无序列表适合成员之间无级别顺序关系的情况。

无序列表使用 <ul> 标签，每个项目也是由<li></li>包裹

1.4.3自定义列表

自定义列表不仅仅是一列项目，而是项目及其注释的组合。

自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。也就是<dt>包裹的是术语，而<dd>表示的是对术语的具体定义和内容

自定义列表中的一个术语名可以对应多重定义或者多个术语名对应同一个定义，如果只有也术语名或者只有定义也是可行的，也就是说 <dt> 与 <dd> 在其中数量不限、对应关系不限。

嵌套列表

- 可以在中加入另一个列表来创建子列表，或者叫做嵌套列表

实例

<html>
	<head>
		<title>Lists</title>
	</head>
	<body>
		<h1>Scrambled Eggs</h1>
		<p>Eggs are one of my favorite foods. Here is a recipe for deliciously rich scrambled eggs.</p>
		<h2>Ingredients</h2>
		<!--无序列表--> 
		<ul>
			<li>2 eggs</li>
			<li>1tbs butter</li>
			<li>2tbs cream</li>
		</ul>
		<h2>Method</h2>
		<!--有序列表-->
		<ol>
			<li>Melt butter in a frying pan over a medium heat</li>
			<li>Gently mix the eggs and cream in a bowl</li>
			<li>Once butter has melted add cream and eggs</li>
			<li>Using a spatula fold the eggs from the edge of the pan to the center every 20 seconds (as if you are making an omelette)</li>
			<li>When the eggs are still moist remove from the heat (it will continue to cook on the plate until served)</li>
		</ol>
		<!--自定义列表-->
		<dl>
	 		<dt>Coffee</dt>
 			<dd>- black hot drink</dd>
 			<dt>Milk</dt>
 			<dd>- white cold drink</dd>
 		</dl> 
		<!--嵌套列表-->
		<ul>
			<li>Mousses</li>
			<li>Pastries
				<ul>
					<li>Croissant</li>
					<li>Mille-feuille</li>
					<li>Palmier</li>
					<li>Profiterole</li>
				</ul>
			</li>
			<li>Tarts</li>
		</ul>
	</body>
</html>

在浏览器中的显示

Lists

Scrambled Eggs

Eggs are one of my favorite foods. Here is a recipe for deliciously rich scrambled eggs.

Ingredients

2 eggs
1tbs butter
2tbs cream

Method

Melt butter in a frying pan over a medium heat
Gently mix the eggs and cream in a bowl
Once butter has melted add cream and eggs
Using a spatula fold the eggs from the edge of the pan to the center every 20 seconds (as if you are making an omelette)
When the eggs are still moist remove from the heat (it will continue to cook on the plate until served)

Coffee

- black hot drink

Milk

- white cold drink

Mousses
Pastries
- Croissant
- Mille-feuille
- Palmier
- Profiterole
Tarts

小结
- HTML中有三种列表：有序列表、无序列表、定义列表
- 有序列表使用数字编号
- 无序列表使用项目符号
- 定义列表用来定义专业术语
- 列表可以嵌套在其他列表中

1.5HTML的链接

本节内容

HTML链接定义
HTML超链接
HTML空链接

1.5.1 HTML 链接

HTML链接

HTML 使用超级链接与网络上的另一个文档相连。几乎可以在所有的网页中找到链接。点击链接可以从一张页面跳转到另一张页面。

1.5.2 HTML 超链接（链接）

HTML使用标签 <a>来设置超文本链接，是可以从一个页面指向另一个目的端的链接。

超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。

当您把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。

在标签<a> 中使用了href属性来描述链接的地址。

默认情况下，链接将以以下形式出现在浏览器中：

一个未访问过的链接显示为蓝色字体并带有下划线
访问过的链接显示为紫色并带上下划线
点击链接时，链接显示为红色并带上下划线

注意：如果为这些超链接设置了CSS样式，展示样式会根据CSS的设定来显示

1.5.2.1 绝对url

url

url的全称是统一资源定位器。每个网页都有各自的url，网页的url就是在访问网站时需要输入网站的地址

绝对url

绝对url以网站的域名开头，域名后面可以指定具体页面的路径，如果没有指定，网站则显示其主页，通常用来访问其他网站

1.5.2.2 相对url

相对url可以用于为网站内部页面之间建立链接。它用一种简单的方式告诉浏览器如何查找文件。
相对URL（relative URL）以包含URL本身的文件夹的位置为参考点，描述目标文件夹的位置。如果目标文件与当前页面（也就是包含URL的页面）在同一个目录，那么这个文件的相对URL仅仅是文件名和扩展名。

如果目标文件在当前目录的子目录中，那么它的相对URL是子目录名，后面是斜杠，然后是目标文件的文件名和扩展名。

如果要引用文件层次结构中更高层目录中的文件，那么使用两个句点和一条斜杠。可以组合和重复使用两个句点和一条斜杠，从而引用当前文件所在的硬盘上的任何文件。

引用同目录：文件名+扩展名
引用子目录：/+文件名+扩展名
上层目录：每上一级就 ../+ 文件名+扩展名
根相对URL：/根文件夹/+文件名+扩展名

一般来说，对于同一服务器上的文件，应该总是使用相对URL，它们更容易输入，而且在将页面从本地系统转移到服务器上时更方便，只要每个文件的相对位置保持不变，链接就仍然是有效地。

1.5.3HTML 空链接

HTML 空链接：指指向链接后，鼠标变成手形，但单击后仍停留在当前页面。

临时加的空链接，主要为了能更好的看到最终的效果。

基本语法：

<a href="#">链接文字</a>

其中“ # ”表示空链接。

HTML 链接语法
链接的 HTML 代码很简单。它类似这样：:

<a href="url">Link text</a>

href 属性描述了链接的目标。.

提示: “链接文本” 不必一定是文本。图片或其他 HTML 元素都可以成为链接。

1.5.3.1HTML 链接 - target 属性

使用 Target 属性，你可以定义被链接的文档在何处显示（在新的窗口打开，还是在原有的窗口中打开）。
提示：默认的被链接文档会在原有的窗口中打开的。如果将 target 属性设置为 “_blank” 则文档就会在新窗口打开。

1.5.3.2HTML 链接 -name 属性

name 属性规定锚（anchor）的名称。

您可以使用 name 属性创建 HTML 页面中的书签。

书签不会以任何特殊方式显示，它对读者是不可见的。

当使用命名锚（named anchors）时，我们可以创建直接跳至该命名锚（比如页面中某个小节）的链接，这样使用者就无需不停地滚动页面来寻找他们需要的信息了。

命名锚的语法：

<a name="label">锚（显示在页面上的文本）</a>

提示：锚的名称可以是任何你喜欢的名字。

提示：您可以使用 id 属性来替代 name 属性，命名锚同样有效。

实例
首先，我们在 HTML 文档中对锚进行命名（创建一个书签）：

<a name="tips">基本的注意事项 - 有用的提示</a>

然后，我们在同一个文档中创建指向该锚的链接：

<a href="#tips">有用的提示</a>

您也可以在其他页面中创建指向该锚的链接：

<a href="http://www.w3school.com.cn/html/html_links.asp#tips">有用的提示</a>

在上面的代码中，我们将 # 符号和锚名称添加到 URL 的末端，就可以直接链接到 tips 这个命名锚了。
实例

<html>
	<head>
		<title>Links</title>
	</head>
	<body>
		<h1 id="top">Film Folk</h1>
		<h2>Festival Diary</h2>
		<p>Here are some of the film festivals we will be attending this year.<br />Please <a href="mailto:filmfolk@example.org">contact us</a> if you would like more information.</p>
		<h3>January</h3>
		<p><a href="http://www.sundance.org">Sundance Film Festival</a><br />Park City, Utah, USA<br />20 - 30 January 2011</p>
		<h3>February</h3>
		<p><a href="http://www.tropfest.com">Tropfest</a><br />Sydney, Australia<br />20 February 2011</p>
		<h3>March</h3>
		<p><a href="http://sxsw.com">South by Southwest</a><br />Austin, Texas, USA<br />11 - 20 March 2011</p>
		<h3>April</h3>
		<p><a href="http://www.londonindependent.org">London Independent Film Festival</a><br />London, UK<br />15 - 24 April 2011</p>
		<h3>May</h3>
		<p><a href="http://www.festival-cannes.com">Cannes International Film Festival</a><br />Cannes, France<br />11 - 22 May 2011</p>
		<h3>June</h3>
		<p><a href="http://www.sff.org.au">Sydney Film Festival</a><br />Sydney, Australia<br />8 - 19 June 2011</p>
		<h3>July</h3>
		<p><a href="http://www.miff.com.au">Melbourne International Film Festival</a><br />Melbourne, Victoria, Australia<br />22 July - 7 August 2011</p>
		<h3>August</h3>
		<p><a href="http://www.nzff.co.nz">New Zealand International Film Festival</a><br />Dunedin, New Zealand<br />4 - 25 August 2011</p>
		<h3>September</h3>
		<p><a href="http://www.labiennale.org/en/cinema">Venice Film Festival</a><br />Venice, Italy<br />31 August - 10 September 2011</p>
		<h3>October</h3>
		<p><a href="http://www.bfi.org.uk/lff/">London Film Festival</a><br />London, UK<br />12 - 27 October 2011</p>
		<h3>November</h3>
		<p><a href="http://www.idfa.nl/industry.aspx">International Documentary Film Festival Amsterdam (IDFA)</a><br />Amsterdam, Netherlands<br />16 - 27 November 2011</p>
		<h3>December</h3>
		<p><a href="http://whistlerfilmfestival.com">Whistler Film Festival</a><br />Whistler, BC, Canada<br />30 November - 4 December 2011</p>
		<p><a href="about.html">About Film Folk</a></p>
		<p><a href="#top">Top of page</a></p>
	</body>
</html>

在浏览器中的显示

Links

Film Folk

Festival Diary

Here are some of the film festivals we will be attending this year.
Please contact us if you would like more information.

January

Sundance Film Festival
Park City, Utah, USA
20 - 30 January 2011

February

Tropfest
Sydney, Australia
20 February 2011

March

South by Southwest
Austin, Texas, USA
11 - 20 March 2011

April

London Independent Film Festival
London, UK
15 - 24 April 2011

May

Cannes International Film Festival
Cannes, France
11 - 22 May 2011

June

Sydney Film Festival
Sydney, Australia
8 - 19 June 2011

July

Melbourne International Film Festival
Melbourne, Victoria, Australia
22 July - 7 August 2011

August

New Zealand International Film Festival
Dunedin, New Zealand
4 - 25 August 2011

September

Venice Film Festival
Venice, Italy
31 August - 10 September 2011

October

London Film Festival
London, UK
12 - 27 October 2011

November

International Documentary Film Festival Amsterdam (IDFA)
Amsterdam, Netherlands
16 - 27 November 2011

December

Whistler Film Festival
Whistler, BC, Canada
30 November - 4 December 2011

About Film Folk

Top of page

总结

链接是由元素<a>创建的
<a>元素通过href特性来指明你所要链接的页面
如果是链接到网站内部的某个页面，最好使用相对链接
可以通过id特性将某个可链接的页面上的元素作为链接目标

1.6HTML的图像

本节内容

HTML的图像及其重要属性src和alt
图像格式
设置图像大小
优化图像显示

1.6.1HTML 图像- 图像标签（`<img>`）和源属性（Src）

在 HTML 中，图像由<img>标签定义。
<img>是空标签，意思是说，它只包含属性，并且没有闭合标签。
要在页面上显示图像，你需要使用源属性（src）。src指 “source”。源属性的值是图像的 URL 地址。

定义图像的语法是：

<img src="url" alt="some_text">

URL 指存储图像的位置。

浏览器将图像显示在文档中图像标签出现的地方。如果你将图像标签置于两个段落之间，那么浏览器会首先显示第一个段落，然后显示图片，最后显示第二段。

1.6.2图像格式

常见的图像格式有

JPG

一般为色彩鲜艳，内容丰富的图片

PNG

无损压缩、透明、交错、动画

GIF

简单动画、背景透明

透明

可以给图片指定一种颜色，使其不被显示而为透明

交错

在显示图片的过程中可以从概貌逐渐变化到全貌，看上去也就是清晰度由小到大

1.6.3HTML 图像- Alt属性

alt属性用来为图像定义一串预备的可替换的文本。在编程测试中练习alt属性的使用方法。

替换文本属性的值是用户定义的。

<img src="boat.gif" alt="Big Boat">

在浏览器无法载入图像时，替换文本属性告诉读者他们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯，这样有助于更好的显示信息，并且对于那些使用纯文本浏览器的人来说是非常有用的。

1.6.4HTML 图像- 设置图像的高度与宽度

height（高度）与width（宽度）属性用于设置图像的高度与宽度.

属性值默认单位为像素:

<img src="pulpit.jpg" alt="Pulpit rock" width="304" height="228">

提示: 指定图像的高度和宽度的一个很好的习惯。如果图像指定了高度宽度，页面加载时就会保留指定的尺寸。如果没有指定图片的大小，加载页面时有可能会破坏HTML页面的整体布局。

设置图像边框
　在标签中您可以使用border属性以像素为单位指定边框粗细。厚度为 0 表示图片周围没有边框。

<img src="/statics/images/course/pulpit.jpg" alt="Pulpit rock" border = "3">

设置图像对齐
　默认情况下，图像在页面中将显示为左侧对齐，在标签中您可以使用align属性将设置图像的对齐方式：center(居中)或right(右侧)。

<img src="/statics/images/course/pulpit.jpg" alt="Pulpit rock" align="right">

基本的注意事项 - 有用的提示：
注意: 假如某个 HTML 文件包含十个图像，那么为了正确显示这个页面，需要加载 11 个文件。加载图片是需要时间的，所以我们的建议是：慎用图片。
注意: 加载页面时，要注意插入页面图像的路径，如果不能正确设置图像的位置，浏览器无法加载图片，图像标签就会显示一个破碎的图片。

1.7HTML的表格

本节内容

HTML表格的基本结构

HTML 表格

表格由<table>标签来定义。每个表格均有若干行（由<tr>标签定义），每行被分割为若干单元格（由<td>标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

1.7.1HTML 表格的基本结构：

<table>…</table>：定义表格
<th>…</th>：定义表格的标题栏（文字加粗） 
<tr>…</tr>：定义表格的行
<td>…</td>：定义表格的列

HTML 表格表头单元格

　表格的表头单元格使用``标签进行定义。

表格的表头单元格属性主要是一些公共属性，如：align、dir、width、height。
　大多数浏览器会把表头显示为粗体居中的文本

表格标题

在<table>标签中我们可以使用<caption> ... </ caption>标签作为标题，并在表的顶部显示出来。

注：此标签在较新版本的HTML / XHTML中已弃用

这是标题
row 1, column 1	row 1, columnn 2
row 2, column 1	row 2, columnn 2

标题HTML表格高度和宽度

在<table>标签中您可以使用width（宽）和height（高）属性设置表格宽度和高度。您可以按像素或可用屏幕区域的百分比来指定表格宽度或高度。

Row 1, Column 1	Row 1, Column 2
Row 2, Column 1	Row 2, Column 2

HTML表格背景

可以使用以下方法之一设置HTML表格的背景

bgcolor属性 - 可以为整个表格或仅为一个单元格设置背景颜色。
background属性 - 可以为整个表设置背景图像或仅为一个单元设置背景图像。
bordercolor属性 - 可以设置边框颜色。

注：HTML5中不推荐使用bgcolor，background和bordercolor属性。不要使用这些属性。

Column 1	Column 2	Column 3

　使用background属性需要提供图像 URL 地址：

Column 1	Column 2	Column 3

HTML表格空间

有以下两个属性，用于调整HTML表格中单元格的空间：

cellspacing属性-定义表格单元格之间的空间
cellpadding属性-表示单元格边框与单元格内容之间的距离

Name	Salary
其琛	5000
曼迪	7000

HTML合并单元格(跨行和跨列）

如果要将两个或多个列合并为一个列，将使用colspan属性
如果要合并两行或更多行，则将使用rowspan属性。

Column 1	Column 2	Column 3
Row 1 Cell 1	Row 1 Cell 2	Row 1 Cell 3
Row 1 Cell 1	Row 2 Cell 2	Row 2 Cell 3
Row 3 Cell 1

HTML表格头部、主体、页脚

表格可以分为三个部分 - 头部，主体和页脚，如同word文档中页面的页眉、正文、页脚。每个页面保持相同，而正文是表格的主要内容持有者。

头部，主体和页脚的对应的三个标签是：

<thead> - 创建单独的表头。
<tbody> - 表示表格的主体。
<tfoot> - 创建一个单独的表页脚。

表可以包含多个<tbody>元素以指示不同的页面。

但值得注意的是<thead>和<tfoot>标签应出现在<tbody>之前：

This is the head of the table
Cell 1	Cell 2	Cell 3	Cell 4
This is the foot of the table

HTML表格的嵌套

可以在另一个表中使用一个表。可以使用<table>内的几乎所有标签。

Name	Salary
其琛	5000
曼迪	7000

小结

<table>标签用来向网页中添加表格
表格是逐行绘制的。行是由<tr>元素创建的。
每一行都有一定数量的由<td>元素(表示标题时使用的<th>元素）表示的单元格
可利用rowspan和colspan特性使表格中的单元跨越多行和多列
对于长列表，可将列表分为<thead>、<tbody>、<tfoot>三个部分

1.7HTML的表单

本节内容

HTML表单与表单元素

1.7.1HTML表单

表单是一个包含表单元素的区域，用来采集用户的信息。

表单元素是允许用户在表单中输入内容，比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。

表单使用表单标签 <form> 来设置:

<form action="数据处理网页">
表单元素
</form>

每个表单都应该设置action特性，通常还要设置method特性和id特性
action

action特性值是服务器上一个页面的url，这个页面用来接收用户提交表单时的数据。

method

表单的提交可以采用两种方法：get或者post

使用get方法时表单中的元素的值附加在action特性指定的url末尾
此方法适合于

短表单例如搜索框
只从web服务器上检索数据的情形（不用发送那些要在数据库中添加或者删除的东西）

使用post方法时

表单中的值被放在http头部信息中发送。从经验来说如果你的表单存在以下情形应该用post方法
允许用户上传文件
非常长
包含敏感信息
向数据库中添加信息或者删除信息

1.7.2表单元素

表单元素

文本框、按钮、单选、复选、下拉列表、文本域

文本框、密码框

 <form>
    <input  type="text|password"/>
    </form>

文本框type=text 密码框为password

**提交按钮input——submit**

<form>
姓名：
<input type="text" value=" " name="myname"/>
<input type="submit" value="提交" name="submittn"/>
</form>

重置按钮input——reset
type：reset

<form>
爱好：
<input type="text"/>
<input type="submit" name="确定/>
<input type="reset" name="重置"/>
</form>

1.8HTML其他标记

本节内容

喜欢c罗的小菜鸡

关注

3
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

HTML、CSS知识点总结

文章目录

一，HTML+CSS基础

1-1 HTML和CSS的关系：

1-2 HTML的结构：

1.2.1 学习要点：

1.2.2 HTML的固定结构：

1.3HTML的文本：

1.3.1标题和段落

标题

段落

空白

换行符和水平线

1.3.2文本的格式化（语义化标记）：

1.4HTML的列表

1.4.1有序列表

1.4.2无序列表

1.4.3自定义列表

Scrambled Eggs

Ingredients

Method

1.5HTML的链接

1.5.1 HTML 链接

1.5.2 HTML 超链接（链接）

1.5.2.1 绝对url

1.5.2.2 相对url

1.5.3HTML 空链接

1.5.3.1HTML 链接 - target 属性

1.5.3.2HTML 链接 -name 属性

Film Folk

Festival Diary

January

February

March

April

May

June

July

August

September

October

November

December

1.6HTML的图像

1.6.1HTML 图像- 图像标签（<img>）和源属性（Src）

1.6.2图像格式

1.6.3HTML 图像- Alt属性

1.6.4HTML 图像- 设置图像的高度与宽度

1.7HTML的表格

1.7.1HTML 表格的基本结构：

HTML 表格表头单元格

表格标题

标题HTML表格高度和宽度

HTML表格背景

HTML表格空间

HTML合并单元格(跨行和跨列）

HTML表格头部、主体、页脚

HTML表格的嵌套

1.7HTML的表单

1.7.1HTML表单

1.7.2表单元素

1.8HTML其他标记

1.6.1HTML 图像- 图像标签（`<img>`）和源属性（Src）