HTML学习笔记_html的笔记-CSDN博客

本文链接：https://blog.csdn.net/weixin_62936749/article/details/131407285

HTML 超文本标记语言（HyperText Markup Language）

文章目录

HTML 超文本标记语言（HyperText Markup Language）
前言
一、HTML是什么？
二、HTML基础结构
三、HTML链接和导航
四、HTML图像
五、HTML列表
六、HTML表格
七、HTML表单
八、HTML注释
九、HTML布局
总结

前言

欢迎来到这篇关于HTML学习的笔记，这一篇笔记记录了作者本学期对于HTML的学习过程以及一些重要的知识点。

一、HTML是什么？

HTML 是用来描述网页的一种语言。

HTML 指的是超文本标记语言: HyperText Markup Language
HTML 不是一种编程语言，而是一种标记语言
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页
HTML 文档包含了HTML 标签及文本内容
HTML文档也叫做 web 页面

二、HTML基础结构

HTML基础结构是构建HTML文档的框架，它由以下几个部分组成：

<!DOCTYPE html>声明：
    <!DOCTYPE html>是HTML文档的第一行，用于告诉浏览器文档的类型是HTML5。
    这个声明是必需的，它确保浏览器正确地解析和显示文档。

<html>元素：
    <html>元素是HTML文档的根元素，它包含了整个网页的内容。
    所有的HTML标记都应该位于<html>元素的开始标签<html>和结束标签</html>之间。

<head>元素：
    <head>元素位于<html>元素内部，用于包含文档的元数据和其他信息。
    元数据包括文档的标题、字符编码、样式表和脚本等。
    <head>元素不会在浏览器中显示出来，它只包含了对文档的描述和配置。

<body>元素：
    <body>元素位于<html>元素内部，用于包含网页的可见内容。
    所有的文本、图像、链接和其他元素都应该位于<body>元素的开始标签<body>和结束标签</body>之间。
    <body>元素是用户实际看到和与之交互的部分，它是网页的主要内容区域。

下面是一个完整的HTML基础结构示例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>My First HTML Page</title>
    <link rel="stylesheet" href="styles.css">
    <script src="script.js"></script>
</head>
<body>
    <h1>Welcome to My First HTML Page</h1>
    <p>This is a paragraph of text.</p>
    <img src="image.jpg" alt="My Image">
    <a href="https://www.example.com">Visit Example.com</a>
</body>
</html>

在这个示例中，声明指定文档类型为HTML5。元素是根元素，包含了整个网页的内容。元素包含了文档的元数据，如标题、字符编码、样式表和脚本等。元素包含了网页的可见内容，如标题、段落、图像和链接等。

三、HTML链接和导航

创建内部链接：
    内部链接用于在同一网页内导航到不同的部分。
    首先，为目标部分添加一个id属性，以便在链接中引用。
    使用<a>标签创建链接，将href属性设置为#加上目标部分的id值。
    在链接文本中添加描述性文本或图标。

示例：

 <h2 id="section1">Section 1</h2>
    <a href="#section1">Go to Section 1</a>

创建外部链接：
    外部链接用于导航到其他网页或资源。
    使用<a>标签创建链接，将href属性设置为目标网页的URL。
    在链接文本中添加描述性文本或图标。

示例：

<a href="https://www.example.com">Go to Example Website</a>

创建导航菜单：
    导航菜单通常是一组链接，用于导航到网站的不同页面或部分。
    使用无序列表<ul>和列表项<li>来创建导航菜单。
    在每个列表项中使用<a>标签创建链接，设置href属性为目标页面的URL或内部链接的id。
    在列表项中添加描述性文本或图标。

示例：

<ul>
  <li><a href="index.html">Home</a></li>
  <li><a href="about.html">About</a></li>
  <li><a href="#section1">Section 1</a></li>
</ul>

通过以上步骤，您可以创建内部链接和外部链接，并将它们组合

四、HTML图像

在web开发中，插入图像通常使用HTML的标签。下面是一个简单的示例，展示如何插入图像、设置图像大小和对齐方式：

<!DOCTYPE html>
<html>
<head>
  <title>插入图像示例</title>
</head>
<body>
  <h1>我的网页</h1>
  <img src="image.jpg" alt="图像描述" width="300" height="200" style="display: block; margin: 0 auto;">
</body>
</html>

上面的示例中使用了标签来插入图像。其中，src属性指定图像的URL，alt属性用于提供图像的替代文本，以便于屏幕阅读器等辅助技术使用。width和height属性可以设置图像的宽度和高度（以像素为单位）。

为了设置图像的对齐方式，我们使用了内联样式（inline style）的方式。在上面的示例中，style属性中的display: block; margin: 0 auto;将图像设置为块级元素，并将其水平居中对齐。

可以根据需要修改图像的URL、替代文本、尺寸和对齐方式，以适应你的网页布局和设计。

五、HTML列表

在HTML中，可以使用<ol>标签创建有序列表（ordered list），使用<ul>标签创建无序列表（unordered list）。下面是一个示例，展示如何创建有序列表、无序列表以及嵌套列表：

<!DOCTYPE html>
<html>
<head>
  <title>列表示例</title>
