首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >03.HTML头部/CSS/图像/表格/列表

03.HTML头部/CSS/图像/表格/列表

作者头像
Java帮帮
发布2018-03-15 17:04:11
19.3K0
发布2018-03-15 17:04:11
举报
03.HTML头部/CSS/图像/表格/列表

HTML <head>

查看在线实例

<title> - 定义了HTML文档的标题

使用 <title> 标签定义HTML文档的标题

<base> - 定义了所有链接的URL 使用 <base> 定义页面中所有链接默认的链接目标地址。

<meta> - 提供了HTML文档的meta标记 使用 <meta> 元素来描述HTML文档的描述,关键词,作者,字符集等。


HTML <head> 元素

<head> 元素包含了所有的头部标签元素。在 <head>元素中你可以插入脚本(scripts), 样式文件(CSS),及各种meta信息。

可以添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript>, and <base>.


HTML <title> 元素

<title> 标签定义了不同文档的标题。

<title> 在 HTML/XHTML 文档中是必须的。

<title> 元素:

  • 定义了浏览器工具栏的标题
  • 当网页添加到收藏夹时,显示在收藏夹中的标题
  • 显示在搜索引擎结果页面的标题

一个简单的 HTML 文档:

实例


HTML <base> 元素

<base> 标签描述了基本的链接地址/链接目标,该标签作为HTML文档中所有的链接标签的默认链接:


HTML <link> 元素

<link> 标签定义了文档与外部资源之间的关系。

<link> 标签通常用于链接到样式表:


HTML <style> 元素

<style> 标签定义了HTML文档的样式文件引用地址.

在<style> 元素中你也可以直接添加样式来渲染 HTML 文档:


HTML <meta> 元素

meta标签描述了一些基本的元数据。

<meta> 标签提供了元数据.元数据也不显示在页面上,但会被浏览器解析。

META 元素通常用于指定网页的描述,关键词,文件的最后修改时间,作者,和其他元数据。

元数据可以使用于浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他Web服务。

<meta> 一般放置于 <head> 区域

<meta> 标签- 使用实例

为搜索引擎定义关键词:

为网页定义描述内容:

定义网页作者:

每30秒钟刷新当前页面:


HTML <script> 元素

<script>标签用于加载脚本文件,如: JavaScript。

<script> 元素在以后的章节中会详细描述。


HTML head 元素

标签

描述

<head>

定义了文档的信息

<title>

定义了文档的标题

<base>

定义了页面链接标签的默认链接地址

<link>

定义了一个文档和外部资源之间的关系

<meta>

定义了HTML文档中的元数据

<script>

定义了客户端的脚本文件

<style>

定义了HTML文档的样式文件


HTML 样式- CSS


CSS (Cascading Style Sheets) 用于渲染HTML元素标签的样式.

尝试一下 - 实例

HTML使用样式 本例演示如何使用添加到 <head> 部分的样式信息对 HTML 进行格式化。

本例演示如何使用样式属性做一个没有下划线的链接。 如何使用 style 属性制作一个没有下划线的链接。

链接到一个外部样式表 本例演示如何 标签链接到一个外部样式表。


如何使用CSS

CSS 是在 HTML 4 开始使用的,是为了更好的渲染HTML元素而引入的.

CSS 可以通过以下方式添加到HTML中:

  • 内联样式- 在HTML元素中使用"style" 属性
  • 内部样式表 -在HTML文档头部 <head> 区域使用<style> 元素 来包含CSS
  • 外部引用 - 使用外部 CSS 文件

最好的方式是通过外部引用CSS文件.

在本站的HTML教程中我们使用了内联CSS样式来介绍实例,这是为了简化的例子,也使得你能更容易在线编辑代码并在线运行实例。


内联样式

当特殊的样式需要应用到个别元素时,就可以使用内联样式。 使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。以下实例显示出如何改变段落的颜色和左外边距。


HTML样式实例 - 背景颜色

背景色属性(background-color)定义一个元素的背景颜色:

实例

早期背景色属性(background-color)是使用 bgcolor 属性定义。

尝试一下: 旧版HTML来设置背景方式


HTML 样式实例 - 字体, 字体颜色 ,字体大小

我们可以使用font-family(字体),color(颜色),和font-size(字体大小)属性来定义字体的样式:

实例

现在通常使用font-family(字体),color(颜色),和font-size(字体大小)属性来定义文本样式,而不是使用<font>标签。


HTML 样式实例 - 文本对齐方式

