手把手教你如何设计符合语义的页面

最新推荐文章于 2024-08-17 22:49:30 发布

不被定义的~wolf

最新推荐文章于 2024-08-17 22:49:30 发布

阅读量627

点赞数 22

分类专栏：前端设计文章标签： vscode html5 css 设计模式

本文链接：https://blog.csdn.net/lyh030105/article/details/134611764

版权

前端设计专栏收录该内容

5 篇文章 0 订阅

订阅专栏

网页语义化

一、网页语义化概述

Web的未来是语义化的Web(语义化网页)，语义化的好处主要是对人机都比较友好，拥有了良好的语义结构，网页内容就很容易被搜索引擎检索和收录。

标准结构的设计原则是使用语义化的标签元素来构造文档的内容结构，每个HTML元素都定义了特定语义，不能够乱用标签。例如，很多人习惯使用br元素来代替p元素，定义段落文本；使用div元素来代替h元素来定义标题。

很多初学者把元素的语义性与元素的样式混在一起，认为选元素就是选样式。例如，要强调信息的重要性就认为要把文本加粗显示，于是就选择strong元素，这种选择是正确的，但是对于语义的理面解就错误了。

样式是HTML元素的表现效果，其目的是方便浏览者直观地认识标签和属性的用途和作用。例如，p元素默认会显示双倍上下边距，这样能够区分不同段落文本，更方便阅读。th默认显示为加粗和居中，这样可以使标题文本显得很醒目。li默认缩进显示也是为了更方便列表阅读等。这些默认样式可不是语义的象征。反过来说，b元素能够加粗文本，而strong也能够加粗文本，但是b的语义是修饰性，不包含内容的含义，而strong的语义就很明显，表示强调的意思。

二、元素分类

1、结构语义

结构语义(Structural Semantics)定义了元素在HTML文档中扮演的结构角色。结构语义元素多指块状元素，当然也包含个别行内元素。例如：

div: Division(分隔)。在文档中定义一块区域，即包含框，IE认为它是一个容器。
span: Span(范围)。在文本行中定义一个区域，即包含框。
ol: Ordered List(排序列表)。根据一定的排序进行列表。
ul: Unordered List(不排序列表)。没有排序的列表。
li: List Item(列表项目)。每条列表项。
dl:Definition List(定义列表)。以定义的方式进行列表。
dt: Definition Term(定义术语)。定义列表中的词条。
dd: Definition Description(定义描述)。对定义的词条进行解释。
del: Deleted Text(删除的文本)。定义删除的文本。
ins: Inserted Text(插入的文本)。定义插入的文本。
h1~h6: Header 1 to Header 6(标题1到标题6)。定义不同级别的标题。
p: Paragraph(段落)。定义段落结构。
hr: Horizontal Rule(水平尺)。定义水平线。

2、内容语义

内容语义（Content semantics)定义了元素在文档中表示内容的语义，一般指文本格式化元素，它们多是行内元素。例如：

a:Anchor(定义错)。锚即定位的意思，换句话说就是超链接，即在多页间定位。
abbr:Abbreviation(缩写词)。定义缩写词。
acronym:Acronym(取首字母的缩写词)。定义取首字母的缩写词。
address:Address（地址）。定义地址。
dfn: Defines为Definition Term(定义条目)。
kbd: Keyboard Text(键盘文本)。定义键盘键。
samp: Sample (示例)。定义样本。
var：Variable(变量)。定义变量。
tt: Teletype Text(打印机文本)。定义打印机字体。
code: Code Text (源代码)。定义计算机源代码。
pre: Preformatted Text(预定义格式文本)。定义预定义格式文本，保留源代码格式。
blockquote: Block Quotation(区块引用语)。定义大块内容引用。
cite: Citation (引用)。定义引文。
q: Quotation(引用语)。引用短语。
strong: Strong Text(加重文本)。定义重要文本。
em: Emphasized Text(加重文本)。定义文本为重要。

3、修饰语义

修饰语义(Rhetorical Semanties)定义了元素在文档中修饰文本的显示效果。例如：

b: Bold Text(粗体文本)。定义粗体。
i: Italic Text(斜体文本)。定义斜体。
big:Big Text(大文本)。定义文本增大。
small:Small Text(小文本)。定义文本缩小。
sup: Superscripted Text(上标文本)。定义文本上标。
sub: Subscripted Text(下标文本)。定义文本下标。
bdo:Direction of Text Display(文本显示方向)。定义文本显示方向。
br: Break (换行)。定义换行。

已废除的元素如下。

center: Centered Text(居中文本)。定义文本居中。
font: Font(字体)。定义文字的样式、大小和颜色。
u: Underlined Text(下划线文本)。定义文本下划线。
s: Strikethrough Text (删除文本线)。定义删除线。
strike:Strikethrough Text (删除文本线)。定义删除线。

三、属性分类

1、核心属性

核心语义属性(Core Attributes)主要包括下面3个，这3个基本属性为大部分元素所拥有。