</head>
<body>
  <h1>我的列表</h1>

  <h2>有序列表</h2>
  <ol>
    <li>第一项</li>
    <li>第二项</li>
    <li>第三项</li>
  </ol>

  <h2>无序列表</h2>
  <ul>
    <li>项目一</li>
    <li>项目二</li>
    <li>项目三</li>
  </ul>

  <h2>嵌套列表</h2>
  <ol>
    <li>主要项目一</li>
    <li>主要项目二
      <ul>
        <li>嵌套项目一</li>
        <li>嵌套项目二</li>
      </ul>
    </li>
    <li>主要项目三</li>
  </ol>
</body>
</html>

在上面的示例中，我们使用<ol>标签创建了一个有序列表，其中的每个列表项使用<li>标签表示。类似地，我们使用<ul>标签创建了一个无序列表。

要创建嵌套列表，只需在父列表项(<li>)中添加另一个列表(<ol>或<ul>)即可。在示例中，第二个有序列表项中嵌套了一个无序列表。

可以根据需要修改列表项的内容和层次结构，以适应网页布局和设计。

六、HTML表格

在HTML中，可以使用

标签创建表格。下面是一个示例，展示如何创建一个简单的表格，并包括表头、表格行和单元格合并：

<!DOCTYPE html>
<html>
<head>
  <title>表格示例</title>
</head>
<body>
  <h1>我的表格</h1>

  <table>
    <thead>
      <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>城市</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>xxx</td>
        <td>25</td>
        <td>北京</td>
      </tr>
      <tr>
        <td>yyy</td>
        <td>30</td>
        <td>上海</td>
      </tr>
      <tr>
        <td colspan="2">合并单元格</td>
        <td>广州</td>
      </tr>
    </tbody>
  </table>

</body>
</html>

上面的示例使用<table>标签创建了一个表格。使用<thead>标签来定义表头部分，其中的每个表头单元格使用<th>标签表示。

使用<tbody>标签来定义表格的主体部分，其中的每个表格行使用标签表示。

在每个表格行中，使用<td>标签来定义单元格。每个<td>标签表示一个单元格，并包含单元格的内容。

要合并单元格，可以使用colspan属性来指定要合并的列数。

七、HTML表单

在HTML中，你可以使用<form>标签创建表单。下面是一个示例，展示如何创建一个简单的表单，包括输入字段、复选框、单选按钮和提交按钮：

<!DOCTYPE html>
<html>
<head>
  <title>表单示例</title>
</head>
<body>
  <h1>我的表单</h1>

  <form>
    <label for="name">姓名：</label>
    <input type="text" id="name" name="name" required><br>

    <label for="email">邮箱：</label>
    <input type="email" id="email" name="email" required><br>

    <label for="password">密码：</label>
    <input type="password" id="password" name="password" required><br>

    <label for="gender">性别：</label>
    <input type="radio" id="male" name="gender" value="male" checked>
    <label for="male">男</label>
    <input type="radio" id="female" name="gender" value="female">
    <label for="female">女</label><br>

    <label for="newsletter">订阅电子报：</label>
    <input type="checkbox" id="newsletter" name="newsletter" checked><br>

    <input type="submit" value="提交">
  </form>

</body>
</html>

上面的示例使用<form>标签创建了一个表单。使用<label>标签来定义表单字段的标签。

使用<input>标签来创建输入字段。在示例中，我们使用type="text"创建了一个文本输入字段，type="email"创建了一个邮箱输入字段，type="password"创建了一个密码输入字段。

使用<input>标签和type="radio"来创建单选按钮。在示例中，我们创建了两个单选按钮，分别表示男性和女性。

使用<input>标签和type="checkbox"来创建复选框。在示例中，我们创建了一个复选框用于订阅电子报。

最后，使用<input>标签和type="submit"来创建提交按钮。

八、HTML注释

在HTML、CSS和JavaScript中，可以使用注释来添加对代码的说明和备注。注释是一种不会被浏览器解析和显示的文本，它们只是用于开发者之间的交流和代码文档化。下面是一些示例，展示如何在不同的语言中使用注释：

在HTML中，可以使用来添加注释。例如：

<!-- 这是一个HTML注释 -->
<p>这是一个段落。</p>

在CSS中，可以使用/* 注释内容 */来添加注释。例如：

/* 这是一个CSS注释 */
body {
  background-color: lightblue;
}

在JavaScript中，你可以使用//来添加单行注释，或使用/* 注释内容 */来添加多行注释。例如：

// 这是一个单行注释
var x = 5;

/*
这是一个多行注释
可以跨越多行
*/
var y = 10;

九、HTML布局

div 元素是用于分组 HTML 元素的块级元素。

下面的例子使用五个 div 元素来创建多列布局：
实例

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>布局实例</title> 
</head>
<body>
 
<div id="container" style="width:500px">
 
<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">主要的网页标题</h1></div>
 
<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
<b>菜单</b><br>
HTML<br>
CSS<br>
JavaScript</div>
 
<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
内容在这里</div>
 
<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
</div>
 
</div>
 
</body>
</html>

总结

在对HTML的学习中，我了解到了网页设计的大概流程，其中包括了标题、段落、图像、链接等等，这些都是组成网页的各个部分，总之，HTML是构建网页的基础，通过学习和理解HTML的标签、属性和结构，可以创建出结构良好、语义化的网页，我掌握了创建网页结构和内容的基本技能。我也了解了HTML标签、属性和文档结构的使用方法，我相信这些知识将为我进一步深入网页开发打下坚实的基础。