整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

在网页开发中,我们需要掌握的常用HTML标签有哪些?

果想开发一个网站,除了要精通后端开发语言(如:php)外,还要精通HTML代码。那么,什么是HTML呢?HTML是一种超文本标记语言,它包含有众多的标签,我们可以通过这些标签,把不同的internet资源(如:文字、图片、视频、音频、表单等等)整合在一个统一的文档中,这就形成了我们可以看得见的网页。那么,HTML都有哪些常用的标签呢?

一、文档类型声明。

html5文档类型声明:<!doctype html>

html4文档类型声明:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

二、html主标签。

这个标签是html最外层的标签,所有其它的HTML标签都要放在这个标签的内部。

<html>

<head></head>

<body></body>

</html>

三、双标签和单标签。

在HTML标签中,有的标签是成双成对的,如:<html></html>(如下图);而有的标签是单个的,如:<hr>横线标签。

四、head头部标签。

head头部有以下几种常用标签:

meta:主要提供有关页面的元信息。

link:用来定义文档与外部资源的关系,最常用的是调用CSS样式文件。

title:页面标题的标签。

script:用来调用JS文件或JS代码。当然,script标签也可以在body主体中使用。

五、body主体标签。

1、块级标签。

块级标签的特性是:独自占有一行;标签的高与宽、边距可以修改;没有设置宽与高时,默认继承父标签。例如:


<div>div1</div>

<div>div2</div>

<style>