class: Class(类)。定义类规则或样式规则。
id: IDentity(身份)。定义元素的唯一标识。
style: Style (样式)。定义元素的样式声明。
但是下面这些元素不拥有核心语义属性。
html、head：文档和头部基本结构。
title：网页标题。
base:网页基准信息。
meta：网页元信息。
param：元素参数信息。
script、style：网页的脚本和样式。
这些元素一般位于文档头部区域，用来传递网页元信息。

2、语言属性

语言语义属性(Language Attributes)主要用来定义元素的语言类型，包括两个属性。

lang: Language(语言)。定义元素的语言代码或编码。
dir: Direction(方向)。定义文本方向，包括ltr和rtl取值，分别表示从左向右和从右向左。
下面这些元素不拥有语言语义属性。
frameset、frame、iframe:网页框架结构。
br:换行标识。
hr：结构装饰线。
base:网页基准信息。
param：元素参数信息。
script:网页的脚本。

【示例】下面分别为网页代码定义了中文简体的语言，字符对齐方式为从左到右的方式。第二行代码为body定义了美式英语。

<html xmlns="http://www.w3.org/1999/xhtml"dir="Itr" xml:lang="zh-CN">
<body id="myid" lang="en-us">

3、键盘属性

键盘语义属性(Keyboard Attributes)定义元素的键盘访问方法，包括两个属性。

accesskey: Access Key (访问键)。定义访问某元素的键盘快捷键。
tabindex: Tab Index(Tab键索引)。定义元素的Tab键索引编号。

4、内容属性

内容语义属性(Content Atributes)定义元素包含内容的附加信息，这些信息对于元素来说具有重要补充作用，避免元素本身包含信息不全而被误解。内容语义包括5个属性。

alt:Alternate Text(替换文本)。定义元素的替换文本。
title: Title (标题)。定义元素的提示文本。
londesc: Long Describe(长文描述)。定义元素包含内容的大段描述信息。
cite: Cite(引用)。定义元素包含内容的引用信息。
datetime:Date and Time (日期和时间)。定义元素包含内容的日期和时间。
alt属性

alt和 tile是两个常用的属性，分别定义元素的替换文本和提示文本，但是很多设计师习惯于混用这两个属性，没有刻意去区分它们的语文性。实际上，除了IE浏览器，其他标准浏览器都不会支持它们的混用，但是由于正浏览器的纵容，才导致了很多误以为alt属性就是设置提示文本的。

【示例1】下面的示例分别在超链接和图像中定义title属性。

<a href="URL"title="提示文本”＞超链接</a>
<img sre="URL"alt="替换文本"title="提示文本"/>

【示例2】下面的示例是在图像按钮域中定义alt属性

<input type="image" src="URL"alt-"替换文本">

title属性

titde属性为元素提供提示性的参考信息，这些信息是一些额外的说明，具有非本质性，因此该属性也不是一个必须设置的属性。当鼠标指针移到元素上面时，即可看到这些提示信息。但是title属性不能够用在下面元素上。

html、head:文档和头部基本结构。
title：网页标题。
base、 basefont:网页基准信息。
meta：网页元信息。
param:元素参数信息。
script:网页的脚本和样式。
longdesc属性

如果要为元素定义更长的描述信息，则应该使用longdesc属性。longdesc属性可以用来提供链接到一个包含图片描述信息的单独页面或者长段描述信息。

【示例3】下面的示例是使用longdesc属性定义图像的描述信息。

img sn-"URI"alt-"人物照”title=”张三于2014-5-1中国馆留念”longdesc="这是张三于2014年5月1日在中国馆前的留影，当时天很热，穿着短裤，手里拿着矿泉水，到处都是云集于此的世博会开幕式观众，场面热闹非凡“

或

<img sre="UTL"alt="替换文本"longdesc=”详细描述图像的网页.html"/＞

cite和datetime属性

cite一般用来定义引用信息的URL。
【示例4】下面一段文字引自http://www.mysite.cn/csslayout/index.htm，所以可以这样来设置：

<blockquote cite="http:/www.mysite.cn/csslayout/index.htm">
<p>CSS的精髓是布局，而不是样式，布局需要缜密的结构分析和设计</p>
<blockquote>

datetime属性定义包含文本的时间，这个时间表示信息的发布时间，也可能是更新时间。
【示例5】下面的代码是使用datetime属性为<ins＞标签定义发布时间。

<ins datetime="2014-5-1 8:0:0">2014年上海</ins>

5、其他属性

rel: Relationship (关联)。定义当前页面与其他页面的关系。
rev: Reverse Link (反向链接)。定义其他页面与当前页面之间的链接关系。

rel属性和rev属性定义了源文档和目标文档的关系，说明如下。

appendix：链接到文档的附录页。
altermate:链接到一个备选的源。
bookmark：链接到一个书签。
chapter：从当前文档链接到一个章节。
contents：链接到当前文档的内容目录。
copyright:链接到当前文档的版权或隐私页面。
glossary:链接到当前文档术语表。
index:链接到当前文档的索引。
next：链接到集合中的下一个文档。
prev:链接到集合中的前一个文档。
section:链接到文档列表中的一个小节。
start：链接到当前文档的第一页。
subsection：链接到当前文档列表中的子小节。
head：链接到集合中的顶级文档。
toc：链接到集合的目录。
parent:链接到源上面的文档。
child:链接到源下面的文档。

