HTML学习笔记（1）

、HTML5设计哲学，它并不是规范优先的设计，它是“妥协式”的规范。

2、HTML5对元素大小写不再严格区分，开发者可以随意使用大小写字符来定义HTML元素。

3、对于一份基本的HTML5文档而言，它总有如下结构：

<!DOCTYPE html>

<html>

<head>

<!—此处还可插入其他meta、样式单等信息à

</head>

<body>

页面内容部分

</body>

</html>

4、不要在<html>和<head>之前插入任何内容！不要在</head>和<body>之间插入任何内容！不要在</body>和</html>之前插入任何内容。

5、HTML5保留的基本元素有如下几个：

:定义HTML注释，里面的内容会被当成注释处理。

<html>:它是HTML5文档的根元素。但HTML5允许完全省略这个元素。

<head>:它用于定义HTML5文档的页面头部分。但HTML5允许完全省略这个元素。

<title>:用于定义HTML5文档的页面标题。

<body>:用于定义HTML5文档的页面主体部分，该标签可以指定id、class、style等核心属性，还可以指定onload、onunload、onclick、ondblclick、onmousedown、onmouseup、onmouseover、onmousemove、onmouseout、onkeypress、onkeydown、onkeyup等事件属性，这些属性用于指定JavaScript脚本。

6、几乎所有的HTML元素都可指定id、style和class属性。其中ID属性用于为HTML元素指定一个唯一标识，该标识是通过DOM访问HTML元素的重要途径。Class 和style属性是CSS样式相关属性。

7、<span>and <div>这两个标签很相像，只是前者默认是不会自动换行。使用的属性值基本一样。

8、<span/>、<div/>和<p/>三个元素都可以作为其他内容的“容器”，在默认情况下，<span/>不会导致换行，<div/>会导致换行，<p/>会产生出段落，段落之间会有更大的间距。更要注意的是<span/>和<p/>只能包含文本、图像、超链接、文本格式化元素和表单控件等内容，<p/>可以<span/>，但<span/>不能包含<p/>;<div/>元素除了可以包含上面的这些内容外，还可以包含更多的元素。

9、<b>定义粗体，<i>定义斜体,<em>定义强调文本,<strong>定义粗体文本，在HTML5中，使用<strong.../>包起来的文本代表首重要的文本。<small>定义小号字体文本，在HMTL5中专门用于标识所谓的“小字印刷体”，通常用来标注诸如免责声明、注意事项、法律规定和版权相关的声明性文字。

10、<sup>定义上标文本，<sub>定义下标文本;<bdo>定义文本显示的方向，该标签也可以指定dir属性，该属性值只能是ltr或者rtl。

11、在HTML5中，空元素标签不允许将开始标签和结束标签分开定义。空标签有如下：area base br col command embed hr img input keygen link mata param source wbr。如果这些标签开始和结束标签分开写是错误的。

12、可以省略结束标签的元素：colgroup dt dd li optgroup option p rt rp thead tbody tfoot tr td th <p>

13、可以省略全部标签的元素： html head body tbody。

TML（HyperText Markup Language）是一种用于创建网页的标记语言。它由一系列的标签组成，这些标签用于描述网页的结构和内容。HTML标签通常由尖括号包围，例如<tag>。

HTML标签可以分为两类：块级元素和内联元素。块级元素用于组织网页的结构，例如段落、标题、列表等。内联元素用于标记文本中的特定部分，例如链接、强调文本等。

HTML标签可以包含属性，属性提供了有关标签的额外信息。例如，<a>标签用于创建链接，可以使用href属性指定链接的目标URL。

除了标签和属性，HTML还支持一些特殊字符实体，用于表示特殊字符，例如小于号（<）、大于号（>）等。

HTML可以与CSS（层叠样式表）和JavaScript一起使用，以增强网页的外观和功能。CSS用于控制网页的样式，例如颜色、字体、布局等。JavaScript用于实现交互性和动态效果，例如表单验证、动画等。

通过使用HTML，开发人员可以创建具有结构良好、易于理解和导航的网页。它是构建互联网的基础之一，被广泛应用于网站开发和内容管理系统。

HTML的语法由标签、属性和内容组成。下面是HTML的基本语法规则：

标签：HTML标签用于定义网页的结构和内容。标签通常由尖括号包围，例如<tag>。标签可以是成对出现的，其中包含一个开标签和一个闭标签，例如<tag>content</tag>。也可以是自闭合标签，即只有一个标签，没有内容，例如<tag />。
属性：HTML标签可以包含属性，属性提供了有关标签的额外信息。属性通常以键值对的形式出现，例如<tag attribute="value">。属性的值可以是字符串或布尔值。常见的属性包括class、id、src、href等。
内容：HTML标签可以包含文本内容或其他标签。文本内容直接放置在标签的开闭标签之间，例如<p>这是一个段落。</p>。标签可以嵌套在其他标签中，形成标签的层次结构。
注释：HTML注释用于在代码中添加注释，不会在网页中显示。注释以结尾，例如。

