zoukankan      html  css  js  c++  java
  • HTML5的知识分享(一):HTML5的基础标签

      标签是什么?

      标签是HTML语言是基本的元素和组成部分,它使一个网页分出范围、内容区、解释区以及各种内容的引用。简单地说,标签是使网页内各种内容相互区分,使内容与数据更加有序的、特殊的、约定好的符号。

      HTML5是近十年来Web开发标准最巨大的飞跃。和以前的版本不同,HTML5并非仅仅用来表示Web内容,它的新使命是将Web带入一个成熟的应用平台,在HTML5平台上,视频,音频,图像,动画,以及同电脑的交互都被标准化。

      HTML5标签的用途主要分为三大点:

    1. 使Web页面的内容更加有序和规范。
    2. 使搜索引擎更加容易按照HTML5规则识别出有效内容。
    3. 使Web页面更接近于一种数据字段和表。
    • <!DOCTYPE>  标签

    定义与用法:

    1. <!DOCTYPE>声明使文档中的第一个成分,位于<html>标签之前。该标签告知浏览器文档所使用的HTML规范。
    2. 文档类型声明:<!DOCTYPE HTML>

    注意:

      a、<!DOCTYPE>对大小写不敏感。

      b、请使用W3C的验证器来检查是否编写了有效的HTML/XHTML文档!

      c、<!DOCTYPE>标签没有结束标签,也就是空元素。

    • <html>标签

    定义与用法:

    1. <html>元素可告知浏览器其自身是一个HTML文档。
    2. <html>与</html>标签限定了文档的开始点和结束点,在它们之间是文档的头部和主体。就如文档的头部由<head>标签定义,而主体由<body>标签定义。

    注意:

      a、如果您出于某种原因,希望定义 xmlns 属性,唯一合法的值是"http://www.w3.org/1999/xhtml"。

      b、即使 html 元素是文档的根元素,它也不包含 doctype 元素。doctype 元素必须位于 html 元素之前。

    • <head>标签

    定义与用法:

    1. <head>标签用于定义文档的头部,它是所有头部元素的容器。<head>中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供原信息等等。
    2. 文档的头部描述了文档的各种属性和信息,包活文档的标题、在Web中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。
    3. <base>,<link>,<meta>,<script>,<style>,<title>这些标签都是可以在 <head>的标签中使用。
    4. <title> 定义文档的标题,它是 head 部分中唯一必需的元素。

    注意:

      a、应该吧<head>标签放在文档的开始处,紧跟在<html>后面,并处于<body>标签或<frameset>标签之前。

      b、一定要记住始终为文档规定标题。

    • <title>标签

    定义与用法:

    1. <title>元素可定义文档的标题。
    2. 浏览器会把标题放置在浏览器窗口的标题栏或状态上。

    注意:

      <title>标签有且只能有一个。 

    • <body>标签

    定义与用法:

    1. <body>元素定义文档的主体。
    2. <body>元素包含文档的所有内容(比如:文本、超链接、图像、表格和列表等等。)

    注意:

      在HTML5 中已删除了所有 <body> 的特殊属性。

    <!DOCTYPE HTML>
    <html>
    <head>
            <title>这里是浏览器标题文本</title>
    </head>
    <body>
            这里是文档的主体内容......
    /body>
    </html>

     

    • <h1>到<h6>标签

    定义与用法:

    1. <h1>--<h6>标签可定义标题。而 <h1> 标签是定义最大的标题,<h6> 则是定义最小的标题。
    2. 由于  h  元素拥有确切的语义,因此请您慎重的地选择恰当的标签层级来构建文档的结构。应当使用层叠样式表定义来到达漂亮的显示效果。

    注意:

      a、<hn>---</hn>这些标签显示黑体字。

      b、<hn>---</hn>这些标签自动插入一个空行,不必用 <p> 标签在家空行。因此在一行中无法使用不同大小的字体。所以它们也是段落几的标签。

    <h1>这是一级标题</h1>
    <h2>这是二级标题</h2>
    <h3>这是三级标题</h3>
    <h4>这是四级标题</h4>
    <h5>这是五级标题</h5>
    <h6>这是六级标题</h6>

    启动浏览器后,运行效果如下:


    • <p> 标签

    定义与用法:

    1. <p> 标签定义段落。
    2. p  元素会自动在其前后创建一空白行。浏览器会自动添加这些空间,您也可以在样式中规定。

    注意:

      a、<p> 是双标签,即非空元素,但有时可以省略结束标签</p>

      b、一个新的开始 <p> 标签可以结束上一个 <p> 标签。

    这里是段落前......
    <p>这里是一个段落......</p>
    这里是段落后......

    启动浏览器后,运行效果如下:

    •  <br> 标签

    定义与用法:

      可插入一个简单的换行符。

    注意:

      a、<br> 标签是空标签,在HTML5中,把结束标签放在开始标签中,也就是 <br />。

      b、<br> 标签只是简单地开始新的一行,在相邻的上下之间不会出现空行。

    <p>
    换行前......<br />换行后......
    </p>

    启动浏览器后,运行效果如下:

    • <hr> 标签

    定义与用法:

    1. <hr>标签在 HTML 页面中创建一条水平线。
    2. 水平分隔线可以在视觉上将文档分隔成多个部分。

    注意:

      a、在 HTML5 中,<hr>标签必须被正确地关闭,比如<hr />。

      b、在 HTML5 中,hr  元素的所有呈现属性均不被支持。

    <h1>这是标题</h1>
    <hr />
    <p>这是段落</p>

    启动浏览器后,运行效果如下:

    • <!--    --> 标签

    定义与用法:

    1. 网页注释标签用于在源文档中插入注释。注释会被浏览器忽略。有时您可以用注释对你的代码进行解释,这样有益于您在以后的时间对代码的编辑。
    2. 在注释中存储针对程序所定制的信息。在这种情况下,这些信息对用户是不可见的,但是对程序员来说是很可用的哦。
    3. 把注释或样式元素放入注释文本中,这样就可避免不支持脚本或样式的老浏览器把它显示为纯文本了。
    <!--这个是被注释的了哦,注释是不会再浏览器中显示的哦-->
    <p>这个是段落,会显示出来的</p>

    启动浏览器后,运行效果如下:

      HTML5 的基础标签就分享到这里啦,希望对您有带来帮助,想知道更多的标签的话,请关注我下一篇博客哦!谢谢!

  • 相关阅读:
    poj3253Fence Repair (Huffman)
    poi3617Best Cow Line ——贪心法
    高级排序之——归并排序
    Aizu
    初级排序——冒泡排序
    cookie会话
    加载web资源文件
    servlet
    Http

  • 原文地址:https://www.cnblogs.com/LHYXYM/p/10652486.html
Copyright © 2011-2022 走看看