四、定义文本信息

1、设计标题信息

网页标题很重要，因为不仅浏览者要看标题，机器也同样要先检索标题。

<div id="wrapper">
        <h1>网页标题</h1>
        <h2>网页副标题</h2>
            <div id="box1">
                <h3>栏目标题</h3>
                <p>正文</p>
        </div>
        <div id="box2">
            <h3>栏目标题</h3>
            <div id="sub box1">
                <h4>子栏目标题</h4>
                <p>正文</p>
            </div>
            <div id="sub box2">
            <h4>子栏目标题</h4>
            <p>正文</p>
            </div>
        </div>
    </div>

2、设计段落信息

在设计HTML段落信息时，您需要考虑以下几个方面：

段落标签：在HTML中，使用<p>标签来定义段落。段落是您在网页上创建文本的自然分段。

<p>这是一个段落。</p>

段落样式：可以使用CSS来设置段落的样式，例如字体、大小、颜色、对齐方式等。

<style>
p {
  font-family: Arial, sans-serif;
  font-size: 16px;
  color: #333;
  text-align: justify;
  margin: 1em 0;
}
</style>

段落缩进：使用CSS属性text-indent设置段落的首行缩进。

<style>
p {
  text-indent: 2em;
}
</style>

换行：使用<br>标签在段落中换行，或在CSS中使用white-space属性。

<p>这是一个段落。这是一行新内容。</p>

<p>这是一个段落。这是一行新内容。</p>

<style>
p {
  white-space: pre-wrap;
}
</style>

区块引用：使用<blockquote>和<q>标签来标识引用的内容。

<blockquote cite="***">
  这是一个区块引用。
</blockquote>

<p>这是普通的文本。</p>

<q cite="***">
  这是一个短的引用。
</q>

列表：使用<ul>（无序列表）和<ol>（有序列表）创建列表。

<ul>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
</ul>

<ol>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
</ol>

以上是设计HTML段落信息的一些基本技巧。根据您的需求，可以组合和使用这些元素来创建更具吸引力和功能性的页面布局。

3、设计引用信息

在HTML中设计引用信息时，可以使用以下几种方法：

区块引用（Blockquote）：当您需要引用一段较长的文字时，可以使用<blockquote>标签。

<blockquote cite="***">
  这是一个区块引用。这是一段引用的文字，可能来自一篇文章、演讲或其他来源。
</blockquote>

短的引用（Short Quote）：当您需要引用简短的文字时，可以使用<q>标签。

<p>这是一个普通的段落。下面是一个短的引用：</p>
<p><q cite="***">这是一个短的引用。</q></p>

引文来源（Citation）：使用<cite>标签来标注引文的来源。通常用于作品标题、文章作者等。

<p>这句话出自《哈姆雷特》。</p>
<p><cite>《哈姆雷特》</cite> - 威廉·莎士比亚</p>

列表引用：当您需要列出一系列引用时，可以使用无序列表（<ul>）和有序列表（<ol>）。

<ul>
  <li><q cite="***">第一个引用。</q></li>
  <li><q cite="***">第二个引用。</q></li>
  <li><q cite="***">第三个引用。</q></li>
</ul>

在引用信息时，请确保遵循正确的引用格式，包括使用<cite>标签标明来源，以及使用<q>和<blockquote>标签恰当地引用内容。同时，也可以使用CSS来设置引用信息的样式，例如设置字体、颜色、缩进等。

4、设计强调信息

在HTML中设计强调信息时，可以使用以下几种方法：

加粗（Bold）：使用HTML的<b>或<strong>标签对文本进行加粗。这两个标签的功能相同，但<strong>是更符合语义化的标签。

<p>这是一个普通的句子。这是一个 <b>加粗的句子</b>。</p>
<p>这是一个普通的句子。这是一个 <strong>加粗的句子</strong>。</p>

斜体（Italic）：使用HTML的<i>或<em>标签对文本进行斜体。这两个标签的功能相同，但<em>是更符合语义化的标签。

<p>这是一个普通的句子。这是一个 <i>斜体的句子</i>。</p>
<p>这是一个普通的句子。这是一个 <em>斜体的句子</em>。</p>

下划线（Underline）：在某些浏览器中，使用HTML的<u>标签可以对文本添加下划线。但在现代网页设计中，不推荐使用<u>标签，因为它可能会与文本的装饰性下划线功能产生冲突。如果需要强调信息，建议使用加粗或斜体标签。
大小写（Uppercase/Lowercase）：使用CSS的text-transform属性设置文本为大写或小写。

<p>这是一个普通的句子。这是一个 <span style="text-transform: uppercase">大写的句子</span>。</p>
<p>这是一个普通的句子。这是一个 <span style="text-transform: lowercase">小写的句子</span>。</p>

颜色和高亮：使用CSS的color和background-color属性设置文本的颜色和高亮。

<p>这是一个普通的句子。这是一个 <span style="color: red; background-color: yellow;">红色高亮句子</span>。</p>

注意，在强调信息时，不要过多地使用这些效果，以免影响阅读体验。根据文本内容和设计需求，选择合适的强调方式。

