HTML中的标签系列-01-简单标签

来源：互联网发布：网络打印被挂起编辑：程序博客网时间：2024/06/06 05:02

1.什么是HTML？

HTML：超级文本标记语言(HyperText Markup Language)
- “超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。
- “标记”就是使用标签的方法将需要的内容包括起来。

2.HTML语言的特点

HTML文件不需要编译，直接使用浏览器阅读即可
HTML文件的扩展名是*.html或者*.htm
HTML结构都是由标签组成的
- 标签名都是定义好的
- 标签名不区分大小写
- 通常情况下标签名都是由开始标签和结束标签组成。例如＜a＞＜/a＞
- 如果没有结束标签，建议以/结尾。例如：＜img /＞
HTML结构包括两部分：头head和体body

3.HTML页面的基本结构

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>    </head>    <body>    </body></html>

以上使用的标签组成了HTML页面的基本结构。解释如下：

＜html＞是整个页面的根标签，理论上一个页面只需要一个，由头和体组成。
- ＜head＞是头标签，用于引入脚本、导入样式、提供元信息等。一般情况下头标签的内容在浏览器端都不显示。
  - ＜title＞是子标签，用于显示浏览器标题。
- ＜body＞是体标签，是整个网页的主题，我们编写的html代码基本都在此标签体内。

4.HTML页面中的入门标签介绍

标题标签：HTML中提供＜hn＞系列标签，用于修饰标题。
- 标题标签包含＜h1＞＜h2＞＜h3＞＜h4＞＜h5＞＜h6＞，从1到6逐渐变小，加粗显示，单独占用一行。代码示例如下：
- 标题标签还包含＜hr＞标签，他会在HTML页面中创建一条水平分割线，用于定义内容中的主题变化。属性如下：
  - size属性：水平线的高度，单位是像素
  - noshade属性：没有阴影，取值：noshade，表示显示纯色
字体标签＜font＞：用于设置字体大小、颜色等。属性如下：
- size属性：设置字体的大小。取值为1到7的数字，从1到7逐渐变大，超过7的都按照7显示，浏览器一般默认是3。
- color属性：设置字体的颜色。取值可以是英文单词或者是16进制，16进制即是使用红绿蓝三原色设置颜色。
- face属性：设置字体的格式，注意：设置的字体必须是机器上有的。
格式化标签：＜b＞＜i＞＜u＞＜p＞＜br/＞
- ＜b＞标签：字体加粗标签
- ＜i＞标签：斜体标签
- ＜u＞标签：下划线标签
- ＜p＞标签：段落标签，有换行和行间距的作用
- ＜br/＞标签：换行标签
图片标签＜img＞：可以在html页面中引用一张图片。属性如下：
- src属性：指定需要显示的图片URL(路径)，可以是相对路径，也可以是绝对路径。
- alt属性：图片无法正常显示时的替代文本。
- width属性：设置图片的宽度，可以是像素值或者百分比。
- height属性：设置图片的高度，可以是像素值或者百分比。
列表标签：列表标签可以分为有序列表＜ol＞标签和无序列表＜ul＞标签
- ＜li＞标签：定义列表项，是＜ol＞和＜ul＞的子标签。
- ＜ol＞：有序列表标签。属性如下：
  - type属性：定义有序列表的序号，取值有：A、a、I、i、1，字母数字等
  - start属性：规定有序列表的起始值
  - reversed属性：规定有序列表是降序排列
- ＜ul＞：无序列表标签。属性如下：
  - type属性：定义无序列表的开头符号，取值有：disc(实心圆点)、circle(空心圆点)、square(实心方块)等
超链接标签＜a＞：是在html页面中提供一种可以访问其他位置的实现方式。属性如下：
- href属性：用于确定需要显示页面的路径(URL)
- target属性：确定以何种方式打开href所设置的页面。取值有：_blank、_self等。
  - _blank：在新窗口中打开href指定的页面。
  - _self：默认取值，在当前页面打开href指定的页面。
  - 自定义属性值，在自定义的frame中打开href指定的页面。
注意：超链接标签中的内容都会有下划线，可以在head中使用样式去除。
表格标签＜table＞＜tr＞＜td＞：HTML表格是由＜table＞标签以及一个或多个＜tr＞、＜th＞或＜td＞标签组成。
- ＜table＞：是父标签，相当于整个表格的容器。属性如下：
  - border属性：设置表格边框的宽度。取值为像素值。
  - width属性：设置表格的宽度。取值为像素值或者百分比。
  - height属性：设置表格的高度。取值为像素值或者百分比。
  - align属性：设置内容居中、或者靠边。取值为center，left，right。
  - bgcolor属性：设置表格背景颜色。取值为英文单词或者16进制。
  - cellspacing属性：设置单元格边框宽度。取值为像素值。
  - cellpadding属性：设置字体和单元格的间距。取值为像素值。
- ＜tr＞：是子标签，用于定义行。
- ＜td＞：是子标签，用于定义表格的单元格(列)。特有属性如下：
  - colspan属性：设置单元格横跨的列数
  - rowspan属性：设置单元格横跨的行数
  - align属性：设置单元格中的内容水平对齐方式，取值：left左、right右、center居中
  - nowrap属性：单元格中的内容是否折行
- ＜th＞：标签用于定义表头。单元格中的内容默认居中、加粗显示。
＜frameset＞标签：是多个窗口页面整合在一起的一个集合(框架集)。每一个页面(框架)都是单独的文档，需要使用子标签＜frame＞来确定页面的位置。＜frameset＞通过列和行来确定整体布局，使用cols属性确定列数，使用rows属性确定行数。多个＜frameset＞可以嵌套使用。
注意：＜frameset＞和＜body＞标签不能共存。
- rows属性：设置框架集的行数。取值为：值1，值2，值3….. 一个值表示一行，多个值用逗号隔开。值可以是像素值或者百分比等，最后一个值不想计算可以使用*匹配剩余的空间。
- cols属性：设置框架集的列数。取值为：值1，值2，值3….. 一个值表示一列，多个值用逗号隔开。值可以是像素值或者百分比等，最后一个值不想计算可以使用*匹配剩余的空间。
＜frame＞标签：用于设置＜frameset＞框架集中的一个页面(框架)。
- src属性：确定页面的路径。
- noresize属性：框架分隔先不能移动。
- target属性：确定需要显示的页面在何处显示。
- name属性：为该＜frame＞标签起名，方便其他标签定位到他。

阅读全文

0 0