HTML 自我修养2

177 阅读5分钟

1.注释

1, 注释的含义:

• 在很多代码技术中都可以添加注释内容, 我们也可以向 HTML 源代码添加注释。 • HTML注释语法:

<!-- 其实我一直会存在、陪伴在你身边,只是浏览器解析代码时候,会忽视我! -->

vscode快捷键: ctrl+/

2, 注释的特点:

​ 注释只在源代码中可见, 在浏览器窗口是不显示的。但是请注意,打开浏览器的开发人员控制台,是可以看得到注释的!!所以我前面在注释中写的内容为:“其实我一直会存在、陪伴在你身边,只是浏览器解析代码时候,会忽视我!”

​ 注释分为单行注释和多行注释

3, 注释用途 ①在源代码中添加描述性的提示信息, 便于我们阅读代码。 ②对于 HTML 纠错也大有帮助, 可以通过注释某一行 HTML 代码, 以便检索错误的位置。 ③暂时注释掉一部分不用的代码, 便于后期恢复代码。

2.各种语言的注释(扩展)

HTML

HTML 的单行注释与多行注释

<!--这是单行注释-->
<!--
    这是多行注释
    这是多行注释
    这是多行注释
-->

CSS 注释

/*这是单行注释*/

/*
    这是多行注释
    这是多行注释
    这是多行注释
*/

JS 注释

//这是单行注释
/*
    这是多行注释
    这是多行注释
    这是多行注释
*/

C 89 注释

/*这是单行注释*/
/*
这是多行注释
*/

C 99 +/C++

// 这是单行注释
/*
这是多行注释
*/

Java

// 这是单行注释

/*
这是多行注释
*/

/**
这是文档注释
*/

JSP 注释

<%-- 这是单行注释 --%>
<%--
    这是多行注释
--%>

C#

// 这是单行注释


/// <summary>
/// 这是单行注释
/// </summary>

/*
这是多行注释
*/

说明:C#中//注释和///注释的区别

///:会被编译,会减慢编译的速度(但不会影响执行速度) //:不会被编译,

使用///: 会在其它的人调用你的代码时提供智能感知,它也是一种注释,但是这种注释主要有两种作用:

  1. 这些注释能够生成一个XML文件。这样呢,看起来会对程序的内容一目了然。
  2. 以这种方式对你的类,属性,方法等等加上注释之后,当你在其他地方使用以这种方式加上的类,属性,方法等等地时候,黄色的提示框里面会把你写的注释显示出来,是你更加明白你要使用的功能的作用。

具体分类为:

一级注释(Primary Tags):可以单独存在 二级注释(Secondary Tags):必须包含在一级注释内部。

一级注释列举如下:

<remarks> 对类型进行描述,功能类似<summary>,据说建议使用<remarks>;
<summary> 对共有类型的类、方法、属性或字段进行注释;
<value>主要用于属性的注释,表示属性的制的含义,可以配合<summary>使用;
<param>用于对方法的参数进行说明,格式:<param name="param_name">value </param><returns>用于定义方法的返回值,对于一个方法,输入///后,会自动添加<summary><param>列表和<returns><exception>定义可能抛出的异常,格式:<exception cref="IDNotFoundException"><example>用于给出如何使用某个方法、属性或者字段的使用方法;
<permission>涉及方法的访问许可;
<seealso>用于参考某个其它的东东:),也可以通过cref设置属性;
<include>用于指示外部的XML注释;

一级注释举例如下:

class MyClass
{
    /// <summary>求两数的和</summary>
    /// <param name="a"> 入口参数a是一个int类型</param>
    /// <param name="b"> 入口参数b是一个int类型</param>
	/// <returns>返回两数的和</returns>
	public int Add(int a,int b){
        return a+b;
    }
    
 }

二级注释列举如下:

<c> or <code>主要用于加入代码段;
<para>的作用类似HTML中的<p>标记符,就是分段;
<pararef>用于引用某个参数;
<see>的作用类似<seealso>,可以指示其它的方法;
<list>用于生成一个列表;

二级注释举例如下:

/// <example> 以下示例说明如何调用Add方法:
/// <code>
/// class MyClass
/// {
/// 	public static int Main()
/// 	{
///			return Add(1+2);
///		}
/// }
/// </code>
/// </example>

3.标题标签

书写方式

• 标题(Heading) , 是通过< h1 > ~ < h6 > 六个标签分别来对六个级别的标题进行定义的。 • < h1 >定义最大的标题, < h6 >定义最小的标题。 • < h1 >-< h6 > 标签都是双标签, 且是容器级标签。

<h1>前端虐我千百遍,我待前端如初恋</h1>
<h2>前端虐我千百遍,我待前端如初恋</h1>
<h3>前端虐我千百遍,我待前端如初恋</h1>
<h4>前端虐我千百遍,我待前端如初恋</h1>
<h5>前端虐我千百遍,我待前端如初恋</h1>
<h6>前端虐我千百遍,我待前端如初恋</h1>

效果如下:

语义化

标题标签的作用是给标签内部的元素内容添加对应级别标题的语义, 不负责文字的粗体、 字 号等样式。样式是由css设定的。

再一次强调 , HTML所有标签的样式差别并不是区分它们的理由,而要根据语义化的不同来区分!!

​ 这蕴含了什么意义呢?“眼之所见,多是虚妄”。我们不要一味地靠直觉,从表面出发看待各种问题。而应该多从客观上去分析事物的内在机理。

标签级别

标题标签之间是不能互相嵌套的, 下一级标题与上级标题之间通过同级关系书写, 下一级标 题解释说明的是前面距离最近的上一级标题。

正确写法:

<h1>凡心所向,皆是虚妄。</h1>
<h2>眼之所见,亦是虚妄。</h2>

错误写法:

<h1>
    凡心所向,皆是虚妄。
	<h2>眼之所见,亦是虚妄。</h2>
</h1>

权重

  • 标题标签对于呈现文档结构非常重要, 使用时要根据标签的重要程度进行选择, 其中< h1 >标签最重要, < h2 >标签次重要, 以此类推。
  • < h1 >在整个HTML中的权重非常高, 内部应该放置HTML中最重要的内容, 比如logo。
  • < h1 >由于非常重要, 内部的文字对于提高搜索引擎排名也非常重要, 为了防止作弊, 如果一个页面出现多个< h1 >, 反而降低权重。 约定俗成的, 一个页面中只会出现一个< h1 >。

未完待续 ...