5、设计格式信息

文本格式化是网页排版中的一项重要工作，不过格式化属于表现层的内容，一般使用CSS 来实现领式格式的设置。所以在标准设计中如果没有特殊需求，是不建议使用格式化元素来定义文本的表现效果的，例如，给文本设置粗体、斜体、变大、变小、下划线等效果。

但是在某些情况下又需要这样的语义结构，常用结构如下。

b:粗体。
i：斜体。
big:文本变大。
small:文本变小。
sup:文本上标。
sub：文本下标。
bdo:文本显示方向。

6、设计输出信息

HTML元素提供了很多输出信息的元素(如下所示)

code:表示代码字体，即显示源代码。
pre:表示预定义格式的源代码，即保留源代码显示中的空格大小。
tt：表示打印机字体。
kbd：表示键盘字体。
dfn：表示定义的术语。
var:表示变量字体。
samp:表示代码范例。

示例如图

<div id="output">
        <p>表示预定义格式的源代码：</p> 
        <pre>
    var count = 0; 
    while (count<10){
        document.write(count +"&lt;br&gt;");
        count++;
    }
    </pre>
        <p>表示代码字体：<code>Specifies a code sample</code></p> 
        <p>表示打印机字体：<tt>Renders text in a fixed-width font</tt></p>
        <p>表示键盘字体：<kbd>Renders text in a fixed-width font</kbd></p>
        <p>表示定义的术语：<dfn>Indicates the defining instance of a term</dfn></p>
        <p>表示变量字体:<var>Defines a programming variable. Typically renders in an italic font style</var></p>
        <p>表示代码范例：<samp>Specifies a code sample</samp></p>
    </div>

7、设计信息缩写

在HTML中，可以使用<abbr>和<acronym>标签设计信息缩写。这两个标签的功能类似，但具有不同的语义：

<abbr>（Abbreviation）：表示一个缩写形式，其标题属性（title）包含完整的信息。当鼠标悬停在缩写上时，浏览器通常会显示完整的信息。

<p>这是一个缩写：<abbr title="Hypertext Markup Language">HTML</abbr></p>

<acronym>（Acronym）：表示一个首字母缩写词，其标题属性（title）包含完整的信息。与<abbr>类似，当鼠标悬停在缩写上时，浏览器通常会显示完整的信息。

<p>这是一个首字母缩写：<acronym title="World Wide Web">WWW</acronym></p>

注意，<acronym>标签在HTML5中已弃用，因为许多首字母缩写词并不是真正的缩写，而是单词的缩写形式。因此，现在更推荐使用<abbr>标签。

要在文本中添加下划线，可以使用HTML的<u>标签，但这在一些浏览器中可能会与文本的装饰性下划线功能产生冲突。如果需要强调信息，建议使用加粗或斜体标签。

8、设计插入和删除信息

在HTML中，可以使用以下标签设计插入和删除信息：

删除线（Strikethrough）：使用HTML的<del>和<s>标签表示删除的信息。这两个标签的功能相同，但<del>是更符合语义化的标签。

<p>这是一个普通的句子。这是一个 <del>已删除的句子</del>。</p>
<p>这是一个普通的句子。这是一个 <s>已删除的句子</s>。</p>

下划线（Underline）：使用HTML的<ins>和<u>标签表示插入的信息。这两个标签的功能相同，但<ins>是更符合语义化的标签。在某些浏览器中，<u>标签可能会与文本的装饰性下划线功能产生冲突。如果需要强调信息，建议使用加粗或斜体标签。

<p>这是一个普通的句子。这是一个 <ins>插入的句子</ins>。</p>
<p>这是一个普通的句子。这是一个 <u>下划线的句子</u>。</p>

变色（Highlight）：在某些浏览器中，使用HTML的<mark>标签表示需要变色的信息。

<p>这是一个普通的句子。这是一个 <mark>变色的句子</mark>。</p>

请注意，这些标签主要表示文本的样式，而不是真正意义上的删除或插入操作。在实际应用中，可以根据需要组合和使用这些标签。同时，也可以使用CSS进一步设置插入和删除信息的样式，例如字体、颜色、间距等。

9、设计其他文本信息

除了上述提到的标签外，HTML还提供了其他一些用于设计文本信息的标签，如下所示：

字体（Font）：使用HTML的<font>标签定义文本的字体、大小、颜色等样式。然而，这个标签在HTML5中已废弃，建议使用CSS设置字体样式。

<font face="Arial" size="4" color="red">这是一个设置字体样式的句子。</font>

尺寸（Size）：使用HTML的<small>、<big>和<span>标签设置文本的大小。这些标签在HTML5中也已废弃，建议使用CSS设置文本大小。

<small>这是一个较小的文本。</small>
<big>这是一个较大的文本。</big>
<span style="font-size: 18px;">这是一个设置字体大小的文本。</span>

颜色（Color）：使用HTML的<font>标签或<span>标签的color属性设置文本的颜色。然而，这些标签在设置颜色方面有所局限，建议使用CSS设置文本颜色。

<font color="red">这是一个红色的文本。</font>
<span style="color: blue;">这是一个蓝色的文本。</span>