.aa1{ border:1px solid #000; width:150px; height:100px; margin:30px; }

.aa2{ border:1px solid #000; width:150px; height:100px; margin:30px; }

</style>


前端页面显示的效果如下图:

常用的块级标签有:div、h1、h2、h3、h4、h5、h6、hr、menu、ul、ol、li、dl、dt、dd、table、p、form 。

2、内联标签。

内联标签与块级标签不同,它不能独自占有一行,会与其它内联标签在同一样展示;内联标签的高与宽、上下边距是不能修改的,它里面的文字或图片有多高,它就是多高。例如如下代码:


<style>

.aa1{ border:1px solid #000; width:150px; height:100px; margin:30px; }

.aa2{ border:1px solid #000; width:150px; height:100px; margin:30px; }

</style>

<span>span1</span>

<span>span2</span>


CSS样式代码跟块级标签的例子是一样的,而显示的效果就不一样了,宽与高、上下边距没有效果。如下图:

常用的内联标签有:span、a、b、strong、i、em 。

3、内联块级标签。

内联块级标签,既有一些内联标签的特性,也有一些块级标签的特点:它不能独自占有一行,但是可以修改它的宽度和高度。例如下面这段代码:


<style>

.aa1{ border:1px solid #000; width:150px; height:100px; margin:30px; }

.aa2{ border:1px solid #000; width:150px; height:100px; margin:30px; }

</style>

<img src="w5.jpg" alt="">

<img src="w5.jpg" alt="">


CSS样式代码跟块级标签的那个例子仍然是一样的,图片的宽和高、上下边距修改成功,而2个图片不能独自占有一行,而是在同一行。如下图:

常用的内联块级标签有:img、input、textarea。

4、区域标签。

所谓区域标签,就是主要用来划分布局页面区域的。如:头部、主体内容、侧边栏、底部。这样划分的好处是:让页面布局更加清晰明了。

常用的区域标签有:header(头部)、footer(底部)、nav(导航)、aside(侧边栏)、section(主体)、article(独立内容)。

5、表单标签。

这个表单标签我们也是会经常用到的,如:登录网站的时候、提交数据的时候。如下图的评论表单:

​表单常用的标签有:form、input、select、option、textarea 。

以上就是我们开发网页时,会常用到的HTML标签。当然,HTML标签远不止这些,尤其是html5出来后,新增了许多的新标签。但是,有些标签在我们开发中很少用到,所以,这里就没有做相应的介绍。

挑战30天在头条写日记#

HTML是一种用于创建网页结构和内容的标记语言,其中包含了许多标签,可以用于排版、布局和展示内容。本文将详细介绍HTML中的<tr>和<td>标签的使用方法,并通过示例展示如何创建表格。


1. <tr>标签的作用: <tr>标签代表HTML表格中的一行(行数据),它可以包含一个或多个<td>元素作为单元格。


2. <td>标签的作用: <td>标签用于定义表格中的一个单元格(列数据),可以包含文本、图像、链接等内容。

3. 如何使用<tr>和<td>: 在使用<tr>和<td>标签时,首先需要创建一个<table>元素作为表格的容器,然后在其中嵌套<tr>和<td>标签,如下所示:

htmlCopy code<table>
  <tr>
    <td>单元格1</td>
    <td>单元格2</td>
  </tr>
  <tr>
    <td>单元格3</td>
    <td>单元格4</td>
  </tr>
</table>

4. 表格样式: 可以使用CSS来为表格添加样式,如设置边框、背景颜色等。以下是一个简单的示例:

htmlCopy code<style>
  table {
    border-collapse: collapse;
    width: 100%;
  }
  td {
    border: 1px solid black;
    padding: 8px;
    text-align: center;
  }
</style>


5. 示例应用: 以下示例演示了如何使用<tr>和<td>标签创建一个包含姓名、年龄和城市的简单表格:

htmlCopy code<!DOCTYPE html>
<html>
<head>
  <style>
    table {
      border-collapse: collapse;
      width: 100%;
    }
    td {
      border: 1px solid black;
      padding: 8px;
      text-align: center;
    }
  </style>
</head>
<body>

<table>
  <tr>
    <td>姓名</td>
    <td>年龄</td>
    <td>城市</td>
  </tr>
  <tr>
    <td>张三</td>
    <td>25</td>
    <td>北京</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>30</td>
    <td>上海</td>
  </tr>
  <tr>
    <td>王五</td>
    <td>28</td>
    <td>广州</td>
  </tr>
</table>

</body>
</html>

6. 书籍参考:

  • "HTML and CSS: Design and Build Websites" by Jon Duckett
  • "Learning Web Design: A Beginner's Guide to HTML, CSS, JavaScript, and Web Graphics" by Jennifer Niederst Robbins


7. 总结: 通过本文的介绍,我们了解了HTML中<tr>和<td>标签的基本用法,以及如何创建简单的表格和添加样式。使用这些标签,我们可以轻松地创建具有结构和内容的网页表格,提升页面的可读性和可视性。

HTML文档中包含CSS

CSS可以作为单独的文档引用,也可以嵌入到HTML文档中。在HTML文档中包含CSS有三种方法:

  • 内联样式 - 使用元素起始标记的style属性指定样式
  • 嵌入样式 - 在文档的head部分使用style标记指定样式
  • 外部样式 - 在文档的head部分使用link标记引用外部CSS文件

注意:内联样式的优先级最高,而外部样式表的优先级最低。这意味着,如果同时使用嵌入样式表和外部样式表为元素指定样式,则嵌入样式的规则将覆盖外部样式表。

内联样式

内联样式通过将CSS规则直接放入开始标记的style属性来将唯一的样式规则应用于该元素。

style属性的值为一系列CSS属性和值对。每个“property:value”对都用分号(;)分隔,与嵌入或外部样式表中的写法一样,但必须全部在一行中,即分号后没有换行符,如下所示:

内联样式的示例

通常认为使用内联样式是一种不好的做法。因为样式规则直接嵌入到HTML标记中,这会导致文档格式与文档内容混合;这使得代码很难维护,违背了发明CSS的初衷。

注意:已经无法在内联样式中设置伪元素和伪类规则。因此,避免在代码中使用样式属性。使用外部样式表向HTML文档添加样式是首选方法。

嵌入样式/内部样式

嵌入样式表或内部样式表只影响定义它们的HTML文档。

嵌入样式是使用style标记在HTML文档的head部分定义的。可以在HTML文档中定义任意数量的style元素,但它们必须出现在<head>和</head>标记之间,如以下所示:

提示:style和link标记的type属性(即type=“text/css”)定义使用CSS样式语言,但这个属性纯粹是信息性的,你可以忽略它,因为CSS是HTML5中的标准和默认样式表语言。

外部样式

当样式规则要应用于网站的多个页面时,采用外部样式表是理想的。

外部样式表将所有样式规则保存在一个单独的文档中,您可以从站点上的任何HTML文件引用这些文档。外部样式表是最灵活的,因为使用外部样式表,您可以通过只更改一个文件来更改整个网站的外观。

有链接和导入两种方式引用外部样式表。

链接外部样式表

在链接之前,我们需要先创建一个样式表,如下所示:

link标记将外部样式表链接到HTML文档,link标记要位于<head>部分中,如下例所示:

导入外部样式表

@import语句是加载外部样式表的另一种方式,在style标记中使用,它指示浏览器加载外部样式表并使用其样式规则。

有两种使用方法,最简单的是在文档head中的嵌入样式引用,注意,其他CSS规则仍然包含在<style>元素中。下面是一个例子:

在嵌入样式中使用@import引用外部样式表:

在外部样式表中使用@import引入别的样式表文件:

注意:所有@import规则必须出现在样式表的开头。样式表本身中定义的任何样式规则都会覆盖与所导入的样式表有冲突的规则。但是,由于性能问题,不建议在另一个样式表中导入其它样式表。