胖蔡说技术
随便扯扯

HTML基础组成和语义化

HTML HyperText Mark-up Language 的首字母简写,意思是超文本标记语言,超文本指的是超链接,标记指的是标签,是一种用来制作网页的语言,这种语言由一个个的标签组成,用这种语言制作的文件保存的是一个文本文件,文件的扩展名为html或者htm,一个html文件就是一个网页,html文件用编辑器打开显示的是文本,可以用文本的方式编辑它,如果用浏览器打开,浏览器会按照标签描述内容将文件渲染成网页,显示的网页可以从一个网页链接跳转到另外一个网页。

html基本结构

一个html的基本结构如下:

<!DOCTYPE html>
<html lang="en">
    <head>            
        <meta charset="UTF-8">
        <title>网页标题</title>
    </head>
    <body>
          网页显示内容
    </body>
</html>

第一行是文档声明,第二行“<html>”标签和最后一行“</html>”定义html文档的整体,“<html>”标签中的‘lang=“en”’定义网页的语言为英文,定义成中文是’lang=”zh-CN”‘,不定义也没什么影响,它一般作为分析统计用。 “<head>”标签和“<body>”标签是它的第一层子元素,“<head>”标签里面负责对网页进行一些设置以及定义标题,设置包括定义网页的编码格式,外链css样式文件和javascript文件等,设置的内容不会显示在网页上,标题的内容会显示在标题栏,“<body>”内编写网页上显示的内容。

HTML文档类型

目前常用的两种文档类型是xhtml 1.0和html5

xhtml 1.0

xhtml 1.0 是html5之前的一个常用的版本,目前许多网站仍然使用此版本。
此版本文档用sublime text创建方法: html:xt + tab
文档示例:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title> xhtml 1.0 文档类型 </title>
</head>
<body>

</body>
</html>
html5

pc端可以使用xhtml 1.0,也可以使用html5,html5是向下兼容的
此版本文档用sublime text创建方法: html:5 + tab 或者 ! + tab
文档示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> html5文档类型 </title>
</head>
<body>

</body>
</html>

两种文档的区别

1、文档声明和编码声明

2、html5新增了标签元素以及元素属性

html文档规范

xhtml制定了文档的编写规范,html5可部分遵守,也可全部遵守,看开发要求。

1、所有的标签必须小写

2、所有的属性必须用双引号括起来

3、所有标签必须闭合

4、img必须要加alt属性(对图片的描述)

html注释:

html文档代码中可以插入注释,注释是对代码的说明和解释,注释的内容不会显示在页面上,html代码中插入注释的方法是:

<!-- 这是一段注释  -->

html标签特点:

html的标签大部分是成对出现的,少量是单个出现的,特定标签之间可以相互嵌套,嵌套就是指一个标签里面可以包含一个或多个其他的标签,包含的标签和父标签可以是同类型的,也可以是不同类型的:

<!-- 成对出现的标签  -->
<body>......</body>
<p>......</p>
<div>......</div>
<b>......</b>

<!-- 单个出现的标签  -->
<br />
<img src="..." />
<input type="..." />

<!-- 标签之间的嵌套  -->
<p>
    <span>...</span>
    <a href="...">...</a>
</p>
<div>
      <h3>...</h3>
      <div>
              <span>...</span>
              <p>...</p>
      </div>
</div>

常见语义化标签

  • <title>:定义文档的标题(注:只能在head标签内出现)。
  • <hn>:h1~h6,分级标题,<h1> 与 <title> 协调有利于搜索引擎优化。
  • <ul>:无序列表。
  • <ol>:有序列表。
  • <header>:页眉通常包括网站标志、主导航、全站链接以及搜索框。
  • <nav>:标记导航。
  • <main>:页面主要内容,一个页面只能使用一次。如果是web应用,则包围其主要功能。
  • <article>:定义外部的内容,其中的内容独立于文档的其余部分。
  • <section>:定义文档中的节(section、区段)。比如章节、页眉、页脚或文档中的其他部分。
  • <aside>:定义其所处内容之外的内容。如侧栏、文章的一组链接、广告、友情链接、相关产品列表等。
  • <footer>:页脚,只有当父级是body时,才是整个页面的页脚。
  • <small>:呈现小号字体效果,指定细则,输入免责声明、注解、署名、版权。
  • <strong>:和 em 标签一样,用于强调文本,但它强调的程度更强一些。
  • <em>:将其中的文本表示为强调的内容,表现为斜体。
  • <mark>:使用黄色突出显示部分文本。
  • <figure>:规定独立的流内容(图像、图表、照片、代码等等)(默认有40px左右margin)。
  • <figcaption>:定义 figure 元素的标题,应该被置于 figure 元素的第一个或最后一个子元素的位置。
  • <cite>:表示所包含的文本对某个参考文献的引用,比如书籍或者杂志的标题。
  • <blockquoto>:定义块引用,块引用拥有它们自己的空间。
  • <q>:短的引述(跨浏览器问题,尽量避免使用)。
  • <time>:datetime属性遵循特定格式,如果忽略此属性,文本内容必须是合法的日期或者时间格式。
  • <abbr>:简称或缩写。
  • <dfn>:定义术语元素,与定义必须紧挨着,可以在描述列表dl元素中使用。
  • <address>:作者、相关人士或组织的联系信息(电子邮件地址、指向联系信息页的链接)。
  • <del>:移除的内容,定义文档中已被删除的文本。
  • <ins>:添加的内容,定义文档中添加的文本。
  • <code>:标记代码。
  • <meter>:定义已知范围或分数值内的标量测量。(Internet Explorer 不支持 meter 标签)
  • <progress>:定义运行中的进度(进程)。
赞(0) 打赏
转载请附上原文出处链接:胖蔡叨叨叨 » HTML基础组成和语义化
分享到: 更多 (0)

请小编喝杯咖啡~

支付宝扫一扫打赏

微信扫一扫打赏