样式（Style）：使用HTML的<span>标签的style属性设置文本的样式。这种方法灵活性较高，可以定义多种样式。

<span style="font-family: Arial; font-size: 16px; color: #333;">这是一个设置字体、大小和颜色的文本。</span>

在实际应用中，可以根据需要组合和使用这些标签和属性。然而，值得注意的是，许多这些标签在HTML5中已被废弃，因为CSS提供了更灵活的样式设置方式。因此，在设置文本样式时，建议优先使用CSS。

五、定义列表信息

1、认识列表

HTML版本提供了很多列表元素，详细说明如下。

ul：无序列表。
ol：有序列表。
li：列表项目。
dl：定义列表。
dt:定义列表标题。
dd：定义列表说明。
已废弃的元素如下。
menu:菜单列表。
dir：目录列表。
早期版本的HTML把列表元素区分得过细，列表语义性存在很多重复性，因此menu和dir就不再建议使用。

2、设计普通列表

<h1>列表结构示例</h1>
    <h2>百度互联网新闻分类列表</h2>
    <ol>
        <li>网友热论网络文学：渐入主流还是刹那流星？</li>
        <li>电信封杀路由器？消费者质疑：强迫交易</li>
        <li>大学生创业俱乐部为大学生自主创业助力</li>
    </ol>
    <h2>焊机产品型号列表</h2>
    <ul>
        <li>直流氩弧焊机系列</li>
        <li>空气等离子切割机系列</li>
        <li>氩焊/手弧/切割三用机系列</li>
    </ul>
    <h2>站点导航菜单列表</h2>
    <ul>
        <li>微博</li>
        <li>社区</li>
        <li>新闻</li>
    </ul>

3、设计定义列表

在HTML中，定义列表（Definition List）用于展示一组项目及其对应的定义。定义列表包括一个或多个<dl>（Definition List）元素，每个<dl>元素内包含一个或多个<dt>（Definition Term）元素和<dd>（Definition Description）元素。

以下是一个定义列表的示例：

<dl>
  <dt>HTML</dt>
  <dd>超文本标记语言（HyperText Markup Language）是一种用于创建网页的标准标记语言。</dd>

  <dt>CSS</dt>
  <dd>层叠样式表（Cascading Style Sheets）是一种用于描述HTML和XML文档呈现的样式表语言。</dd>

  <dt>JavaScript</dt>
  <dd>JavaScript是一种基于原型的脚本语言，用于创建动态交互式网页。</dd>
</dl>

在这个示例中，<dl>元素包含了三个定义项。每个<dt>元素定义了一个术语，而相应的<dd>元素提供了该术语的定义描述。浏览器通常会对<dt>和<dd>元素进行格式化，例如将<dt>元素设置为粗体，并将<dd>元素缩进。

您可以根据需要为定义列表添加更多的定义项。在每个<dl>元素内，可以包含多个<dt>和<dd>元素，它们之间可以随意排列。

4、使用定义列表的误区

在使用HTML定义列表时，需要注意以下几点误区：

误解定义列表的用途：定义列表不应该被用作普通的列表，而是应该用于定义术语和其对应的描述。如果你只需要一个简单的列表，使用<ul>（无序列表）或<ol>（有序列表）会更合适。
混淆<dl>、<dt>和<dd>元素：根据定义列表的语义，<dl>元素用于包裹整个定义列表，而<dt>和<dd>元素用于定义术语及其描述。不要在<dt>元素内使用<dd>元素，反之亦然。
不正确的嵌套：定义列表允许嵌套，这意味着您可以在<dd>元素内再包含一个定义列表。但是，不要过度嵌套定义列表，因为这样可能会导致混乱和难以阅读。尽量保持嵌套层次简单明了。
不使用标签属性：<dl>、<dt>和<dd>元素支持一些属性，如id、class和title，这些属性可以帮助您更好地组织、样式化和描述定义列表。适当地使用这些属性可以提高定义列表的可访问性和语义化。
忽略CSS样式：定义列表的默认样式可能不适合您的设计要求。使用CSS可以自定义定义列表的样式，以便更好地适应您的网页设计。

避免这些误区，遵循HTML规范和使用最佳实践，将会使您的定义列表更易于访问和理解。

六、设计表格

1、认识表格结构

在默认情况下表格包含3个元素：table、tr和td。

table: Table(表)。
tr: Table Row (表格行)。
td: Table Data Cell(表格数据单元)。

table元素用来定义数据表格的外框，或者称为数据包含框。r是Table Row(表格行)的缩写，根据语义可以知道它是一行数据的包含框。td元素是Table Data Cell(表格数据单元)的缩写，有时简称为单元格。数据表中的数据一般都存储在td元素中，而该元素又嵌套在tr元素中，tr元素嵌套在table元素中，形成3层结构关系。

2、使用表格元素

完整的表格不仅仅包含table、tr和td这3个元素，实际上表格包含有更多的语义元素和语义属性。学会使用这些元素和属性，能够极大地提高数据表格的语义性。

其中数据表格的语义元素说明如下。

th: Table Header (表头)。列标题元素。
caption:Table Caption(表格标题)。数据表格的标题元素。
summary: Table Summary(表格摘要)。table元素的属性，定义数据表格的摘要。