使用 text-align(文字对齐)属性指定文本的水平与垂直对齐方式:

实例

文本对齐属性 text-align取代了旧标签 <center> 。


内部样式表

当单个文件需要特别样式时,就可以使用内部样式表。你可以在<head> 部分通过 <style>标签定义内部样式表:


外部样式表

当样式需要被应用到很多页面的时候,外部样式表将是理想的选择。使用外部样式表,你就可以通过更改一个文件来改变整个站点的外观。


HTML 样式标签

标签

描述

<style>

定义文本样式

<link>

定义资源引用地址


已弃用的标签和属性

在HTML 4, 原来支持定义HTML元素样式的标签和属性已被弃用。这些标签将不支持新版本的HTML标签。

不建议使用的标签有: <font>, <center>, <strike>

不建议使用的属性: color 和 bgcolor.


CSS修饰标签的样式,有 "内联" 和 "外引" 两种方式。

对于大部分标签,以上两种方法均可,且修改父级标签,子级标签特性也会改变。但某些标签确无法通过修改父级标签来改变子级标签特性,如a标签,修改其颜色特性,必须直接修改 a 标签的特性才可。

实例:

<a href="#" style="color:red;" rel="nofollow">只能使用"内联"方式</a>

HTML 图像

实例

在线实例

插入图像

本例演示如何在网页中显示图像。

从不同的位置插入图片 本例演示如何将其他文件夹或服务器的图片显示到网页中。


HTML 图像- 图像标签( <img>)和源属性(Src)

在 HTML 中,图像由<img> 标签定义。

<img> 是空标签,意思是说,它只包含属性,并且没有闭合标签。

要在页面上显示图像,你需要使用源属性(src)。src 指 "source"。源属性的值是图像的 URL 地址。

定义图像的语法是:

URL 指存储图像的位置。如果名为 "pulpit.jpg" 的图像位于 www.runoob.com 的 images 目录中,那么其 URL 为 http://www.runoob.com/images/pulpit.jpg。

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


HTML 图像- Alt属性

alt 属性用来为图像定义一串预备的可替换的文本。

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

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


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

height(高度) 与 width(宽度)属性用于设置图像的高度与宽度。

属性值默认单位为像素:

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


基本的注意事项 - 有用的提示:

注意: 假如某个 HTML 文件包含十个图像,那么为了正确显示这个页面,需要加载 11 个文件。加载图片是需要时间的,所以我们的建议是:慎用图片。

注意: 加载页面时,要注意插入页面图像的路径,如果不能正确设置图像的位置,浏览器无法加载图片,图像标签就会显示一个破碎的图片。

更多实例

排列图片 本例演示如何在文字中排列图像。

浮动图像 本例演示如何使图片浮动至段落的左边或右边。

设置图像链接 本例演示如何将图像作为一个链接使用。

创建图像映射 本例显示如何创建带有可供点击区域的图像地图。其中的每个区域都是一个超级链接。

点击之后


HTML 图像标签

标签

描述

<img>

定义图像

<map>

定义图像地图

<area>

定义图像地图中的可点击区域


1、距形:(左上角顶点坐标为(x1,y1),右下角顶点坐标为(x2,y2))

<area shape="rect" coords="x1,y1,x2,y2" href=url>

2、圆形:(圆心坐标为(X1,y1),半径为r)

<area shape="circle" coords="x1,y1,r" href=url>

3、多边形:(各顶点坐标依次为(x1,y1)、(x2,y2)、(x3,y3) ......)

<area shape="poly" coords="x1,y1,x2,y2 ......" href=url>

HTML 表格


HTML 表格实例:

First Name

Last Name

Points

Jill

Smith

50

Eve

Jackson

94

John

Doe

80

Adam

Johnson

67

表格 这个例子演示如何在 HTML 文档中创建表格。


HTML 表格

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

表格实例

实例

在浏览器显示如下::


HTML 表格和边框属性

如果不定义边框属性,表格将不显示边框。有时这很有用,但是大多数时候,我们希望显示边框。

使用边框属性来显示一个带有边框的表格:

实例


HTML 表格表头

表格的表头使用 <th> 标签进行定义。

大多数浏览器会把表头显示为粗体居中的文本:

实例

在浏览器显示如下:

更多实例

没有边框的表格 本例演示一个没有边框的表格。

表格中的表头(Heading) 本例演示如何显示表格表头。

带有标题的表格 本例演示一个带标题 (caption) 的表格

跨行或跨列的表格单元格 本例演示如何定义跨行或跨列的表格单元格。