下面是一个简单的HTML示例：

<!DOCTYPE html>
<html>
<head>
  <title>我的网页</title>
</head>
<body>
  <h1>欢迎来到我的网页</h1>
  <p>这是一个段落。</p>
  <a href="https://www.example.com">点击这里</a>访问示例网站。
</body>
</html>

在这个示例中，<!DOCTYPE html>声明了文档类型为HTML5。<html>标签是HTML文档的根元素。<head>标签用于定义文档的头部信息，例如标题和样式表。<title>标签定义了网页的标题，将显示在浏览器的标题栏中。<body>标签用于定义文档的主体内容。<h1>标签定义了一个一级标题，<p>标签定义了一个段落，<a>标签定义了一个链接。

为前端开发的基石，JavaScript编程语言不仅易学易用，还具有强大的跨平台特性。本文将为你详细介绍JavaScript的引入方式、注释以及输入输出，帮助你轻松掌握JavaScript编程的精髓，成为一名炙手可热的前端开发高手！

引入方式：轻松踏入JavaScript的大门

作为JavaScript编程语言的初学者，了解如何引入JavaScript代码是你进入这个神奇世界的第一步。有三种常见的引入方式：

内联方式：将JavaScript代码直接写入HTML文件中的<script></script>标签中。这种方式简单快速，适合小型项目或简单功能的实现。

<!DOCTYPE html>
<html>
  <head>
    <title>内联方式</title>
  </head>
  <body>
    <h1>你好，谧夜星球！</h1>

    <script>
      // 在这里编写你的JavaScript代码
    </script>
  </body>
</html>

内部文件方式：将JavaScript代码保存为外部文件，通过<script>标签的src属性引入。这种方式适用于多个HTML文件共享同一段JavaScript代码，提高了代码的复用性和维护性。

<!DOCTYPE html>
<html>
  <head>
    <title>内部文件引入方式</title>
    <script src="script.js"></script>
  </head>
  <body>
    <h1>你好，谧夜星球！</h1>
  </body>
</html>

外部文件方式：将JavaScript代码保存为独立的外部文件，通过HTML文件的<script>标签的src属性引入。这种方式适合于大型项目，利于代码的模块化管理和团队协作。

<!DOCTYPE html>
<html>
  <head>
    <title>外部文件引入方式</title>
    <script src="script.js"></script>
  </head>
  <body>
    <h1>你好，谧夜星球！</h1>
  </body>
</html>

注释：注解代码，提升开发效率

在编程过程中，合理使用注释可以方便自己和他人理解代码的逻辑和用途，是良好编程风格的重要一环。在JavaScript中，有两种注释方式：

单行注释：使用//符号进行注释，注释内容从//后开始，直到该行结束。

// 这是一个单行注释

多行注释：使用/* */符号进行注释，注释内容位于/*和*/之间。

/* 
  这是一个多行注释，
  可以跨越多行
*/

通过合理注释，你不仅能提高自己的代码理解和维护效率，还能方便团队协作，使代码更加易于管理。

输入输出：与用户进行互动

在前端开发中，与用户进行互动是至关重要的。JavaScript提供了多种输入输出的方式，使得与用户的交互变得简单而灵活。

弹窗输出：使用alert()函数可以在页面上弹出一个警告框，向用户显示一条消息。

alert("你好，谧夜星球！");

弹窗输入：使用prompt()函数可以在页面上弹出一个对话框，允许用户输入文本。

var name=prompt("请输入用户名：");
alert("你好, " + name + "!");

控制台输出：使用console.log()函数可以将信息输出到浏览器的控制台，方便开发过程中的调试和日志记录。

console.log("你好，谧夜星球！");

页面输出：通过操作HTML元素，可以将信息直接显示在页面上。

document.getElementById("output").innerHTML="你好，谧夜星球！";

通过合理运用输入输出的方式，你可以实现与用户的互动，接收用户的输入并输出相应的结果，增加页面的交互性和用户体验。

总结：通过本文的介绍，我们已经了解了JavaScript编程语言的引入方式、注释以及输入输出。作为前端开发的基石，JavaScript在网页开发中扮演着重要的角色。希望通过学习JavaScript，能够轻松掌握前端开发的精髓，成为一名炙手可热的前端开发高手！加油！

在线咨询

上一篇：JavaAPI开发（2）JavaMail-如何用Ja
下一篇：10个前端开发人员必须知道的CSS框架，新手一定要掌

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

HTML学习笔记（1）

引入方式：轻松踏入JavaScript的大门

注释：注解代码，提升开发效率

输入输出：与用户进行互动

您的项目需求