3、表格分组

HTML提供了5个数据表分组元素，简单说明如下。

数据行分组。

thead: Table Header (表格头)。在数据表中定义头部区域。
tbody: Table Body(表格主体)。在数据表中定义主体区域。
tfoot: Table Footer(表格脚)。在数据表中定义脚部区域。
数据列分组。
col: Table Columns (表格列)。在数据表中定义列区域。
colgroup: Groups of Table Columns(数据列组)。

七、设计表单

1、认识表单结构

一个功能完整的表单结构应该包含3部分：包含框、输入框和提交按钮。

form元素表示表单的意思，与table元素一样，form元素也是一个包含框，它包含了所有的表单域元素。form元素负责数据的处理任务，包括对各个表单域的数据采集、打包和发送到指定的服务器端目标文件中。
input 是一个表单域对象，也可以称为一个输入框，由该元素还可以延伸出很多形式的输入框。虽然形式不同，但是它们都承载着用户数据输入的接口作用。

2、使用表单元素

form: Form(形状)。定义表单。
input:Input Field(文本区域)。定义输入域。
textarea: Text Area (文本区域)。定义输入区域。
select:Selectable List (可选择的列表)。定义下拉菜单或列表框。
option: Option(选项)。定义下拉选项或列表选项。
button: Push Button(发送按钮)。定义表单的发送按钮。
optgroup: Option Group(选项组)。定义下拉选项组。
label: Label(标签)。定义表单的控制标签。
fieldset: Field Set(域组)。定义表单的字段域(或称字段集)。
legend: Legend(图例)。定义字段域的标题。
已废弃的元素如下。
isindex: Is Index(索引)。定义简单的输入框。
所有表单元素都包含两个基本属性。
name:该属性定义了表单对象的名称，后台服务器能够利用该属性值来读取其中的数据。除了按钮之后，其他表单对象都应该设置name属性。设置name属性可以根据对应表单对象包含的内容来确定。
id：该属性定义了表单对象的ID编码，前台客户端脚本能够利用该属性控制该对象的动态表现。一般可以为表单对象的name和id属性设置相同的属性值。

3、form元素

HTML form元素用于创建表单，以便让用户输入信息。表单通常用于收集用户信息，如用户名、密码、电子邮件等。form元素包含若干表单控件，如文本框、密码框、单选按钮、复选框、下拉列表等。

以下是一个简单的HTML表单示例：

<!DOCTYPE html>
<html>
<head>
  <title>表单示例</title>
</head>
<body>
  <form action="/submit" method="post">
    
    <label for="username">用户名：</label>
    <input type="text" id="username" name="username" required>
    
    <label for="password">密码：</label>
    <input type="password" id="password" name="password" required>
    
    <label for="email">电子邮件：</label>
    <input type="email" id="email" name="email" required>
    
    <button type="submit">提交</button>
  </form>
</body>
</html>

在这个示例中，我们创建了一个包含三个表单控件的表单：

username：一个单行文本输入框，用于输入用户名。
password：一个密码输入框，用于输入密码。
email：一个电子邮件输入框，用于输入电子邮件地址。

<form>元素的action属性指定了表单提交时的目标URL，method属性指定了提交方式（get或post）。在提交表单时，表单中的数据将被发送到指定的URL。

除了上述示例中的表单控件，还有许多其他类型的表单控件，如单选按钮、复选框、下拉列表、文件上传等。您可以根据需要自定义表单，以满足您的网站需求。

4、input元素

HTML input元素用于创建表单控件，如文本框、密码框、单选按钮、复选框、按钮等。它是HTML表单的核心元素，允许用户输入和选择信息。

以下是一些常见的input元素类型及其用法：

文本框（text）：

<input type="text" id="username" name="username" required>

密码框（password）：

<input type="password" id="password" name="password" required>

单选按钮（radio）：

<input type="radio" id="male" name="gender" value="male">
<label for="male">男</label>

<input type="radio" id="female" name="gender" value="female">
<label for="female">女</label>

复选框（checkbox）：

<input type="checkbox" id="agree" name="agree" value="yes">
<label for="agree">我同意服务条款</label>

提交按钮（submit）：

<button type="submit">提交</button>

重置按钮（reset）：

<button type="reset">重置</button>

文件选择框（file）：

<input type="file" id="file" name="file">

这些示例展示了input元素的一些基本用法。您可以根据需要自定义这些控件的样式、大小和属性，以满足您的网站需求。在实际应用中，您可能会遇到其他类型的input元素，例如隐藏输入框（hidden）、图像提交按钮（image）等。熟悉这些元素及其属性将有助于您创建功能强大、易于使用的表单。

5、textarea和select元素

<textarea> 和 <select> 元素也是HTML表单中的重要元素，它们分别用于创建文本域和下拉选择框。

文本域（textarea）：

<textarea id="message" name="message" rows="10" cols="50" required></textarea>

<textarea>元素用于创建多行文本输入框。在这个示例中，我们创建了一个名为message的文本域，并设置了10行50列的初始大小。required属性表示这个文本域是必填的。