表格内的标签 本例演示如何显示在不同的元素内显示元素。

单元格边距(Cell padding) 本例演示如何使用 Cell padding 来创建单元格内容与其边框之间的空白。

单元格间距(Cell spacing) 本例演示如何使用 Cell spacing 增加单元格之间的距离。

漂亮的表格

HTML源代码:

CSS源代码:

运行结果:


HTML 表格标签

标签

描述

<table>

定义表格

<th>

定义表格的表头

<tr>

定义表格的行

<td>

定义表格单元

<caption>

定义表格标题

<colgroup>

定义表格列的组

<col>

定义用于表格列的属性

<thead>

定义表格的页眉

<tbody>

定义表格的主体

<tfoot>

定义表格的页脚


HTML中的table可以大致分为三个部分:

  • thead ---------表格的页眉
  • tbody ---------表格的主体
  • tfoot ---------定义表格的页脚

thead, tbody, tfoot 相当于三间房子,每间房子都可以用来放东西。

<tr> </tr> 这个标签就是放在三间房子里面的东西,每一个 <tr> </tr> 就是表格一行。

表格的每一行被分为一个个单元格。

每一个单元格就是用来存放数据的,这个数据分为两种:一,数据的名称;二,数据本身。

<th></th> 表示数据的名称(标题) ,

<td></td>

表示真正的数据内容。

一个简单实例:


HTML 列表


HTML 支持有序、无序和定义列表:

HTML 列表

在线实例

无序列表 本例演示无序列表。

有序列表 本例演示有序列表。


HTML无序列表

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

无序列表使用 <ul> 标签

浏览器显示如下:


HTML 有序列表

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

列表项项使用数字来标记。

浏览器中显示如下:


HTML 自定义列表

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

自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。

浏览器显示如下:


注意事项 - 有用提示

提示: 列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。

更多实例

不同类型的有序列表 本例演示不同类型的有序列表。

不同类型的无序列表 本例演示不同类型的无序列表。

嵌套列表 本例演示如何嵌套列表。

嵌套列表 2 本例演示更复杂的嵌套列表。

自定义列表 本例演示一个定义列表。


HTML 列表标签

标签

描述

<ol>

定义有序列表

<ul>

定义无序列表

<li>

定义列表项

<dl>

定义列表

<dt>

自定义列表项目

<dd>

定义自定列表项的描述

本文参与 腾讯云自媒体分享计划,分享自微信公众号。
原始发表:2018-01-27,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 Java帮帮 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • HTML <head>
    • 查看在线实例
      • HTML <head> 元素
        • HTML <title> 元素
          • 实例
            • HTML <base> 元素
              • HTML <link> 元素
                • HTML <style> 元素
                  • HTML <meta> 元素
                    • <meta> 标签- 使用实例
                      • HTML <script> 元素
                        • HTML head 元素
                        • HTML 样式- CSS
                          • 尝试一下 - 实例
                            • 如何使用CSS
                              • 内联样式
                                • HTML样式实例 - 背景颜色
                                  • 实例
                                    • HTML 样式实例 - 字体, 字体颜色 ,字体大小
                                      • 实例
                                        • HTML 样式实例 - 文本对齐方式
                                          • 实例
                                            • 内部样式表
                                              • 外部样式表
                                                • HTML 样式标签
                                                  • 已弃用的标签和属性
                                                  • HTML 图像
                                                    • 实例
                                                      • 在线实例
                                                        • HTML 图像- 图像标签( <img>)和源属性(Src)
                                                          • HTML 图像- Alt属性
                                                            • HTML 图像- 设置图像的高度与宽度
                                                              • 基本的注意事项 - 有用的提示:
                                                                • 更多实例
                                                                  • HTML 图像标签
                                                                  • HTML 表格
                                                                    • HTML 表格实例:
                                                                      • HTML 表格
                                                                        • 表格实例
                                                                          • 实例
                                                                            • HTML 表格和边框属性
                                                                              • 实例
                                                                                • HTML 表格表头
                                                                                  • 实例
                                                                                    • 更多实例
                                                                                      • HTML 表格标签
                                                                                      • HTML 列表
                                                                                        • HTML 列表
                                                                                          • 在线实例
                                                                                            • HTML无序列表
                                                                                              • HTML 有序列表
                                                                                                • HTML 自定义列表
                                                                                                  • 注意事项 - 有用提示
                                                                                                    • 更多实例
                                                                                                      • HTML 列表标签
                                                                                                      领券
                                                                                                      问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档