• 9.1.2 前端


    HTML标签

    HTML作为一门标记语言,是通过各种各样的标签来标记网页内容的。我们学习HTML主要就是学习的HTML标签。

    那什么是标签呢?

    1. 在HTML中规定标签使用英文的的尖括号即<>包起来,如<html><p>都是标签。
    2. HTML中标签通常都是成对出现的,分为开始标签和结束标签,结束标签比开始标签多了一个/,如<p>标签内容</p><div>标签内容</div>。开始标签和结束标签之间的就是标签的内容。
    3. 标签之间是可以嵌套的。例如:div标签里面嵌套p标签的话,那么</p>必须放在</div>的前面。
    4. HTML标签不区分大小写,<h1><H1>是一样的,但是我们通常建议使用小写,因为大部分程序员都以小写为准。

    注意:不是所有标签都支持互相嵌套。

    标签分类

    1. 块级标签:单独占一行
    2. 内联标签:不会换行的

    对比两种标签

      1. 块级标签
        • 独占一行,默认有换行效果
        • 可以设置宽和高。没有设置宽度,宽为整个网页,没有设置高度,高为内容的高度。
      2. 内联标签
        • 只占有内容的实际大小,默认不换行
        • 不能设置宽和高。宽是内容的宽,高是内容的高。

    标签嵌套规则

    1. 块级标签可以包含内联标签或某些块级标签,但内联标签不能包含块级标签,它只能包含其它内联标签。
    2. 有几个特殊的块级标签只能包含内联标签,不能包含块级标签。如h1~h6标签、p标签。

    HTML标签属性

    HTML标签可以设置属性,属性一般以键值对的方式写在开始标签中。

    <div id="i1">这是一个div标签</div><a href="http://www.taobao.com">这是一个链接</a>

    关于标签属性的注意事项:

    1. HTML标签除一些特定属性外可以设置自定义属性,一个标签可以设置多个属性用空格分隔,多个属性不区分先后顺序。
    2. 属性值要用引号包裹起来,通常使用双引号。
    3. 属性和属性值不区分大小写,但是推荐使用小写。

    HTML注释

    无论我们学习什么编程语言,一定要重视的就是注释,我个人一直把注释看成是代码之母。 HTML中注释的格式:

    <!--这里是注释的内容-->

    注意: 注释中可以直接使用回车换行。

    并且我们习惯用注释的标签把HTML代码包裹起来。如:

    <!-- xx部分 开始 -->
        这里放你xx部分的HTML代码
    <!-- xx部分 结束 -->

    HTML注释的注意事项:

    1. HTML注释不支持嵌套。
    2. HTML注释不能写在HTML标签中。

    HTML文档结构

    这一节课我们来学习HTML文件的结构:一个HTML文件是有自己固定结构的。

    <!DOCTYPE HTML>
    <html>
        <head>...</head>
        <body>...</body>
    </html>

    让我们来解释一下上面的代码:

    首先,<!DOCTYPE HTML>是文档声明,必须写在HTML文档的第一行,位于<html>标签之前,表明该文档是HTML5文档。

    1. <html></html> 称为根标签,所有的网页标签都在<html></html>中。
    2. <head></head> 标签用于定义文档的头部,它是所有头部元素的容器。常见的头部元素有<title><script><style><link><meta>等标签,头部标签在下一节中会有详细介绍。
    3. <body></body>标签之间的内容是网页的主要内容,如<h1><p><a><img>等网页内容标签,在<body>标签中的内容(图中淡绿色部分内容)最终会在浏览器中显示出来。

    HTML文档包含了HTML标签及文本内容,不同的标签在浏览器上会显示出不同的效果,所以我们需要记住最常见的标签的特性。

    head标签

    我们首先来介绍一下head标签的主要内容和作用,文档的头部描述了文档的各种属性和信息,包括文档的标题等。 以下标签是可以用在head标签中的:

    <head>
        <title>标题信息</title>
        <meta>
        <link>
        <style>...</style>
        <script>...</script>
    </head>

    title标签

    标签之间的文字内容是网页的标题信息,它会显示在浏览器标签页的标题栏中。可以把它看成是一个网页的标题。主要用来告诉用户和搜索引擎这个网页的主要内容是什么,搜索引擎可以通过网页标题,迅速的判断出当前网页的主题。

    我们接下来做一个小练习,创建一个带有我们自定义标题内容的网页:

    <!DOCTYPE HTML>
    <html>
        <head>
            <title>html title</title>
        </head>
        <body></body>
    </html>

    将上面的文件另存为demo.html,然后用浏览器打开,就可以看到下面的内容。

     

    上面我们介绍了title标签的用法,接下来我们继续看一下head标签中可以使用的其他标签:

    meta标签

    Meta标签介绍:

    元素可提供有关页面的原信息(mata-information),针对搜索引擎和更新频度的描述和关键词。

    标签位于文档的头部,不包含任何内容。

    提供的信息是用户不可见的。 meta标签的组成:meta标签共有两个属性,它们分别是http-equiv属性和name属性,不同的属性又有不同的参数值,这些不同的参数值就实现了不同的网页功能。

    常用的meta标签:

    1. http-equiv属性

    它用来向浏览器传达一些有用的信息,帮助浏览器正确地显示网页内容,与之对应的属性值为content,content中的内容其实就是各个参数的变量值。

    <!--2秒后跳转到对应的网址,注意引号-->
    <meta http-equiv="refresh" content="2;URL=http://www.taobao.com">
    <!--指定文档的内容类型和编码类型 -->
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <!--告诉IE浏览器以最高级模式渲染当前网页-->
    <meta http-equiv="x-ua-compatible" content="IE=edge">

    2. name属性

     主要用于描述网页,与之对应的属性值为content,content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。

    <meta name="keywords" content="meta总结,html meta,meta属性,meta跳转">
    <meta name="description" content="淘宝">

    3. 其他标签

    <!--标题-->
    <title>JD商城</title>
    <!--icon图标(网站的图标)-->
    <link rel="icon" href="favicon.ico">
    <!--定义内部样式表-->
    <style></style>
    <!--引入外部样式表文件-->
    <link rel="stylesheet" href="mystyle.css">
    <!--定义JavaScript代码或引入JavaScript文件-->
    <script src="myscript.js"></script>
  • 相关阅读:
    福利 | 简历模板大放送
    如何脱颖而出?成为优秀的人
    未来最重要的三个能力
    如何提升你的阅读能力?
    2016 Top 10 Android Library
    如何提升你的面试机会?
    推荐一些非常有用的学习网站
    谈谈学习方法
    你为什么还不够优秀?
    vue
  • 原文地址:https://www.cnblogs.com/caimengzhi/p/8603191.html
Copyright © 2020-2023  润新知