下拉选择框（select）：

<select id="country" name="country">
  <option value="cn">中国</option>
  <option value="us">美国</option>
  <option value="uk">英国</option>
  <option value="fr">法国</option>
</select>

<select>元素用于创建下拉选择框。在这个示例中，我们创建了一个名为country的下拉选择框，其中包括四个选项：中国、美国、英国和法国。<option>元素定义了每个选项，其value属性指定了选项的值，在表单提交时会作为数据发送。

在实际应用中，您可能会遇到更加复杂的表单需求。这时，您可能需要使用JavaScript和CSS来进一步自定义和优化表单的布局与功能。同时，了解其他表单元素（如隐藏输入框、图像提交按钮等）也会有所帮助。

6、表单分组

在HTML表单中，您可以使用<fieldset>和<legend>元素对表单控件进行分组。分组有助于将相关的表单元素组合在一起，提高用户体验和可读性。

这是一个简单的表单分组示例：

<form>
  <fieldset>
    <legend>个人信息</legend>
    <label for="username">用户名：</label>
    <input type="text" id="username" name="username" required>
    
    <label for="password">密码：</label>
    <input type="password" id="password" name="password" required>
  </fieldset>

  <fieldset>
    <legend>联系方式</legend>
    <label for="email">电子邮件：</label>
    <input type="email" id="email" name="email" required>

    <label for="phone">电话：</label>
    <input type="tel" id="phone" name="phone">
  </fieldset>
</form>

在这个示例中，我们创建了两个分组：“个人信息”和“联系方式”。每个分组都有一个<legend>元素，用于描述该分组的内容。在每个分组中，我们放置了相关的表单控件（如文本框、密码框等）。

在实际应用中，您可以根据需要创建更多分组，以便更好地组织您的表单。使用分组可以帮助您避免混淆和不必要的复杂表单结构。

7、绑定提示标签

要将提示标签与表单控件绑定，您可以使用HTML的<label>元素。<label>元素可以为用户提供更好的反馈，提高表单的可用性。

以下是一个绑定提示标签的示例：

<form>
  <label for="username">用户名：</label>
  <input type="text" id="username" name="username" required>

  <label for="password">密码：</label>
  <input type="password" id="password" name="password" required>

  <label for="email">电子邮件：</label>
  <input type="email" id="email" name="email" required>
</form>

在这个示例中，我们为每个表单控件添加了一个<label>元素。<label>元素的for属性的值与相关表单控件的id属性值相同。这样一来，当用户聚焦或点击提示标签时，浏览器会自动将焦点转到对应的表单控件上。

绑定提示标签可以提高表单的易用性，因为用户可以通过点击或聚焦标签来与表单控件互动，而不必精确地点击较小的表单控件。这对移动设备上的用户尤其有帮助。

8、定义快捷键、访问键和禁止访问

在HTML中，您可以使用一些属性来定义快捷键、访问键和禁止访问。这些属性有助于提高页面的可访问性和用户体验。

定义快捷键：

使用accesskey属性可以为元素定义一个快捷键。用户可以通过按下快捷键快速聚焦到该元素。例如：

<button accesskey="s">提交</button>

这个示例中，当您按下Alt + S（在Windows和Linux上）或Cmd + S（在macOS上）时，焦点将转到按钮上。

定义访问键：

使用tabindex属性可以为元素定义访问键。当用户按下Tab键时，具有访问键的元素将得到聚焦。例如：

<button tabindex="2">提交</button>

这个示例中，当您按下Tab键时，按钮将成为第二个获得焦点的元素（假设第一个获得焦点的元素的tabindex值为1或没有定义tabindex）。

禁止访问：

使用disabled属性可以禁止用户访问表单控件。被禁用的元素将不能被聚焦，也不能接受用户输入。例如：

<input type="text" id="username" name="username" disabled>

这个示例中，输入框将被禁用，用户无法在其上进行输入。

在实际应用中，您可以根据需要为元素定义快捷键、访问键和禁用访问。这些属性有助于提高页面的可访问性和用户体验，尤其是对于需要使用键盘导航的用户。

9、select选项分区

在HTML中，<select>元素用于创建下拉选择框。您可以将选项分组，以便更好地组织复杂的选择列表。这样做有助于提高用户体验和可读性。

有两种方法可以将选项分组：

使用<optgroup>元素：

<select>
  <optgroup label="亚洲">
    <option value="cn">中国</option>
    <option value="jp">日本</option>
    <option value="kr">韩国</option>
  </optgroup>
  <optgroup label="欧洲">
    <option value="uk">英国</option>
    <option value="fr">法国</option>
    <option value="de">德国</option>
  </optgroup>
</select>

在这个示例中，我们使用了<optgroup>元素将选项分成两个分组：“亚洲”和“欧洲”。每个分组都有一个label属性，用于描述该分组的内容。

使用HTML5的<datalist>元素和<option>元素的group属性：

<datalist id="countries">
  <option value="cn">中国</option>
  <option value="jp">日本</option>
  <option value="kr">韩国</option>
</datalist>

<datalist id="countries">
  <option value="uk">英国</option>
  <option value="fr">法国</option>
  <option value="de">德国</option>
</datalist>

<select>
  <option value="cn">中国</option>
  <option value="jp">日本</option>
  <option value="kr">韩国</option>
  <option value="uk">英国</option>
  <option value="fr">法国</option>
  <option value="de">德国</option>
</select>

在这个示例中，我们使用了两个<datalist>元素将选项分组。每个<option>元素都有一个group属性，用于定义其所属的分组。这种方法在旧版浏览器中可能不兼容，因此请根据您的需求进行选择。

在实际应用中，您可以根据需要进一步分组选项，以便更好地组织复杂的选择列表。分组有助于提高用户体验和可读性。

10、使用按钮

HTML定义按钮的方式有多种，从功能上可以随意使用，但是从语义角度来分析，按钮只有使用button元素才更符合语义结构。

button元素默认表现的效果与将input元素的属性type设置为submit的效果是一致的，但是从语 Not F 义角度分析，不建议使用input元素。因为input是输入的意思，用作按钮时，对于机器来说是一种不友好的表现。在button元素内可以放置内容，如文本和图片等。例如：

 <button><img src="images/login.gif"alt="登录"/></button>

buton 相对于input元素来说为按钮提供了更多的功能、更丰富的内容。button 将按钮文字单独列出来，并且可以在button内添加图片，赋予文字和图片更多选择的样式，使生硬的按钮变得更生动。

八、案例实战

1、设计一个自我介绍简单页面

<h1>自我介绍</h1>
        <dl>
            <dt>姓名</dt>
                <dd>张涛</dd>
            <dt>性别</dt>
                <dd>女</dd>
            <dt>住址</dt>
                <dd>北京亚运村</dd>
            <dt>爱好</dt>
                <dd>网页设计、听歌曲、上微博</dd>
        </dl>
            <img src="images head ine" width=“50%>
            <p>大家好，我的网名是艾莉莎，现在我将简单介绍一下我自己，我是21岁，出生在中国东北。
                爱一个人好难，爱两个人正常，爱三个人好玩，爱四个人好早凡，爱五个人罢盈，爱六个人了不得拦，
                爱七个人是天才是我就只爱我的凡容&ran；艾莉莎，冒犯。</p>

2、解决网页乱码现象

在网页开发过程中，乱码问题是经常遇到的。乱码可能发生在页面加载、表单提交等环节。以下是一些解决网页乱码问题的建议：

确认文件编码：确保您的HTML、CSS和JavaScript文件的编码与您使用的文本编辑器保持一致。常见的编码有UTF-8和GBK等。
设置HTML header：在HTML页面的<head>部分，添加<meta>元素来声明编码类型。例如：

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>我的页面</title>
</head>

设置后端编码：如果您的服务器支持PHP等后端语言，请确保后端代码的编码设置与前端一致。在PHP中，您可以在文件开头添加以下代码：

header("Content-Type: text/html; charset=UTF-8");

使用JavaScript处理乱码：在某些情况下，您可能需要使用JavaScript来解决乱码问题。例如，在处理来自表单的数据时，可以使用decodeURIComponent()函数对URL编码的字符进行解码。
检查数据库编码：如果使用数据库存储数据，请确保数据库和表格的编码设置正确。例如，MySQL的utf8_general_ci编码可以处理大多数字符集。
使用开发工具：使用开发者工具（如Chrome DevTools或Firefox Developer Tools）检查网络请求和响应，以确保在传输过程中没有发生编码错误。
遵循编码规范：尽量使用Unicode字符集，避免在代码中使用非Unicode字符。这样可以确保在不同平台和设备上正确显示文本。

通过遵循这些建议，您应该能够解决大多数网页乱码问题。如果问题仍然存在，请检查您的代码和其他相关部分，以确保每个环节都使用正确的编码。

3、把HTML转换为XHTNL

要将HTML转换为XHTML，可以遵循以下步骤：

确保您的HTML文件符合XHTML的语法规则。请参考上文所述的规则。
更改文件扩展名为.xhtml。
在文件的顶部添加一个XML声明，以便于浏览器正确识别文件类型：

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "***/TR/xhtml1/DTD/xhtml1-strict.dtd">

您还可以添加一个XML命名空间，以便支持XHTML的高级特性：

<html xmlns="***/1999/xhtml">

完成这些步骤后，您的HTML文件现已转换为XHTML。请注意，XHTML对语法的要求更加严格，因此请确保您的代码没有错误。在转换过程中，您可能会遇到一些兼容性问题。如果遇到这些问题，请查阅相关资料以解决问题。

不被定义的~wolf

关注

22
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
手把手教你如何设计符合语义的页面

Web的未来是语义化的Web(语义化网页)，语义化的好处主要是对人机都比较友好，拥有了良好的语义结构，网页内容就很容易被搜索引擎检索和收录。标准结构的设计原则是使用语义化的标签元素来构造文档的内容结构，每个HTML元素都定义了特定语义，不能够乱用标签。例如，很多人习惯使用br元素来代替p元素，定义段落文本；使用div元素来代替h元素来定义标题。很多初学者把元素的语义性与元素的样式混在一起，认为选元素就是选样式。
复制链接

扫一扫